Spaces:

muboboev
/

quantumcode-ai-architect

Running

App Files Files Community

muboboev commited on 22 days ago

Commit

949f474

verified ·

1 Parent(s): 9e2b812

Подэтап 2.3 — Мультиязычность

Browse files

Внедрить Next-i18n.

Добавить локализации: RU, TJ, UZ, KG, EN, UA.

Автоматическая подстановка языка по IP / выбор вручную.

Files changed (5) hide show

auth.html +13 -4
data-architecture.html +12 -3
i18n-setup.js +111 -0
index.html +12 -3
select-role.html +13 -4

auth.html CHANGED Viewed

@@ -37,10 +37,16 @@
     <div class="container mx-auto px-4 py-12">
         <div class="max-w-md mx-auto glass-card p-8">
             <div class="text-center mb-8">
-                <div class="flex justify-center mb-4">
-                    <i data-feather="cpu" class="text-indigo-500 w-12 h-12"></i>
                 </div>
-                <h1 class="text-3xl font-bold gradient-text mb-2">Welcome to QuantumCode</h1>
                 <p class="text-slate-300">Sign in to continue</p>
             </div>
@@ -140,8 +146,11 @@
                     alert('Google sign-in failed: ' + error.message);
                 });
         });
         feather.replace();
-    </script>
 </body>
 </html>

     <div class="container mx-auto px-4 py-12">
         <div class="max-w-md mx-auto glass-card p-8">
             <div class="text-center mb-8">
+                <div class="flex justify-between items-center mb-4">
+                    <div class="flex items-center">
+                        <i data-feather="cpu" class="text-indigo-500 w-12 h-12"></i>
+                    </div>
+                    <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
+                        <i data-feather="globe" class="w-4 h-4 mr-1"></i>
+                        <span id="currentLang">EN</span>
+                    </a>
                 </div>
+<h1 class="text-3xl font-bold gradient-text mb-2">Welcome to QuantumCode</h1>
                 <p class="text-slate-300">Sign in to continue</p>
             </div>
                     alert('Google sign-in failed: ' + error.message);
                 });
         });
+        // Set initial language
+        document.getElementById('currentLang').textContent =
+            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
         feather.replace();
+</script>
 </body>
 </html>

data-architecture.html CHANGED Viewed

@@ -41,7 +41,13 @@
             <i data-feather="cpu" class="text-indigo-500"></i>
             <span class="text-xl font-bold gradient-text">QuantumCode</span>
         </div>
-            <div class="hidden md:flex space-x-8">
                 <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
                 <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
                 <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
@@ -155,9 +161,12 @@
             </p>
         </div>
     </footer>
     <script>
         feather.replace();
-    </script>
 </body>
 </html>

             <i data-feather="cpu" class="text-indigo-500"></i>
             <span class="text-xl font-bold gradient-text">QuantumCode</span>
         </div>
+        <div class="flex items-center space-x-2">
+            <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
+                <i data-feather="globe" class="w-4 h-4 mr-1"></i>
+                <span id="currentLang">EN</span>
+            </a>
+        </div>
+<div class="hidden md:flex space-x-8">
                 <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
                 <a href="index.html#features" class="hover:text-indigo-400 transition-colors">Features</a>
                 <a href="index.html#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
             </p>
         </div>
     </footer>
     <script>
+        // Set initial language
+        document.getElementById('currentLang').textContent =
+            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
         feather.replace();
+</script>
 </body>
 </html>

