Upload folder using huggingface_hub

index.html

@@ -352,6 +352,7 @@
         transform: scale(0, 0);
         opacity: 0.5;
       }
+
       100% {
         transform: scale(20, 20);
         opacity: 0;
@@ -676,9 +677,11 @@
       0% {
         transform: scale(1);
       }
+
       50% {
         transform: scale(1.05);
       }
+
       100% {
         transform: scale(1);
       }
@@ -856,18 +859,222 @@
 
     /* Loading Animation */
     @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
 
-    .section, .featured-card, .products-section {
+    .section,
+    .featured-card,
+    .products-section {
       animation: fadeIn 0.6s ease-out;
     }
+
+    /* Mood Style Enhancements */
+    .mood-indicator {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      width: 120px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      z-index: 1001;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .mood-icon {
+      font-size: 20px;
+      color: var(--primary-color);
+    }
+
+    .mood-text {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--secondary-color);
+    }
+
+    .color-palette {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      display: flex;
+      gap: 8px;
+      z-index: 1001;
+    }
+
+    .color-option {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      cursor: pointer;
+      border: 3px solid white;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      transition: var(--transition);
+    }
+
+    .color-option:hover {
+      transform: scale(1.1);
+    }
+
+    .color-option.active {
+      border-color: var(--primary-color);
+      transform: scale(1.2);
+    }
+
+    .theme-toggle {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 60px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      z-index: 1001;
+      backdrop-filter: blur(10px);
+      transition: var(--transition);
+    }
+
+    .theme-toggle:hover {
+      transform: translateX(-50%) scale(1.1);
+    }
+
+    .theme-toggle i {
+      font-size: 24px;
+      color: var(--secondary-color);
+    }
+
+    .mood-modal {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 320px;
+      background: white;
+      border-radius: 20px;
+      padding: 32px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      z-index: 2000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    }
+
+    .mood-modal.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .mood-modal h3 {
+      color: var(--secondary-color);
+      font-size: 20px;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+
+    .mood-options {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    .mood-option {
+      aspect-ratio: 1;
+      border-radius: 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: var(--transition);
+      border: 2px solid transparent;
+    }
+
+    .mood-option:hover {
+      transform: translateY(-5px);
+      border-color: var(--primary-color);
+    }
+
+    .mood-option i {
+      font-size: 28px;
+      margin-bottom: 8px;
+    }
+
+    .mood-option span {
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .mood-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+    }
+
+    .mood-btn {
+      padding: 10px 24px;
+      border-radius: 25px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: var(--transition);
+    }
+
+    .mood-btn-primary {
+      background: var(--primary-color);
+      color: white;
+      border: none;
+    }
+
+    .mood-btn-secondary {
+      background: transparent;
+      color: var(--secondary-color);
+      border: 1px solid #ddd;
+    }
+
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1999;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.4s ease;
+      backdrop-filter: blur(5px);
+    }
+
+    .modal-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
   </style>
 </head>
 
 <body>
   <div class="menu-overlay" id="menuOverlay" onclick="closeMenu()"></div>
+  <div class="modal-overlay" id="moodModalOverlay" onclick="closeMoodModal()"></div>
 
   <div class="side-menu" id="sideMenu">
     <div class="menu-header">
@@ -943,6 +1150,56 @@
     </a>
   </div>
 
+  <div class="mood-indicator" onclick="openMoodModal()">
+    <i class="fas fa-smile mood-icon"></i>
+    <span class="mood-text">Mood Style</span>
+  </div>
+
+  <div class="color-palette">
+    <div class="color-option" style="background: #d4af37;" onclick="changeColorScheme('#d4af37')"></div>
+    <div class="color-option" style="background: #2196F3;" onclick="changeColorScheme('#2196F3')"></div>
+    <div class="color-option" style="background: #E91E63;" onclick="changeColorScheme('#E91E63')"></div>
+    <div class="color-option" style="background: #4CAF50;" onclick="changeColorScheme('#4CAF50')"></div>
+  </div>
+
+  <div class="theme-toggle" onclick="toggleTheme()">
+    <i class="fas fa-moon"></i>
+  </div>
+
+  <div class="mood-modal" id="moodModal">
+    <h3>Choose Your Mood</h3>
+    <div class="mood-options">
+      <div class="mood-option" onclick="setMood('luxury')">
+        <i class="fas fa-crown" style="color: #d4af37;"></i>
+        <span>Luxury</span>
+      </div>
+      <div class="mood-option" onclick="setMood('sport')">
+        <i class="fas fa-bolt" style="color: #E91E63;"></i>
+        <span>Sport</span>
+      </div>
+      <div class="mood-option" onclick="setMood('classic')">
+        <i class="fas fa-gem" style="color: #2196F3;"></i>
+        <span>Classic</span>
+      </div>
+      <div class="mood-option" onclick="setMood('modern')">
+        <i class="fas fa-rocket" style="color: #4CAF50;"></i>
+        <span>Modern</span>
+      </div>
+      <div class="mood-option" onclick="setMood('vintage')">
+        <i class="fas fa-wine-glass" style="color: #8D6E63;"></i>
+        <span>Vintage</span>
+      </div>
+      <div class="mood-option" onclick="setMood('futuristic')">
+        <i class="fas fa-future" style="color: #9C27B0;"></i>
+        <span>Futuristic</span>
+      </div>
+    </div>
+    <div class="mood-actions">
+      <button class="mood-btn mood-btn-secondary" onclick="closeMoodModal()">Cancel</button>
+      <button class="mood-btn mood-btn-primary" onclick="applyMood()">Apply</button>
+    </div>
+  </div>
+
   <div class="hero-section">
     <div class="hero-video">
       <iframe
@@ -978,7 +1235,8 @@
         </div>
       </a>
       <a href="/sprinter-luxury-vip-2" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #4A148C, #7B1FA2); display: flex; align-items: center; justify-content: center; font-size: 48px;">
+        <div class="card-image"
+          style="background: linear-gradient(135deg, #4A148C, #7B1FA2); display: flex; align-items: center; justify-content: center; font-size: 48px;">
           <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i>
         </div>
         <div class="card-content">
@@ -991,7 +1249,8 @@
         </div>
       </a>
       <a href="/sprinter-luxury-vip-3" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
+        <div class="card-image"
+          style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
           <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i>
         </div>
         <div class="card-content">
@@ -1017,7 +1276,8 @@
     </div>
     <div class="cards-container">
       <a href="/vclass-luxury-vip" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;">
+        <div class="card-image"
+          style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;">
           <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
         </div>
         <div class="card-content">
@@ -1030,7 +1290,8 @@
         </div>
       </a>
       <a href="/vclass-luxury-vip-2" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
+        <div class="card-image"
+          style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
           <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
         </div>
         <div class="card-content">
@@ -1042,143 +1303,4 @@
           </div>
         </div>
       </a>
-      <a href="/vclass-luxury-vip-3" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;">
-          <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
-        </div>
-        <div class="card-content">
-          <div class="card-title">V-Class Luxury vip interior van</div>
-          <div class="card-subtitle">Bespoke Mercedes V-class van</div>
-          <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div>
-          <div class="card-cta">
-            <i class="fas fa-star"></i> Build Your Own Now ?
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-
-  <div class="spacer"></div>
-
-  <div class="featured-card" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1527613426441-4da17471b66d?w=800');">
-    <div class="featured-content">
-      <div class="featured-title">Wheelchair Customized</div>
-      <div class="featured-subtitle">Luxury VIP van with custom wheelchair accessibility, providing style and comfort.</div>
-      <a href="/wheelchair-customized" class="explore-btn">Explore</a>
-    </div>
-  </div>
-
-  <div class="spacer"></div>
-
-  <div class="section">
-    <div class="section-header">
-      <div class="section-title">Discover GMC Customized VIP</div>
-      <a href="/gmc" class="view-all">
-        View All <i class="fas fa-arrow-left"></i>
-      </a>
-    </div>
-    <div class="cards-container">
-      <a href="/gmc-yukon" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
-          <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
-        </div>
-        <div class="card-content">
-          <div class="card-title">GMC Luxury vip | Yuoken</div>
-          <div class="card-subtitle">Customized GMC Yuoken</div>
-          <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
-          <div class="card-cta">
-            <i class="fas fa-star"></i> Build Your Own Now ?
-          </div>
-        </div>
-      </a>
-      <a href="/gmc-denali" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #1565C0, #1976D2); display: flex; align-items: center; justify-content: center; font-size: 48px;">
-          <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
-        </div>
-        <div class="card-content">
-          <div class="card-title">GMC Luxury VIP | Denali</div>
-          <div class="card-subtitle">GMC Denali Luxury interior</div>
-          <div class="card-features">UAE Features tailored to Your Vision</div>
-          <div class="card-cta">
-            <i class="fas fa-star"></i> Build Your Own Now ?
-          </div>
-        </div>
-      </a>
-      <a href="/gmc-yukon-2" class="card">
-        <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
-          <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
-        </div>
-        <div class="card-content">
-          <div class="card-title">GMC Luxury vip | Yuoken</div>
-          <div class="card-subtitle">Customized GMC Yuoken</div>
-          <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
-          <div class="card-cta">
-            <i class="fas fa-star"></i> Build Your Own Now ?
-          </div>
-        </div>
-      </a>
-    </div>
-  </div>
-
-  <div class="spacer"></div>
-
-  <div class="featured-card" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800');">
-    <div class="featured-content">
-      <div class="featured-title">To Be Unique</div>
-      <div class="featured-subtitle">Full-color Upholstery options crafted from genuine materials for a luxurious experience.</div>
-      <a href="/upholstery" class="explore-btn">Explore</a>
-    </div>
-  </div>
-
-  <div class="spacer"></div>
-
-  <div class="products-section">
-    <div class="section-header">
-      <div class="section-title">Explore Our Products</div>
-      <a href="/products" class="view-all">
-        View All <i class="fas fa-arrow-left"></i>
-      </a>
-    </div>
-    <div class="products-grid">
-      <div class="product-card">
-        <div class="product-image" style="background: linear-gradient(135deg, #FFC107, #FFD54F);">
-          <i class="fas fa-couch" style="font-size: 48px; color: rgba(0,0,0,0.3);"></i>
-        </div>
-        <div class="product-content">
-          <div class="product-title">Customized Home Chair</div>
-          <div class="product-desc">Enjoy a unique design that combines comfort and elegance</div>
-          <a href="/home-chair" class="product-btn">Explore</a>
-        </div>
-      </div>
-      <div class="product-card">
-        <div class="product-image" style="background: linear-gradient(135deg, #2196F3, #42A5F5);">
-          <i class="fas fa-tv" style="font-size: 48px; color: rgba(0,0,0,0.3);"></i>
-        </div>
-        <div class="product-content">
-          <div class="product-title">Customized el & SmarTV</div>
-          <div class="product-desc">Advanced viewing with this smart elevator that offers an eco-friendly</div>
-          <a href="/smart-tv" class="product-btn">Explore</a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <footer class="footer">
-    <div class="footer-content">
-      <div class="footer-section">
-        <h3>ART TOUCH</h3>
-        <p>Premium vehicle customization and luxury modifications in UAE. Transform your vision into reality.</p>
-        <div class="social-links">
-          <a href="https://www.facebook.com/arttouchs" target="_blank" class="social-link">
-            <i class="fab fa-facebook-f"></i>
-          </a>
-          <a href="https://www.instagram.com/arttouchs/" target="_blank" class="social-link">
-            <i class="fab fa-instagram"></i>
-          </a>
-          <a href="https://api.whatsapp.com/send?phone=+971562424247&text=Hello%20ART%20Touch" target="_blank" class="social-link">
-            <i class="fab fa-whatsapp"></i>
-          </a>
-          <a href="https://www.youtube.com/@arttouchs" target="_blank" class="social-link">
-            <i class="fab fa-youtube"></i>
-          </a>
-          <a href="https://www.tik
+      <