// src/App.jsx - 20-language i18n + safer providers (fonts unified + title icons) // ---------- Error Boundary（支持20语言） ---------- class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error('ErrorBoundary caught an error:', error, errorInfo?.componentStack); } render() { const getLang = () => { try { if (typeof useLanguage === 'function') { const ctx = useLanguage(); if (ctx?.language) return ctx.language; } } catch {} try { const saved = localStorage.getItem('metronome-language'); if (saved) return saved; } catch {} return 'en'; }; const lang = getLang(); const tt = (key, fallback) => { try { if (typeof t === 'function') return t(key, lang) || t(key, 'en') || fallback || key; } catch {} return fallback || key; }; if (this.state.hasError) { return React.createElement('div', { className: 'min-h-screen flex items-center justify-center bg-gray-50' }, React.createElement('div', { className: 'text-center' }, [ React.createElement('h1', { key: 'title', className: 'text-2xl font-bold text-gray-900 mb-4' }, tt('appErrorTitle', 'Something went wrong')), React.createElement('p', { key: 'message', className: 'text-gray-600 mb-4' }, tt('appErrorMessage', 'Please refresh the page and try again.')), React.createElement('button', { key: 'button', onClick: () => window.location.reload(), className: 'cute-button bg-[var(--primary-color)]' }, tt('refreshPage', 'Refresh Page')) ])); } return this.props.children; } } const SEO_TEXTS = { online: { "en": { title: "Online Metronome – Free, Accurate & Easy to Use", subtitle: "Use this free online metronome for piano, guitar, drums and more with precise BPM and clear beats.", sectionTitle: "How to use this online metronome", bullets: [ "Start slow and focus on clean, even notes.", "Increase BPM gradually by 2–4 steps at a time.", "Use different time signatures to match your music." ] }, "zh": { title: "在线节拍器 – 免费、精准、简单易用", subtitle: "免费在线节拍器适用于钢琴、吉他、架子鼓等练习，具有精准 BPM 和清晰节拍提示", sectionTitle: "如何使用在线节拍器", bullets: [ "从慢速开始，专注于稳定均匀的音符。", "每次将 BPM 逐渐提高 2–4 个速度档位。", "根据曲风选择不同拍号（如 3/4、4/4、6/8）。" ] }, "zh-TW": { title: "線上節拍器 – 免費、精準、操作簡單", subtitle: "適用於鋼琴、吉他、爵士鼓等樂器練習，提供精準 BPM 與清晰節拍提示。", sectionTitle: "如何使用線上節拍器", bullets: [ "從慢速開始，專注於音符的穩定與均勻。", "每次將 BPM 逐步提升 2–4 個速度。", "依照曲風選擇適合的拍號（如 3/4、4/4、6/8）。" ] }, "es": { title: "Metrónomo Online – Gratis, Preciso y Fácil de Usar", subtitle: "Usa este metrónomo online para piano, guitarra, batería y más, con BPM preciso y pulsos claros.", sectionTitle: "Cómo usar este metrónomo online", bullets: [ "Comienza lento y concéntrate en notas limpias y uniformes.", "Aumenta el BPM gradualmente en pasos de 2–4.", "Usa diferentes compases según el estilo musical." ] }, "fr": { title: "Métronome en Ligne – Gratuit, Précis et Simple d’Utilisation", subtitle: "Un métronome idéal pour piano, guitare, batterie et plus, avec un BPM précis et des battements clairs.", sectionTitle: "Comment utiliser ce métronome en ligne", bullets: [ "Commencez lentement et concentrez-vous sur des notes régulières.", "Augmentez progressivement le BPM de 2 à 4 crans.", "Essayez différentes mesures selon votre morceau." ] }, "de": { title: "Online-Metronom – Kostenlos, Präzise & Einfach zu Bedienen", subtitle: "Ein präzises Metronom für Klavier, Gitarre, Schlagzeug und mehr – klare Schläge, exakte BPM.", sectionTitle: "Wie man dieses Online-Metronom benutzt", bullets: [ "Beginne langsam und achte auf saubere, gleichmäßige Töne.", "Erhöhe das BPM schrittweise um 2–4 Punkte.", "Nutze unterschiedliche Taktarten passend zur Musik." ] }, "it": { title: "Metronomo Online – Gratis, Preciso e Facile da Usare", subtitle: "Un metronomo preciso per pianoforte, chitarra, batteria e altro, con BPM accurato e battiti chiari.", sectionTitle: "Come usare questo metronomo online", bullets: [ "Inizia lentamente e concentra l’attenzione su note pulite.", "Aumenta il BPM poco alla volta, 2–4 alla volta.", "Utilizza diverse indicazioni di tempo in base al brano." ] }, "pt": { title: "Metrônomo Online – Grátis, Preciso e Fácil de Usar", subtitle: "Use este metrônomo online para piano, guitarra, bateria e muito mais, com BPM preciso e batidas claras.", sectionTitle: "Como usar este metrônomo online", bullets: [ "Comece devagar e concentre-se em notas limpas.", "Aumente o BPM gradualmente em passos de 2–4.", "Use diferentes compassos conforme o estilo da música." ] }, "ru": { title: "Онлайн Метроном – Бесплатный, Точный и Удобный", subtitle: "Подходит для фортепиано, гитары, ударных и других инструментов. Точный BPM и четкие удары.", sectionTitle: "Как использовать этот онлайн-метроном", bullets: [ "Начинайте медленно, сосредотачиваясь на ровной игре.", "Повышайте BPM постепенно на 2–4 единицы.", "Выбирайте подходящий размер в зависимости от музыки." ] }, "ja": { title: "オンラインメトロノーム – 無料で正確、使いやすい", subtitle: "ピアノ・ギター・ドラムなどあらゆる楽器に対応し、正確な BPM と分かりやすいビートを提供します。", sectionTitle: "オンラインメトロノームの使い方", bullets: [ "ゆっくりしたテンポから始め、均一な音を意識する。", "BPM は 2〜4 ずつ徐々に上げる。", "曲調に合わせて 3/4・4/4・6/8 などを使い分ける。" ] }, "ko": { title: "온라인 메트로놈 – 무료, 정확하고 사용하기 쉬움", subtitle: "피아노, 기타, 드럼 등 다양한 연습에 활용할 수 있는 정확한 BPM과 명확한 비트 제공합니다.", sectionTitle: "이 온라인 메트로놈 사용 방법", bullets: [ "느린 템포에서 시작하며 고른 소리를 유지하세요.", "BPM 은 2–4씩 점차 올립니다.", "음악 스타일에 맞는 박자를 선택하세요." ] }, "hi": { title: "ऑनलाइन मेट्रोनोम – मुफ़्त, सटीक और उपयोग में आसान", subtitle: "पियानो, गिटार, ड्रम और अन्य वाद्यों के अभ्यास के लिए एक सटीक BPM और स्पष्ट बीट वाला मेट्रोनोम।", sectionTitle: "इस ऑनलाइन मेट्रोनोम का उपयोग कैसे करें", bullets: [ "धीमी गति से शुरू करें और समान सुरों पर ध्यान दें।", "BPM को 2–4 की वृद्धि में धीरे-धीरे बढ़ाएँ।", "संगीत की शैली के अनुसार ताल चुनें।" ] }, "id": { title: "Metronom Online – Gratis, Akurat & Mudah Digunakan", subtitle: "Cocok untuk latihan piano, gitar, drum, dan lainnya dengan BPM yang akurat dan ketukan yang jelas.", sectionTitle: "Cara menggunakan metronom online ini", bullets: [ "Mulai dengan tempo lambat dan fokus pada nada yang stabil.", "Tingkatkan BPM secara bertahap 2–4 langkah.", "Gunakan tanda birama berbeda sesuai jenis musik." ] }, "bg": { title: "Онлайн Метроном – Безплатен, Точен и Лесен за Ползване", subtitle: "Подходящ за пиано, китара, барабани и други. Осигурява точен BPM и ясен ритъм.", sectionTitle: "Как да използвате този онлайн метроном", bullets: [ "Започнете бавно и се стремете към равномерни тонове.", "Увеличавайте BPM постепенно с по 2–4 стъпки.", "Избирайте подходящ размер според музиката." ] }, "da": { title: "Online Metronom – Gratis, Præcis og Nem at Bruge", subtitle: "Perfekt til øvelse på klaver, guitar, trommer og mere med præcis BPM og tydelige slag.", sectionTitle: "Sådan bruger du denne online metronom", bullets: [ "Start langsomt og fokuser på jævne toner.", "Øg BPM gradvist med 2–4 trin.", "Brug forskellige taktarter afhængigt af musikken." ] }, "pl": { title: "Metronom Online – Darmowy, Dokładny i Łatwy w Użyciu", subtitle: "Idealny do ćwiczeń na pianinie, gitarze, perkusji i innych instrumentach. Zapewnia precyzyjny BPM i wyraźny puls.", sectionTitle: "Jak korzystać z tego metronomu online", bullets: [ "Zacznij od wolnego tempa i dbaj o równe dźwięki.", "Stopniowo zwiększaj BPM o 2–4 jednostki.", "Dostosuj metrum do rodzaju muzyki." ] }, "sv": { title: "Online Metronom – Gratis, Exakt och Lätt att Använda", subtitle: "Perfekt för piano, gitarr, trummor och mer, med exakt BPM och tydliga slag.", sectionTitle: "Hur du använder denna online-metronom", bullets: [ "Börja långsamt och fokusera på jämna toner.", "Öka BPM gradvis med 2–4 steg.", "Använd olika taktarter beroende på musikstil." ] }, "vi": { title: "Máy Đếm Nhịp Online – Miễn Phí, Chính Xác & Dễ Dùng", subtitle: "Phù hợp cho luyện piano, guitar, trống và nhiều hơn nữa, với BPM chính xác và nhịp rõ ràng.", sectionTitle: "Cách sử dụng máy đếm nhịp online", bullets: [ "Bắt đầu từ tempo chậm và giữ nhịp ổn định.", "Tăng BPM dần dần 2–4 mức.", "Chọn nhịp phù hợp với phong cách âm nhạc." ] }, "tr": { title: "Çevrimiçi Metronom – Ücretsiz, Doğru ve Kullanımı Kolay", subtitle: "Piyano, gitar, davul ve daha fazlası için ideal; net vuruşlar ve doğru BPM sunar.", sectionTitle: "Bu çevrimiçi metronom nasıl kullanılır", bullets: [ "Yavaş başlayın ve temiz, dengeli notalara odaklanın.", "BPM’i 2–4 adım artırarak ilerleyin.", "Müziğe uygun zaman ölçüsünü seçin." ] }, "uk": { title: "Онлайн Метроном – Безкоштовний, Точний і Зручний", subtitle: "Підходить для фортепіано, гітари, ударних тощо. Має точний BPM і чіткі удари.", sectionTitle: "Як користуватися цим онлайн-метрономом", bullets: [ "Починайте повільно та слідкуйте за рівномірним звуком.", "Поступово підвищуйте BPM на 2–4 одиниці.", "Обирайте розмір, який відповідає вашій музиці." ] } }, piano: { "en": { title: "Metronome for Piano Practice – Improve Timing & Technique", subtitle: "Practice scales, Hanon, Czerny and repertoire with a stable BPM and clear downbeats.", sectionTitle: "Suggested piano practice with a metronome", bullets: [ "Scales: 60–80 BPM, then slowly increase as you build control.", "Hanon: start at 72 BPM and add 2–4 BPM over time.", "Break difficult passages into 1–2 bar chunks for accuracy." ] }, "zh": { title: "钢琴节拍器 – 提升节奏感与演奏技巧", subtitle: "用稳定的节拍练习音阶、哈农、车尔尼与乐曲，更容易保持均匀与准确。", sectionTitle: "钢琴练习中如何使用节拍器", bullets: [ "音阶练习：从 60–80 BPM 开始，熟练后逐渐提高速度。", "哈农：建议从 72 BPM 起练，每次递增 2–4 BPM。", "遇到难句子，可拆成 1–2 小节循环练习以提升准确度。" ] }, "zh-TW": { title: "鋼琴節拍器 – 提升節奏感與演奏技巧", subtitle: "利用穩定節拍練習音階、哈農、車爾尼與曲子，更容易維持均勻和精準。", sectionTitle: "鋼琴練習如何搭配節拍器", bullets: [ "音階練習：從 60–80 BPM 開始，熟練後再慢慢加快。", "哈農：建議從 72 BPM 開始，每次增加 2–4 BPM。", "困難段落可拆成 1–2 小節反覆練習，效率更高。" ] }, "es": { title: "Metrónomo para Piano – Mejora tu técnica y precisión rítmica", subtitle: "Practica escalas, Hanon, Czerny y repertorio con un BPM estable y golpes claros.", sectionTitle: "Cómo practicar piano con metrónomo", bullets: [ "Escalas: comienza en 60–80 BPM y aumenta gradualmente.", "Hanon: empieza a 72 BPM y sube 2–4 BPM cada cierto tiempo.", "Divide pasajes difíciles en fragmentos de 1–2 compases." ] }, "fr": { title: "Métronome pour Piano – Améliorez votre précision et votre technique", subtitle: "Travaillez gammes, Hanon, Czerny et morceaux avec un tempo stable et des temps clairs.", sectionTitle: "Conseils pour pratiquer le piano avec un métronome", bullets: [ "Gammes : commencez à 60–80 BPM puis augmentez progressivement.", "Hanon : démarrez à 72 BPM et ajoutez 2–4 BPM au fil du temps.", "Découpez les passages difficiles en sections de 1–2 mesures." ] }, "de": { title: "Klavier-Metronom – Verbessere dein Timing und deine Technik", subtitle: "Übe Tonleitern, Hanon, Czerny und Stücke mit stabilem Tempo und klaren Zählzeiten.", sectionTitle: "So übst du Klavier effektiv mit einem Metronom", bullets: [ "Tonleitern: beginne bei 60–80 BPM und steigere langsam.", "Hanon: starte bei 72 BPM und erhöhe alle paar Minuten um 2–4 BPM.", "Zerlege schwierige Passagen in 1–2 Takt lange Abschnitte." ] }, "it": { title: "Metronomo per Pianoforte – Migliora Tecnica e Precisione Ritmica", subtitle: "Esercitati con scale, Hanon, Czerny e brani mantenendo un BPM stabile e battiti chiari.", sectionTitle: "Come esercitarsi al pianoforte con il metronomo", bullets: [ "Scale: parti da 60–80 BPM e aumenta gradualmente.", "Hanon: inizia a 72 BPM e aggiungi 2–4 BPM nel tempo.", "Dividi i passaggi difficili in sezioni di 1–2 misure." ] }, "pt": { title: "Metrônomo para Piano – Melhore Técnica e Precisão Rítmica", subtitle: "Pratique escalas, Hanon, Czerny e repertório com BPM estável e batidas claras.", sectionTitle: "Como treinar piano usando o metrônomo", bullets: [ "Escalas: comece em 60–80 BPM e aumente aos poucos.", "Hanon: comece em 72 BPM e acrescente 2–4 BPM periodicamente.", "Divida trechos difíceis em partes de 1–2 compassos." ] }, "ru": { title: "Метроном для Фортепиано – Улучшайте технику и чувство ритма", subtitle: "Тренируйте гаммы, Ханон, Черни и произведения с ровным темпом и чёткими долями.", sectionTitle: "Как эффективно заниматься на пианино с метрономом", bullets: [ "Гаммы: начинайте с 60–80 BPM и повышайте постепенно.", "Ханон: начинайте с 72 BPM, увеличивая на 2–4 BPM.", "Сложные места разбивайте на фразы по 1–2 такта." ] }, "ja": { title: "ピアノ練習用メトロノーム – リズム感と演奏技術を向上", subtitle: "音階・ハノン・チェルニー・レパートリーを安定したテンポで練習できます。", sectionTitle: "メトロノームを使ったピアノ練習方法", bullets: [ "音階：60〜80 BPM から始め、慣れたら少しずつテンポを上げる。", "ハノン：72 BPM から始め、2〜4 BPM ずつ増やす。", "難しい部分は 1〜2 小節ごとに区切って練習する。" ] }, "ko": { title: "피아노 메트로놈 – 리듬감과 연주 기술 향상", subtitle: "음계, 하농, 체르니, 곡 연습을 안정적인 템포로 정확하게 연습하세요.", sectionTitle: "메트로놈을 활용한 피아노 연습 방법", bullets: [ "음계: 60–80 BPM에서 시작하여 점차 증가시키기.", "하농: 72 BPM에서 시작해 2–4 BPM씩 올리기.", "어려운 구간은 1–2마디로 나누어 반복 연습." ] }, "hi": { title: "पियानो मेट्रोनोम – रिदम और तकनीक को बेहतर बनाएं", subtitle: "इससे स्केल, हैनन, चेर्नी और रचनाएँ स्थिर BPM पर अभ्यास की जा सकती हैं।", sectionTitle: "पियानो पर मेट्रोनोम के साथ कैसे अभ्यास करें", bullets: [ "स्केल: 60–80 BPM से शुरू करें और धीरे-धीरे गति बढ़ाएँ।", "हैनन: 72 BPM से शुरू करें और 2–4 BPM बढ़ाएँ।", "कठिन हिस्सों को 1–2 मात्राओं में बाँटकर अभ्यास करें।" ] }, "id": { title: "Metronom Piano – Tingkatkan Ritme & Teknik Bermain", subtitle: "Latihan tangga nada, Hanon, Czerny, dan lagu dengan tempo yang stabil.", sectionTitle: "Cara latihan piano dengan metronom", bullets: [ "Tangga nada: mulai di 60–80 BPM lalu tingkatkan perlahan.", "Hanon: mulai di 72 BPM lalu naikkan 2–4 BPM.", "Bagian sulit dapat dipotong menjadi 1–2 birama untuk dilatih." ] }, "bg": { title: "Метро̀ном за пиано – Подобрете ритъма и техниката си", subtitle: "Упражнявайте гами, Ханон, Черни и пиеси със стабилен темп и ясни удари.", sectionTitle: "Как да използвате метроном при пиано практика", bullets: [ "Гами: започнете от 60–80 BPM и увеличавайте постепенно.", "Ханон: започнете от 72 BPM, добавяйки по 2–4 BPM.", "Разделяйте трудните части на 1–2 такта." ] }, "da": { title: "Piano Metronom – Forbedr Rytme og Teknik", subtitle: "Øv skalaer, Hanon, Czerny og stykker med stabil BPM og tydelige slag.", sectionTitle: "Sådan øver du klaver med metronom", bullets: [ "Skalaer: start ved 60–80 BPM og øg gradvist.", "Hanon: start ved 72 BPM og læg 2–4 BPM til over tid.", "Opdel svære passager i bidder på 1–2 takter." ] }, "pl": { title: "Metronom do Fortepianu – Popraw Rytm i Technikę", subtitle: "Ćwicz gamy, Hanona, Czerny’ego i utwory przy stałym tempie.", sectionTitle: "Jak ćwiczyć grę na fortepianie z metronomem", bullets: [ "Gamy: zaczynaj od 60–80 BPM i zwiększaj stopniowo.", "Hanon: startuj od 72 BPM, zwiększając o 2–4 BPM.", "Dziel trudne miejsca na 1–2 taktowe fragmenty." ] }, "sv": { title: "Pianometronom – Förbättra Rytm och Teknik", subtitle: "Öva skalor, Hanon, Czerny och stycken i ett stabilt tempo.", sectionTitle: "Så här övar du piano med metronom", bullets: [ "Skalor: börja på 60–80 BPM och öka gradvis.", "Hanon: börja på 72 BPM och höj 2–4 BPM över tid.", "Dela svåra delar i bitar på 1–2 takter." ] }, "vi": { title: "Máy Đếm Nhịp Cho Piano – Cải thiện nhịp và kỹ thuật", subtitle: "Luyện gam, Hanon, Czerny và bài nhạc với tempo ổn định.", sectionTitle: "Cách luyện piano với máy đếm nhịp", bullets: [ "Gam: bắt đầu ở 60–80 BPM rồi tăng dần.", "Hanon: bắt đầu ở 72 BPM, mỗi lần tăng 2–4 BPM.", "Chia đoạn khó thành cụm 1–2 ô nhịp để luyện." ] }, "tr": { title: "Piyano Metronomu – Ritim ve Teknik Geliştirme", subtitle: "Gamlar, Hanon, Czerny ve parçaları sabit tempo ile çalışın.", sectionTitle: "Metronomla piyano nasıl çalışılır?", bullets: [ "Gamlar: 60–80 BPM ile başlayıp yavaş yavaş artırın.", "Hanon: 72 BPM’den başlayıp 2–4 BPM yükseltin.", "Zor bölümleri 1–2 ölçülük parçalara ayırın." ] }, "uk": { title: "Фортепіанний Метроном – Покращуйте Ритм і Техніку", subtitle: "Тренуйте гами, Ханон, Черні та твори в стабільному темпі.", sectionTitle: "Як тренуватися на фортепіано з метрономом", bullets: [ "Гами: починайте з 60–80 BPM і збільшуйте поступово.", "Ханон: починайте з 72 BPM, додаючи 2–4 BPM.", "Діліть складні місця на фрази по 1–2 такти." ] } }, guitar: { "en": { title: "Guitar Metronome – Keep Perfect Rhythm for Strumming & Solos", subtitle: "Tighten your rhythm for chord changes, strumming patterns and solos with a clear and steady click.", sectionTitle: "Guitar practice ideas with a metronome", bullets: [ "Chord changes: practice at 70–80 BPM to build smooth transitions.", "Strumming patterns: try 90–120 BPM for groove and stability.", "Short solo phrases: loop small segments at a slow BPM until clean." ] }, "zh": { title: "吉他节拍器 – 提升扫弦与独奏的节奏稳定性", subtitle: "在和弦转换、扫弦型、以及独奏练习中保持稳定节奏，让演奏更紧凑。", sectionTitle: "吉他使用节拍器的练习方法", bullets: [ "和弦转换：以 70–80 BPM 打基础，使换和弦更顺畅。", "扫弦模式：尝试 90–120 BPM，增强律动感。", "短独奏句：将难点拆成小段，在慢速循环练习直到干净。" ] }, "zh-TW": { title: "吉他節拍器 – 提升掃弦與獨奏的節奏穩定度", subtitle: "在和弦轉換、掃弦節奏與獨奏中保持穩定節拍，讓演奏更準確。", sectionTitle: "吉他搭配節拍器的練習方式", bullets: [ "和弦轉換：以 70–80 BPM 開始，使換和弦更自然。", "掃弦節奏：可使用 90–120 BPM 增加律動感。", "獨奏片段：將樂句分段，在慢速下反覆練習。" ] }, "es": { title: "Metrónomo para Guitarra – Ritmo Perfecto para Rasgueos y Solos", subtitle: "Mejora el ritmo en cambios de acordes, patrones de rasgueo y solos con un clic claro y estable.", sectionTitle: "Ideas para practicar guitarra con metrónomo", bullets: [ "Cambios de acordes: practica a 70–80 BPM para transiciones suaves.", "Rasgueos: usa 90–120 BPM para mejorar el groove.", "Líneas de solo: repite pequeñas frases a un BPM lento hasta que suenen limpias." ] }, "fr": { title: "Métronome pour Guitare – Un Rythme Parfait pour Strumming & Solos", subtitle: "Améliorez vos changements d’accords, vos motifs de strumming et vos solos avec un clic clair et stable.", sectionTitle: "Exercices de guitare avec un métronome", bullets: [ "Changements d’accords : travaillez à 70–80 BPM pour gagner en fluidité.", "Strumming : essayez 90–120 BPM pour plus de groove.", "Phrases de solo : répétez de petits segments à tempo lent." ] }, "de": { title: "Gitarren-Metronom – Perfektes Timing für Strumming & Soli", subtitle: "Verbessere Rhythmus, Akkordwechsel und Solospiel mit klaren und stabilen Klicks.", sectionTitle: "Gitarrenübungen mit dem Metronom", bullets: [ "Akkordwechsel: übe bei 70–80 BPM für flüssige Übergänge.", "Strumming: nutze 90–120 BPM für mehr Groove.", "Solophrasen: wiederhole kleine Abschnitte langsam, bis sie sauber sind." ] }, "it": { title: "Metronomo per Chitarra – Ritmo Perfetto per Strumming e Assoli", subtitle: "Migliora cambi di accordi, schemi di strumming e assoli con un click chiaro e stabile.", sectionTitle: "Esercizi di chitarra con il metronomo", bullets: [ "Cambi di accordi: esercitati a 70–80 BPM per transizioni fluide.", "Strumming: usa 90–120 BPM per migliorare il groove.", "Frasi di assolo: ripeti piccoli segmenti a tempo lento finché non sono puliti." ] }, "pt": { title: "Metrônomo para Guitarra – Ritmo Perfeito para Batidas e Solos", subtitle: "Melhore trocas de acordes, padrões de batida e solos com um clique estável.", sectionTitle: "Como praticar guitarra com metrônomo", bullets: [ "Troca de acordes: pratique a 70–80 BPM.", "Batidas: use 90–120 BPM para aprimorar o groove.", "Frases de solo: repita trechos curtos em BPM lento até ficarem limpos." ] }, "ru": { title: "Метроном для Гитары – Идеальный Ритм для Боя и Соло", subtitle: "Улучшайте смену аккордов, ритмику боя и соло благодаря чёткому стабильному клику.", sectionTitle: "Идеи для гитарной практики с метрономом", bullets: [ "Смена аккордов: 70–80 BPM для плавности.", "Бой: 90–120 BPM для лучшего грува.", "Соло-фразы: повторяйте небольшие отрезки на медленном темпе." ] }, "ja": { title: "ギターメトロノーム – ストロークやソロのリズムを安定させる", subtitle: "コードチェンジやストローク練習、ソロの正確さを向上させるための安定したクリック音。", sectionTitle: "メトロノームを使ったギター練習法", bullets: [ "コードチェンジ：70〜80 BPM で安定感を養う。", "ストローク：90〜120 BPM でグルーヴ感を強化。", "短いソロフレーズ：ゆっくりしたテンポで繰り返し練習。" ] }, "ko": { title: "기타 메트로놈 – 스트로크와 솔로를 위한 완벽한 리듬", subtitle: "코드 전환, 스트로크 패턴, 솔로 연주에서 안정적인 리듬을 유지하세요.", sectionTitle: "메트로놈을 활용한 기타 연습 방법", bullets: [ "코드 전환: 70–80 BPM으로 자연스러운 전환 연습.", "스트로크: 90–120 BPM으로 그루브 강화.", "솔로 구간: 짧게 나누어 느린 템포로 반복." ] }, "hi": { title: "गिटार मेट्रोनोम – स्ट्रमिंग और सोलो के लिए परफेक्ट रिदम", subtitle: "कोर्ड बदलाव, स्ट्रमिंग पैटर्न और सोलो में बेहतर रिदम के लिए स्थिर क्लिक का उपयोग करें।", sectionTitle: "मेट्रोनोम के साथ गिटार अभ्यास के तरीके", bullets: [ "कोर्ड बदलना: 70–80 BPM पर अभ्यास करें।", "स्ट्रमिंग पैटर्न: 90–120 BPM पर ग्रूव बेहतर होता है।", "सोलो लाइन्स: छोटे भागों को धीमे टेम्पो में दोहराएँ।" ] }, "id": { title: "Metronom Gitar – Ritme Sempurna untuk Strumming & Solo", subtitle: "Perbaiki perpindahan akor, pola strumming, dan solo dengan ketukan stabil.", sectionTitle: "Cara berlatih gitar dengan metronom", bullets: [ "Perpindahan akor: berlatih pada 70–80 BPM.", "Strumming: gunakan 90–120 BPM untuk groove.", "Frasa solo: ulangi bagian kecil pada BPM lambat." ] }, "bg": { title: "Метро̀ном за Китара – Идеален Ритъм за Акорди и Соло", subtitle: "Подобрете смяната на акорди, ритмиката и солата с ясен и стабилен клик.", sectionTitle: "Упражнения за китара с метроном", bullets: [ "Смяна на акорди: 70–80 BPM за плавност.", "Ритъм: 90–120 BPM за по-добър груув.", "Соло части: тренирайте кратки фрази бавно и чисто." ] }, "da": { title: "Guitar Metronom – Perfekt Rytme til Strumming & Solo", subtitle: "Forbedr akkordskift, strummingmønstre og soloer med en stabil kliklyd.", sectionTitle: "Guitarøvelser med metronom", bullets: [ "Akkordskift: øv ved 70–80 BPM.", "Strumming: brug 90–120 BPM for bedre groove.", "Sololinjer: gentag små bidder ved langsomt tempo." ] }, "pl": { title: "Metronom do Gitary – Idealny Rytm do Strumów i Solówek", subtitle: "Popraw przejścia akordowe, rytm strummingowy i solówki dzięki wyraźnym kliknięciom.", sectionTitle: "Jak ćwiczyć gitarę z metronomem", bullets: [ "Zmiany akordów: ćwicz w tempie 70–80 BPM.", "Strumming: używaj 90–120 BPM.", "Solówki: powtarzaj krótkie fragmenty w wolnym tempie." ] }, "sv": { title: "Gitarrmetronom – Perfekt Rytm för Strumming & Solon", subtitle: "Förbättra ackordbyten, strummingmönster och solon med tydliga och stabila slag.", sectionTitle: "Gitarrövningar med metronom", bullets: [ "Ackordbyten: träna i 70–80 BPM.", "Strumming: prova 90–120 BPM för groove.", "Solon: repetera små delar i långsamt tempo." ] }, "vi": { title: "Máy Đếm Nhịp Cho Guitar – Nhịp Hoàn Hảo Cho Strumming & Solo", subtitle: "Cải thiện chuyển hợp âm, nhịp strumming và solo với nhịp click ổn định.", sectionTitle: "Cách luyện guitar với máy đếm nhịp", bullets: [ "Chuyển hợp âm: tập ở 70–80 BPM để mượt mà hơn.", "Strumming: nên tập ở 90–120 BPM để có groove.", "Solo ngắn: chia đoạn và tập chậm cho sạch." ] }, "tr": { title: "Gitar Metronomu – Ritim ve Solo İçin Mükemmel Uyum", subtitle: "Akor geçişleri, ritim kalıpları ve soloları sabit bir tıklama ile geliştirin.", sectionTitle: "Metronom ile gitar pratik önerileri", bullets: [ "Akor geçişleri: 70–80 BPM ile çalışın.", "Ritim: 90–120 BPM groove için idealdir.", "Solo bölümleri: kısa parçaları yavaş tempoda tekrarlayın." ] }, "uk": { title: "Метроном для Гітари – Ідеальний Ритм для Струмінгу та Соло", subtitle: "Покращуйте зміну акордів, ритмічні малюнки й соло завдяки стабільному кліку.", sectionTitle: "Як тренувати гітару з метрономом", bullets: [ "Зміна акордів: тренуйте при 70–80 BPM.", "Струмінг: 90–120 BPM для кращого груву.", "Соло-фрази: повторюйте короткі відрізки на повільному темпі." ] } }, kids: { "en": { title: "Metronome for Kids – Cute, Simple & Fun Rhythm Trainer", subtitle: "A kid-friendly metronome with fun visuals and easy controls, perfect for young beginners learning rhythm.", sectionTitle: "Tips for practicing rhythm with kids", bullets: [ "Keep sessions short (5–10 minutes) to maintain focus.", "Clap, walk or tap together with the beat before using instruments.", "Let children choose their favorite tempo and fun emoji to stay motivated." ] }, "zh": { title: "儿童节拍器 – 可爱、有趣、简单易用的节奏训练", subtitle: "专为 4–12 岁孩子设计的节拍器，界面可爱、操作简单，让孩子轻松学节奏。", sectionTitle: "儿童节奏练习的小技巧", bullets: [ "练习时间控制在 5–10 分钟，避免孩子疲劳。", "先让孩子跟着节拍拍手、走步，再尝试用乐器。", "让孩子自己选择喜欢的节奏速度和表情图案，提升兴趣。" ] }, "zh-TW": { title: "兒童節拍器 – 可愛、有趣、好上手的節奏工具", subtitle: "為 4–12 歲孩童打造的節拍器，可愛界面、簡單操作，輕鬆培養節奏感。", sectionTitle: "兒童節奏練習技巧", bullets: [ "每次練習 5–10 分鐘，保持專注且不疲倦。", "先跟著節拍拍手、踏步，再慢慢加入樂器。", "讓孩子選擇喜歡的速度與可愛圖示，提升練習動力。" ] }, "es": { title: "Metrónomo para Niños – Lindo, Fácil y Divertido", subtitle: "Un metrónomo amigable para niños con controles simples y visuales divertidos.", sectionTitle: "Consejos para practicar ritmo con niños", bullets: [ "Mantén sesiones cortas (5–10 minutos).", "Primero practiquen palmadas o pasos siguiendo el pulso.", "Permite que el niño elija su tempo y emoji favorito." ] }, "fr": { title: "Métronome pour Enfants – Mignon, Simple et Amusant", subtitle: "Un métronome conçu pour les enfants, avec un design amusant et des commandes faciles.", sectionTitle: "Astuces pour pratiquer le rythme avec les enfants", bullets: [ "Gardez les sessions courtes (5–10 minutes).", "Commencez par taper des mains ou marcher sur le tempo.", "Laissez l’enfant choisir son tempo et ses icônes préférés." ] }, "de": { title: "Metronom für Kinder – Süß, Einfach & Spielerisch", subtitle: "Ein kinderfreundliches Metronom mit niedlichem Design und leicht zu bedienenden Funktionen.", sectionTitle: "Tipps zum Rhythmuslernen mit Kindern", bullets: [ "Haltet die Übungszeit kurz (5–10 Minuten).", "Klopft oder geht zuerst im Takt, bevor Instrumente benutzt werden.", "Lasst Kinder Tempo und Emojis selbst auswählen." ] }, "it": { title: "Metronomo per Bambini – Carino, Semplice e Divertente", subtitle: "Un metronomo adatto ai bambini con controlli facili e grafica simpatica.", sectionTitle: "Come aiutare i bambini a imparare il ritmo", bullets: [ "Sessioni brevi di 5–10 minuti funzionano meglio.", "Iniziare battendo le mani o camminando sul ritmo.", "Lascia che il bambino scelga il tempo e l’emoji che preferisce." ] }, "pt": { title: "Metrônomo para Crianças – Fofo, Fácil e Divertido", subtitle: "Um metrônomo amigável para crianças, com visual divertido e simples de usar.", sectionTitle: "Dicas para treinar ritmo com crianças", bullets: [ "Mantenha treinos curtos (5–10 minutos).", "Comecem batendo palmas ou andando no ritmo.", "Deixe a criança escolher o tempo e o emoji favorito." ] }, "ru": { title: "Детский Метроном – Милый, Простой и Весёлый", subtitle: "Дружелюбный метроном для детей с ярким дизайном и понятными элементами управления.", sectionTitle: "Советы по развитию ритма у детей", bullets: [ "Занимайтесь короткими подходами по 5–10 минут.", "Сначала хлопайте или шагайте в такт.", "Позвольте ребёнку выбирать любимый темп и смайлики." ] }, "ja": { title: "こどもメトロノーム – かわいい・かんたん・たのしい", subtitle: "子どもが使いやすいかわいいデザインのメトロノーム。リズム感を楽しく育てます。", sectionTitle: "子どもとリズム練習をするときのコツ", bullets: [ "5〜10分ほどの短い練習が効果的。", "まずは手拍子や歩くリズムでテンポに慣れる。", "好きなテンポや絵文字を選ばせて、やる気アップ。" ] }, "ko": { title: "어린이 메트로놈 – 귀엽고 쉬운 리듬 학습", subtitle: "귀여운 디자인과 쉬운 조작으로 아이들의 리듬 감각을 자연스럽게 길러줍니다.", sectionTitle: "아이들과 리듬을 연습하는 방법", bullets: [ "연습은 5–10분 정도의 짧은 시간으로 진행하세요.", "악기를 사용하기 전에 손뼉치기나 걷기로 박자 익히기.", "아이에게 원하는 템포와 이모지를 직접 고르게 하세요." ] }, "hi": { title: "बच्चों के लिए मेट्रोनोम – प्यारा, आसान और मज़ेदार", subtitle: "छोटे बच्चों के लिए सरल नियंत्रण और मज़ेदार दृश्य वाला मेट्रोनोम।", sectionTitle: "बच्चों के साथ रिदम अभ्यास के तरीके", bullets: [ "अभ्यास को 5–10 मिनट तक सीमित रखें।", "पहले ताली या कदमों से बीट का अभ्यास कराएँ।", "बच्चों को अपना पसंदीदा टेम्पो और इमोजी चुनने दें।" ] }, "id": { title: "Metronom Anak – Lucu, Mudah & Menyenangkan", subtitle: "Metronom ramah anak dengan tampilan lucu dan kontrol sederhana.", sectionTitle: "Cara melatih ritme anak", bullets: [ "Latihan pendek (5–10 menit) lebih efektif.", "Mulai dengan tepuk tangan atau berjalan mengikuti beat.", "Biarkan anak memilih tempo dan emoji favorit mereka." ] }, "bg": { title: "Детски Метроном – Сладък, Лесен и Забавен", subtitle: "Подходящ за деца дизайн и лесно управление за развитие на ритъм.", sectionTitle: "Съвети за ритъм упражнения с деца", bullets: [ "Правете кратки сесии (5–10 минути).", "Започнете с пляскане или ходене в такт.", "Позволете на детето да избере любимо темпо и емоджи." ] }, "da": { title: "Metronom til Børn – Sød, Enkel og Sjov", subtitle: "Et børnevenligt metronom med sjove illustrationer og nem betjening.", sectionTitle: "Tips til rytmeøvelser med børn", bullets: [ "Hold øvelserne korte (5–10 minutter).", "Start med klap eller gå i takt.", "Lad barnet vælge tempo og emoji for motivation." ] }, "pl": { title: "Metronom dla Dzieci – Uroczy, Prosty i Zabawny", subtitle: "Przyjazny dzieciom metronom z prostą obsługą i wesołą grafiką.", sectionTitle: "Jak ćwiczyć rytm z dziećmi", bullets: [ "Ćwiczcie krótko — 5–10 minut wystarczy.", "Zacznijcie od klaskania lub chodzenia w rytmie.", "Pozwól dziecku wybrać tempo i ulubioną emotikonę." ] }, "sv": { title: "Metronom för Barn – Söta, Enkla & Roliga Rytmövningar", subtitle: "En barnvänlig metronom med lekfull design och enkla kontroller.", sectionTitle: "Tips för rytmträning med barn", bullets: [ "Håll övningarna korta (5–10 minuter).", "Börja med att klappa eller gå i takt.", "Låt barnet välja tempo och emoji själv." ] }, "vi": { title: "Máy Đếm Nhịp Cho Trẻ Em – Dễ Thương, Đơn Giản & Thú Vị", subtitle: "Giao diện đáng yêu, dễ dùng, giúp trẻ từ 4–12 tuổi làm quen nhịp điệu dễ dàng.", sectionTitle: "Cách luyện nhịp cho trẻ", bullets: [ "Giữ buổi luyện ngắn (5–10 phút).", "Cho trẻ tập vỗ tay hoặc bước theo nhịp trước khi chơi nhạc cụ.", "Để trẻ tự chọn nhịp độ và emoji yêu thích." ] }, "tr": { title: "Çocuklar İçin Metronom – Sevimli, Basit ve Eğlenceli", subtitle: "Çocuk dostu, sevimli tasarım ve kolay kullanım ile ritim duygusunu geliştirin.", sectionTitle: "Çocuklarla ritim çalışmak için ipuçları", bullets: [ "Çalışmaları 5–10 dakikalık kısa seanslarla yapın.", "Önce tempo ile el çırpma veya yürüme çalışın.", "Çocuğun favori tempoyu ve emojiyi seçmesine izin verin." ] }, "uk": { title: "Дитячий Метроном – Милий, Простий і Цікавий", subtitle: "Метроном з дружнім дизайном, створений для дітей 4–12 років.", sectionTitle: "Поради для ритмічних занять із дітьми", bullets: [ "Займайтеся 5–10 хвилин, щоб уникнути втоми.", "Почніть із плескання або крокування в такт.", "Дозвольте дитині вибрати улюблений темп і емодзі." ] } }, tap: { "en": { title: "Tap Tempo – Find Song BPM by Tapping", subtitle: "Tap along with any song or beat to quickly detect its BPM, then match it in your metronome.", sectionTitle: "When tap tempo is useful", bullets: [ "Finding the BPM of songs you want to practice.", "Matching tempo among band members before rehearsal.", "Setting dance, workout or metronome routines to a specific BPM." ] }, "zh": { title: "Tap Tempo 点按测 BPM – 通过点按快速测出歌曲速度", subtitle: "跟着音乐节奏轻点屏幕，即可快速测出 BPM，并用于练琴或节奏训练。", sectionTitle: "Tap Tempo 的适用场景", bullets: [ "想练某首歌时，先测出它的实际 BPM。", "乐队排练前，让成员统一速度。", "舞蹈、锻炼或练习前设定指定 BPM。" ] }, "zh-TW": { title: "Tap Tempo 點按測 BPM – 用手指快速測出歌曲速度", subtitle: "跟著音樂節奏輕點螢幕，就能立即得知 BPM，並套用在練習或節奏訓練中。", sectionTitle: "Tap Tempo 的使用情境", bullets: [ "練曲前測出實際 BPM。", "樂團排練前統一大家的速度感。", "舞蹈、運動或節拍練習前設定指定 BPM。" ] }, "es": { title: "Tap Tempo – Encuentra el BPM de una Canción Tocando el Ritmo", subtitle: "Toca el ritmo de cualquier canción para descubrir su BPM rápidamente.", sectionTitle: "Cuándo usar Tap Tempo", bullets: [ "Para conocer el BPM de una canción que quieres practicar.", "Para coordinar el tempo entre músicos en un ensayo.", "Para definir el BPM en rutinas de baile o entrenamiento." ] }, "fr": { title: "Tap Tempo – Trouvez le BPM d’une chanson en tapant le rythme", subtitle: "Tapez le tempo d’une chanson pour en déterminer rapidement le BPM.", sectionTitle: "Quand utiliser le Tap Tempo", bullets: [ "Pour connaître le BPM d’un morceau à étudier.", "Pour synchroniser le tempo entre musiciens.", "Pour régler un BPM pour la danse ou l'entraînement." ] }, "de": { title: "Tap Tempo – Finde das BPM eines Songs durch Antippen", subtitle: "Tippe im Rhythmus eines Liedes, um schnell dessen BPM zu bestimmen.", sectionTitle: "Wann Tap Tempo nützlich ist", bullets: [ "Wenn du das BPM eines Songs herausfinden willst.", "Um Musiker vor der Probe auf ein gemeinsames Tempo zu bringen.", "Für Tanz-, Fitness- oder Metronomroutinen mit festem BPM." ] }, "it": { title: "Tap Tempo – Scopri il BPM di una Canzone con un Tocco", subtitle: "Tocca il ritmo di qualsiasi brano per rilevarne rapidamente il BPM.", sectionTitle: "Quando usare il Tap Tempo", bullets: [ "Per conoscere il BPM di un brano da studiare.", "Per sincronizzare il tempo tra musicisti.", "Per impostare BPM per danza o allenamento." ] }, "pt": { title: "Tap Tempo – Descubra o BPM de uma Música com Toques", subtitle: "Toque seguindo o ritmo da música para descobrir rapidamente o BPM.", sectionTitle: "Quando usar o Tap Tempo", bullets: [ "Para saber o BPM de uma música que deseja praticar.", "Para sincronizar o tempo entre músicos.", "Para definir BPM em rotinas de dança ou treino." ] }, "ru": { title: "Tap Tempo – Определите BPM песни с помощью простых касаний", subtitle: "Коснитесь экрана в ритме трека, чтобы быстро узнать его BPM.", sectionTitle: "Когда полезен Tap Tempo", bullets: [ "Чтобы узнать BPM песни для练习.", "Для согласования темпа музыкантов перед репетицией.", "Для установки BPM в танцах, тренировках или练习." ] }, "ja": { title: "タップテンポ – 曲のBPMをタップして測定", subtitle: "好きな曲に合わせて画面をタップするだけで BPM を簡単に測定できます。", sectionTitle: "Tap Tempo が役立つ場面", bullets: [ "練習したい曲の BPM を知りたいとき。", "バンドメンバー間でテンポを合わせたいとき。", "ダンス・運動・練習前にテンポを設定したいとき。" ] }, "ko": { title: "탭 템포 – 탭으로 노래 BPM 빠르게 측정", subtitle: "노래 리듬에 맞춰 화면을 탭하면 BPM을 손쉽게 확인할 수 있습니다.", sectionTitle: "Tap Tempo 활용 상황", bullets: [ "연습하고 싶은 노래의 BPM을 알고 싶을 때.", "밴드 합주 전에 멤버들의 템포를 맞출 때.", "댄스·운동·연습 전에 원하는 BPM을 설정할 때." ] }, "hi": { title: "टैप टेम्पो – गाना टैप करके BPM पता करें", subtitle: "किसी भी गाने की बीट पर टैप कर के तुरंत BPM जानें।", sectionTitle: "Tap Tempo कब उपयोगी है", bullets: [ "जब किसी गाने का BPM जानना हो।", "बैंड अभ्यास से पहले सबका टेम्पो एक करने के लिए।", "डांस या वर्कआउट से पहले BPM सेट करने के लिए।" ] }, "id": { title: "Tap Tempo – Ketuk Irama untuk Menemukan BPM Lagu", subtitle: "Ketuk layar mengikuti lagu untuk mengetahui BPM dengan cepat.", sectionTitle: "Kapan Tap Tempo berguna", bullets: [ "Saat ingin tahu BPM lagu untuk latihan.", "Untuk menyamakan tempo anggota band.", "Untuk menentukan BPM pada latihan atau dansa." ] }, "bg": { title: "Tap Tempo – Намерете BPM на песен чрез потупване", subtitle: "Потупайте в ритъм с музиката, за да измерите BPM.", sectionTitle: "Кога е полезен Tap Tempo", bullets: [ "За да разберете BPM на песен.", "За синхронизиране на темпото между музиканти.", "За задаване на BPM при танци или тренировки." ] }, "da": { title: "Tap Tempo – Find BPM på en sang ved at tappe", subtitle: "Tap i takt med musikken for hurtigt at finde BPM.", sectionTitle: "Hvornår bruges Tap Tempo?", bullets: [ "Når du vil kende BPM på en sang.", "Når musikere skal finde fælles tempo.", "Når du vil sætte tempo til dans eller træning." ] }, "pl": { title: "Tap Tempo – Ustal BPM Utworu przez Stukanie", subtitle: "Stukaj w rytm, aby szybko poznać BPM utworu.", sectionTitle: "Kiedy używać Tap Tempo", bullets: [ "Aby poznać BPM ćwiczonego utworu.", "Do synchronizacji tempa między muzykami.", "Do ustawienia tempa dla tańca lub treningu." ] }, "sv": { title: "Tap Tempo – Hitta låtens BPM genom att knacka i takt", subtitle: "Knacka i takt med musiken för att snabbt få fram BPM.", sectionTitle: "När Tap Tempo är användbart", bullets: [ "När du vill veta BPM för en låt.", "För att bandmedlemmar ska hitta samma tempo.", "För att sätta tempo för dans eller träning." ] }, "vi": { title: "Tap Tempo – Chạm để đo BPM của bài hát", subtitle: "Chạm theo nhịp bài hát để xác định BPM nhanh chóng.", sectionTitle: "Khi nào nên dùng Tap Tempo", bullets: [ "Khi cần biết BPM của bài muốn luyện.", "Để các thành viên ban nhạc thống nhất tempo.", "Để đặt nhịp cho nhảy múa, tập luyện hoặc metronome." ] }, "tr": { title: "Tap Tempo – Şarkının BPM'ini Dokunarak Bul", subtitle: "Şarkı ritmine dokunarak BPM değerini hızlıca öğrenin.", sectionTitle: "Tap Tempo ne zaman kullanılır?", bullets: [ "Çalışmak istediğiniz şarkının BPM’ini bulmak için.", "Grup provası öncesi tempoyu eşitlemek için.", "Dans veya antrenman rutini için BPM belirlemek için." ] }, "uk": { title: "Tap Tempo – Визначте BPM пісні простим натисканням", subtitle: "Натискайте в ритм музики, щоб швидко дізнатися її BPM.", sectionTitle: "Коли Tap Tempo корисний", bullets: [ "Коли потрібно визначити BPM пісні.", "Щоб учасники гурту узгодили темп перед репетицією.", "Щоб встановити BPM для танців, тренувань чи практики." ] } } }; // ---------- 背景角色（无可见文本） ---------- function BackgroundCharacters({ isPlaying }) { const themeContext = React.useContext( window.ThemeContext || React.createContext({}) ); const isKidsMode = themeContext?.isKidsMode || false; if (isKidsMode) { const characters = [ { emoji: '🧑', position: 'top-20 left-10', size: 'text-4xl', delay: '0s' }, { emoji: '👧', position: 'top-16 right-12', size: 'text-4xl', delay: '0.3s' }, { emoji: '🐰', position: 'top-1/2 left-8', size: 'text-3xl', delay: '0.6s' }, { emoji: '🐻', position: 'top-1/2 right-8', size: 'text-3xl', delay: '0.9s' }, { emoji: '🐱', position: 'bottom-20 left-12', size: 'text-3xl', delay: '1.2s' }, { emoji: '🦊', position: 'bottom-16 right-10', size: 'text-3xl', delay: '1.5s' }, { emoji: '🎈', position: 'top-32 left-1/4', size: 'text-2xl', delay: '0.8s', anim: 'floating-notes' }, { emoji: '🎵', position: 'bottom-32 right-1/4', size: 'text-2xl', delay: '1.1s', anim: 'floating-notes' } ]; return React.createElement( 'div', { className: 'absolute inset-0 pointer-events-none' }, characters.map((char, i) => React.createElement( 'div', { key: i, className: `absolute ${char.position} ${char.size} ${ isPlaying ? (char.anim || 'dance-character') : '' }`, style: { animationDelay: char.delay } }, char.emoji ) ) ); } else { const musicElements = [ { emoji: '🎼', position: 'top-20 left-10', size: 'text-3xl', delay: '0s' }, { emoji: '♪', position: 'top-1/4 right-12', size: 'text-2xl', delay: '0.5s' }, { emoji: '♫', position: 'bottom-1/3 left-16', size: 'text-2xl', delay: '1s' }, { emoji: '🎵', position: 'bottom-20 right-20', size: 'text-3xl', delay: '1.5s' } ]; return React.createElement( 'div', { className: 'absolute inset-0 pointer-events-none' }, musicElements.map((note, i) => React.createElement( 'div', { key: i, className: `absolute ${note.position} ${note.size} ${ isPlaying ? 'floating-notes' : '' }`, style: { animationDelay: note.delay } }, note.emoji ) ) ); } } // ---------- SEO 顶部导航标签（20 语言） ---------- const SEO_NAV_LABELS = { online: { 'zh': '在线节拍器', 'zh-TW': '線上節拍器', 'en': 'Online', 'es': 'Metrónomo', 'fr': 'Métronome', 'de': 'Metronom', 'it': 'Metronomo', 'pt': 'Metrônomo', 'ru': 'Онлайн', 'ja': 'オンライン', 'ko': '온라인', 'hi': 'ऑनलाइन', 'id': 'Metronom', 'bg': 'Онлайн', 'da': 'Online', 'pl': 'Online', 'sv': 'Online', 'vi': 'Metronome', 'tr': 'Online', 'uk': 'Онлайн' }, piano: { 'zh': '钢琴节拍器', 'zh-TW': '鋼琴節拍器', 'en': 'Piano', 'es': 'Piano', 'fr': 'Piano', 'de': 'Klavier', 'it': 'Pianoforte', 'pt': 'Piano', 'ru': 'Пианино', 'ja': 'ピアノ', 'ko': '피아노', 'hi': 'पियानो', 'id': 'Piano', 'bg': 'Пиано', 'da': 'Klaver', 'pl': 'Fortepian', 'sv': 'Piano', 'vi': 'Piano', 'tr': 'Piyano', 'uk': 'Фортепіано' }, guitar: { 'zh': '吉他节拍器', 'zh-TW': '吉他節拍器', 'en': 'Guitar', 'es': 'Guitarra', 'fr': 'Guitare', 'de': 'Gitarre', 'it': 'Chitarra', 'pt': 'Guitarra', 'ru': 'Гитара', 'ja': 'ギター', 'ko': '기타', 'hi': 'गिटार', 'id': 'Gitar', 'bg': 'Китара', 'da': 'Guitar', 'pl': 'Gitara', 'sv': 'Gitarr', 'vi': 'Ghi-ta', 'tr': 'Gitar', 'uk': 'Гітара' }, kids: { 'zh': '儿童节拍器', 'zh-TW': '兒童節拍器', 'en': 'Kids', 'es': 'Niños', 'fr': 'Enfants', 'de': 'Kinder', 'it': 'Bambini', 'pt': 'Crianças', 'ru': 'Дети', 'ja': 'キッズ', 'ko': '키즈', 'hi': 'बच्चों', 'id': 'Anak', 'bg': 'Деца', 'da': 'Børn', 'pl': 'Dzieci', 'sv': 'Barn', 'vi': 'Trẻ em', 'tr': 'Çocuklar', 'uk': 'Діти' }, tap: { 'zh': 'Tap BPM 点按', 'zh-TW': 'Tap BPM 點按', 'en': 'Tap tempo', 'es': 'Tap tempo', 'fr': 'Tap tempo', 'de': 'Tap-Tempo', 'it': 'Tap tempo', 'pt': 'Tap tempo', 'ru': 'Tap tempo', 'ja': 'タップテンポ', 'ko': '탭 템포', 'hi': 'टैप टेम्पो', 'id': 'Tap tempo', 'bg': 'Tap tempo', 'da': 'Tap tempo', 'pl': 'Tap tempo', 'sv': 'Tap tempo', 'vi': 'Tap tempo', 'tr': 'Tap tempo', 'uk': 'Tap tempo' } }; function getSeoNavLabel(lang, pageKey) { const page = SEO_NAV_LABELS[pageKey] || SEO_NAV_LABELS.online; return page[lang] || page['en'] || ''; } // ---------- 主应用 ---------- function MetronomeApp() { let isKidsMode = false; let language = 'en'; try { const themeContext = typeof useTheme === 'function' ? (useTheme() || {}) : {}; isKidsMode = !!themeContext.isKidsMode; const langContext = typeof useLanguage === 'function' ? (useLanguage() || {}) : {}; language = langContext.language || 'en'; } catch (e) { console.warn('Context hook error:', e?.message); } // 当前路径（用于区分几个 SEO 页面） let currentRoute = '/adults'; try { if (typeof window !== 'undefined' && window.router && typeof window.router.getCurrentRoute === 'function') { currentRoute = window.router.getCurrentRoute() || '/adults'; } } catch (e) { console.warn('router route error:', e?.message); } const normRoute = String(currentRoute).replace(/\/+$/, '') || '/'; // SEO 折叠区开关 const [seoOpen, setSeoOpen] = React.useState(false); // SEO nav 点击：只切换 URL，不换组件（仍然用 AdultsRoute） const handleSeoNavClick = React.useCallback((path) => { try { if (typeof window !== 'undefined' && window.router && typeof window.router.navigate === 'function') { window.router.navigate(path); } else if (typeof window !== 'undefined') { window.location.href = path; } } catch (e) { console.warn('navigate error:', e?.message); } }, []); // 路由变化时，关闭折叠说明 React.useEffect(() => { setSeoOpen(false); }, [normRoute]); const tt = React.useCallback((key, fallback) => { try { if (typeof t === 'function') return t(key, language) || t(key, 'en') || fallback || key; } catch {} return fallback || key; }, [language]); const [isPlaying, setIsPlaying] = React.useState(false); const [tempo, setTempo] = React.useState(120); const [beat, setBeat] = React.useState(1); const [timeSignature, setTimeSignature] = React.useState(4); const [displayTimeSignature, setDisplayTimeSignature] = React.useState('4/4'); const [volume, setVolume] = React.useState(0.5); const isMobile = typeof navigator !== 'undefined' && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); const handleResetBeat = React.useCallback(() => { setBeat(1); }, []); const handleBeatUpdate = React.useCallback((newBeat) => { setBeat(newBeat); }, []); const handleTimeSignatureDisplayChange = React.useCallback((sig, beats) => { setDisplayTimeSignature(sig); setTimeSignature(beats); if (isPlaying) handleResetBeat(); }, [isPlaying, handleResetBeat]); React.useEffect(() => { if (isPlaying) handleResetBeat(); }, [tempo, isPlaying, handleResetBeat]); // 标题/副标题（20语言）+ 按路由 + 语言从 SEO_TEXTS 中取 const titleCore = isKidsMode ? tt('title_kids', 'Kids Online Metronome') : tt('title_adults', 'Online Metronome'); let title = titleCore; let subtitle = isKidsMode ? tt('subtitle_kids', "Let's dance to the beat together!") : tt('subtitle_adults', 'Free metronome to help you practice beat, tempo and rhythm'); let seoSectionTitle = ''; let seoBullets = []; // 只要不是儿童模式，就用 SEO_TEXTS 做覆盖 if (!isKidsMode) { // 1）根据路由映射到 SEO_TEXTS 的 key let seoPageKey = 'online'; switch (normRoute) { case '/': case '/online-metronome': seoPageKey = 'online'; break; case '/piano-metronome': seoPageKey = 'piano'; break; case '/guitar-metronome': seoPageKey = 'guitar'; break; case '/metronome-for-kids': seoPageKey = 'kids'; break; case '/tap-tempo': seoPageKey = 'tap'; break; default: seoPageKey = 'online'; } // 2）从 SEO_TEXTS 里按语言读取，找不到就回退到英文 const pageObj = SEO_TEXTS[seoPageKey] || SEO_TEXTS.online || {}; const seoLangKey = pageObj[language] ? language : 'en'; const seoCopy = pageObj[seoLangKey] || pageObj.en || {}; // 3）用 SEO_TEXTS 的内容覆盖 title/subtitle/说明 if (seoCopy.title) title = seoCopy.title; if (seoCopy.subtitle) subtitle = seoCopy.subtitle; if (seoCopy.sectionTitle) seoSectionTitle = seoCopy.sectionTitle; if (Array.isArray(seoCopy.bullets)) seoBullets = seoCopy.bullets; } return React.createElement('div', { className: 'min-h-screen flex flex-col items-center justify-center p-4 relative', 'data-name': 'app', 'data-file': 'src/App.jsx' }, [ // 背景 React.createElement(BackgroundCharacters, { key: 'bg-chars', isPlaying }), // 主卡片 React.createElement('div', { key: 'main-card', className: 'bg-white/20 backdrop-blur-lg rounded-3xl p-4 md:p-6 shadow-2xl max-w-sm w-full relative z-10 mx-4' }, [ // 头部：先工具条，再“左右图标 + 主标题”一行，再副标题 React.createElement('div', { key: 'header', className: 'text-center mb-3' }, [ typeof window.TopBarControls === 'function' && React.createElement(window.TopBarControls, { key: 'topbar-inside' }), // 主标题行 React.createElement('div', { key: 'title-row', className: 'flex items-center justify-center mb-3 px-4' }, [ React.createElement('div', { key: 'icon-left', className: 'w-12 h-12 rounded-full flex items-center justify-center bg-[var(--primary-color)]/20 mr-3' }, React.createElement('div', { className: 'icon-music text-2xl text-[var(--primary-color)]' })), React.createElement('div', { key: 'title-wrap', className: 'flex-1 min-w-0' }, React.createElement('h1', { key: 'title', className: `${isKidsMode ? 'text-black' : 'text-[var(--primary-color)]'} music-brand text-lg font-bold leading-tight` }, title) ), React.createElement('div', { key: 'icon-right', className: 'w-12 h-12 rounded-full flex items-center justify-center bg-[var(--primary-color)]/20 ml-3' }, React.createElement('div', { className: 'icon-piano text-2xl text-[var(--primary-color)]' })) ]), ]), // 控制区 React.createElement('div', { key: 'controls', className: 'flex flex-col items-center space-y-3' }, [ typeof window.MetronomeFace === 'function' && React.createElement(window.MetronomeFace, { key: 'metronome-face', isPlaying, beat, timeSignature, displayTimeSignature, onTogglePlay: () => { setIsPlaying(prev => !prev); // 如果你想“重新从第1拍开始”，可以顺手重置： // if (!isPlaying) setBeat(1); } }), typeof window.PlayButton === 'function' && React.createElement(window.PlayButton, { key: 'play-button', isPlaying, setIsPlaying, tempo, setBeat, timeSignature, volume, onBeatUpdate: handleBeatUpdate, onResetBeat: handleResetBeat }), typeof window.TempoControl === 'function' && React.createElement(window.TempoControl, { key: 'tempo-control', tempo, setTempo, timeSignature, setTimeSignature, volume, setVolume, isPlaying, setIsPlaying, onTimeSignatureDisplayChange: handleTimeSignatureDisplayChange, onResetBeat: handleResetBeat }) ]), // 使用说明 + 移动端提示 React.createElement('div', { key: 'instructions', className: 'text-center mt-3' }, [ React.createElement('p', { key: 'main-instruction', className: 'text-gray-600 text-xs' }, isKidsMode ? tt('instruction_kids', 'Click the play button to start, adjust the tempo to find your favorite beat!') : tt('instruction_adults', 'Click play to start practicing, adjust tempo to find your perfect beat!') ), isMobile && !isPlaying && React.createElement('div', { key: 'mobile-notice', className: 'mt-2 p-2 bg-blue-50 rounded-lg border border-blue-200' }, React.createElement('p', { className: 'text-blue-800 text-[11px] leading-snug' }, '📱 Tap play for audio + vibration. Works even in silent mode!')) ]), // —— SEO 导航（只在成人版显示）—— !isKidsMode && React.createElement('div', { key: 'seo-nav', className: 'mt-3 mb-2 flex items-center justify-center gap-2 overflow-x-auto px-2 text-[11px] text-gray-700' }, [ { key: 'online', path: '/online-metronome' }, { key: 'piano', path: '/piano-metronome' }, { key: 'guitar', path: '/guitar-metronome' }, { key: 'kids', path: '/metronome-for-kids' }, { key: 'tap', path: '/tap-tempo' } ].map(item => { const active = normRoute === item.path || (normRoute === '/' && item.path === '/online-metronome'); const label = getSeoNavLabel(language, item.key); return React.createElement('button', { key: item.path, type: 'button', onClick: () => handleSeoNavClick(item.path), className: 'px-2 py-1 rounded-full whitespace-nowrap border ' + (active ? 'bg-[var(--primary-color)] text-white border-[var(--primary-color)]' : 'bg-white/80 text-gray-700 border-gray-200') }, label); })), // ✅ moved subtitle：放在 Tap play 提示 和 How to use 折叠之间 React.createElement('p', { key: 'subtitle-moved', className: `${isKidsMode ? 'text-black' : 'text-[var(--music-gold)]'} music-subtitle text-sm font-medium leading-relaxed text-center px-2 mt-2` }, subtitle), // SEO 小折叠说明（仅成人版显示） !isKidsMode && seoSectionTitle && React.createElement('div', { key: 'seo-section', className: 'mt-3 text-left text-[13px] text-gray-700 bg-white/70 rounded-2xl p-3' }, [ React.createElement('button', { key: 'seo-toggle', type: 'button', onClick: () => setSeoOpen(open => !open), className: 'w-full flex items-center justify-between text-[13px] font-semibold' }, [ React.createElement('span', { key: 'label' }, seoSectionTitle), React.createElement('span', { key: 'icon', className: 'text-xs' }, seoOpen ? '▲' : '▼') ]), seoOpen && React.createElement('ul', { key: 'seo-list', className: 'mt-2 list-disc pl-4 space-y-1' }, seoBullets.map((line, idx) => React.createElement('li', { key: idx }, line) )) ]) ]), // 反馈（快速 + 文本框） typeof window.QuickFeedback === 'function' && React.createElement('div', { key: 'quickfb', className: 'w-full max-w-sm mt-4 relative z-10 mx-4' }, React.createElement(window.QuickFeedback)), typeof window.FeedbackBox === 'function' && React.createElement('div', { key: 'feedback-section', className: 'w-full max-w-sm mt-4 relative z-10 mx-4' }, React.createElement(window.FeedbackBox)) ]); } // ---------- 路由包装 ---------- function KidsRoute() { return React.createElement(MetronomeApp); } function AdultsRoute() { return React.createElement(MetronomeApp); } // ---------- 根组件（Provider 顺序：Theme → Language） ---------- function RootApp() { const [, forceUpdate] = React.useState(0); React.useEffect(() => { if (typeof window !== 'undefined' && typeof window.router === 'object') { window.router.addRoute?.('/kids', KidsRoute); window.router.addRoute?.('/adults', AdultsRoute); const unsubscribe = window.router.subscribe?.(() => forceUpdate(x => x + 1)); return unsubscribe; } }, []); let RouteComponent = AdultsRoute; if (typeof window !== 'undefined' && typeof window.router === 'object') { RouteComponent = window.router.getRouteComponent?.() || AdultsRoute; } let app = React.createElement(RouteComponent); if (typeof window !== 'undefined' && typeof window.ThemeProvider === 'function') { app = React.createElement(window.ThemeProvider, {}, app); } if (typeof window !== 'undefined' && typeof window.LanguageProvider === 'function') { app = React.createElement(window.LanguageProvider, {}, app); } // 用 ErrorBoundary 包一下 return React.createElement(ErrorBoundary, null, app); } // ✅ 导出给入口文件用 // ---------- 渲染 ---------- const rootElement = document.getElementById('root'); if (rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( React.createElement(RootApp) ); }