mirror of
https://github.com/Lynnesbian/FediBooks/
synced 2024-11-25 08:38:59 +00:00
started work on chat UI
This commit is contained in:
parent
07e559f7d9
commit
a80f77d2bc
3 changed files with 77 additions and 1 deletions
|
@ -212,3 +212,37 @@ form .row {
|
||||||
.success {
|
.success {
|
||||||
background-color: #6e6;
|
background-color: #6e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chatbox {
|
||||||
|
height: 90vh;
|
||||||
|
background-color: #3d4353;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
#chatbox-input, #chatbox-input input{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
min-height: 30px;
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.message-container.user {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.message-container .bot-icon {
|
||||||
|
background: center / contain url("https://lynnesbian.space/img/bune.png") no-repeat;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.message.bot {
|
||||||
|
background-color: mediumpurple;
|
||||||
|
color: white;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.message.user {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
42
app/templates/bot/chat.html
Normal file
42
app/templates/bot/chat.html
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>FediBooks</title>
|
||||||
|
{% include 'imports.html' %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container centred">
|
||||||
|
<h1 class="thin centred">Chat</h1>
|
||||||
|
<p class="centred">Talking to {{ bot }}</p>
|
||||||
|
<p class="centred" style="margin: 20px 0;">
|
||||||
|
<a class="button btn-primary" href="/bot/accounts/add" role="button"><i class="fas fa-home"></i> Home</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
<div class="container centred">
|
||||||
|
<h2>This feature requires JavaScript.</h2>
|
||||||
|
</div>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div id="chatbox">
|
||||||
|
<div class="message-container user">
|
||||||
|
<div class="message user">Henlo</div>
|
||||||
|
</div>
|
||||||
|
<div class="message-container bot">
|
||||||
|
<div class="bot-icon"></div>
|
||||||
|
<div class="message bot">Henlo human uwu<br>How are you</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="chatbox-input">
|
||||||
|
<input name="message" placeholder="Press enter to send">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include 'footer.html' %}
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -106,7 +106,7 @@ def bot_toggle(id):
|
||||||
|
|
||||||
@app.route("/bot/chat/<id>")
|
@app.route("/bot/chat/<id>")
|
||||||
def bot_chat(id):
|
def bot_chat(id):
|
||||||
return render_template("coming_soon.html")
|
return render_template("/bot/chat.html", bot = id)
|
||||||
|
|
||||||
@app.route("/bot/blacklist/<id>")
|
@app.route("/bot/blacklist/<id>")
|
||||||
def bot_blacklist(id):
|
def bot_blacklist(id):
|
||||||
|
|
Loading…
Reference in a new issue