<!DOCTYPE html> 
 <html lang="fr"> 
 <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>ATH Translate</title> 
     <link rel="stylesheet" href="style.css"> 
     <link rel="icon" href="ai.jpg"> 
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> 
 </head> 
 <body> 
     <div class="container"> 
         <header> 
             <div class="logo"> 
                 <h1>ATH TRAD</h1> 
             </div> 
             <div class="mode-switch"> 
                 <input type="checkbox" id="dark-mode-toggle"> 
                 <label for="dark-mode-toggle"> 
                     <i class="fas fa-moon"></i> 
                     <i class="fas fa-sun"></i> 
                 </label> 
             </div> 
         </header> 
  
         <main> 
             <div class="language-container"> 
                 <div class="language-select source"> 
                     <label>Source</label> 
                     <select id="input-language"> 
                         <option value="auto">🌐 Auto-détection</option> 
                         <option value="en">🇬🇧 English</option> 
                         <option value="fr">🇫🇷 Français</option> 
                         <option value="mg">🇲🇬 Malagasy</option> 
                     </select> 
                 </div> 
                  
                 <div class="language-select destination"> 
                     <label>Destination</label> 
                     <select id="output-language"> 
                         <option value="fr">🇫🇷 Français</option> 
                         <option value="en">🇬🇧 English</option> 
                         <option value="mg">🇲🇬 Malagasy</option> 
                     </select> 
                 </div> 
             </div> 
  
             <div class="translation-wrapper"> 
                 <div class="input-area"> 
                     <textarea id="input-text" placeholder="Entrez votre texte ici..."></textarea> 
                 </div> 
                  
                 <div class="action-section"> 
                     <button id="translate-button"> 
                         <i class="fas fa-exchange-alt"></i> Traduire 
                     </button> 
                     <button id="clear-button"> 
                         <i class="fas fa-trash-alt"></i> Effacer 
                     </button> 
                 </div> 
  
                 <div class="output-area"> 
                     <textarea id="output-text" readonly placeholder="Traduction..."></textarea> 
                 </div> 
  
                 <div class="copy-section"> 
                     <button id="copy-button"> 
                         <i class="fas fa-copy"></i> Copier 
                     </button> 
                 </div> 
             </div> 
         </main> 
  
         <footer> 
              <p>&copy; 2024 ATHANASIUS. Tous droits réservés.</p> 
         </footer> 
     </div> 
     <script src="script.js"></script> 
 </body> 
 </html>