<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zoto Sora-be</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Scheherazade&display=swap" rel="stylesheet">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body {
        font: 400 16px 'Roboto', sans-serif;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        color: #fff;
        padding: 1rem;
      }
      .container {
        max-width: 420px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #2d3748;
        text-align: center;
      }
      h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        font-weight: 700;
      }
      textarea, .output {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        margin: 0.5rem 0;
        font-size: 1rem;
        resize: none;
      }
      textarea:focus, .output:focus {
        outline: none;
        border-color: #667eea;
      }
      .output {
        background: #f7fafc;
        font-family: 'Scheherazade', serif;
        direction: rtl;
        text-align: right;
        min-height: 60px;
      }
      button {
        padding: 0.6rem 1rem;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 700;
        transition: 0.2s;
      }
      button:hover {
        background: #5a67d8;
      }
      .translator-btn {
        margin: 0.4rem;
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
      }
      h3 {
  color: #4a5568;
  font: 700 1rem Roboto;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left; /* Par défaut, alignement à gauche */
}

body[lang="ar"] h3 {
  text-align: right; /* Si la langue est l'arabe, alignement à droite */
}

      h3:before {
        content: "▸";
        color: #667eea;
      }
      @media (max-width: 480px) {
        h1 { font-size: 1.4rem; }
        textarea, .output { font-size: 0.9rem; }
        button { font-size: 0.8rem; }
      }
      .align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

    </style>
  </head>
  <body>
    <div class="container">
      <h1 data-translate="title">Zoto Sora-be</h1>
      <h3 data-translate="phraseLabel">Phrase malgache à convertir</h3>
      <textarea id="input" data-translate="inputPlaceholder" placeholder="Entrez une phrase..."></textarea>
      <button onclick="convert()" data-translate="convertButton">Convertir</button>
      <h3 data-translate="conversionLabel">Conversion sora-be</h3>
      <div id="soraBe" class="output"></div>
      <h3 data-translate="transcriptionLabel">Transcription phonétique</h3>
      <div id="phonetic" class="output"></div>
      <h3 data-translate="translationLabel">Traduction arabe</h3>
      <button class="translator-btn" onclick="openTranslation('google')">Google translator</button>
      <button class="translator-btn" onclick="openTranslation('microsoft')">Microsoft translator</button>
      <button class="translator-btn" onclick="openTranslation('yandex')">Yandex translator</button>
    </div>
    <script>
      const translations = {
        fr: {
          title: "Zoto Sora-be",
          phraseLabel: "Phrase malgache à convertir",
          inputPlaceholder: "Entrez votre phrase en malgache moderne ici...",
          convertButton: "Convertir",
          conversionLabel: "Conversion sora-be",
          transcriptionLabel: "Transcription phonétique",
          translationLabel: "Traduction arabe (Cliquez pour traduire)",
        },
        ar: {
          title: "زوتو سورابي",
          phraseLabel: "الجملة المالغاشية للتحويل",
          inputPlaceholder: "أدخل جملتك بالملغاشية هنا ...",
          convertButton: "تحويل",
          conversionLabel: "تحويل سورابي",
          transcriptionLabel: "الكتابة الصوتية",
          translationLabel: "الترجمة العربية (اضغط للترجمة)",
        },
        en: {
          title: "Zoto Sora-be",
          phraseLabel: "Malagasy sentence to convert",
          inputPlaceholder : "Enter your modern Malagasy sentence here...",
          convertButton: "Convert",
          conversionLabel: "Sora-be conversion",
          transcriptionLabel: "Phonetic transcription",
          translationLabel: "Arabic translation (Click to translate)",
        },
      };
      
      // Fonction pour détecter la langue de l'appareil
function detectLanguage() {
    const lang = navigator.language.split("-")[0]; // Récupère la langue principale
    return lang;
}


// Fonction pour appliquer les traductions et styles
function applyLanguageStyle() {
    const lang = detectLanguage();
    const h3Elements = document.querySelectorAll('h3'); // Sélectionne tous les éléments h3

    if (lang === "ar") { // Si la langue est arabe
        h3Elements.forEach(h3 => {
            h3.style.textAlign = "right"; // Aligne le texte à droite
        });
    } else { // Si la langue n'est pas arabe
        h3Elements.forEach(h3 => {
            h3.style.textAlign = "left"; // Aligne le texte à gauche
        });
    }
}

