Update index.html

index.html

@@ -102,12 +102,6 @@
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
     }
 
-    .design-option img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
     .slider-container {
       margin: 15px 0;
       color: white;
@@ -281,6 +275,11 @@
       text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
       z-index: 20;
     }
+    
+    .color-block {
+      width: 100%;
+      height: 100%;
+    }
   </style>
 </head>
 
@@ -312,23 +311,23 @@
         <div class="control-section">
           <div class="section-title">Nail Design</div>
           <div class="design-options">
-            <div class="design-option selected" data-design="gradient">
-              <img src="https://i.ibb.co/2WyMYRq/gradient.jpg" alt="Gradient Nails">
+            <div class="design-option selected" data-design="pink">
+              <div class="color-block" style="background: linear-gradient(45deg, #ff9a9e, #fad0c4);"></div>
             </div>
-            <div class="design-option" data-design="marble">
-              <img src="https://i.ibb.co/LgTT2B0/marble.jpg" alt="Marble Nails">
+            <div class="design-option" data-design="blue">
+              <div class="color-block" style="background: linear-gradient(45deg, #2193b0, #6dd5ed);"></div>
             </div>
-            <div class="design-option" data-design="holographic">
-              <img src="https://i.ibb.co/pP9Xnzq/holographic.jpg" alt="Holographic Nails">
+            <div class="design-option" data-design="purple">
+              <div class="color-block" style="background: linear-gradient(45deg, #c471f5, #fa71cd);"></div>
             </div>
-            <div class="design-option" data-design="glitter">
-              <img src="https://i.ibb.co/S0ThyfD/glitter.jpg" alt="Glitter Nails">
+            <div class="design-option" data-design="gold">
+              <div class="color-block" style="background: linear-gradient(45deg, #f6d365, #fda085);"></div>
             </div>
-            <div class="design-option" data-design="french">
-              <img src="https://i.ibb.co/9sZsq2f/french.jpg" alt="French Manicure">
+            <div class="design-option" data-design="green">
+              <div class="color-block" style="background: linear-gradient(45deg, #43c6ac, #f8ffae);"></div>
             </div>
-            <div class="design-option" data-design="matte">
-              <img src="https://i.ibb.co/QC5tDn2/matte.jpg" alt="Matte Finish">
+            <div class="design-option" data-design="black">
+              <div class="color-block" style="background: linear-gradient(45deg, #232526, #414345);"></div>
             </div>
           </div>
         </div>
@@ -381,59 +380,47 @@
   </div>
 
   <script>