i18n-setup.js ADDED Viewed

	@@ -0,0 +1,111 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>i18n Setup | QuantumCode</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glass-card {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 1rem;
+        }
+        .language-option {
+            transition: all 0.2s ease;
+        }
+        .language-option:hover {
+            transform: scale(1.05);
+            background: rgba(124, 58, 237, 0.1);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center">
+    <div class="container mx-auto px-4 py-12">
+        <div class="max-w-md mx-auto glass-card p-8">
+            <div class="text-center mb-8">
+                <div class="flex justify-center mb-4">
+                    <i data-feather="globe" class="text-indigo-500 w-12 h-12"></i>
+                </div>
+                <h1 class="text-3xl font-bold gradient-text mb-2">Select Language</h1>
+                <p class="text-slate-300">Choose your preferred language</p>
+            </div>
+            <div class="grid grid-cols-2 gap-4 mb-8">
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="en">
+                    <img src="https://flagcdn.com/w20/gb.png" class="w-6 h-4 mr-3">
+                    <span>English</span>
+                </div>
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="ru">
+                    <img src="https://flagcdn.com/w20/ru.png" class="w-6 h-4 mr-3">
+                    <span>Русский</span>
+                </div>
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="tj">
+                    <img src="https://flagcdn.com/w20/tj.png" class="w-6 h-4 mr-3">
+                    <span>Тоҷикӣ</span>
+                </div>
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="uz">
+                    <img src="https://flagcdn.com/w20/uz.png" class="w-6 h-4 mr-3">
+                    <span>O'zbekcha</span>
+                </div>
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="kg">
+                    <img src="https://flagcdn.com/w20/kg.png" class="w-6 h-4 mr-3">
+                    <span>Кыргызча</span>
+                </div>
+                <div class="language-option flex items-center p-4 rounded-lg cursor-pointer border border-slate-700" data-lang="ua">
+                    <img src="https://flagcdn.com/w20/ua.png" class="w-6 h-4 mr-3">
+                    <span>Українська</span>
+                </div>
+            </div>
+            <div class="text-center">
+                <button id="confirmLanguage" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition-colors">
+                    Confirm Selection
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.querySelectorAll('.language-option').forEach(option => {
+            option.addEventListener('click', function() {
+                document.querySelectorAll('.language-option').forEach(opt => {
+                    opt.classList.remove('border-indigo-500', 'bg-indigo-900/20');
+                });
+                this.classList.add('border-indigo-500', 'bg-indigo-900/20');
+            });
+        });
+        document.getElementById('confirmLanguage').addEventListener('click', function() {
+            const selected = document.querySelector('.language-option.border-indigo-500');
+            if (selected) {
+                const lang = selected.getAttribute('data-lang');
+                document.cookie = `NEXT_LOCALE=${lang};path=/;max-age=31536000`;
+                window.location.href = window.location.pathname;
+            }
+        });
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -40,7 +40,13 @@
             <i data-feather="cpu" class="text-indigo-500"></i>
             <span class="text-xl font-bold gradient-text">QuantumCode</span>
         </div>
-            <div class="hidden md:flex space-x-8">
                 <a href="#" class="hover:text-indigo-400 transition-colors">Features</a>
                 <a href="#" class="hover:text-indigo-400 transition-colors">Roadmap</a>
                 <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
@@ -195,10 +201,13 @@
             </div>
         </div>
     </footer>
     <script>
         VANTA.GLOBE({
-            el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
             gyroControls: false,

             <i data-feather="cpu" class="text-indigo-500"></i>
             <span class="text-xl font-bold gradient-text">QuantumCode</span>
         </div>
+        <div class="flex items-center space-x-2">
+            <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
+                <i data-feather="globe" class="w-4 h-4 mr-1"></i>
+                <span id="currentLang">EN</span>
+            </a>
+        </div>
+<div class="hidden md:flex space-x-8">
                 <a href="#" class="hover:text-indigo-400 transition-colors">Features</a>
                 <a href="#" class="hover:text-indigo-400 transition-colors">Roadmap</a>
                 <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
             </div>
         </div>
     </footer>
     <script>
+        // Set initial language
+        document.getElementById('currentLang').textContent =
+            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
         VANTA.GLOBE({
+el: "#vanta-bg",
             mouseControls: true,
             touchControls: true,
             gyroControls: false,

select-role.html CHANGED Viewed

@@ -53,10 +53,16 @@
     <div class="container mx-auto px-4 py-12">
         <div class="max-w-2xl mx-auto glass-card p-8">
             <div class="text-center mb-8">
-                <div class="flex justify-center mb-4">
-                    <i data-feather="user" class="text-indigo-500 w-12 h-12"></i>
                 </div>
-                <h1 class="text-3xl font-bold gradient-text mb-2">Select Your Role</h1>
                 <p class="text-slate-300">Choose how you'll use QuantumCode</p>
             </div>
@@ -147,8 +153,11 @@
                 window.location.href = 'auth.html';
             }
         });
         feather.replace();
-    </script>
 </body>
 </html>

     <div class="container mx-auto px-4 py-12">
         <div class="max-w-2xl mx-auto glass-card p-8">
             <div class="text-center mb-8">
+                <div class="flex justify-between items-center mb-4">
+                    <div class="flex items-center">
+                        <i data-feather="user" class="text-indigo-500 w-12 h-12"></i>
+                    </div>
+                    <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
+                        <i data-feather="globe" class="w-4 h-4 mr-1"></i>
+                        <span id="currentLang">EN</span>
+                    </a>
                 </div>
+<h1 class="text-3xl font-bold gradient-text mb-2">Select Your Role</h1>
                 <p class="text-slate-300">Choose how you'll use QuantumCode</p>
             </div>
                 window.location.href = 'auth.html';
             }
         });
+        // Set initial language
+        document.getElementById('currentLang').textContent =
+            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
         feather.replace();
+</script>
 </body>
 </html>