assistance.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Assistance / Support – [Nom du Jeu]</title>
  <style>
    body { font-family: system-ui, Arial, sans-serif; background: #f9fafb; margin: 0; }
    header { background: #2a4d8f; color: white; padding: 16px; text-align: center; }
    header img { max-height: 80px; margin-bottom: 8px; }
    .lang { margin-top: 8px; }
    .lang button { background: white; border: none; border-radius: 20px; padding: 6px 12px; margin: 0 4px; cursor: pointer; font-weight: bold; }
    .lang button.active { background: #dbeafe; color: #1e3a8a; }
    main { max-width: 800px; margin: 32px auto; background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    h1 { color: #2a4d8f; }
    p { line-height: 1.6; }
  </style>
</head>
<body>
  <header>
    <!-- Mets ton logo ici -->
    <img src="logo.png" alt="taquina" />
    <h1>[Nom du Jeu] – Assistance / Support</h1>
    <div class="lang">
      <button data-switch="fr" class="active">FR</button>
      <button data-switch="en">EN</button>
    </div>
  </header>

  <main>
    <!-- FR -->
    <section data-lang="fr" class="show">
      <h1>Assistance</h1>
      <p>Bienvenue sur la page d’assistance de <strong>taquina</strong>.</p>
      <p>Pour toute question, problème technique ou demande d’information, vous pouvez nous contacter :</p>
      <ul>
        <li>📧 Email : <a href="mailto:eti.appsgames@gmail.com">eti.appsgames@gmail.com</a></li>
      </ul>
      <p>Nous vous répondrons dans les meilleurs délais.</p>
    </section>

    <!-- EN -->
    <section data-lang="en">
      <h1>Support</h1>
      <p>Welcome to the support page for <strong>Ballariob</strong>.</p>
      <p>If you have any questions, technical issues, or requests for information, you can contact us:</p>
      <ul>
        <li>📧 Email: <a href="mailto:eti.appsgames@gmail.com">eti.appsgames@gmail.com</a></li>
      </ul>
      <p>We will get back to you as soon as possible.</p>
    </section>
  </main>

  <script>
    const buttons = document.querySelectorAll('[data-switch]');
    const sections = document.querySelectorAll('[data-lang]');
    function setLang(lang){
      sections.forEach(s => s.classList.toggle('show', s.getAttribute('data-lang')===lang));
      buttons.forEach(b => b.classList.toggle('active', b.getAttribute('data-switch')===lang));
      document.documentElement.lang = lang;
    }
    buttons.forEach(b => b.addEventListener('click', () => setLang(b.getAttribute('data-switch'))));
  </script>
</body>
</html>