From 94a50fc523c92281fdbb0dfa1a1f226ef1b21dd1 Mon Sep 17 00:00:00 2001
From: Guillem Borrell
Date: Sat, 18 May 2024 09:14:00 +0200
Subject: [PATCH] Frontend in a decent state
---
src/hellocomputer/static/index.html | 61 ++++++++++++++++++++++----
src/hellocomputer/static/script.js | 50 +++++++++++++++++++++
src/hellocomputer/static/style.css | 67 +++++++++++++++++++++++++++++
3 files changed, 169 insertions(+), 9 deletions(-)
create mode 100644 src/hellocomputer/static/script.js
create mode 100644 src/hellocomputer/static/style.css
diff --git a/src/hellocomputer/static/index.html b/src/hellocomputer/static/index.html
index 012e1dd..76b1203 100644
--- a/src/hellocomputer/static/index.html
+++ b/src/hellocomputer/static/index.html
@@ -1,26 +1,69 @@
-
+
-
-
- Bootstrap demo
+
+
+ Chat Application
-
+
- Hello, world!
-
-
Swap!
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Message 1
+
Message 2
+
Message 3
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/hellocomputer/static/script.js b/src/hellocomputer/static/script.js
new file mode 100644
index 0000000..42c0a74
--- /dev/null
+++ b/src/hellocomputer/static/script.js
@@ -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();
+ }
+});
\ No newline at end of file
diff --git a/src/hellocomputer/static/style.css b/src/hellocomputer/static/style.css
new file mode 100644
index 0000000..aa33491
--- /dev/null
+++ b/src/hellocomputer/static/style.css
@@ -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;
+}
\ No newline at end of file