Skip to content
Snippets Groups Projects
popup.html 9.65 KiB
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extension BaLex</title>
  <script src="../utils/logger.js"></script>
  <style>
    @font-face {
      font-family: 'Luciole';
      src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
          url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    #extension-notification {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 15px;
      border-radius: 8px;
      text-align: center;
      width: 80%;
      max-width: 250px;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    #extension-notification.hidden {
      opacity: 0;
      visibility: hidden;
    }

    #close-notification {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #8d5c70;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      font-weight: bold;
    }

    #close-notification:hover {
      background-color: #dddedd;
      color: #8d5c70;
    }

    body {
      font-family: Luciole;
      font-size: medium;
      margin: 0;
      padding: 8px;
      background-color: #525877;
      color: #323046;
      border-radius: 10px;
      width: 200px;
    }
    button {
      font-family: Luciole;
      width: 100%;
      padding: 12px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: bold;
      border: none;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.3s, transform 0.2s;
      background-color: #a08e9f;
      color: white;
    }
    button:hover {
      background-color: #dddedd;
      color: #8d5c70;
    }
    #auth-button {
      width: auto;
      display: inline-flex;
      padding: 6px 12px;
      font-size: 18px;
      font-family: Luciole;
      background: none;
      border: none;
      color: white;
      align-items: center;
      gap: 6px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.3s;
      text-align: center;
    }
    #auth-button:hover {
      background: rgba(255,255,255,0.2);
    }
    #auth-button svg {
      width: 18px;
      height: 18px;
      fill: white;
      transition: transform 0.3s ease-in-out;
    }
    #auth-button:hover svg {
      transform: scale(1.1);
    }
    #auth-section {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
    }
    #extension-name {
      font-family: Luciole;
      text-align: center;
      font-size: 23px;
      font-weight: bold;
      padding: 5px;
      color: #8d5c70; 
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: white;
    }
    .option-container {
      background: #444;
      padding: 12px;
      border-radius: 10px;
      margin-top: 4px;
      margin-bottom: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .option-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      padding: 12px;
      margin-bottom: 4px;
      border-radius: 6px;
      background-color: #444;
      color: white;
      font-size: 0.6rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .option-row:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .option-row label {
      font-weight: lighter;
      flex: 1;
      margin: 0;
      font-size: 0.9rem;
      align-items: center;
    }

    .option-row input[type="checkbox"],
    .option-row input[type="number"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #8d5c70;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
      transition: background-color 0.3s, border-color 0.3s;
    }

    .option-row input[type="checkbox"]:checked {
      background-color: #8d5c70;
      border-color: #8d5c70;
    }

    .toggle-switch {
      position: absolute;
      display: inline-block;
      width: 30px;
      height: 16px;
      right: 0;
      left: auto;
    }
    .toggle-switch .slider:before {
      position: absolute;
      content: "";
      width: 12px;       
      height: 12px;      
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 24px;
    }

    input:checked + .slider {
      background-color: #8d5c70;
    }

    input:checked + .slider:before {
      transform: translateX(14px);
    }

    .threshold-container input[type="number"] {
      width: 45px;   
      height: 45px;
      line-height: 50px;   
      text-align: center;
      border-radius: 50%;    
      border: 2px solid #8d5c70;
      font-size: 0.8rem;
      box-sizing: border-box;
      background: #fff;
      color: #333;
    }

    #save-options {
      border: none;
      background: #8d5c70;
      border-radius: 6px;
      color: white;
      padding: 8px 12px;
      font-size: 0.9rem;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }
    #save-options:hover {
      background: #ccc;
      color: #8d5c70;
      transform: translateY(-2px);
    }
    .language-selection {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .lang-option {
      padding: 4px 10px;
      border: 2px solid #8d5c70;
      border-radius: 16px;
      background: rgb(152, 152, 152);
      color: #8d5c70;
      cursor: pointer;
      font-size: 0.85rem;
      transition: background 0.3s, color 0.3s, transform 0.2s;
    }
    .lang-option:hover {
      background: #8d5c70;
      color: white;
      transform: scale(1.05);
    }
    .lang-option.selected {
      background: #8d5c70;
      color: white;
      border-color: #8d5c70;
    }

    /* #stats-options {
      border: 1px solid #555;
      border-radius: 8px;
      align-items: center;
    } */

    .option-row.auto-add-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      margin-bottom: 0;
      background: transparent;        
      border-bottom: 1px solid #555;    
    }
    .option-row.auto-add-row span {
      font-size: 16px;
      font-weight: lighter;
    }

    .option-row.stopwords {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.9rem;
      font-weight: lighter;
    }

    /* .option-row.auto-add-row input[type="checkbox"] {
      appearance: none;
      width: 24px;
      margin-left: 10px;
      height: 24px;
      border: 2px solid #8d5c70;
      border-radius: 4px;
      background: #fff;
      cursor: pointer;
      transition: background 0.3s;
    } */

    /* .option-row.auto-add-row input[type="checkbox"]:checked {
      background: #8d5c70;
    } */
    
    #open-stats {
      padding: 6px;
      font-weight: lighter;
      width: auto;
      display: block;
      margin: 0 auto;
      background-color: #525877;
      color: white;
      border: 2px solid #8d5c70;
      border-radius: 8px;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="extension-name">Extension BaLex</div>
  <div id="auth-section">
    <button id="auth-button">
      <span id="auth-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M10 2a1 1 0 0 1 1 1v2h2V3a1 1 0 0 1 2 0v2h2a2 2 0 0 1 2 2v3h-2V7h-2v3a1 1 0 1 1-2 0V7h-2v3a1 1 0 1 1-2 0V7H6v3H4V7a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1Z"/>
        </svg>
      </span>
      <span id="auth-text">Se connecter</span>
    </button>
  </div>
  <button id="toggleExtensionBtn">Activer/Désactiver</button>
  <button id="toggleStatsBtn">Statistiques</button>
  <button id="open-stats">Afficher les statistiques</button>
  
  <div id="stats-options" class="option-container">
    <div class="option-row auto-add-row">
      <span>Ajout automatique</span>
      <label class="toggle-switch">
        <input type="checkbox" id="auto-add">
        <span class="slider"></span>
      </label>
    </div>
    
  <div id="auto-add-options" class="hidden">
    <div class="option-row stopwords">
      <span>Inclure mots outils</span>
      <label class="toggle-switch">
        <input type="checkbox" id="include-stopwords" />
        <span class="slider"></span>
      </label>
    </div>
    
      
    <div class="option-row threshold-container">
      <label for="threshold">Seuil d'ajout d'un mot</label>
      <input type="number" id="threshold" value="10" min="1" />
    </div>
      
    <div class="option-row">
      <label>Langues suivies</label>
      <div id="language-selection" class="language-selection">
        <p id="loading-languages" style="color: gray;">Chargement...</p>
      </div>
    </div>

    <!-- Message d'erreur si on ne sélectionne pas une langue à suivre-->
    <div id="error-message" class="hidden">
      <p>Veuillez sélectionner au moins une langue avant de sauvegarder.</p>
    </div>      
    <button id="save-options" class="hidden">Valider</button>
  </div>

  </div>

  <div id="extension-notification" class="hidden">
    <p id="notification-text"></p>
    <button id="close-notification">OK</button>
  </div>
  
  <script src="../utils/api.js"></script>
  <script src="popup.js"></script>
</body>
</html>