Spaces:

Fazbeeer
/

mindmaster-vr-arena-clone

Running

App Files Files Community

Fazbeeer commited on Nov 3, 2025

Commit

61d60d2

verified ·

1 Parent(s): f1ad38a

make the language translator work

Browse files

Files changed (8) hide show

about.html +21 -2
currency.html +22 -2
events.html +21 -2
index.html +16 -9
pricing.html +23 -2
results.html +22 -2
script.js +65 -35
style.css +17 -43

about.html CHANGED Viewed

@@ -28,9 +28,22 @@
 <body class="bg-black text-white font-['Montserrat']">
     <!-- Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -270,7 +283,13 @@ View Open Positions
                 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

 <body class="bg-black text-white font-['Montserrat']">
     <!-- Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+    <!-- Google Translate -->
+    <div id="google_translate_element"></div>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+    </script>
+    <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-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Products</h3>
+                    <ul class="space-y-2">
+                        <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
+                        <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
+                        <li><a href="index.html#features" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

currency.html CHANGED Viewed

@@ -37,9 +37,22 @@
     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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>
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -509,7 +522,14 @@
                 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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"></div>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+    </script>
+    <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-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Products</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

events.html CHANGED Viewed

@@ -25,9 +25,22 @@
 <body class="bg-black text-white font-['Montserrat']">
     <!-- Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -207,7 +220,13 @@ Register Now
                 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

 <body class="bg-black text-white font-['Montserrat']">
     <!-- Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+    <!-- Google Translate -->
+    <div id="google_translate_element"></div>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+    </script>
+    <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-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Events</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Workshops</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Webinars</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Training Sessions</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

index.html CHANGED Viewed

@@ -40,20 +40,20 @@
     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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',
-                includedLanguages: 'en,es,fr,de,it,ru,tr,zh-CN,ja,ko',
-                autoDisplay: false,
-                layout: google.translate.TranslateElement.InlineLayout.SIMPLE
             }, 'google_translate_element');
         }
     </script>
     <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-gold-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">
@@ -382,7 +382,14 @@ Get Started Now
 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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"></div>
+    <script>
         function googleTranslateElementInit() {
             new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
             }, 'google_translate_element');
         }
     </script>
     <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-gold-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>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Products</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

pricing.html CHANGED Viewed

@@ -29,8 +29,22 @@
     </style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -186,7 +200,14 @@
                 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

     </style>
 </head>
 <body class="bg-black text-white font-['Montserrat']">
+    <!-- Google Translate -->
+    <div id="google_translate_element"></div>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+    </script>
+    <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-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Products</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

results.html CHANGED Viewed

@@ -36,9 +36,22 @@
     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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>
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -293,7 +306,14 @@ Get Started Today
                 </div>
                 <div>
-</div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

     <!-- Enhanced Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0 opacity-90"></div>
     <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"></div>
+    <script>
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,ru,zh-CN,ja,ko,pt,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+        }
+    </script>
+    <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-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                 </div>
                 <div>
+                    <h3 class="text-lg font-bold text-white mb-4">Products</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">VR Training</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">AR Coaching</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Biofeedback</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition">Scenario Library</a></li>
+                    </ul>
+                </div>
                 <div>
                     <h3 class="text-lg font-bold text-white mb-4">Company</h3>

script.js CHANGED Viewed

@@ -1,43 +1,73 @@
 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
-    // Load Google Translate iframe styles
-    const loadTranslateStyles = () => {
-        const iframe = document.querySelector('.goog-te-menu-frame');
-        if (!iframe) return;
-        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-        const style = iframeDoc.createElement('style');
-        style.textContent = `
-            .goog-te-menu2 {
-                font-family: 'Montserrat', sans-serif !important;
-                background-color: #111827 !important;
-                border: 1px solid #e3b341 !important;
-            }
-            .goog-te-menu2-item div, .goog-te-menu2-item-selected div {
-                color: white !important;
-                padding: 8px 16px !important;
-            }
-            .goog-te-menu2-item-selected {
-                background-color: rgba(227, 179, 65, 0.2) !important;
-            }
-            .goog-te-menu2-item:hover {
-                background-color: rgba(227, 179, 65, 0.1) !important;
-            }
-        `;
-        iframeDoc.head.appendChild(style);
-    };
-    // Check for Google Translate iframe periodically
-    const translateInterval = setInterval(() => {
-        if (document.querySelector('.goog-te-menu-frame')) {
-            loadTranslateStyles();
-            clearInterval(translateInterval);
         }
-    }, 100);
-// Create twinkling stars
-    const starsCount = 200;
     for (let i = 0; i < starsCount; i++) {
         const star = document.createElement('div');
         star.className = 'star';
@@ -48,7 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
         star.style.animationDelay = `${Math.random() * 3}s`;
         document.body.appendChild(star);
     }
-// Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();

 // Shared JavaScript across all pages
 document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Google Translate
