changes made

SkvProgrammer · web-flow · commit fefba78af7cc · 2025-01-03T02:43:13.000-05:00
diff --git a/index.html b/index.html
@@ -8,25 +8,73 @@
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
       rel="stylesheet"
     />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
+
     <link
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="style.css" />
     <style>
-      /* Additional CSS for selected tool effect */
-      .selected {
-        background-color: #dbe9ff;
+         body {
+    /*font-family: 'Poppins', sans-serif;
+    */background: linear-gradient(135deg, #f3f4f6, #ffffff);
+    margin: 0;
+    padding: 0;
+  }
+      nav.navbar {
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      }
+
+      #side-menu {
+       /* background-color: #f8f9fa;
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);*/
       }
 
       .btn {
-        transition: background-color 0.3s ease;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+      }
+
+      .btn:hover {
+        background-color: #eeff01;
+        border:none!important;
+        transform: scale(1.1);
+      }
+
+      .selected {
+        background-color: #0d6efd;
+        color: #ffffff;
+      }
+
+      #controls {
+        border-bottom: 1px solid #dee2e6;
+      }
+
+      #whiteboard {
+        border: 2px solid #e9ecef;
+        border-radius: 10px;
+        max-width: 100%;
+        max-height: 100%;
+        background: #ffffff;
+      }
+
+      footer {
+        background-color: #0d6efd;
+        color: white;
+        text-align: center;
+        padding: 10px 0;
+        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+      }
+
+      footer i {
+        color: #ff5252;
+        margin: 0 5px;
       }
     </style>
   </head>
   <body>
     <!-- Navigation Bar -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary p-4">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Whiteboard</a>
         <button
@@ -40,12 +88,7 @@
         <div class="collapse navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto">
             <li class="nav-item">
-              <a
-                href="#"
-                id="fullscreen"
-                class="nav-link"
-                title="Fullscreen"
-              >
+              <a href="#" id="fullscreen" class="nav-link" title="Fullscreen">
                 <i class="fas fa-expand"></i>
               </a>
             </li>
@@ -133,8 +176,16 @@
       </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Footer -->
+    <footer class="mt-5 p-4">
+      <h5>©<span id="current-year"></span> Whiteboard | Made with 
+      <i class="fas fa-heart"></i> by <a href="https:://github.com/skvprogrammer" style="color: black!important;">SKV</a>
+    </h5></footer>
+
     <script>
+      // Set current year in footer
+      document.getElementById('current-year').textContent = new Date().getFullYear();
+      
       // JavaScript to handle tool selection and update background color
       const tools = document.querySelectorAll('#select-tool, #pen-tool, #eraser-tool, #draw-line, #draw-rect, #draw-circle, #text-tool');
 
@@ -148,7 +199,9 @@
         });
       });
 
-     </script>
+    
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
     <script src="script.js"></script>
   </body>
 </html>
