Spaces:

Fazbeeer
/

mindmaster-vr-arena-clone

Running

App Files Files Community

Fazbeeer commited on Dec 2, 2025

Commit

a2a6f8d

verified ·

1 Parent(s): 2706093

“Add the following custom features to my website:

Browse files

• A Christmas music toggle button (muted by default)
• Red-and-gold gradient Christmas button styling
• Snowflake hover effects
• Buttons that jingle (shake animation) when hovered
Insert the following code into the site’s custom HTML, CSS, and JavaScript sections exactly as provided:” 
<button id="musicToggle" class="xmas-button">🎵 Play Christmas Music</button>


<audio id="xmasMusic" loop>
<source src="YOUR-MUSIC-FILE.mp3" type="audio/mpeg">
</audio>

Files changed (10) hide show

about.html +3 -53
components/footer.js +2 -20
currency.html +2 -51
events.html +3 -53
help.html +2 -11
index.html +62 -83
pricing.html +2 -51
results.html +2 -51
script.js +42 -36
style.css +141 -27

about.html CHANGED Viewed

@@ -1,16 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -409,51 +400,10 @@
             </div>
         </div>
     </footer>
-    <!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
     <script>
         // Initialize Vanta.js background
-VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

 <!DOCTYPE html>
 <html lang="en">
+<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Us - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>
             </div>
         </div>
     </footer>
     <script>
         // Initialize Vanta.js background
+        VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

components/footer.js CHANGED Viewed

@@ -4,31 +4,13 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: linear-gradient(to right, rgba(11, 64, 0, 0.8), rgba(139, 0, 0, 0.8));
           backdrop-filter: blur(10px);
           color: white;
           padding: 3rem 2rem;
           text-align: center;
-          border-top: 1px solid rgba(255, 215, 0, 0.5);
-          position: relative;
-          overflow: hidden;
         }
-        footer::before {
-          content: "🎄";
-          position: absolute;
-          bottom: 0;
-          left: 10%;
-          font-size: 2rem;
-          opacity: 0.3;
-        }
-        footer::after {
-          content: "❄";
-          position: absolute;
-          bottom: 0;
-          right: 10%;
-          font-size: 2rem;
-          opacity: 0.3;
-}
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;

     this.shadowRoot.innerHTML = `
       <style>
         footer {
+          background: rgba(17, 24, 39, 0.8);
           backdrop-filter: blur(10px);
           color: white;
           padding: 3rem 2rem;
           text-align: center;
+          border-top: 1px solid rgba(139, 92, 246, 0.2);
         }
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;

currency.html CHANGED Viewed

@@ -1,15 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Currency Exchange</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -584,51 +576,10 @@
             <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
         </div>
     </div>
-    <!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
     <script>
         // Initialize Vanta.js background
-VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Currency Exchange</title>
     <script src="https://cdn.tailwindcss.com"></script>
             <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
         </div>
     </div>
     <script>
         // Initialize Vanta.js background
+        VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

events.html CHANGED Viewed

@@ -1,16 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Events Calendar - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -231,51 +222,10 @@
             </div>
         </div>
     </footer>
-    <!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
     <script>
         // Initialize Vanta.js background
-VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

 <!DOCTYPE html>
 <html lang="en">
+<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Events Calendar - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>
             </div>
         </div>
     </footer>
     <script>
         // Initialize Vanta.js background
+        VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

help.html CHANGED Viewed

@@ -1,17 +1,8 @@
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Help Center - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>

 ```html
 <!DOCTYPE html>
 <html lang="en">
+<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Help Center - Amplify</title>
     <script src="https://cdn.tailwindcss.com"></script>

index.html CHANGED Viewed

