Scrollable code

views/layouts/main.html

@@ -9,50 +9,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
     <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
 
-    <style>
-        body,
-        html {
-            height: 100%;
-            margin: 0;
-        }
-
-        .chat-input-container {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: fixed;
-            bottom: 10px;
-            left: 0;
-            right: 0;
-            padding: 10px;
-            max-width: 800px;
-            /* Adjust this value to your desired maximum width */
-            margin: 0 auto;
-            /* Center the container horizontally */
-        }
-
-        .textarea-wrapper {
-            position: relative;
-            width: 100%;
-        }
-
-        .textarea {
-            width: 100%;
-            padding-right: 140px;
-            /* Adjust this value based on the button and dropdown width */
-            box-sizing: border-box;
-        }
-
-        .button-group {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-    </style>
+    <link rel="stylesheet" href="/animations.css">
+    <link rel="stylesheet" href="/style.css">
 
     <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
 </head>
@@ -64,88 +22,6 @@
 
     {{embed}}
 
-    <style>
-        .my-indicator {
-            display: none;
-        }
-
-        .htmx-request .my-indicator {
-            display: inline;
-        }
-
-        .htmx-request.my-indicator {
-            display: inline;
-        }
-    </style>
-
-    <!-- Style stuff -->
-
-    <style>
-        svg text {
-            font-family: 'Russo One', sans-serif;
-            text-transform: uppercase;
-            fill: #000;
-            stroke: #000;
-            font-size: 240px;
-        }
-
-        .message-content {
-            background-color: #303030;
-            border-radius: 5px;
-            padding: 10px;
-        }
-
-        .content {
-            font-size: 14px;
-            line-height: 1.5;
-            color: #ffffff;
-        }
-
-        .content pre {
-            font-family: monospace;
-            background-color: #363636 !important;
-            border-radius: 3px;
-        }
-
-        #chat-messages {
-            max-width: 800px;
-            margin: auto;
-            width: 95%;
-        }
-
-        #chat-input-form {
-            max-width: 900px;
-            margin: auto;
-            width: 98%;
-        }
-
-        :root {
-            --bulma-body-background-color: #202020;
-            --bulma-primary: #126d0f;
-        }
-    </style>
-
-    <!-- Animations stuff -->
-    <style>
-        .message-bot.htmx-added {
-            opacity: 0;
-        }
-
-        .message-bot {
-            opacity: 1;
-            transition: opacity 1s ease-out;
-        }
-
-        .message-user.htmx-added {
-            opacity: 0;
-        }
-
-        .message-user {
-            opacity: 1;
-            transition: opacity 1s ease-out;
-        }
-    </style>
-
 </body>
 
 </html>