can you also add world wide sudjects ,all the laguege in the world to learn,and a buton for the user to decorate and style the wedsite,and can you make the wedsite provide infomation when the user did something wrong,and make a cute study companion to give small tips or cool fun facts about what their studying about,and they can custom the cute companion style to match their design of the wedsite
5ff6b98 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>World Languages | StudyBuddy Galaxy Explorer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/companion.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <study-navbar></study-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="mb-12"> | |
| <h1 class="text-4xl font-bold text-indigo-800 mb-6">World Languages 🌍</h1> | |
| <p class="text-lg text-gray-700 mb-8">Explore and learn languages from around the globe. Click on a language to start learning!</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="spanish"> | |
| <span class="flag">🇪🇸</span> | |
| <span>Spanish</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="french"> | |
| <span class="flag">🇫🇷</span> | |
| <span>French</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="german"> | |
| <span class="flag">🇩🇪</span> | |
| <span>German</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="mandarin"> | |
| <span class="flag">🇨🇳</span> | |
| <span>Mandarin</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="japanese"> | |
| <span class="flag">🇯🇵</span> | |
| <span>Japanese</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="arabic"> | |
| <span class="flag">🇸🇦</span> | |
| <span>Arabic</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="russian"> | |
| <span class="flag">🇷🇺</span> | |
| <span>Russian</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="hindi"> | |
| <span class="flag">🇮🇳</span> | |
| <span>Hindi</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="portuguese"> | |
| <span class="flag">🇵🇹</span> | |
| <span>Portuguese</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="italian"> | |
| <span class="flag">🇮🇹</span> | |
| <span>Italian</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="korean"> | |
| <span class="flag">🇰🇷</span> | |
| <span>Korean</span> | |
| </a> | |
| <a href="#" class="language-card bg-white hover:bg-indigo-50" data-lang="swahili"> | |
| <span class="flag">🇰🇪</span> | |
| <span>Swahili</span> | |
| </a> | |
| </div> | |
| </section> | |
| <section id="language-info" class="bg-white rounded-xl shadow-md p-6 hidden"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-4" id="lang-name">Language</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Quick Facts</h3> | |
| <ul class="space-y-2" id="lang-facts"> | |
| <!-- Facts will be inserted here --> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Basic Phrases</h3> | |
| <div class="space-y-3" id="basic-phrases"> | |
| <!-- Phrases will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| <script src="components/companion.js"></script> | |
| <script> | |
| feather.replace(); | |
| document.querySelectorAll('.language-card').forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const lang = this.getAttribute('data-lang'); | |
| loadLanguageInfo(lang); | |
| }); | |
| }); | |
| function loadLanguageInfo(lang) { | |
| const languageData = { | |
| spanish: { | |
| name: "Spanish (Español)", | |
| facts: [ | |
| "Native speakers: 485 million", | |
| "Language family: Romance", | |
| "Official in: 20 countries", | |
| "Fun fact: Spanish has two verbs for 'to be' (ser and estar)" | |
| ], | |
| phrases: [ | |
| "Hello - Hola", | |
| "Goodbye - Adiós", | |
| "Thank you - Gracias", | |
| "How are you? - ¿Cómo estás?" | |
| ] | |
| }, | |
| french: { | |
| name: "French (Français)", | |
| facts: [ | |
| "Native speakers: 77 million", | |
| "Language family: Romance", | |
| "Official in: 29 countries", | |
| "Fun fact: About 45% of English words come from French" | |
| ], | |
| phrases: [ | |
| "Hello - Bonjour", | |
| "Goodbye - Au revoir", | |
| "Thank you - Merci", | |
| "How are you? - Comment ça va?" | |
| ] | |
| } | |
| // More languages would be added here | |
| }; | |
| const data = languageData[lang] || { | |
| name: lang.charAt(0).toUpperCase() + lang.slice(1), | |
| facts: ["Information coming soon!"], | |
| phrases: ["Phrases coming soon!"] | |
| }; | |
| document.getElementById('lang-name').textContent = data.name; | |
| const factsList = document.getElementById('lang-facts'); | |
| factsList.innerHTML = data.facts.map(fact => | |
| `<li class="flex items-start"> | |
| <i data-feather="info" class="mr-2 text-indigo-500 w-4 h-4"></i> | |
| <span>${fact}</span> | |
| </li>` | |
| ).join(''); | |
| const phrasesList = document.getElementById('basic-phrases'); | |
| phrasesList.innerHTML = data.phrases.map(phrase => | |
| `<div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="font-medium">${phrase}</p> | |
| </div>` | |
| ).join(''); | |
| document.getElementById('language-info').classList.remove('hidden'); | |
| feather.replace(); | |
| } | |
| </script> | |
| <study-companion></study-companion> | |
| </body> | |
| </html> |