diff --git a/src/i18n.js b/src/i18n.js index 2c544dc..ff443dc 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -139,6 +139,20 @@ const translations = { landingCtaSub: "Free and open source. No account required. Progress saved locally.", landingCtaButton: "Begin Your Journey", + // Coming Soon + landingComingSoonTitle: "Coming Soon", + comingSoonSyncTitle: "Cloud Sync", + comingSoonSyncText: "Sync your progress across all devices. Start on desktop, continue on tablet.", + comingSoonAchievementsTitle: "Achievements", + comingSoonAchievementsText: "Earn badges as you master new skills. Track your learning milestones.", + comingSoonJsTitle: "JavaScript", + comingSoonJsText: "Interactive JavaScript lessons with live code execution and DOM manipulation.", + comingSoonFrameworksTitle: "Frameworks", + comingSoonFrameworksText: "React, Vue, and Svelte basics. Build real components step by step.", + + // Device Notice + deviceNotice: "Best on desktop or tablet (landscape). Mobile works, but larger screens make coding easier.", + // Footer footerModules: "Modules", footerResources: "Resources", @@ -292,6 +306,20 @@ const translations = { landingCtaSub: "Kostenlos und Open Source. Kein Konto erforderlich. Fortschritt wird lokal gespeichert.", landingCtaButton: "Jetzt erste Schritte machen", + // Coming Soon + landingComingSoonTitle: "Demnächst", + comingSoonSyncTitle: "Cloud-Sync", + comingSoonSyncText: "Synchronisiere deinen Fortschritt auf allen Geräten. Starte am Desktop, mach am Tablet weiter.", + comingSoonAchievementsTitle: "Erfolge", + comingSoonAchievementsText: "Verdiene Abzeichen beim Erlernen neuer Fähigkeiten. Verfolge deine Lernmeilensteine.", + comingSoonJsTitle: "JavaScript", + comingSoonJsText: "Interaktive JavaScript-Lektionen mit Live-Code-Ausführung und DOM-Manipulation.", + comingSoonFrameworksTitle: "Frameworks", + comingSoonFrameworksText: "React, Vue und Svelte Grundlagen. Baue echte Komponenten Schritt für Schritt.", + + // Device Notice + deviceNotice: "Am besten auf Desktop oder Tablet (Querformat). Mobil funktioniert, aber größere Bildschirme machen das Coden einfacher.", + // Footer footerModules: "Module", footerResources: "Ressourcen", @@ -445,6 +473,20 @@ const translations = { landingCtaSub: "Darmowe i open source. Bez konta. Postęp zapisywany lokalnie.", landingCtaButton: "Rozpocznij swoją podróż", + // Coming Soon + landingComingSoonTitle: "Wkrótce", + comingSoonSyncTitle: "Synchronizacja", + comingSoonSyncText: "Synchronizuj postępy na wszystkich urządzeniach. Zacznij na komputerze, kontynuuj na tablecie.", + comingSoonAchievementsTitle: "Osiągnięcia", + comingSoonAchievementsText: "Zdobywaj odznaki, ucząc się nowych umiejętności. Śledź swoje postępy.", + comingSoonJsTitle: "JavaScript", + comingSoonJsText: "Interaktywne lekcje JavaScript z wykonywaniem kodu na żywo i manipulacją DOM.", + comingSoonFrameworksTitle: "Frameworki", + comingSoonFrameworksText: "Podstawy React, Vue i Svelte. Buduj prawdziwe komponenty krok po kroku.", + + // Device Notice + deviceNotice: "Najlepiej na komputerze lub tablecie (poziomo). Na telefonie też działa, ale większy ekran ułatwia kodowanie.", + // Footer footerModules: "Moduły", footerResources: "Zasoby", @@ -600,6 +642,20 @@ const translations = { landingCtaSub: "Gratis y de código abierto. Sin cuenta requerida. Progreso guardado localmente.", landingCtaButton: "Comienza tu viaje", + // Coming Soon + landingComingSoonTitle: "Próximamente", + comingSoonSyncTitle: "Sincronización", + comingSoonSyncText: "Sincroniza tu progreso en todos tus dispositivos. Empieza en el escritorio, continúa en la tablet.", + comingSoonAchievementsTitle: "Logros", + comingSoonAchievementsText: "Gana insignias mientras dominas nuevas habilidades. Sigue tus hitos de aprendizaje.", + comingSoonJsTitle: "JavaScript", + comingSoonJsText: "Lecciones interactivas de JavaScript con ejecución de código en vivo y manipulación del DOM.", + comingSoonFrameworksTitle: "Frameworks", + comingSoonFrameworksText: "Fundamentos de React, Vue y Svelte. Construye componentes reales paso a paso.", + + // Device Notice + deviceNotice: "Mejor en escritorio o tablet (horizontal). Funciona en móvil, pero pantallas más grandes facilitan la programación.", + // Footer footerModules: "Módulos", footerResources: "Recursos", @@ -750,6 +806,20 @@ const translations = { landingCtaSub: "مجاني ومفتوح المصدر. لا حاجة لحساب. يُحفظ التقدم محليًا.", landingCtaButton: "ابدأ رحلتك", + // Coming Soon + landingComingSoonTitle: "قريباً", + comingSoonSyncTitle: "مزامنة سحابية", + comingSoonSyncText: "زامن تقدمك عبر جميع أجهزتك. ابدأ على الكمبيوتر، تابع على الجهاز اللوحي.", + comingSoonAchievementsTitle: "الإنجازات", + comingSoonAchievementsText: "احصل على شارات أثناء إتقانك لمهارات جديدة. تتبع معالم تعلمك.", + comingSoonJsTitle: "جافاسكريبت", + comingSoonJsText: "دروس تفاعلية في JavaScript مع تنفيذ مباشر للكود والتعامل مع DOM.", + comingSoonFrameworksTitle: "أطر العمل", + comingSoonFrameworksText: "أساسيات React وVue وSvelte. ابنِ مكونات حقيقية خطوة بخطوة.", + + // Device Notice + deviceNotice: "أفضل على الكمبيوتر أو الجهاز اللوحي (أفقي). يعمل على الجوال، لكن الشاشات الأكبر تسهّل البرمجة.", + // Footer footerModules: "الوحدات", footerResources: "الموارد", @@ -902,6 +972,20 @@ const translations = { landingCtaSub: "Безкоштовно та з відкритим кодом. Без реєстрації. Прогрес зберігається локально.", landingCtaButton: "Розпочни свою подорож", + // Coming Soon + landingComingSoonTitle: "Незабаром", + comingSoonSyncTitle: "Хмарна синхронізація", + comingSoonSyncText: "Синхронізуй прогрес на всіх пристроях. Почни на комп'ютері, продовжуй на планшеті.", + comingSoonAchievementsTitle: "Досягнення", + comingSoonAchievementsText: "Отримуй значки, освоюючи нові навички. Відстежуй свої навчальні віхи.", + comingSoonJsTitle: "JavaScript", + comingSoonJsText: "Інтерактивні уроки JavaScript з виконанням коду в реальному часі та маніпуляцією DOM.", + comingSoonFrameworksTitle: "Фреймворки", + comingSoonFrameworksText: "Основи React, Vue та Svelte. Створюй справжні компоненти крок за кроком.", + + // Device Notice + deviceNotice: "Найкраще на комп'ютері або планшеті (горизонтально). На телефоні теж працює, але більший екран полегшує програмування.", + // Footer footerModules: "Модулі", footerResources: "Ресурси", diff --git a/src/index.html b/src/index.html index 669bf95..a1c18f1 100644 --- a/src/index.html +++ b/src/index.html @@ -169,6 +169,38 @@ +
+

Coming Soon

+
+
+ 🔄 +

Cloud Sync

+

Sync your progress across all devices. Start on desktop, continue on tablet.

+
+
+ 🏆 +

Achievements

+

Earn badges as you master new skills. Track your learning milestones.

+
+
+ +

JavaScript

+

Interactive JavaScript lessons with live code execution and DOM manipulation.

+
+
+ 🧩 +

Frameworks

+

React, Vue, and Svelte basics. Build real components step by step.

+
+
+
+ +
+

+ Best on desktop or tablet (landscape). Mobile works, but larger screens make coding easier. +

+
+

Start Learning Today

Begin Your Journey diff --git a/src/main.css b/src/main.css index da4d04e..7423163 100644 --- a/src/main.css +++ b/src/main.css @@ -1890,6 +1890,91 @@ input:checked + .toggle-slider::before { } } +/* Coming Soon Section */ +.coming-soon { + margin-top: var(--spacing-xl); + text-align: center; +} + +.coming-soon h2 { + font-size: 1.5rem; + color: var(--primary-dark); + margin-bottom: var(--spacing-lg); +} + +.coming-soon-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--spacing-md); +} + +.coming-soon-card { + background: var(--panel-bg); + border-radius: var(--border-radius-md); + padding: 1.5rem 1rem; + text-align: center; + border: 1px dashed var(--border-color); + opacity: 0.85; + transition: opacity 0.2s, border-color 0.2s; +} + +.coming-soon-card:hover { + opacity: 1; + border-color: var(--section-color); +} + +.coming-soon-icon { + font-size: 2rem; + display: block; + margin-bottom: 0.75rem; +} + +.coming-soon-card h3 { + font-size: 1rem; + margin-bottom: 0.5rem; + color: var(--text-color); +} + +.coming-soon-card p { + font-size: 0.85rem; + color: var(--light-text); + line-height: 1.5; + margin: 0; +} + +@media (max-width: 900px) { + .coming-soon-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 500px) { + .coming-soon-grid { + grid-template-columns: 1fr; + } +} + +/* Device Notice */ +.device-notice { + margin-top: var(--spacing-lg); + text-align: center; + padding: 1rem; +} + +.device-notice p { + display: inline-block; + padding: 0.75rem 1.5rem; + background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1)); + border-radius: var(--border-radius-md); + color: var(--light-text); + font-size: 0.9rem; + margin: 0; +} + +.device-notice strong { + color: var(--text-color); +} + /* Landing CTA */ .landing-cta { text-align: center;