updated

Author: SkvProgrammer

index.html

@@ -56,22 +56,25 @@
       <button id="fullscreen-button" aria-label="Toggle Fullscreen" onclick="toggleFullscreen()">
         <i class="fas fa-expand"></i>
       </button>
+      <button id="delete-button" aria-label="delete" onclick="deleteEntire()">
+        <i class="fas fa-trash"></i>
+      </button>
     </aside>
 
     <!-- Main Content -->
     <main class="flex-grow-1 d-flex flex-column">
       <!-- Dynamic Tool Options -->
       <section id="tool-options-container" class="p-3 bg-light">
         <div id="pen-options" class="tool-options active">
-          <label for="pen-size">Pen Size:</label>
-          <input type="range" id="pen-size" min="2" max="50" value="10">
-          <label for="pen-color">Pen Color:</label>
+          <label for="pen-size"></label>
+          <input type="number" id="pen-size" min="2" max="50" value="10">
+          <label for="pen-color"></label>
           <input type="color" id="pen-color" value="#000000">
         </div>
 
         <div id="eraser-options" class="tool-options">
-          <label for="eraser-size">Eraser Size:</label>
-          <input type="range" id="eraser-size" min="2" max="50" value="20">
+          <label for="eraser-size">Eraser Size</label>
+          <input type="number" id="eraser-size" min="2" max="50" value="20">
         </div>
 
         <div id="text-options" class="tool-options">
@@ -84,16 +87,16 @@
       <section class="flex-grow-1 d-flex justify-content-center align-items-center">
         <canvas id="whiteboard"></canvas>
       </section>
+      <footer class="mt-auto">
+        <div class="container text-center py-2">
+          <h6>Whiteboard | Made with ❤️ by <a href="https://github.com/skvprogrammer" class="text-light">SKV</a></h6>
+        </div>
+      </footer> 
+    
     </main>
   </div>
 
-  <!-- Footer -->
-  <footer class="mt-auto">
-    <div class="container text-center py-2">
-      <h6>Whiteboard | Made with ❤️ by <a href="https://github.com/skvprogrammer" class="text-light">SKV</a></h6>
-    </div>
-  </footer>
-
+  
   <script src="script.js"></script>
 </body>
 

script.js

@@ -159,8 +159,8 @@ document.getElementById("eraser-size").addEventListener("input", (e) => {
 // Save Work
 function saveWork() {
   const link = document.createElement("a");
-  link.download = "whiteboard.png";
-  link.href = canvas.toDataURL("image/png");
+  link.download = "whiteboard.jpg";
+  link.href = canvas.toDataURL("image/jpg");
   link.click();
 }
 
@@ -194,6 +194,14 @@ function toggleFullscreen() {
     document.exitFullscreen();
   }
 }
+function deleteEntire() {
+  const canvas = document.getElementById('whiteboard');  // Replace with your canvas ID
+  const ctx = canvas.getContext('2d');
+  
+  // Clear the entire canvas
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
 
 // Call resizeCanvas when fullscreen changes
 document.addEventListener('fullscreenchange', resizeCanvas);

style.css

@@ -55,7 +55,7 @@ body {
   align-items: center;
   justify-content: center; */
   /* position: relative; */
-  /* overflow: hidden; For ripple effect */
+
 }
 
 #side-menu button:hover {
@@ -91,40 +91,89 @@ body {
 }
 
 /* Tool Options */
-/* #tool-options-container {
-  padding: 16px;
-  background-color: #f9f9f9; 
-  border-bottom: 1px solid #e0e0e0; 
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
-} */
+#tool-options-container {
+ max-width:400px; 
+} 
+/* Tool Options Container */
+.tool-options {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 10px 12px;
+  background: linear-gradient(145deg, #f7f7f7, #e4e4e4);
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.tool-options:hover {
+  transform: translateY(-5px); /* Subtle lift effect */
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
+}
 
+/* Label Styling */
 .tool-options label {
-  font-size: 0.9rem;
-  font-weight: 500;
-  margin-right: 8px;
-  color: #555; /* Muted gray text */
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #333;
+  text-transform: capitalize;
+  letter-spacing: 1px;
+  transition: color 0.3s ease, transform 0.3s ease;
 }
 
+.tool-options label:hover {
+  color: #ff6f61; /* Soft coral color */
+  transform: translateY(-2px); /* Slight lift effect */
+}
+
+/* Input Styling */
 .tool-options input {
-  margin-right: 16px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  padding: 4px;
-  font-size: 0.9rem;
+  margin-right: 24px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  padding: 10px 16px;
+  font-size: 1rem;
+  background: #fff;
+  color: #444;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
+.tool-options input:focus {
+  border-color: #4a90e2; /* Soft blue border on focus */
+  outline: none;
+  box-shadow: 0 0 12px rgba(74, 144, 226, 0.4); /* Soft blue glow */
+  transform: translateY(-2px); /* Lift effect on focus */
+}
+
+/* Color Input Styling */
 .tool-options input[type="color"] {
-  border: none;
+  width: 48px;
+  height: 48px;
   padding: 0;
-  width: 36px;
-  height: 36px;
+  border: none;
   cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.tool-options input[type="color"]:hover {
+  transform: scale(1.1); /* Zoom effect on hover */
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* Blue glow on hover */
+}
+
+.tool-options input[type="color"]:active {
+  transform: scale(0.95); /* Slight press effect */
 }
 
+.tool-options input[type="color"]::-webkit-color-swatch-wrapper {
+  border-radius: 50%;
+}
+
+/* Active State of Tool Options */
 .tool-options.active {
   display: flex;
-  align-items: center;
-  gap: 16px;
 }
 
 .tool-options:not(.active) {
@@ -137,6 +186,8 @@ body {
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
   background: #ffffff; /* White background */
   cursor: crosshair;
+  width: 80vw; /* 80% of the viewport width */
+  height: 80vh; 
 }
 
 /* Footer Styling */