@@ -1,17 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Mental Performance for Champions</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -21,9 +12,23 @@
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
-        .hero-gradient {
-            background: linear-gradient(135deg, #0a2e38 0%, #1a1a1a 50%, #3a0000 100%);
-        }
 .pulse-animation {
             animation: pulse 2s infinite;
         }
@@ -40,10 +45,20 @@
         .vr-headset:hover {
             transform: perspective(1000px) rotateY(0deg);
         }
-        .glow-text {
-            text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
-        }
-    </style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
     <!-- Enhanced Vanta.js Background -->
@@ -51,7 +66,17 @@
     <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
     <!-- Google Translate -->
     <div id="google_translate_element" class="absolute top-4 right-4 z-50"></div>
-    <script type="text/javascript">
         function googleTranslateElementInit() {
             new google.translate.TranslateElement({
                 pageLanguage: 'en',
@@ -64,20 +89,21 @@
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
             <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-yellow-500">
-        <!-- Christmas Banner -->
-        <div class="w-full bg-gradient-to-r from-green-700 via-red-600 to-green-700 text-center py-2 px-4 animate-pulse">
-            <div class="flex items-center justify-center space-x-2">
-                <i data-feather="gift" class="text-white"></i>
-                <span class="text-white font-bold">Merry Christmas! Get 15% off all plans with code HOLIDAY15</span>
-                <i data-feather="gift" class="text-white"></i>
-            </div>
         </div>
-<div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-2">
-                    <i data-feather="zap" class="text-yellow-500 w-6 h-6"></i>
-                    <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-yellow-500 px-1">AMPLIFY</span>
-                </div>
 <!-- Mobile menu button -->
             <div class="md:hidden">
                 <button id="mobile-menu-button" class="text-white focus:outline-none">
@@ -120,8 +146,8 @@
 </div>
 </div>
                 <div class="md:w-1/2 flex justify-center">
-                    <div class="vr-headset pulse-animation relative">
-                        <img src="https://huggingface.co/spaces/Fazbeeer/mindmaster-vr-arena-clone/resolve/main/images/Screen_Shot_2025-10-31_at_9.36.06_AM-removebg-preview%20(1).png" alt="VR Headset" class="rounded-lg shadow-2xl mx-auto w-full h-auto max-w-md object-contain">
 </div>
 </div>
             </div>
@@ -131,12 +157,7 @@
     <section id="features" class="relative z-10 py-20 bg-black bg-opacity-90">
 <div class="container mx-auto px-6">
             <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
-                <span class="text-red-500">TRAIN</span> <span class="text-green-500">YOUR</span> <span class="text-white">MIND</span>
-                <div class="mt-4 text-xl text-yellow-300 flex justify-center items-center">
-                    <i data-feather="star" class="w-6 h-6 mx-2"></i>
-                    <span>Holiday Special</span>
-                    <i data-feather="star" class="w-6 h-6 mx-2"></i>
-                </div>
             </h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                     <!-- Feature 1 -->
@@ -390,50 +411,8 @@ Get Started Now
             <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
 </div>
     </div>
-    <!-- Footer Component -->
-<script src="components/footer.js"></script>
-<!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
 <!-- Add i18next libraries -->
 <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
     <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>

 <!DOCTYPE html>
 <html lang="en">
+<head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"68e50e0a6662dced96925247"}};</script>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Mental Performance for Champions</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
+            .hero-gradient {
+                background: linear-gradient(135deg, #0b3513 0%, #0d1306 50%, #5e0c0c 100%);
+                position: relative;
+                overflow: hidden;
+            }
+            .hero-gradient::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%23d4af37" opacity="0.1" d="M50,5L60,35L90,40L65,60L75,90L50,75L25,90L35,60L10,40L40,35Z"/></svg>');
+                background-size: 100px 100px;
+                opacity: 0.1;
+                pointer-events: none;
+            }
 .pulse-animation {
             animation: pulse 2s infinite;
         }
         .vr-headset:hover {
             transform: perspective(1000px) rotateY(0deg);
         }
+            .glow-text {
+                text-shadow: 0 0 10px rgba(255, 50, 50, 0.7),
+                             0 0 20px rgba(255, 215, 0, 0.5);
+                position: relative;
+            }
+            .glow-text::after {
+                content: "❄";
+                position: absolute;
+                top: -10px;
+                right: -15px;
+                font-size: 0.5em;
+                opacity: 0.7;
+            }
+</style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
     <!-- Enhanced Vanta.js Background -->
     <div class="fixed top-0 left-0 w-full h-full z-0 bg-gradient-to-b from-black via-transparent to-black opacity-30"></div>
     <!-- Google Translate -->
     <div id="google_translate_element" class="absolute top-4 right-4 z-50"></div>
+    <!-- Christmas Music Toggle Button -->
+    <button id="musicToggle" class="xmas-button absolute top-20 right-4 z-50 flex items-center">
+      <i data-feather="volume-x" class="mr-2"></i> Play Christmas Music
+    </button>
+    <!-- Hidden audio element -->
+    <audio id="xmasMusic" loop>
+      <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+    </audio>
+<script type="text/javascript">
         function googleTranslateElementInit() {
             new google.translate.TranslateElement({
                 pageLanguage: 'en',
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
             <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-yellow-500">
+        <!-- Thanksgiving Banner -->
+        <div class="w-full bg-gradient-to-r from-yellow-600 via-orange-600 to-red-700 text-center py-2 px-4">
+<div class="flex items-center justify-center space-x-2">
+                            <i data-feather="heart" class="text-white"></i>
+                            <span class="text-white font-bold">Happy Thanksgiving! Get 10% off all plans with code TURKEY10</span>
+                            <i data-feather="heart" class="text-white"></i>
+</div>
         </div>
+        <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
+        <div class="flex items-center space-x-2 relative">
+            <i data-feather="zap" class="text-red-500 w-6 h-6"></i>
+            <span class="text-2xl font-bold font-['Bebas+Neue'] tracking-wider text-red-500 px-1">AMPLIFY</span>
+            <div class="absolute -top-2 -left-2 -right-2 h-8 bg-gradient-to-r from-red-500 via-green-500 to-red-500 opacity-20 rounded-full blur-sm"></div>
+        </div>
 <!-- Mobile menu button -->
             <div class="md:hidden">
                 <button id="mobile-menu-button" class="text-white focus:outline-none">
 </div>
 </div>
                 <div class="md:w-1/2 flex justify-center">
+                    <div class="vr-headset pulse-animation">
+                    <img src="https://huggingface.co/spaces/Fazbeeer/mindmaster-vr-arena-clone/resolve/main/images/Screen_Shot_2025-10-31_at_9.36.06_AM-removebg-preview%20(1).png" alt="VR Headset" class="rounded-lg shadow-2xl mx-auto w-full h-auto max-w-md object-contain">
 </div>
 </div>
             </div>
     <section id="features" class="relative z-10 py-20 bg-black bg-opacity-90">
 <div class="container mx-auto px-6">
             <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
+                <span class="text-yellow-500">TRAIN</span> <span class="text-red-500">YOUR</span> <span class="text-white">MIND</span>
             </h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                     <!-- Feature 1 -->
             <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
 </div>
     </div>
+<!-- Christmas Footer Component -->
+<script src="components/christmas-footer.js"></script>
 <!-- Add i18next libraries -->
 <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
     <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>

pricing.html CHANGED Viewed

@@ -1,15 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Pricing Plans</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -260,51 +252,10 @@
             <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
         </div>
     </div>
-    <!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
     <script>
         // Initialize mobile menu
-const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
         const mobileMenuClose = document.getElementById('mobile-menu-close');

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Pricing Plans</title>
     <script src="https://cdn.tailwindcss.com"></script>
             <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
         </div>
     </div>
     <script>
         // Initialize mobile menu
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
         const mobileMenuClose = document.getElementById('mobile-menu-close');

results.html CHANGED Viewed

@@ -1,15 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTR4DLTDNS"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-RTR4DLTDNS');
-</script>
-<meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Success Stories</title>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -348,51 +340,10 @@ Get Started Today
             <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
 </div>
     </div>
-    <!-- SNOW EFFECT -->
-<style>
-  .snowflake {
-    position: fixed;
-    top: -10px;
-    color: white;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 999999;
-    animation-name: fall;
-    animation-timing-function: linear;
-  }
-  @keyframes fall {
-    0%   { transform: translateY(0); opacity: 1; }
-    100% { transform: translateY(100vh); opacity: 0.3; }
-  }
-</style>
-<script>
-function createSnowflake() {
-  const snow = document.createElement("div");
-  snow.classList.add("snowflake");
-  snow.textContent = "❆";
-  // Random position & size
-  snow.style.left = Math.random() * window.innerWidth + "px";
-  snow.style.fontSize = 10 + Math.random() * 15 + "px";
-  // Random duration (DeepSite-safe)
-  const duration = 5 + Math.random() * 7;
-  snow.style.animationDuration = duration + "s";
-  document.body.appendChild(snow);
-  // Remove after falling
-  setTimeout(() => snow.remove(), duration * 1000);
-}
-setInterval(createSnowflake, 150);
-</script>
     <script>
         // Initialize Vanta.js background
-VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Amplify - Success Stories</title>
     <script src="https://cdn.tailwindcss.com"></script>
             <a href="events.html" class="text-2xl text-white hover:text-yellow-500 transition">Events</a>
 </div>
     </div>
     <script>
         // Initialize Vanta.js background
+        VANTA.GLOBE({
             el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,

script.js CHANGED Viewed

@@ -1,7 +1,27 @@
 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
-    // Handle support form submission
     const supportForm = document.getElementById('supportForm');
     if (supportForm) {
         supportForm.addEventListener('submit', function(e) {
@@ -67,44 +87,30 @@ const loadTranslateStyles = () => {
             clearInterval(translateInterval);
         }
     }, 100);
-    // Create snowflakes
-    const snowContainer = document.createElement('div');
-    snowContainer.style.position = 'fixed';
-    snowContainer.style.top = '0';
-    snowContainer.style.left = '0';
-    snowContainer.style.width = '100%';
-    snowContainer.style.height = '100%';
-    snowContainer.style.pointerEvents = 'none';
-    snowContainer.style.zIndex = '9999';
-    document.body.appendChild(snowContainer);
-    function createSnowflake() {
-        const snowflake = document.createElement('div');
-        snowflake.textContent = '❆';
-        snowflake.style.position = 'absolute';
-        snowflake.style.color = 'white';
-        snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
-        snowflake.style.opacity = Math.random();
-        snowflake.style.left = Math.random() * window.innerWidth + 'px';
-        snowflake.style.top = '-20px';
-        snowflake.style.animation = `fall ${5 + Math.random() * 10}s linear infinite`;
-        snowContainer.appendChild(snowflake);
-        setTimeout(() => snowflake.remove(), 15000);
     }
-    // Snow falling animation
-    setInterval(createSnowflake, 150);
-    const style = document.createElement('style');
-    style.innerHTML = `
-    @keyframes fall {
-      to {
-        transform: translateY(100vh);
-      }
-    }
-    `;
-    document.head.appendChild(style);
 // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {

 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
+    // Christmas Music Toggle
+    const musicToggle = document.getElementById('musicToggle');
+    const xmasMusic = document.getElementById('xmasMusic');
+    const volumeIcon = musicToggle.querySelector('i');
+    if (musicToggle && xmasMusic) {
+        musicToggle.addEventListener('click', () => {
+            if (xmasMusic.paused) {
+                xmasMusic.play();
+                volumeIcon.setAttribute('data-feather', 'volume-2');
+                musicToggle.innerHTML = '<i data-feather="volume-2" class="mr-2"></i> Pause Christmas Music';
+            } else {
+                xmasMusic.pause();
+                volumeIcon.setAttribute('data-feather', 'volume-x');
+                musicToggle.innerHTML = '<i data-feather="volume-x" class="mr-2"></i> Play Christmas Music';
+            }
+            feather.replace();
+        });
+    }
+// Handle support form submission
     const supportForm = document.getElementById('supportForm');
     if (supportForm) {
         supportForm.addEventListener('submit', function(e) {
             clearInterval(translateInterval);
         }
     }, 100);
+// Create snowfall effect
+    const snowflakesCount = 50;
+    for (let i = 0; i < snowflakesCount; i++) {
+        const flake = document.createElement('div');
+        flake.className = 'snowflake';
+        flake.innerHTML = '❄';
+        flake.style.width = `${Math.random() * 20 + 10}px`;
+        flake.style.height = flake.style.width;
+        flake.style.left = `${Math.random() * 100}%`;
+        flake.style.top = `${Math.random() * -100}px`;
+        flake.style.animationDuration = `${Math.random() * 10 + 5}s`;
+        flake.style.animationDelay = `${Math.random() * 5}s`;
+        flake.style.opacity = Math.random() * 0.5 + 0.3;
+        flake.style.fontSize = `${Math.random() * 10 + 10}px`;
+        document.body.appendChild(flake);
     }
+    // Add holiday lights to logo
+    document.querySelectorAll('.flex.items-center.space-x-2').forEach(logo => {
+        logo.classList.add('holiday-lights');
+    });
+    // Add festive cursor
+    document.body.style.cursor = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23d4af37" d="M12,3L2,12H5V20H11V14H13V20H19V12H22L12,3Z"/></svg>'), auto`;
 // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {

style.css CHANGED Viewed

@@ -2,36 +2,129 @@
 body {
     font-family: 'Montserrat', sans-serif;
     min-height: 100vh;
-    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
     overflow-x: hidden;
-    color: white;
 }
-@keyframes snow {
-    0% {
-        transform: translateY(-10vh) rotate(0deg);
         opacity: 0;
     }
-    10% { opacity: 1; }
-    90% { opacity: 1; }
-    100% {
-        transform: translateY(100vh) rotate(360deg);
         opacity: 0;
     }
 }
-.snowflake {
-    position: fixed;
-    top: 0;
-    color: white;
-    user-select: none;
-    pointer-events: none;
-    z-index: 1;
-    animation-name: snow;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
 }
-/* Holiday gradient overlay */
 body::after {
     content: "";
     position: fixed;
@@ -40,9 +133,8 @@ body::after {
     width: 100%;
     height: 100%;
     background:
-        linear-gradient(to bottom,
-            rgba(139, 0, 0, 0.1) 0%,
-            rgba(0, 100, 0, 0.1) 100%);
     pointer-events: none;
     z-index: -1;
 }
@@ -84,16 +176,31 @@ body::after {
 .btn-secondary:hover {
     background: rgba(139, 92, 246, 0.1);
 }
 .feature-card {
-    background: rgba(17, 24, 39, 0.7);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(139, 92, 246, 0.2);
-    border-radius: 12px;
     padding: 24px;
     transition: all 0.3s ease;
 }
 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
@@ -110,6 +217,13 @@ body::after {
     animation: pulseThanksgiving 3s infinite;
     box-shadow: 0 2px 10px rgba(146, 64, 14, 0.5);
 }
 /* Google Translate Widget Styles */
 #google_translate_element {

 body {
     font-family: 'Montserrat', sans-serif;
     min-height: 100vh;
+    background: linear-gradient(135deg, #0d1306 0%, #1a260d 100%), url('https://static.photos/winter/1200x630/1') center/cover no-repeat fixed;
     overflow-x: hidden;
+    color: #f0f0f0;
+    position: relative;
+}
+@keyframes twinkle {
+    0% { opacity: 0.2; }
+    50% { opacity: 1; }
+    100% { opacity: 0.2; }
+}
+.snowflake {
+    position: fixed;
+    background: white;
+    border-radius: 50%;
+    animation: snowfall linear infinite;
+    z-index: 1;
+    pointer-events: none;
 }
+@keyframes snowfall {
+    0% {
+        transform: translateY(-10px) rotate(0deg);
         opacity: 0;
     }
+    10% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(100vh) rotate(360deg);
         opacity: 0;
     }
 }
+.holiday-lights {
+    position: relative;
+    display: inline-block;
+}
+.holiday-lights::after {
+    content: "";
+    position: absolute;
+    top: -10px;
+    left: -20px;
+    right: -20px;
+    height: 30px;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><circle cx="10" cy="10" r="5" fill="%23ff0000"/><circle cx="30" cy="10" r="5" fill="%23ffcc00"/><circle cx="50" cy="10" r="5" fill="%2300cc00"/><circle cx="70" cy="10" r="5" fill="%23ff0000"/><circle cx="90" cy="10" r="5" fill="%23ffcc00"/></svg>') repeat-x;
+    background-size: 100px 20px;
+    animation: lights 2s infinite alternate;
+    filter: drop-shadow(0 0 5px rgba(255,255,255,0.7));
+}
+@keyframes lights {
+    0% { opacity: 0.7; filter: drop-shadow(0 0 5px rgba(255,255,255,0.7)); }
+    100% { opacity: 1; filter: drop-shadow(0 0 15px rgba(255,255,255,0.9)); }
+}
+/* Christmas Button Styles */
+.xmas-button {
+  background: linear-gradient(135deg, #9b0000 0%, #d4af37 100%);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 15px rgba(155, 0, 0, 0.3);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.xmas-button::before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: -20px;
+  right: -20px;
+  height: 40px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40"><circle cx="10" cy="20" r="5" fill="%23ffffff" opacity="0.3"/><circle cx="30" cy="20" r="5" fill="%23ffffff" opacity="0.3"/><circle cx="50" cy="20" r="5" fill="%23ffffff" opacity="0.3"/><circle cx="70" cy="20" r="5" fill="%23ffffff" opacity="0.3"/><circle cx="90" cy="20" r="5" fill="%23ffffff" opacity="0.3"/></svg>') repeat-x;
+  background-size: 100px 40px;
+  animation: lights 2s infinite linear;
+}
+.xmas-button:hover {
+  transform: translateY(-2px) rotate(-2deg);
+  box-shadow: 0 6px 20px rgba(155, 0, 0, 0.4);
+  animation: jingle 0.5s ease infinite;
+}
+@keyframes jingle {
+  0%, 100% { transform: translateY(-2px) rotate(-2deg); }
+  50% { transform: translateY(-2px) rotate(2deg); }
 }
+/* Snowflake hover effects */
+a:hover, button:hover:not(.xmas-button) {
+  position: relative;
+}
+a:hover::after, button:hover:not(.xmas-button)::after {
+  content: "❄";
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  font-size: 12px;
+  animation: snowflakeFall 2s linear forwards;
+  pointer-events: none;
+}
+@keyframes snowflakeFall {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(50px) rotate(360deg);
+    opacity: 0;
+  }
+}
+/* Create random stars */
 body::after {
     content: "";
     position: fixed;
     width: 100%;
     height: 100%;
     background:
+        radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%),
+        radial-gradient(ellipse at bottom, rgba(255,215,0,0.1) 0%, transparent 70%);
     pointer-events: none;
     z-index: -1;
 }
 .btn-secondary:hover {
     background: rgba(139, 92, 246, 0.1);
 }
 .feature-card {
+    background: rgba(13, 40, 15, 0.7);
     backdrop-filter: blur(10px);
+    border: 1px solid rgba(210, 180, 140, 0.3);
+    border-radius: 16px;
     padding: 24px;
     transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2),
+                0 0 0 1px rgba(255,255,255,0.1),
+                inset 0 0 10px rgba(255,215,0,0.1);
+    position: relative;
+    overflow: hidden;
 }
+.feature-card::before {
+    content: "";
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 30px;
+    height: 30px;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23d4af37" d="M12,2L9,10L2,11L8,17L6,24L12,20L18,24L16,17L22,11L15,10L12,2Z"/></svg>') no-repeat;
+    background-size: contain;
+    opacity: 0.7;
+}
 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
     animation: pulseThanksgiving 3s infinite;
     box-shadow: 0 2px 10px rgba(146, 64, 14, 0.5);
 }
+/* Christmas Music Player */
+#musicToggle {
+  z-index: 9999;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0,0,0,0.7);
+  border: 1px solid #d4af37 !important;
+}
 /* Google Translate Widget Styles */
 #google_translate_element {