Frontend in a decent state
This commit is contained in:
Guillem Borrell
parent
21e30b2e16
commit
94a50fc523
|
|
@ -1,26 +1,69 @@
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bootstrap demo</title>
|
<title>Chat Application</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.12"
|
<script src="https://unpkg.com/htmx.org@1.9.12"
|
||||||
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
|
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Hello, world!</h1>
|
|
||||||
<p>
|
<div class="d-flex">
|
||||||
<div hx-get="/health" hx-swap="outerHTML">Swap!</div>
|
<!-- Sidebar -->
|
||||||
|
<div id="sidebar" class="bg-light border-right">
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
<p class="font-weight-bold">
|
||||||
|
<a href="#" class="list-group-item list-group-item-action">
|
||||||
|
Hello, computer!
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 2</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 3</a>
|
||||||
|
<a href="#" class="list-group-item list-group-item-action bg-light">Placeholder 4</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page Content -->
|
||||||
|
<div id="page-content-wrapper">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
|
||||||
|
<button class="btn btn-primary" id="menu-toggle">◀</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container chat-wrapper mt-4">
|
||||||
|
<div class="chat-container">
|
||||||
|
<div class="chat-messages">
|
||||||
|
<!-- Messages will be appended here -->
|
||||||
|
<div class="message bg-light p-2 mb-2 rounded">Message 1</div>
|
||||||
|
<div class="message bg-light p-2 mb-2 rounded">Message 2</div>
|
||||||
|
<div class="message bg-light p-2 mb-2 rounded">Message 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-input">
|
||||||
|
<div class="input-group">
|
||||||
|
<textarea id="chatTextarea" class="form-control" placeholder="Type a message..." rows="1"
|
||||||
|
style="resize: none;"></textarea>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button id="sendButton" class="btn btn-primary" type="button">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
50
src/hellocomputer/static/script.js
Normal file
50
src/hellocomputer/static/script.js
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
function toggleMenuArrow(a) {
|
||||||
|
if (a.innerHTML == '▶') {
|
||||||
|
a.innerHTML = '◀';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
a.innerHTML = '▶'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#menu-toggle').click(function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('#sidebar').toggleClass('toggled');
|
||||||
|
toggleMenuArrow(document.getElementById('menu-toggle'));
|
||||||
|
});
|
||||||
|
|
||||||
|
const textarea = document.getElementById('chatTextarea');
|
||||||
|
const sendButton = document.getElementById('sendButton');
|
||||||
|
const chatMessages = document.querySelector('.chat-messages');
|
||||||
|
|
||||||
|
textarea.addEventListener('input', function () {
|
||||||
|
this.style.height = 'auto';
|
||||||
|
this.style.height = (this.scrollHeight <= 150 ? this.scrollHeight : 150) + 'px';
|
||||||
|
if (this.scrollHeight > 150) {
|
||||||
|
this.style.overflowY = 'scroll';
|
||||||
|
} else {
|
||||||
|
this.style.overflowY = 'hidden';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function addUserMessage() {
|
||||||
|
const messageContent = textarea.value.trim();
|
||||||
|
if (messageContent) {
|
||||||
|
const newMessage = document.createElement('div');
|
||||||
|
newMessage.classList.add('message', 'bg-light', 'p-2', 'mb-2', 'rounded');
|
||||||
|
newMessage.textContent = messageContent;
|
||||||
|
chatMessages.prepend(newMessage); // Add new message at the top
|
||||||
|
textarea.value = ''; // Clear the textarea
|
||||||
|
textarea.style.height = 'auto'; // Reset the textarea height
|
||||||
|
textarea.style.overflowY = 'hidden';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
sendButton.addEventListener('click', addUserMessage);
|
||||||
|
|
||||||
|
textarea.addEventListener('keypress', function (e) {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
addUserMessage();
|
||||||
|
}
|
||||||
|
});
|
||||||
67
src/hellocomputer/static/style.css
Normal file
67
src/hellocomputer/static/style.css
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-flex {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.toggled {
|
||||||
|
margin-left: -250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: calc(100vh - 56px);
|
||||||
|
/* Adjust height considering the navbar */
|
||||||
|
padding-bottom: 70px;
|
||||||
|
/* Make space for the input box */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 15px;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
/* Adding bottom padding to avoid overlap */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
/* Adjust width considering the sidebar */
|
||||||
|
max-width: 600px;
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue