Update static/style.css

static/style.css

@@ -4,6 +4,7 @@
     box-sizing: border-box;
 }
 
+/* General Styles */
 body {
     font-family: 'Poppins', sans-serif;
     background-color: #f8fafc;
@@ -14,10 +15,7 @@ body {
     height: 100vh;
 }
 
-/* Import Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto+Mono&display=swap');
-
-/* ====== HEADER (Top Navbar) ====== */
+/* Header Navbar */
 header {
     width: 100%;
     background-color: #1E293B;
@@ -26,11 +24,10 @@ header {
     align-items: center;
     justify-content: center;
     padding: 15px 20px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     position: relative;
 }
 
-header button {
+header .sidebar-toggle {
     position: absolute;
     left: 20px;
     background-color: #334155;
@@ -43,11 +40,10 @@ header button {
     transition: background 0.3s;
 }
 
-header button:hover {
+header .sidebar-toggle:hover {
     background-color: #475569;
 }
 
-/* Centers the navbar text and logo */
 .header-content {
     display: flex;
     align-items: center;
@@ -58,28 +54,27 @@ header img {
     height: 40px;
 }
 
-/* ====== SIDEBAR NAVIGATION ====== */
+/* Sidebar Navigation */
 nav {
     position: fixed;
     top: 0;
-    left: 0;
+    left: -250px;
     height: 100vh;
     width: 250px;
     background-color: #1E293B;
     color: white;
-    display: none;  /* Instead of translateX(-100%) */
+    display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
-    transition: transform 0.3s ease-in-out;
+    transition: left 0.3s ease-in-out;
 }
 
 nav.show {
-    display: flex;  /* Ensure it appears when triggered */
+    left: 0;
 }
 
-/* Sidebar Header (Logo + Title) */
-.nav-header {
+nav .nav-header {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -95,7 +90,6 @@ nav h2 {
     font-weight: bold;
 }
 
-/* Sidebar Buttons */
 nav button {
     width: 100%;
     padding: 12px;
@@ -112,19 +106,7 @@ nav button:hover {
     background-color: #475569;
 }
 
-/* LinkedIn Link Styling */
-nav a {
-    color: #60A5FA;
-    text-decoration: none;
-    font-size: 14px;
-    margin-top: auto;
-}
-
-nav a:hover {
-    text-decoration: underline;
-}
-
-/* ====== MAIN CONTENT ====== */
+/* Content Sections */
 .container {
     flex: 1;
     display: flex;
@@ -134,14 +116,19 @@ nav a:hover {
     padding: 40px;
 }
 
-/* ====== FILE UPLOAD FORM ====== */
-.upload-form {
-    display: flex;
+/* Hide Sections Initially */
+#upload-container, #video-container {
+    display: none;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    gap: 15px;
+    padding: 20px;
+}
+
+#upload-container.active, #video-container.active {
+    display: flex;
 }
 
+/* Upload Form */
 .upload-form input[type="file"] {
     border: 1px solid #ccc;
     padding: 8px;
@@ -150,8 +137,25 @@ nav a:hover {
     cursor: pointer;
 }
 
-/* Upload Button */
-.upload-form button {
+/* Emotion List */
+.emotion-list {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    font-size: 18px;
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+}
+
+/* Video Controls */
+.video-controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 10px;
+}
+
+.video-controls button {
     background-color: #3B82F6;
     color: white;
     padding: 10px 20px;
@@ -159,41 +163,8 @@ nav a:hover {
     border-radius: 6px;
     font-size: 16px;
     cursor: pointer;
-    transition: all 0.3s ease-in-out;
-    font-family: 'Poppins', sans-serif;
-    font-weight: 500;
 }
 
-.upload-form button:hover {
+.video-controls button:hover {
     background-color: #2563EB;
 }
-
-/* ====== DETECTED IMAGE OUTPUT ====== */
-.result-image {
-    width: 100%;
-    max-width: 600px;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    margin-top: 10px;
-}
-
-/* ====== EMOTION RESULT LIST ====== */
-.emotion-list {
-    list-style: none;
-    padding: 0;
-    margin-top: 10px;
-    text-align: center;
-    font-size: 18px;
-    font-weight: 400;
-    font-family: 'Roboto Mono', monospace;
-    line-height: 1.6;
-}
-
-/* ====== FOOTER ====== */
-footer {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #1E293B;
-    color: white;
-    font-size: 14px;
-}