// Appliquer le style au chargement de la page
applyLanguageStyle();

      
      function applyTranslations(lang) {
  const selected = translations[lang];
  
  // Traduction pour les éléments de texte
  document.querySelectorAll("[data-translate]").forEach(el => {
    if (el.hasAttribute('placeholder')) {
      // Si l'élément a un attribut placeholder, traduire cet attribut
      el.setAttribute('placeholder', selected[el.dataset.translate]);
    } else {
      // Sinon, traduire le texte
      el.textContent = selected[el.dataset.translate];
    }
  });
}


      function convert() {
        const input = document.getElementById("input").value;
        document.getElementById("soraBe").textContent = transform(input, soraBeMap);
        document.getElementById("phonetic").textContent = transform(input, phoneticMap);
      }

      function openTranslation(service) {
        const text = encodeURIComponent(document.getElementById("input").value);
        const urls = {
          google: `https://translate.google.com/?sl=mg&tl=ar&text=${text}`,
          microsoft: `https://www.bing.com/translator?from=mg&to=ar&text=${text}`,
          yandex: `https://translate.yandex.com/?lang=mg-ar&text=${text}`,
        };
        window.open(urls[service], "_blank");
      }

      const soraBeMap = {"a": "اَ", "e": "اِ", "i": "اِ", "o": "اُ", "y": "اِ",
        "b": "بْ", "d": "دْ", "f": "فْ", "g": "غْ", "h": "هْ",
        "j": "جْ", "k": "كْ", "l": "لْ", "m": "مْ", "n": "نْ",
        "p": "فّْ", "r": "رْ", "s": "سْ", "t": "طْ", "v": "وْ",
        "z": "يْ", "ba": "بَ", "be": "بِ", "bi": "بِ", "bo": "بُ",
        "by": "بِ", "da": "دَ", "de": "دِ", "di": "دِ", "do": "دُ", "dy": "دِ",
        "fa": "فَ", "fe": "فِ", "fi": "فِ", "fo": "فُ", "fy": "فِ",
        "ga": "غَ", "ge": "غِ", "gi": "غِ", "go": "غُ", "gy": "غِ",
        "ha": "هَ", "he": "هِ", "hi": "هِ", "ho": "هُ", "hy": "هِ", "ja": "جَ",
        "je": "جِ", "ji": "جِ", "jo": "جُ", "jy": "جِ", "ka": "كَ",
        "ke": "كِ", "ki": "كِ", "ko": "كُ", "ky": "كِ", "la": "لَ",
        "le": "لِ", "li": "لِ", "lo": "لُ", "ly": "لِ", "ma": "مَ",
        "me": "مِ", "mi": "مِ", "mo": "مُ", "my": "مِ", "na": "نَ",
        "ne": "نِ", "ni": "نِ", "no": "نُ", "ny": "نِ", "pa": "فَّ",
        "pe": "فِّ", "pi": "فِّ", "po": "فُّ", "py": "فِّ", "ra": "رَ",
        "re": "رِ", "ri": "رِ", "ro": "رُ", "ry": "رِ", "sa": "سَ",
        "se": "سِ", "si": "سِ", "so": "سُ", "sy": "سِ", "ta": "طَ",
        "te": "طِ", "ti": "طِ", "to": "طُ", "ty": "طِ", "va": "وَ",
        "ve": "وِ", "vi": "وِ", "vo": "وُ", "vy": "وِ", "za": "يَ",
        "ze": "يِ", "zi": "يِ", "zo": "يُ", "zy": "زِ", "mb": "بْ",
        "mba": "بَ", "mbe": "بِ", "mbi": "بِ", "mbo": "بُ",
        "mby": "بِ", "mp": "فّْ", "mpa": "فَّ", "mpe": "فِّ",
        "mpi": "فِّ", "mpo": "فُّ", "mpy": "فِّ", "ts": "تْ",
        "tsa": "تَ", "tse": "تِ", "tsi": "تِ", "tso": "تُ",
        "tsy": "تِ", "nj": "جْ", "nja": "جَ", "nje": "جِ",
        "nji": "جِ", "njo": "جُ", "njy": "جِ", "dr": "رّْ",
        "dra": "رَّ", "dre": "رِّ", "dri": "رِّ", "dro": "رُّ",
        "dry": "رِّ", "tr": "رّْ", "tra": "رَّ", "tre": "رِّ", "tri": "رِّ", "tro": "رُّ",
        "try": "رِّ", "ntr": "رّْ", "ntra": "رَّ", "ntre": "رِّ",
        "ntri": "رِّ", "ntry":"رِّ", "ntro": "رُّ", "nk": "كْ", "nka": "كَ",
        "nke": "كِ", "nki": "كِ", "nky": "كِ","nko": "كُ", "ng": "عْ",
        "nga": "عَ", "nge": "عِ", "ngi": "عِ", "ngy": "عِ", "gno": "عُ", "nts": "تْ", "ntsa": "تَ", "ntse": "تِ",
        "ntsi": "تِ", "ntso": "تُ", "ntsy": "تِ"
      };
      const phoneticMap = {"a": "ا", "b": "ب", "d": "د", "f": "ف", "g": "غ", "h": "ح",
        "j": "ج", "k": "ك", "l": "ل", "m": "م", "n": "ن", "p": "پ",
        "r": "ر", "s": "س", "t": "ت", "v": "ڤ", "z": "ز", "e": "ي",
        "i": "ي", "o": "و", "y": "ي", "mp": "پ"
      };
      
      const userLang = detectLanguage();
applyTranslations(userLang);
adjustH3Alignment();  // Ajoutez cette ligne pour ajuster l'alignement


function transform(input, map) {
  // Remplacer d'abord les caractères spéciaux
  input = input.replace(/\?/g, "؟").replace(/,/g, "،");

  // Appliquer les remplacements de mappage après
  const keys = Object.keys(map).sort((a, b) => b.length - a.length);
  let result = input;

  keys.forEach(key => {
    const regex = new RegExp(key, 'gi'); // Recherche insensible à la casse
    result = result.replace(regex, map[key]);
  });

  return result;
}


function adjustH3Alignment() {
  const lang = detectLanguage();
  const h3Elements = document.querySelectorAll('h3');

  // Si la langue est arabe, aligner à droite
  if (lang === 'ar') {
    h3Elements.forEach(h3 => {
      h3.style.textAlign = 'right';
      h3.style.direction = 'rtl'; // Assurez-vous que le texte est en direction droite-gauche
    });
  } else {
    // Sinon, aligner à gauche
    h3Elements.forEach(h3 => {
      h3.style.textAlign = 'left';
      h3.style.direction = 'ltr'; // Direction de gauche à droite
    });
  }
}


    </script>
  </body>
</html>