<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes"
    />
    <title>PLAYNAPTICS - Learn through play</title>
    <link rel="stylesheet" href="styles.css" />
    <meta name="copyright" content="© PLAYNAPTICS - All Rights Reserved" />
    <meta
      name="license"
      content="Educational use permitted: Free for individual learning and classroom teaching. Commercial use, redistribution, modification, or hosting on other websites is prohibited without written permission."
    />
  </head>
  <body>
    <div class="container">
      <!-- FIXED HEADER -->
      <div class="fixed-header">
        <header>
          <div class="dark-mode-toggle" id="darkModeToggle"></div>
          <h1 id="playnaptics-title">PLAYNAPTICS</h1>
          <div class="header-right-group">
            <div class="sound-toggle" id="soundToggle">🔔</div>
            <a href="#" class="heart-button" id="animated-emoji">☕</a>
          </div>
        </header>

        <div class="section-divider"></div>

        <div class="personalization-label" id="personalization-label">
          Personalization - Choose your preferences:
        </div>

        <!-- Preference buttons -->
        <div class="preference-buttons">
          <button class="pref-button" id="learner-type-button">
            Young Learners
          </button>
          <button class="pref-button" id="emoji-appearance-button">
            <span id="emoji-text">Emoji Appearance</span>
            <span id="emoji-display">🧒</span>
          </button>
          <button class="pref-button" id="dietary-button">
            Dietary &amp; Lifestyle
          </button>
        </div>

        <div class="language-selection">
          <div class="labels">
            <span id="you-label">Your Language</span>
            <span id="connect-to-label">Connect To</span>
          </div>
        </div>
      </div>
      <!-- end fixed-header -->

      <!-- SCROLLABLE LANGUAGE BUTTONS -->
      <div class="language-buttons">
        <div class="left-buttons">
          <button
            class="lang-button"
            data-lang-code="es"
            data-you="Mi idioma:"
            data-connect="Quiero aprender:"
            data-footer-line1="..."
            data-footer-line2="Creado por Playnaptics, todos los derechos reservados."
            data-chinese-label="Chino (Mandarin)"
            data-young-learners="Niños / Jóvenes"
            data-adult-learners="Adultos"
            data-cultural="Preferencias Culturales"
            data-vegetarian="Vegetariano"
            data-vegan="Vegano"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Apariencia de Emojis"
            data-personalization="Ajustes - personalización:"
          >
            Español
          </button>
          <button
            class="lang-button"
            data-lang-code="ar"
            data-you="لغتي:"
            data-connect="أريد أن أتعلم:"
            data-footer-line2="تم إنشاؤه بواسطة Playnaptics، جميع الحقوق محفوظة."
            data-chinese-label="الصينية (الماندرين)"
            data-young-learners="المتعلمين الصغار"
            data-adult-learners="المتعلمين الكبار"
            data-cultural="التفضيلات الثقافية"
            data-vegetarian="نباتي"
            data-vegan="نباتي صرف"
            data-halal="حلال"
            data-kosher="كوشير"
            data-emoji-appearance="مظهر الرموز التعبيرية"
            data-personalization="الإعدادات - التخصيص:"
          >
            العربية
          </button>
          <button
            class="lang-button"
            data-lang-code="gn"
            data-you="Che ñe'ẽ:"
            data-connect="Aikuaase:"
            data-footer-line2="Ojapo Playnaptics ndive, opaite derecho oñeñongatu."
            data-chinese-label="Chinañe'ẽ (Mandarin)"
            data-young-learners="Mitãnguéra Mbo'ehára"
            data-adult-learners="Tapicha Tuicha Mbo'ehára"
            data-cultural="Tekombo'e Rojuruja"
            data-vegetarian="Ka'avo"
            data-vegan="Ka'avo año"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Emoji Hechaukarã"
            data-personalization="Mbohupyrã - ñemomba'eguasu:"
          >
            Avañe'ẽ
          </button>
          <button
            class="lang-button"
            data-lang-code="ay"
            data-you="Aruxa:"
            data-connect="Yatiqasiña:"
            data-footer-line2="Playnaptics uksat lurata, taqi chiqap chaninchas ch'eqan."
            data-chinese-label="Chine aru (Mandarín)"
            data-young-learners="Yatiqiri wawanaka"
            data-adult-learners="Yatiqiri jach'a jaqinaka"
            data-dietary="Manq'aña &amp; Sartawi"
            data-vegetarian="Manq'a aljiri"
            data-vegan="Aljiri"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Emoji Uñstayi"
            data-personalization="Uñstawi - jakisiña:"
          >
            Aymar Aru
          </button>
          <button
            class="lang-button"
            data-lang-code="de"
            data-you="Meine Sprache:"
            data-connect="Ich möchte lernen:"
            data-footer-line2="Erstellt von Playnaptics, alle Rechte vorbehalten."
            data-chinese-label="Chinesisch (Mandarin)"
            data-young-learners="Junge Lernende"
            data-adult-learners="Erwachsene Lernende"
            data-cultural="Kulturelle Präferenzen"
            data-vegetarian="Vegetarisch"
            data-vegan="Vegan"
            data-halal="Halal"
            data-kosher="Koscher"
            data-emoji-appearance="Emoji-Aussehen"
            data-personalization="Einstellungen - Personalisierung:"
          >
            Deutsch
          </button>
          <button
            class="lang-button"
            data-lang-code="en"
            data-you="My language:"
            data-connect="I want to learn:"
            data-footer-line2="Created by Playnaptics, all rights reserved."
            data-chinese-label="Chinese (Mandarin)"
            data-young-learners="Young Learners"
            data-adult-learners="Adult Learners"
            data-cultural="Cultural Preferences"
            data-vegetarian="Vegetarian"
            data-vegan="Vegan"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Emoji Appearance"
            data-personalization="Settings - personalization:"
          >
            English
          </button>
          <button
            class="lang-button"
            data-lang-code="fr"
            data-you="Ma langue:"
            data-connect="Je veux apprendre:"
            data-footer-line2="Créé par Playnaptics, tous droits réservés."
            data-chinese-label="Chinois (mandarin)"
            data-young-learners="Jeunes Apprenants"
            data-adult-learners="Apprenants Adultes"
            data-cultural="Préférences Culturelles"
            data-vegetarian="Végétarien"
            data-vegan="Végan"
            data-halal="Halal"
            data-kosher="Cacher"
            data-emoji-appearance="Apparence des Émojis"
            data-personalization="Paramètres - personnalisation:"
          >
            Français
          </button>
          <button
            class="lang-button"
            data-lang-code="ko"
            data-you="내 언어:"
            data-connect="배우고 싶어요:"
            data-footer-line2="Playnaptics에서 제작, 모든 권리 보유."
            data-chinese-label="중국어 (표준어)"
            data-young-learners="어린 학습자"
            data-adult-learners="성인 학습자"
            data-cultural="문화적 선호도"
            data-vegetarian="채식주의자"
            data-vegan="비건"
            data-halal="할랄"
            data-kosher="코셔"
            data-emoji-appearance="이모지 외관"
            data-personalization="설정 - 개인화:"
          >
            한국어
          </button>
          <button
            class="lang-button"
            data-lang-code="he"
            data-you="השפה שלי:"
            data-connect="אני רוצה ללמוד:"
            data-footer-line2="נוצר על ידי Playnaptics, כל הזכויות שמורות."
            data-chinese-label="סינית (מנדרינית)"
            data-young-learners="לומדים צעירים"
            data-adult-learners="לומדים מבוגרים"
            data-cultural="העדפות תרבותיות"
            data-vegetarian="צמחוני"
            data-vegan="טבעוני"
            data-halal="חלאל"
            data-kosher="כשר"
            data-emoji-appearance="מראה אמוג'י"
            data-personalization="הגדרות - התאמה אישית:"
          >
            עברית
          </button>
          <button
            class="lang-button"
            data-lang-code="hi"
            data-you="मेरी भाषा:"
            data-connect="मैं सीखना चाहता हूँ:"
            data-footer-line2="Playnaptics द्वारा निर्मित, सभी अधिकार सुरक्षित।"
            data-chinese-label="चीनी (मंदारिन)"
            data-young-learners="युवा शिक्षार्थी"
            data-adult-learners="वयस्क शिक्षार्थी"
            data-cultural="सांस्कृतिक प्राथमिकताएं"
            data-vegetarian="शाकाहारी"
            data-vegan="शुद्ध शाकाहारी"
            data-halal="हलाल"
            data-kosher="कोशर"
            data-emoji-appearance="इमोजी उपस्थिति"
            data-personalization="सेटिंग्स - वैयक्तिकरण:"
          >
            हिन्दी
          </button>
          <button
            class="lang-button"
            data-lang-code="it"
            data-you="La mia lingua:"
            data-connect="Voglio imparare:"
            data-footer-line2="Creato da Playnaptics, tutti i diritti riservati."
            data-chinese-label="Cinese (mandarino)"
            data-young-learners="Giovani Studenti"
            data-adult-learners="Studenti Adulti"
            data-cultural="Preferenze Culturali"
            data-vegetarian="Vegetariano"
            data-vegan="Vegano"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Aspetto Emoji"
            data-personalization="Impostazioni - personalizzazione:"
          >
            Italiano
          </button>
          <button
            class="lang-button"
            data-lang-code="sw"
            data-you="Lugha yangu:"
            data-connect="Nataka kujifunza:"
            data-footer-line2="Imeundwa na Playnaptics, hakimiliki zote zimehifadhiwa."
            data-chinese-label="Kichina"
            data-young-learners="Wanafunzi Wadogo"
            data-adult-learners="Wanafunzi Wazima"
            data-dietary="Lishe &amp; Mtindo wa Maisha"
            data-vegetarian="Mboga"
            data-vegan="Mboga Kabisa"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Muonekano wa Emoji"
            data-personalization="Mipangilio - ubinafsishaji:"
          >
            Kiswahili
          </button>
          <button
            class="lang-button"
            data-lang-code="ja"
            data-you="私の言語:"
            data-connect="学びたい:"
            data-footer-line2="Playnapticsによって作成、無断複写・転載を禁じます。"
            data-chinese-label="中国語"
            data-young-learners="若い学習者"
            data-adult-learners="大人の学習者"
            data-cultural="文化的嗜好"
            data-vegetarian="ベジタリアン"
            data-vegan="ビーガン"
            data-halal="ハラル"
            data-kosher="コーシャ"
            data-emoji-appearance="絵文字の外観"
            data-personalization="設定 - カスタマイズ:"
          >
            日本語
          </button>
          <button
            class="lang-button"
            data-lang-code="nah"
            data-you="Notlahtol:"
            data-connect="Nikneki nimomachiz:"
            data-footer-line2="Playnaptics quichihuih, mochi macehualli tlahuilli tlapoalli."
            data-chinese-label="Chīnatlahtōlli (Mandarin)"
            data-young-learners="Tlacamecahuiani"
            data-adult-learners="Huehue Tlacamecahuiani"
            data-cultural="In tlahtolmelahualiztlahtolculiani"
            data-vegetarian="Xochiqualoni"
            data-vegan="Xochiqualoni Cemantic"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Emoji Ixtli"
            data-personalization="Tlanixtiliztli - tlaceliztli:"
          >
            Nāhuatlahtōlli
          </button>
          <button
            class="lang-button"
            data-lang-code="pt"
            data-you="Meu idioma:"
            data-connect="Quero aprender:"
            data-footer-line2="Criado por Playnaptics, todos os direitos reservados."
            data-chinese-label="Chinês (mandarim)"
            data-young-learners="Jovens Aprendizes"
            data-adult-learners="Aprendizes Adultos"
            data-cultural="Preferências Culturais"
            data-vegetarian="Vegetariano"
            data-vegan="Vegano"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Aparência de Emoji"
            data-personalization="Configurações - personalização:"
          >
            Português
          </button>
          <button
            class="lang-button"
            data-lang-code="qu"
            data-you="Qay simiy:"
            data-connect="Munani yachayta:"
            data-footer-line2="Playnaptics ruwasqan, llapan hayñikuna waqaychasqa."
            data-chinese-label="Chino simi (Mandarín)"
            data-young-learners="Wayna Yachaqkuna"
            data-adult-learners="Macho Yachaqkuna"
            data-cultural="Yupaychana munakuna"
            data-vegetarian="Yuraq Mikhuy"
            data-vegan="Yuraq Mikhuylla"
            data-halal="Halal"
            data-kosher="Kosher"
            data-emoji-appearance="Emoji Qhawaq"
            data-personalization="Churanakuna - kikinchanakuy:"
          >
            Runa Simi
          </button>
          <button
            class="lang-button"
            data-lang-code="ru"
            data-you="Мой язык:"
            data-connect="Хочу выучить:"
            data-footer-line2="Создано Playnaptics, все права защищены."
            data-chinese-label="Китайский (мандарин)"
            data-young-learners="Молодые Учащиеся"
            data-adult-learners="Взрослые Учащиеся"
            data-cultural="Культурные Предпочтения"
            data-vegetarian="Вегетарианец"
            data-vegan="Веган"
            data-halal="Халяль"
            data-kosher="Кошер"
            data-emoji-appearance="Внешний вид Эмодзи"
            data-personalization="Настройки - персонализация:"
          >
            Руский
          </button>
          <button
            class="lang-button"
            data-lang-code="way"
            data-you="Pia wayuunaiki:"
            data-connect="Aantüsü püla ekirajaa:"
            data-footer-line2="Ekirajanajatia süpüla Playnaptics, ashajünüin süpüla eesü."
            data-chinese-label="Chino anüiki (Mandarín)"
            data-young-learners="Anasü Sünainjatia"
            data-adult-learners="Anasü Sünainjatia"
            data-cultural="Aptiraa süka waneepia"
            data-vegetarian="Anasü Sünainjatia"
            data-vegan="Anasü Sünainjatia"
            data-halal="Anasü Sünainjatia"
            data-kosher="Anasü Sünainjatia"
            data-emoji-appearance="Emoji Apülaa"
            data-personalization="Aaptiraa - a'itaanaja:"
          >
            Wayuunaiki
          </button>
        </div>
        <div class="right-button">
          <button
            id="chinese-button"
            class="lang-button"
            data-lang-code="zh"
            data-you="我的语言:"
            data-connect="我想学习:"
            data-footer-line2="由 Playnaptics 创建，保留所有权利"
            data-chinese-label="中文"
            data-young-learners="年轻学习者"
            data-adult-learners="成人学习者"
            data-cultural="文化偏好"
            data-vegetarian="素食"
            data-vegan="纯素"
            data-halal="清真"
            data-kosher="犹太洁食"
            data-emoji-appearance="表情符号外观"
            data-personalization="设置: 个性化:"
          >
            Chinese
          </button>
        </div>
      </div>
      <div class="footer-line2" id="footer-line2">
        Designed by Playnaptics, all rights reserved.
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>