diff --git a/src/popup/popup.html b/src/popup/popup.html
index c19f7cff6b3f03d5362e244a672060fb26710d91..fc506d5efe7bba2ca89b7b7f813e05fb1547a1b1 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -55,14 +55,14 @@
}
button {
width: 100%;
- padding: 10px;
+ padding: 12px;
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 6px;
- transition: background 0.3s;
+ transition: background 0.3s, transform 0.2s;
background-color: #a08e9f;
color: white;
}
@@ -114,45 +114,201 @@
-webkit-text-stroke-color: white;
}
.option-container {
- background: #a08e9f;
- padding: 8px;
- border-radius: 8px;
- margin-top: 10px;
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+ 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;
- margin-bottom: 8px;
+ 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;
}
- .threshold-container input {
- width: 50px;
+
+ .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;
- padding: 4px;
- border-radius: 4px;
- border: 1px solid #a08e9f;
- background: #525877;
+ 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;
- justify-content: center;
- gap: 6px;
- margin-top: 4px;
+ gap: 8px;
}
.lang-option {
- padding: 5px 8px;
- background-color: #dcdde1;
+ padding: 4px 10px;
border: 2px solid #8d5c70;
- border-radius: 6px;
+ border-radius: 16px;
+ background: #fff;
+ color: #8d5c70;
cursor: pointer;
- transition: all 0.3s ease;
+ 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-color: #8d5c70;
+ 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.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;
@@ -173,37 +329,42 @@
</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">
- <label for="auto-add">Ajout automatique</label>
- <input type="checkbox" id="auto-add" />
+ <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">
- <label for="include-stopwords">Inclure mots outils</label>
- <input type="checkbox" id="include-stopwords" />
- </div>
+ <div id="auto-add-options" class="hidden">
+ <div class="option-row">
+ <label for="include-stopwords">Inclure mots outils</label>
+ <input type="checkbox" id="include-stopwords" />
+ </div>
- <div class="option-row threshold-container">
- <label for="threshold">Seuil</label>
- <input type="number" id="threshold" value="10" min="1" />
- </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 class="option-row">
+ <label>Langues suivies</label>
+ <div id="language-selection" class="language-selection">
+ <p id="loading-languages" style="color: gray;">Chargement...</p>
</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>
+ <!-- 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">
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 48d60c1a75838b65812f04d5938b7208b5283612..819508d0e39bbb46aed18a19bb8e2da4fbe3a399 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -184,6 +184,11 @@ document.getElementById("save-options").addEventListener("click", async () => {
log("Options sauvegardées :", { autoAdd, threshold, trackedLanguages: selectedLanguages });
});
+document.getElementById("open-stats").addEventListener("click", function() {
+ window.open("stats.html", "_blank");
+});
+
+
// === 5. Gestion de l'activation/désactivation de l'extension ===
async function updateExtensionToggleButton() {
const { accessToken, extensionActive } = await browser.storage.local.get(["accessToken", "extensionActive"]);
@@ -318,3 +323,4 @@ document.addEventListener("DOMContentLoaded", async () => {
await updateLanguageSelection();
await updateExtensionToggleButton();
});
+