<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seleziona Lingua - Traduttore</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 40px 20px 20px 20px;
      min-height: 100vh;
    }

    .container {
      width: 100%;
      max-width: 1000px;
    }

    header {
      text-align: center;
      margin-bottom: 40px;
      color: white;
      width: 100%;
    }

    header h1 {
      font-size: 3rem;
      margin-bottom: 12px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    header p {
      font-size: 1.2rem;
      opacity: 0.95;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: white;
      text-decoration: none;
      margin-bottom: 20px;
      opacity: 0.9;
      transition: opacity 0.3s;
    }

    .back-link:hover {
      opacity: 1;
    }

    .languages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: 12px;
      margin-bottom: 40px;
    }

    .language-card {
      background: white;
      border-radius: 12px;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }

    .language-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
      border-color: #667eea;
    }

    .flag-container {
      width: 100%;
      height: 70px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      overflow: hidden;
    }

    .language-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 3px;
    }

    .language-code {
      font-size: 0.7rem;
      color: rgba(15, 23, 42, 0.5);
      font-family: monospace;
    }

    .info-box {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 20px;
      color: white;
      text-align: center;
      backdrop-filter: blur(10px);
    }

    .info-box p {
      margin: 8px 0;
      line-height: 1.6;
    }

    .info-box strong {
      color: #fff;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 2rem;
      }

      .languages-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 12px;
      }

      .language-card {
        padding: 6px;
        min-height: 130px;
      }

      .flag-container {
        height: 60px;
        margin-bottom: 6px;
      }

      .language-name {
        font-size: 0.8rem;
      }

      .language-code {
        font-size: 0.65rem;
      }
    }

    @media (max-width: 480px) {
      header h1 {
        font-size: 1.5rem;
      }

      header p {
        font-size: 1rem;
      }

      body {
        padding: 20px 10px;
      }

      .languages-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 10px;
        margin-bottom: 30px;
      }

      .language-card {
        padding: 4px;
        min-height: 120px;
        border-radius: 8px;
      }

      .flag-container {
        height: 55px;
        margin-bottom: 4px;
      }

      .language-name {
        font-size: 0.75rem;
      }

      .language-code {
        font-size: 0.6rem;
      }

      .info-box {
        padding: 15px;
        border-radius: 8px;
      }

      .info-box p {
        font-size: 0.85rem;
      }

      .back-link {
        font-size: 0.9rem;
      }
    }

    @media (max-width: 360px) {
      header h1 {
        font-size: 1.3rem;
        margin-bottom: 8px;
      }

      header p {
        font-size: 0.85rem;
      }

      .languages-grid {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: 8px;
        margin-bottom: 25px;
      }

      .language-card {
        padding: 3px;
        min-height: 110px;
      }

      .flag-container {
        height: 50px;
        margin-bottom: 3px;
      }

      .language-name {
        font-size: 0.7rem;
      }

      .language-code {
        font-size: 0.55rem;
      }

      .info-box {
        padding: 12px;
      }

      .info-box p {
        font-size: 0.8rem;
        margin: 6px 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <a href="../index.html" class="back-link">⬅️ Torna alla home</a>

    <header>
      <h1>🌐 Traduzioni ldm4app</h1>
      <p>Scegli la lingua in cui vuoi tradurre dal italiano</p>
    </header>

    <div class="languages-grid" id="languagesGrid"></div>

    <div class="info-box">
      <p><strong>💡 Suggerimento:</strong> Clicca su una bandiera per iniziare a tradurre in quella lingua.</p>
      <p>Powered by <strong>MyMemory API</strong> - Gratuito e Illimitato</p>
    </div>
  </div>

  <script>
    const LANGUAGES = [
      { code: 'en', name: 'Inglese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#002868"/><rect x="0" y="60" width="300" height="80" fill="#FFF"/><rect x="120" y="0" width="60" height="200" fill="#FFF"/><rect x="130" y="0" width="40" height="200" fill="#C8102E"/><rect x="0" y="70" width="300" height="60" fill="#C8102E"/></svg>' },
      { code: 'es', name: 'Spagnolo', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="50" fill="#C60B1E"/><rect y="50" width="300" height="100" fill="#FFC400"/><rect y="150" width="300" height="50" fill="#C60B1E"/></svg>' },
      { code: 'fr', name: 'Francese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="200" fill="#002395"/><rect x="100" width="100" height="200" fill="#FFF"/><rect x="200" width="100" height="200" fill="#ED2939"/></svg>' },
      { code: 'de', name: 'Tedesco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#000"/><rect y="67" width="300" height="67" fill="#D00"/><rect y="134" width="300" height="66" fill="#FFCE00"/></svg>' },
      { code: 'pt', name: 'Portoghese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="120" height="200" fill="#006600"/><rect x="120" width="180" height="200" fill="#FF0000"/></svg>' },
      { code: 'ru', name: 'Russo', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FFF"/><rect y="67" width="300" height="67" fill="#0039A6"/><rect y="134" width="300" height="66" fill="#D52B1E"/></svg>' },
      { code: 'pl', name: 'Polacco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" fill="#FFF"/><rect y="100" width="300" height="100" fill="#DC143C"/></svg>' },
      { code: 'nl', name: 'Olandese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#AE1C28"/><rect y="67" width="300" height="67" fill="#FFF"/><rect y="134" width="300" height="66" fill="#21468B"/></svg>' },
      { code: 'ja', name: 'Giapponese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#FFF"/><circle cx="150" cy="100" r="60" fill="#D00"/></svg>' },
      { code: 'zh', name: 'Cinese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#DE2910"/><polygon points="90,40 110,100 170,100 120,145 145,210 90,160 35,210 60,145 10,100 70,100" fill="#FFD700"/></svg>' },
      { code: 'ar', name: 'Arabo', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#006C00"/><rect y="67" width="300" height="67" fill="#FFF"/><rect y="134" width="300" height="66" fill="#000"/></svg>' },
      { code: 'hi', name: 'Hindi', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FF9933"/><rect y="67" width="300" height="67" fill="#FFF"/><rect y="134" width="300" height="66" fill="#138808"/></svg>' },
      { code: 'ko', name: 'Coreano', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#FFF"/><defs><mask id="top"><rect width="300" height="100" fill="white"/></mask></defs><circle cx="150" cy="100" r="55" fill="#C60C30"/><circle cx="150" cy="100" r="55" fill="#003478" mask="url(#top)"/><circle cx="150" cy="85" r="15" fill="#003478"/><circle cx="150" cy="115" r="15" fill="#C60C30"/></svg>' },
      { code: 'tr', name: 'Turco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#E30A17"/><circle cx="100" cy="100" r="30" fill="#FFF"/><polygon points="120,85 125,100 115,100" fill="#E30A17"/></svg>' },
      { code: 'vi', name: 'Vietnamita', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#CE1126"/><polygon points="150,50 165,90 210,90 175,125 190,165 150,130 110,165 125,125 90,90 135,90" fill="#FFD700"/></svg>' },
      { code: 'th', name: 'Tailandese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="40" fill="#A51931"/><rect y="40" width="300" height="40" fill="#FFF"/><rect y="80" width="300" height="40" fill="#0B2351"/><rect y="120" width="300" height="40" fill="#FFF"/><rect y="160" width="300" height="40" fill="#A51931"/></svg>' },
      { code: 'id', name: 'Indonesiano', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" fill="#FF0000"/><rect y="100" width="300" height="100" fill="#FFF"/></svg>' },
      { code: 'fil', name: 'Filippino', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="150" height="200" fill="#0066FF"/><rect x="150" width="150" height="100" fill="#FFF"/><rect x="150" y="100" width="150" height="100" fill="#CE1126"/></svg>' },
      { code: 'my', name: 'Birmano', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="150" height="200" fill="#007FFF"/><polygon points="140,50 160,100 135,125 165,125 140,150" fill="#FFD700"/><rect x="150" width="150" height="200" fill="#FECB00"/></svg>' },
      { code: 'km', name: 'Khmer', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="50" fill="#003478"/><rect y="50" width="300" height="100" fill="#E8334A"/><rect y="150" width="300" height="50" fill="#003478"/></svg>' },
      { code: 'lo', name: 'Lao', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="200" fill="#CE1126"/><rect x="100" width="100" height="200" fill="#FFF"/><rect x="200" width="100" height="200" fill="#CE1126"/></svg>' },
      { code: 'ms', name: 'Malese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="20" fill="#FCD116" stroke="#000" stroke-width="2"/><rect y="20" width="300" height="180" fill="#CE1126" stroke="#000" stroke-width="2"/><circle cx="80" cy="100" r="40" fill="#FFF"/></svg>' },
      { code: 'uk', name: 'Ucraino', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" fill="#005BBF"/><rect y="100" width="300" height="100" fill="#FFD700"/></svg>' },
      { code: 'cs', name: 'Ceco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" fill="#FFF"/><rect y="100" width="300" height="100" fill="#CE2029"/><polygon points="120,100 0,20 0,180" fill="#11457E"/></svg>' },
      { code: 'hu', name: 'Ungherese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#ED2939"/><rect y="67" width="300" height="67" fill="#FFF"/><rect y="134" width="300" height="66" fill="#00AA4D"/></svg>' },
      { code: 'ro', name: 'Rumeno', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="200" fill="#001A70"/><rect x="100" width="100" height="200" fill="#FCD116"/><rect x="200" width="100" height="200" fill="#CE1126"/></svg>' },
      { code: 'sv', name: 'Svedese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#006AA7"/><rect x="40" y="0" width="80" height="200" fill="#FFCD00"/><rect x="0" y="60" width="300" height="80" fill="#FFCD00"/></svg>' },
      { code: 'fi', name: 'Finlandese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#FFF"/><rect x="40" y="0" width="60" height="200" fill="#003580"/><rect x="0" y="60" width="300" height="80" fill="#003580"/></svg>' },
      { code: 'da', name: 'Danese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#C8102E"/><rect x="40" y="0" width="70" height="200" fill="#FFF"/><rect x="0" y="60" width="300" height="80" fill="#FFF"/></svg>' },
      { code: 'no', name: 'Norvegese', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#BA0C2F"/><rect x="50" y="0" width="60" height="200" fill="#002868"/><rect x="0" y="70" width="300" height="60" fill="#002868"/><rect x="60" y="0" width="40" height="200" fill="#FFF"/><rect x="0" y="80" width="300" height="40" fill="#FFF"/></svg>' },
      { code: 'el', name: 'Greco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="40" fill="#005EB8"/><rect y="40" width="300" height="40" fill="#FFF"/><rect y="80" width="300" height="40" fill="#005EB8"/><rect y="120" width="300" height="40" fill="#FFF"/><rect y="160" width="300" height="40" fill="#005EB8"/></svg>' },
      { code: 'he', name: 'Ebraico', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="200" fill="#FFF"/><rect y="70" width="300" height="60" fill="#0066CC"/><polygon points="150,80 160,100 140,100" fill="#0066CC"/></svg>' },
      { code: 'sk', name: 'Slovacco', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FFFFFF"/><rect y="67" width="300" height="67" fill="#0B4F8F"/><rect y="134" width="300" height="66" fill="#EF2B2D"/></svg>' },
      { code: 'sl', name: 'Sloveno', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FFFFFF"/><rect y="67" width="300" height="67" fill="#0052CC"/><rect y="134" width="300" height="66" fill="#ED1C24"/></svg>' },
      { code: 'bg', name: 'Bulgaro', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FFFFFF"/><rect y="67" width="300" height="67" fill="#00966E"/><rect y="134" width="300" height="66" fill="#D62612"/></svg>' },
      { code: 'hr', name: 'Croato', svg: '<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="67" fill="#FF0000"/><rect y="67" width="300" height="67" fill="#FFFFFF"/><rect y="134" width="300" height="66" fill="#0000FF"/></svg>' },
    ];

    const grid = document.getElementById('languagesGrid');

    LANGUAGES.forEach(lang => {
      const card = document.createElement('div');
      card.className = 'language-card';
      card.onclick = () => selectLanguage(lang.code);

      const flagDiv = document.createElement('div');
      flagDiv.className = 'flag-container';
      flagDiv.innerHTML = lang.svg;

      const nameDiv = document.createElement('div');
      nameDiv.className = 'language-name';
      nameDiv.textContent = lang.name;

      const codeDiv = document.createElement('div');
      codeDiv.className = 'language-code';
      codeDiv.textContent = `(${lang.code})`;

      card.appendChild(flagDiv);
      card.appendChild(nameDiv);
      card.appendChild(codeDiv);

      grid.appendChild(card);
    });

    function selectLanguage(code) {
      sessionStorage.setItem('selectedLanguage', code);
      window.location.href = 'api-translate.html?v=' + new Date().getTime();
    }
  </script>
</body>
</html>