Spaces:

husseinelsaadi
/

Codingo

Paused

App Files Files Community

husseinelsaadi commited on 14 days ago

Commit

695b180

1 Parent(s): ccf6ce7

updated

Browse files

Files changed (1) hide show

backend/templates/base.html +55 -117

backend/templates/base.html CHANGED Viewed

@@ -601,6 +601,60 @@
         }
         /* Additional content styling omitted for brevity */
     </style>
 </head>
 <body>
@@ -654,123 +708,7 @@
         {% block content %}{% endblock %}
     </div>
-#CHATBOT START
-<!-- Chatbot Toggle Button -->
-    <!--
-      The floating chat button toggles the visibility of the chat window.
-      We use a flex container here to ensure the emoji and text remain
-      centred on all screen sizes.  Additional media queries adjust the
-      button's position and padding for very small viewports.
-    -->
-    <div id="chatbot-toggle" onclick="toggleChatbot()">💬</div>
-<!-- Chatbox Popup -->
-<div id="chatbot-box">
-  <div id="chat-header">LUNA AI</div>
-  <div id="chat-messages"></div>
-  <input id="chat-input" type="text" placeholder="Ask me anything..." onkeydown="sendChat(event)">
-</div>
-<style>
-  #chatbot-toggle {
-    /* Floating circular button on desktop.  It is vertically centred along the right edge */
-    position: fixed;
-    top: 50%;
-    right: 1rem;
-    transform: translateY(-50%);
-    width: 3rem;
-    height: 3rem;
-    background-color: #4caf50;
-    color: #ffffff;
-    border-radius: 50%;
-    cursor: pointer;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-    transition: background-color 0.2s ease;
-  }
-  #chatbot-toggle:hover {
-    background-color: #43a047;
-  }
-  /* Chat icon inside the navbar (hidden by default and shown on small screens via media query) */
-  #chatbot-nav {
-    display: none;
-  }
-  #chatbot-box {
-    position: fixed;
-    /* Align the chat window vertically with the toggle on desktop */
-    top: 50%;
-    right: calc(1rem + 3rem + 1rem);
-    transform: translateY(-50%);
-    /* Default dimensions for larger screens */
-    width: 20rem;
-    height: 25rem;
-    background: white;
-    border: 2px solid #ccc;
-    border-radius: 10px;
-    display: none;
-    flex-direction: column;
-    z-index: 1000;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-  }
-  #chat-header {
-    background-color: #4caf50;
-    color: white;
-    padding: 10px;
-    text-align: center;
-    font-weight: bold;
-  }
-  #chat-messages {
-    flex: 1;
-    padding: 10px;
-    overflow-y: auto;
-    max-height: 300px;
-  }
-  /* Responsive adjustments for small screens */
-  @media (max-width: 768px) {
-    /* Hide the floating button and reveal the navbar icon on mobile */
-    #chatbot-toggle {
-      display: none !important;
-    }
-    #chatbot-nav {
-      display: block;
-      font-size: 1.5rem;
-      color: var(--accent);
-      margin-left: 1rem;
-      cursor: pointer;
-    }
-    #chatbot-box {
-      width: 90vw;
-      height: 60vh;
-      bottom: 1rem;
-      right: 5vw;
-      top: auto;
-      transform: none;
-    }
-    #chat-messages {
-      max-height: calc(60vh - 5.5rem);
-    }
-  }
-  #chat-input {
-    border: none;
-    border-top: 1px solid #ccc;
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-  }
-</style>
-#CHATBOT END
 </main>
 <footer>

         }
         /* Additional content styling omitted for brevity */
+        /*
+         * Flash message styling
+         *
+         * The flash message container appears just below the navigation bar and
+         * above the page content.  These rules provide a consistent look and
+         * feel across different screen sizes without altering the underlying
+         * layout.  Messages stack vertically with gentle spacing and use
+         * coloured left borders to indicate their severity (success, warning,
+         * danger or info).  We leverage the existing colour palette defined
+         * in CSS variables (e.g. --success, --warning, --danger, --accent)
+         * while keeping backgrounds light and text readable.
+         */
+        .flash-messages {
+            margin: 1rem 0;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+        .flash-messages .alert {
+            padding: 0.75rem 1rem;
+            border-radius: 5px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+        }
+        .alert-success {
+            background-color: rgba(46, 204, 113, 0.15);
+            color: var(--success);
+            border-left: 4px solid var(--success);
+        }
+        .alert-warning {
+            background-color: rgba(243, 156, 18, 0.15);
+            color: var(--warning);
+            border-left: 4px solid var(--warning);
+        }
+        .alert-danger {
+            background-color: rgba(231, 76, 60, 0.15);
+            color: var(--danger);
+            border-left: 4px solid var(--danger);
+        }
+        .alert-info {
+            background-color: rgba(76, 201, 240, 0.15);
+            color: var(--accent);
+            border-left: 4px solid var(--accent);
+        }
     </style>
 </head>
 <body>
         {% block content %}{% endblock %}
     </div>
+<!-- Chatbot UI removed on the home page. -->
 </main>
 <footer>