+    function googleTranslateElementInit() {
+        if (typeof google !== 'undefined' && google.translate) {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                includedLanguages: 'en,es,fr,de,it,pt,ru,zh-CN,ja,ko,ar,hi',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false
+            }, 'google_translate_element');
+            // Style the Google Translate dropdown
+            const styleTranslate = () => {
+                const iframe = document.querySelector('.goog-te-menu-frame');
+                if (iframe) {
+                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                    const style = iframeDoc.createElement('style');
+                    style.textContent = `
+                        .goog-te-menu2 {
+                            background: #1a1a1a !important;
+                            border: 1px solid #e3b341 !important;
+                        }
+                        .goog-te-menu2-item div,
+                        .goog-te-menu2-item-selected div {
+                            color: white !important;
+                            padding: 8px 16px !important;
+                            font-family: 'Montserrat', sans-serif !important;
+                        }
+                        .goog-te-menu2-item:hover {
+                            background: rgba(227, 179, 65, 0.1) !important;
+                        }
+                        .goog-te-menu2-item-selected {
+                            background: rgba(227, 179, 65, 0.2) !important;
+                        }
+                    `;
+                    iframeDoc.head.appendChild(style);
+                }
+            };
+            // Check for dropdown periodically
+            const translateInterval = setInterval(() => {
+                if (document.querySelector('.goog-te-menu-frame')) {
+                    styleTranslate();
+                    clearInterval(translateInterval);
+                }
+            }, 100);
         }
+    }
+    // Load Google Translate script if not already loaded
+    if (!window.google || !google.translate) {
+        const script = document.createElement('script');
+        script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+        script.async = true;
+        document.body.appendChild(script);
+    } else {
+        googleTranslateElementInit();
+    }
+    // Handle language changes
+    function handleLanguageChange() {
+        const currentLang = localStorage.getItem('googtrans');
+        if (currentLang) {
+            document.documentElement.lang = currentLang.split('/')[2] || 'en';
+        }
+    }
+    setInterval(handleLanguageChange, 1000);
+    // Rest of your existing code...
+const starsCount = 200;
     for (let i = 0; i < starsCount; i++) {
         const star = document.createElement('div');
         star.className = 'star';
         star.style.animationDelay = `${Math.random() * 3}s`;
         document.body.appendChild(star);
     }
+    // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();

style.css CHANGED Viewed

@@ -98,16 +98,19 @@ body::after {
     animation: pulseThanksgiving 3s infinite;
     box-shadow: 0 2px 10px rgba(146, 64, 14, 0.5);
 }
 /* Google Translate Widget Styles */
 #google_translate_element {
     z-index: 9999;
 }
 .goog-te-gadget {
     font-family: 'Montserrat', sans-serif !important;
-    color: transparent !important;
 }
 .goog-te-gadget-simple {
     background-color: rgba(0,0,0,0.7) !important;
     border: 1px solid #e3b341 !important;
@@ -115,41 +118,34 @@ body::after {
     padding: 4px 8px !important;
     backdrop-filter: blur(10px);
     height: 40px !important;
-    min-width: auto !important;
-    width: auto !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
 }
 .goog-te-menu-value {
     display: flex !important;
-    align-items: center;
 }
 .goog-te-menu-value span {
     color: white !important;
     font-size: 14px !important;
-    text-decoration: none !important;
 }
 .goog-te-menu-value img {
     display: none !important;
 }
-.goog-te-menu-value:before {
-    content: '\f0ac';
-    font-family: 'feather' !important;
-    color: #e3b341;
-    margin-right: 8px;
-    font-size: 16px;
-}
 .goog-te-menu-value:after {
-    content: '\f107';
-    font-family: 'feather' !important;
-    color: #e3b341;
     margin-left: 8px;
-    font-size: 16px;
 }
 /* Dropdown menu styles */
@@ -159,28 +155,6 @@ body::after {
     overflow: hidden !important;
     margin-top: 8px !important;
 }
-.goog-te-menu2 {
-    background-color: #1a1a1a !important;
-    border: 1px solid #333 !important;
-    color: white !important;
-    font-family: 'Montserrat', sans-serif !important;
-}
-.goog-te-menu2-item div,
-.goog-te-menu2-item-selected div {
-    color: white !important;
-    padding: 10px 16px !important;
-    font-size: 14px !important;
-}
-.goog-te-menu2-item:hover {
-    background-color: rgba(227, 179, 65, 0.1) !important;
-}
-.goog-te-menu2-item-selected {
-    background-color: rgba(227, 179, 65, 0.2) !important;
-}
 .feature-icon {
 width: 60px;
     height: 60px;

     animation: pulseThanksgiving 3s infinite;
     box-shadow: 0 2px 10px rgba(146, 64, 14, 0.5);
 }
 /* Google Translate Widget Styles */
 #google_translate_element {
     z-index: 9999;
+    position: fixed;
+    top: 10px;
+    right: 10px;
 }
 .goog-te-gadget {
     font-family: 'Montserrat', sans-serif !important;
+    color: white !important;
 }
 .goog-te-gadget-simple {
     background-color: rgba(0,0,0,0.7) !important;
     border: 1px solid #e3b341 !important;
     padding: 4px 8px !important;
     backdrop-filter: blur(10px);
     height: 40px !important;
 }
+.goog-te-combo {
+    background-color: transparent !important;
+    color: white !important;
+    border: none !important;
+    padding: 4px !important;
+    font-family: 'Montserrat', sans-serif !important;
+}
 .goog-te-menu-value {
     display: flex !important;
+    align-items: center !important;
 }
 .goog-te-menu-value span {
     color: white !important;
     font-size: 14px !important;
 }
 .goog-te-menu-value img {
     display: none !important;
 }
 .goog-te-menu-value:after {
+    content: '\25BE';
     margin-left: 8px;
+    color: #e3b341;
 }
 /* Dropdown menu styles */
     overflow: hidden !important;
     margin-top: 8px !important;
 }
 .feature-icon {
 width: 60px;
     height: 60px;