-    // Define nail patterns and their properties
-    const nailPatterns = {
-      gradient: {
-        image: 'https://i.ibb.co/2WyMYRq/gradient.jpg',
-        shadowColor: 'rgba(255, 100, 150, 0.3)'
+    // Define nail colors and their properties
+    const nailDesigns = {
+      pink: {
+        color: 'linear-gradient(45deg, #ff9a9e, #fad0c4)',
+        shadowColor: 'rgba(255, 154, 158, 0.5)'
       },
-      marble: {
-        image: 'https://i.ibb.co/LgTT2B0/marble.jpg',
-        shadowColor: 'rgba(200, 200, 200, 0.3)'
+      blue: {
+        color: 'linear-gradient(45deg, #2193b0, #6dd5ed)',
+        shadowColor: 'rgba(33, 147, 176, 0.5)'
       },
-      holographic: {
-        image: 'https://i.ibb.co/pP9Xnzq/holographic.jpg',
-        shadowColor: 'rgba(100, 200, 255, 0.3)'
+      purple: {
+        color: 'linear-gradient(45deg, #c471f5, #fa71cd)',
+        shadowColor: 'rgba(196, 113, 245, 0.5)'
       },
-      glitter: {
-        image: 'https://i.ibb.co/S0ThyfD/glitter.jpg',
-        shadowColor: 'rgba(255, 215, 0, 0.3)'
+      gold: {
+        color: 'linear-gradient(45deg, #f6d365, #fda085)',
+        shadowColor: 'rgba(246, 211, 101, 0.5)'
       },
-      french: {
-        image: 'https://i.ibb.co/9sZsq2f/french.jpg',
-        shadowColor: 'rgba(255, 255, 255, 0.3)'
+      green: {
+        color: 'linear-gradient(45deg, #43c6ac, #f8ffae)',
+        shadowColor: 'rgba(67, 198, 172, 0.5)'
       },
-      matte: {
-        image: 'https://i.ibb.co/QC5tDn2/matte.jpg',
-        shadowColor: 'rgba(100, 100, 100, 0.3)'
+      black: {
+        color: 'linear-gradient(45deg, #232526, #414345)',
+        shadowColor: 'rgba(35, 37, 38, 0.5)'
       }
     };
 
-    // Nail design images preloading
-    const nailImages = {};
-    let loadedImages = 0;
-    const totalImages = Object.keys(nailPatterns).length;
-
-    for (const design in nailPatterns) {
-      nailImages[design] = new Image();
-      nailImages[design].onload = () => {
-        loadedImages++;
-        if (loadedImages === totalImages) {
-          // All images loaded, hide loading screen
-          document.querySelector('.loading-screen').style.opacity = 0;
-          setTimeout(() => {
-            document.querySelector('.loading-screen').style.display = 'none';
-          }, 500);
-        }
-      };
-      nailImages[design].src = nailPatterns[design].image;
-    }
+    // Hide loading screen when page is ready
+    document.addEventListener('DOMContentLoaded', function() {
+      document.querySelector('.loading-screen').style.opacity = 0;
+      setTimeout(() => {
+        document.querySelector('.loading-screen').style.display = 'none';
+      }, 500);
+    });
 
     // Initialize variables
-    let currentDesign = 'gradient';
+    let currentDesign = 'pink';
     let sizeScale = 1.0;
     let lengthScale = 1.0;
-    let opacityValue = 1.0;
+    let opacity = 1.0; // Fixed variable name to avoid duplicate
     let showShadows = true;
     let showLines = false;
     let facingMode = 'environment'; // 'user' = front camera, 'environment' = back camera
@@ -469,7 +456,7 @@
     });
 
     opacitySlider.addEventListener('input', (e) => {
-      opacityValue = parseInt(e.target.value) / 100;
+      opacity = parseInt(e.target.value) / 100;
       opacityValue.textContent = `${e.target.value}%`;
     });
 
@@ -542,7 +529,7 @@
       // Draw nail shadow if enabled
       if (showShadows) {
         ctx.save();
-        ctx.shadowColor = nailPatterns[design].shadowColor;
+        ctx.shadowColor = nailDesigns[design].shadowColor;
         ctx.shadowBlur = 15;
         ctx.shadowOffsetX = 0;
         ctx.shadowOffsetY = 5;
@@ -558,13 +545,27 @@
       ctx.ellipse(0, 0, nailWidth/2, nailLength/2, 0, 0, Math.PI * 2);
       ctx.clip();
       
-      // Draw the nail design pattern
-      ctx.globalAlpha = opacityValue;
-      ctx.drawImage(
-        nailImages[design],
-        -nailWidth/2, -nailLength/2,
-        nailWidth, nailLength
-      );
+      // Create gradient for the nail color
+      const gradient = ctx.createLinearGradient(-nailWidth/2, -nailLength/2, nailWidth/2, nailLength/2);
+      
+      // Parse gradient colors from the design
+      const gradientStr = nailDesigns[design].color;
+      const colorStart = gradientStr.substring(
+        gradientStr.indexOf('(') + 1, 
+        gradientStr.indexOf(',')
+      ).trim();
+      const colorEnd = gradientStr.substring(
+        gradientStr.lastIndexOf(',') + 1, 
+        gradientStr.lastIndexOf(')')
+      ).trim();
+      
+      gradient.addColorStop(0, colorStart);
+      gradient.addColorStop(1, colorEnd);
+      
+      // Draw the nail design with gradient
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = gradient;
+      ctx.fillRect(-nailWidth/2, -nailLength/2, nailWidth, nailLength);
       
       // Restore context
       ctx.restore();