diff --git a/README-EN.md b/README-EN.md index c438a9c..ffb6a43 100644 --- a/README-EN.md +++ b/README-EN.md @@ -2,11 +2,11 @@ -![Static Badge](https://img.shields.io/badge/Release-1.0.0-blue?style=flat&logo=Test) +![Static Badge](https://img.shields.io/badge/Release-1.1.0-blue?style=flat&logo=Test) -![Static Badge](https://img.shields.io/badge/Build-1.0.1--beta-yellow?style=flat&logo=Test) +![Static Badge](https://img.shields.io/badge/Build-1.1.1--beta-yellow?style=flat&logo=Test) > This project aims to enable free, open-source, and unrestricted downloading of Video/Audio content. Eventually, it will allow users to choose @@ -17,6 +17,8 @@ ✅ Detailed Logs (Console + Logs) ✅ Automatic Fetch of Information ✅ Playlist Download +✅ Theme selection +✅ Custom output path selection for videos --- diff --git a/README.md b/README.md index 20e6059..eca6c08 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ -![Static Badge](https://img.shields.io/badge/Release-1.0.0-blue?style=flat&logo=Test) +![Static Badge](https://img.shields.io/badge/Release-1.1.0-blue?style=flat&logo=Test) -![Static Badge](https://img.shields.io/badge/Build-1.0.1--beta-yellow?style=flat&logo=Test) +![Static Badge](https://img.shields.io/badge/Build-1.1.1--beta-yellow?style=flat&logo=Test) > Ce projet a pour but de permettre le téléchargement de contenu Vidéo/Audio de manière gratuite, open source et libre. Il permettra à terme de choisir @@ -17,6 +17,8 @@ ✅ Logs détaillés (console + fichiers logs) ✅ Récupération automatique des informations ✅ Téléchargement des playlists +✅ Choix de thèmes +✅ Choix du chemin de sortie des vidéos personnalisés --- diff --git a/public/assets/images/Vilbrequin.avif b/public/assets/images/Vilbrequin.avif new file mode 100644 index 0000000..e115f98 Binary files /dev/null and b/public/assets/images/Vilbrequin.avif differ diff --git a/public/assets/images/cyberpunk4.webp b/public/assets/images/cyberpunk4.webp new file mode 100644 index 0000000..bb0dfd5 Binary files /dev/null and b/public/assets/images/cyberpunk4.webp differ diff --git a/public/assets/images/goat2.webp b/public/assets/images/goat2.webp deleted file mode 100644 index 7070ba9..0000000 Binary files a/public/assets/images/goat2.webp and /dev/null differ diff --git a/public/assets/images/spicy.webp b/public/assets/images/spicy.webp new file mode 100644 index 0000000..da2b756 Binary files /dev/null and b/public/assets/images/spicy.webp differ diff --git a/public/index.html b/public/index.html index 2a1f95d..d317159 100644 --- a/public/index.html +++ b/public/index.html @@ -18,8 +18,8 @@ - -
+ +

Freedom Loader

@@ -51,54 +51,40 @@ -
- Sera enregistré dans - -
- -
- - - - +
+
+ Sera enregistré dans + +
+ +
+
+ + - - - + - \ No newline at end of file + + \ No newline at end of file diff --git a/public/script/custompath.js b/public/script/custompath.js index c7b047e..54eaaea 100644 --- a/public/script/custompath.js +++ b/public/script/custompath.js @@ -1,3 +1,21 @@ +/* + This file is part of Freedom Loader. + + Copyright (C) 2025 MasterAcnolo + + Freedom Loader is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License. + + Freedom Loader is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. + See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see . +*/ + /* Ce script attend que le DOM soit complètement chargé pour initialiser l'affichage et la gestion du chemin de sauvegarde personnalisé. @@ -9,15 +27,24 @@ de choisir un dossier via une boîte de dialogue native. 5. Met à jour l'affichage et la valeur cachée du chemin sélectionné. */ + window.addEventListener("DOMContentLoaded", async () => { - const defaultPath = await window.electronAPI.getDefaultDownloadPath(); const savePathElem = document.getElementById("savePath"); - if (savePathElem) { - savePathElem.textContent = defaultPath; + // 1️Essayer de charger depuis le localStorage + let savedPath = localStorage.getItem("customDownloadPath"); + + // 2️Sinon demander le chemin par défaut à l'API Electron + if (!savedPath) { + savedPath = await window.electronAPI.getDefaultDownloadPath(); } - // Vérifie si l'input caché existe déjà, sinon le crée et l'ajoute au formulaire + // 3 Afficher le chemin + if (savePathElem) { + savePathElem.textContent = savedPath; + } + + // Créer l'input caché s'il n'existe pas déjà let hidden = document.getElementById("savePathInput"); if (!hidden) { hidden = document.createElement("input"); @@ -26,14 +53,19 @@ window.addEventListener("DOMContentLoaded", async () => { hidden.id = "savePathInput"; document.getElementById("downloadForm").appendChild(hidden); } - hidden.value = defaultPath; + hidden.value = savedPath; - // Gestion du clic sur le bouton pour changer le dossier de téléchargement + // Gestion du bouton de modification document.getElementById("changePath").addEventListener("click", async () => { const selectedPath = await window.electronAPI.selectDownloadFolder(); if (selectedPath) { + // Met à jour l'affichage savePathElem.textContent = selectedPath; hidden.value = selectedPath; + + // Et le stocke en localStorage pour la prochaine fois + localStorage.setItem("customDownloadPath", selectedPath); } }); }); + diff --git a/public/script/customthemes.js b/public/script/customthemes.js new file mode 100644 index 0000000..f39c271 --- /dev/null +++ b/public/script/customthemes.js @@ -0,0 +1,105 @@ +/* + This file is part of Freedom Loader. + + Copyright (C) 2025 MasterAcnolo + + Freedom Loader is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License. + + Freedom Loader is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. + See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see . +*/ + +// Liste des thèmes disponibles (clé = nom, valeur = label affiché) +const themes = { + default: "Default", + dark: "Sombre", + light: "Clair", + chirac: "Chirac", + fanatic: "Fanatic", + cyberpunk: "Cyberpunk", + spicy: "Spicy", + vilbrequin: "Vilbrequin" +}; + +const themeSubtitles = { + default: "Because why not?", + dark: "Darkness is my ally", + light: "Qui aime ce thème ?", + chirac: "J'aime les pommes", + fanatic: "Always Fnatic !", + cyberpunk: "Wake up, choom. We’ve got a city to burn.", + spicy: "The Spiciest One", + vilbrequin: "Rend l'argent" +}; + +const themeSelect = document.getElementById("themeSelect"); + +// Remplir le select avec les options +function populateThemeSelect() { + for (const [key, label] of Object.entries(themes)) { + const option = document.createElement("option"); + option.value = key; + option.textContent = label; + themeSelect.appendChild(option); + } +} + +// Appliquer le thème sur le body et changer le subtitle +function applyTheme(themeName) { + // Supprime les classes thème précédentes + document.body.classList.remove(...Object.keys(themes)); + // Ajoute la classe du thème actuel + document.body.classList.add(themeName); + + // Modifier le subtitle + const subtitle = document.getElementById("subtitle"); + if (subtitle && themeSubtitles[themeName]) { + subtitle.textContent = themeSubtitles[themeName]; + } + + // Optionnel : animation spéciale Chirac + if (themeName === "chirac") { + requestAnimationFrame(() => { + document.body.classList.add("theme-active"); + }); + } else { + document.body.classList.remove("theme-active"); + } +} + +// Sauvegarder le thème en localStorage +function saveTheme(themeName) { + localStorage.setItem("selectedTheme", themeName); +} + +// Charger le thème au démarrage +function loadTheme() { + const savedTheme = localStorage.getItem("selectedTheme"); + if (savedTheme && themes[savedTheme]) { + applyTheme(savedTheme); + themeSelect.value = savedTheme; + } else { + applyTheme("dark"); + themeSelect.value = "dark"; + } +} + +// Quand l’utilisateur change le select +themeSelect.addEventListener("change", (e) => { + const selected = e.target.value; + if (themes[selected]) { + applyTheme(selected); + saveTheme(selected); + } +}); + +// Initialisation +populateThemeSelect(); +loadTheme(); diff --git a/public/styles/components/checkbox.css b/public/styles/components/checkbox.css index 2db0891..bfb8fc4 100644 --- a/public/styles/components/checkbox.css +++ b/public/styles/components/checkbox.css @@ -15,15 +15,15 @@ } .checkmark { - --clr: #3B82F6 ; + --clr: var(--checkbox-bg-checked); position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; - background-color: #ccc; - border-radius: 50%; - transition: 300ms; + background-color: var(--checkbox-bg-default); + border-radius: .5rem; + transition: background-color 300ms, border-radius 300ms; } .checkbox-mp3 input:checked ~ .checkmark { @@ -47,7 +47,7 @@ top: 0.25em; width: 0.25em; height: 0.5em; - border: solid #E0E0E2; + border: solid var(--checkbox-checkmark-border-color); border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); } @@ -70,4 +70,4 @@ box-shadow: 0 0 0 13px var(--checkbox-pulse-color); rotate: 0; } -} \ No newline at end of file +} diff --git a/public/styles/components/editpathbutton.css b/public/styles/components/editpathbutton.css new file mode 100644 index 0000000..7668587 --- /dev/null +++ b/public/styles/components/editpathbutton.css @@ -0,0 +1,41 @@ +.download-path { + margin-top: 1em; + font-size: 1rem; + color: var(--default-text-color); +} + +.download-path #savePath:empty { + display: none; +} + +.download-path #savePath { + font-size: 1rem; + font-weight: 600; + background-color: rgba(0, 0, 0, 0.1); + color: var(--form-input-text-color); + padding: 0.3em 0.6em; + border-radius: 6px; + font-family: monospace; + border: 1px dashed var(--form-input-border-color); + word-break: break-all; + display: inline-block; + max-width: 80%; +} + + +.download-path button#changePath { + margin-left: 0.5em; + background-color: var(--form-button-bg-color); + color: var(--form-button-text-color); + border: none; + padding: 0.3em 0.8em; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); +} + +.download-path button#changePath:hover { + background-color: var(--form-button-bg-hover-color); + transform: scale(1.05); +} diff --git a/public/styles/components/themebutton.css b/public/styles/components/themebutton.css new file mode 100644 index 0000000..84693e6 --- /dev/null +++ b/public/styles/components/themebutton.css @@ -0,0 +1,38 @@ +.theme-switcher { + position: absolute; + top: 10px; + right: 10px; + background: #242424; + padding: 8px 12px; + border-radius: 8px; + color: #fff; + font-family: sans-serif; + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 8px; + z-index: 1000; +} + +.theme-switcher label { + cursor: pointer; + font-weight: 600; +} + +.theme-switcher select { + background: #fff; + border: 1px solid #242424; + border-radius: 6px; + padding: 4px 8px; + color: #000; + cursor: pointer; + font-weight: 600; + transition: background 0.3s ease, color 0.3s ease; +} + +.theme-switcher select:hover, +.theme-switcher select:focus { + background: #474747; + color: #fff; + outline: none; +} diff --git a/public/styles/layout/ctr-infos.css b/public/styles/layout/ctr-infos.css index ef1e29e..1eb8e74 100644 --- a/public/styles/layout/ctr-infos.css +++ b/public/styles/layout/ctr-infos.css @@ -4,7 +4,7 @@ min-height: 1.5em; font-weight: bold; text-align: center; - color: #007bff; + color: var(--download-status-color); } label { diff --git a/public/styles/layout/form.css b/public/styles/layout/form.css index faa7f41..0fac138 100644 --- a/public/styles/layout/form.css +++ b/public/styles/layout/form.css @@ -1,5 +1,5 @@ form { - background-color: #fff; + background-color: var(--form-bg-color); padding: 2em; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); @@ -13,8 +13,10 @@ form input[type="text"], form input[type="url"], form select { padding: 0.75em; - border: 1px solid #ccc; + border: 1px solid var(--form-input-border-color); border-radius: 8px; + background-color: var(--form-input-bg-color); + color: var(--form-input-text-color); } form input[type="checkbox"] { @@ -22,8 +24,8 @@ form input[type="checkbox"] { } form button { - background-color: #007bff; - color: #fff; + background-color: var(--form-button-bg-color); + color: var(--form-button-text-color); border: none; padding: 0.75em; border-radius: 8px; @@ -32,42 +34,43 @@ form button { } form button:hover { - background-color: #0056b3; + background-color: var(--form-button-bg-hover-color); } form#downloadForm { - display: flex; - gap: 0.5em; - max-width: 600px; - width: 100%; - justify-content: center; + display: flex; + gap: 0.5em; + max-width: 600px; + width: 100%; + justify-content: center; } .checkbox-inline { - display: flex; - align-items: center; - align-self: center; - gap: 0.5em; + display: flex; + align-items: center; + align-self: center; + gap: 0.5em; + color: var(--form-input-text-color); } #UrlInput { - padding: 0.75em 1em; - border-color: #ccc; - box-shadow: none; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.3s ease, box-shadow 0.3s ease; - background-color: #f9f9f9; - color: #333; + padding: 0.75em 1em; + border-color: var(--form-input-border-color); + box-shadow: none; + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + background-color: var(--form-input-bg-color); + color: var(--form-input-text-color); } #UrlInput:focus { - border-color: #0056b3; - box-shadow: 0 0 5px rgba(0,123,255,0.4); - outline: none; - background-color: #fff; + border-color: var(--form-input-border-focus-color); + box-shadow: 0 0 5px rgba(0,123,255,0.4); + outline: none; + background-color: var(--form-input-bg-color); } #UrlInput::placeholder { - color: #aaa; + color: var(--form-input-placeholder-color); } diff --git a/public/styles/layout/videoinfo.css b/public/styles/layout/videoinfo.css index bc8a43c..4ed8b11 100644 --- a/public/styles/layout/videoinfo.css +++ b/public/styles/layout/videoinfo.css @@ -7,7 +7,7 @@ background-color: var(--infos-box-color); border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); - color: #222; + color: var(--video-info-text-color); font-size: 1rem; line-height: 1.5; opacity: 0; @@ -27,7 +27,7 @@ #videoInfo h3 { font-size: 1.8rem; margin-bottom: 0.6em; - color: #007bff; + color: var(--video-info-heading-color); font-weight: 700; word-break: break-word; } @@ -51,15 +51,15 @@ #videoInfo ul li { margin-bottom: 0.5em; font-weight: 500; - color: #444; + color: var(--video-info-list-color); } #videoInfo ul li strong { - color: #000; + color: var(--video-info-list-strong-color); } #videoInfo ul li a { - color: #007bff; + color: var(--video-info-link-color); text-decoration: none; } diff --git a/public/styles/styles.css b/public/styles/styles.css index 1f8f64c..16c0fa0 100644 --- a/public/styles/styles.css +++ b/public/styles/styles.css @@ -4,10 +4,22 @@ @import url("layout/header.css"); @import url("layout/videoinfo.css"); @import url("components/checkbox.css"); -@import url("variables.css"); +@import url("components/themebutton.css"); +/* @import url("variables.css"); */ +@import url("theme/themeimport.css"); +@import url("components/editpathbutton.css"); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +#app { + display: block; + opacity: 0; + transition: opacity 0.6s ease; +} +#app.visible { + opacity: 1; +} + html,body{ margin: 0; padding: 0; @@ -34,6 +46,7 @@ body { display: flex; flex-direction: column; align-items: center; + } @@ -45,22 +58,11 @@ header p{ color: var(--mp3-text-color); } -/* #videoInfo { - margin-top: 100px; - padding: 1em; - max-width: 600px; - margin-left: auto; - margin-right: auto; - border-radius: 8px; - color: rgb(0, 0, 0); - box-shadow: 0 0 10px rgba(0,0,0,0.5); - transition: opacity 0.5s ease, max-height 0.5s ease; - opacity: 0; - max-height: 0; - overflow: hidden; -} - -#videoInfo.visible { - opacity: 1; - max-height: 1000px; -} */ +body, +.container, +input, +button, +select, +label { + transition: background-color 0.2s ease, color 0.5s ease, border-color 0.2s ease; +} \ No newline at end of file diff --git a/public/styles/theme/chirac-theme.css b/public/styles/theme/chirac-theme.css new file mode 100644 index 0000000..02b1cce --- /dev/null +++ b/public/styles/theme/chirac-theme.css @@ -0,0 +1,98 @@ +body.chirac { + /* Background image Chirac */ + background-image: url('../../assets/images/goat.webp'); + background-position: right; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + + /* Couleurs drapeau français */ + --background-color: rgba(255, 255, 255, 0.85); /* blanc légèrement transparent pour lisibilité */ + --default-text-color: #002395; /* bleu foncé */ + --subtitle-color: #EF4135; /* rouge vif */ + --mp3-text-color: #002395; /* bleu */ + + /* Formulaire */ + --form-bg-color: rgba(255, 255, 255, 0.9); + --form-input-bg-color: #f5f5f5; + --form-input-border-color: #002395; + --form-input-border-focus-color: #EF4135; + --form-input-text-color: #002395; + --form-input-placeholder-color: #999999; + --form-button-bg-color: #002395; /* bleu */ + --form-button-text-color: #ffffff; + --form-button-bg-hover-color: #EF4135; /* rouge */ + + /* Checkbox */ + --checkbox-bg-default: #cccccc; + --checkbox-bg-checked: #002395; + --checkbox-checkmark-border-color: #ffffff; + --checkbox-pulse-color: rgba(0, 35, 149, 0.5); + + /* Download status */ + --download-status-color: #002395; + + /* Video Info Box */ + --infos-box-color: rgba(255, 255, 255, 0.9); + --video-info-text-color: #002395; + --video-info-heading-color: #EF4135; + --video-info-list-color: #444444; + --video-info-list-strong-color: #000000; + --video-info-link-color: #002395; + --video-info-link-hover-color: #EF4135; + + /* animation d'apparition */ + opacity: 0; + transition: opacity 0.8s ease, background-color 0.8s ease; +} + +body.chirac.theme-active { + opacity: 1; +} + +/* + +Je serai le président de tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Tous les Français +Mes chers compatriotes +Je serai le président de tous les Français, de tous les Français +Je mesure la difficulté de la tâche qui nous attend +Tous les Français +Tous les Français +Je veux un État, je veux les Français +Je veux un État, je veux +Je veux un État-tat-tat-tat vigoureux +Un État-tat-tat-tat impartial +Un État-tat-tat-tat vigoureux +Un État-tat-tat-tat exigeant +Un État-tat-tat-tat +Je serai le président de tous les Français +Tous les Français +Tous les Français +Tous les Français +Un État qui n'isole pas, tous, pas, pas +Tous, pas, tous, pas, pas +Tous, pas, tous, pas, pas (les Français) +Tous, tous, pas, tous, tous, pas, pas +Tous, tous, pas, tous, tous, pas, pas +Tous, tous, tous, pas, tous, pas, pas (les Français) +Tous, pas, tous, tous, pas, pas +Tous, tous, tous, pas, tous, tous, pas, pas +Tous, tous, pas, tous, tous, pas, pas +Tous, tous, tous-tous, tous-tous, pas, pas +Tous, tous-tous, tous-tous, pas, pas +Un État-tat-tat-tat vigoureux +Un État-tat-tat-tat impartial +Un État-tat-tat-tat exigeant +Un État-tat-tat-tat +Je serai le président de tous les Français + +*/ \ No newline at end of file diff --git a/public/styles/theme/cyberpunk-theme.css b/public/styles/theme/cyberpunk-theme.css new file mode 100644 index 0000000..434210f --- /dev/null +++ b/public/styles/theme/cyberpunk-theme.css @@ -0,0 +1,45 @@ +body.cyberpunk { + /* Couleurs générales */ + --background-color: #0d0d0d; /* noir profond */ + --default-text-color: #e0e0e0; /* texte gris clair */ + --subtitle-color: #ffea00; /* turquoise néon pour les sous-titres */ + --mp3-text-color: #ffea00; /* jaune vif pour la checkbox */ + + /* Formulaire */ + --form-bg-color: #141414; /* fond formulaire sombre */ + --form-input-bg-color: #1a1a1a; /* inputs sombres */ + --form-input-border-color: #333333; /* bordure sobre */ + --form-input-border-focus-color: #ffea00; /* focus jaune néon */ + --form-input-text-color: #e0e0e0; /* texte clair */ + --form-input-placeholder-color: #777777; /* placeholder plus doux */ + --form-button-bg-color: #ffea00; /* bouton jaune */ + --form-button-text-color: #0d0d0d; /* texte bouton noir */ + --form-button-bg-hover-color: #d4c000; /* hover jaune plus foncé */ + + /* Checkbox */ + --checkbox-bg-default: #333333; /* fond checkbox sobre */ + --checkbox-bg-checked: #ffea00; /* coché en jaune vif */ + --checkbox-checkmark-border-color: #0d0d0d; /* checkmark noir */ + --checkbox-pulse-color: rgba(255, 234, 0, 0.5); /* pulse néon jaune */ + + /* Download status */ + --download-status-color: #fffbd1; /* turquoise néon */ + + /* Video Info Box */ + --infos-box-color: #1a1a1a; /* fond infos */ + --video-info-text-color: #e0e0e0; /* texte clair */ + --video-info-heading-color: #ffea00; /* titres turquoise néon */ + --video-info-list-color: #cccccc; /* texte liste gris clair */ + --video-info-list-strong-color: #ffffff; /* texte important blanc */ + --video-info-link-color: #ffea00; /* liens jaune néon */ + --video-info-link-hover-color: #d4c000; /* liens hover plus foncé */ +} + +body.cyberpunk { + background-image: url('../../assets/images/cyberpunk4.webp'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; +} + diff --git a/public/styles/theme/dark-theme.css b/public/styles/theme/dark-theme.css new file mode 100644 index 0000000..534b815 --- /dev/null +++ b/public/styles/theme/dark-theme.css @@ -0,0 +1,36 @@ +body.dark { + /* Couleurs générales */ + --background-color: #121212; /* noir/gris très foncé */ + --default-text-color: #e0e0e0; /* texte clair */ + --subtitle-color: #2196f3; /* bleu accent */ + --mp3-text-color: #f5f5f5; /* texte checkbox */ + + /* Formulaire */ + --form-bg-color: #1e1e1e; /* fond formulaire */ + --form-input-bg-color: #2a2a2a; /* fond inputs */ + --form-input-border-color: #444444; /* bordure */ + --form-input-border-focus-color: #2196f3; /* focus bleu */ + --form-input-text-color: #f5f5f5; /* texte clair */ + --form-input-placeholder-color: #888888; /* placeholder gris */ + --form-button-bg-color: #2196f3; /* bouton bleu */ + --form-button-text-color: #ffffff; /* texte bouton */ + --form-button-bg-hover-color: #1976d2; /* hover bleu plus foncé */ + + /* Checkbox */ + --checkbox-bg-default: #555555; /* gris moyen */ + --checkbox-bg-checked: #2196f3; /* bleu accent */ + --checkbox-checkmark-border-color: #ffffff; /* blanc */ + --checkbox-pulse-color: rgba(33, 150, 243, 0.5); + + /* Download status */ + --download-status-color: #2196f3; + + /* Video Info Box */ + --infos-box-color: #1a1a1a; + --video-info-text-color: #e0e0e0; + --video-info-heading-color: #2196f3; + --video-info-list-color: #cccccc; + --video-info-list-strong-color: #ffffff; + --video-info-link-color: #2196f3; + --video-info-link-hover-color: #1976d2; +} diff --git a/public/styles/theme/default-theme.css b/public/styles/theme/default-theme.css new file mode 100644 index 0000000..a3fa903 --- /dev/null +++ b/public/styles/theme/default-theme.css @@ -0,0 +1,40 @@ +:root { + /* Couleurs générales */ + --background-color: #001224; /* body background bleu nuit */ + --default-text-color: #eee; /* texte clair principal */ + --subtitle-color: #007bff; /* sous-titres, header p */ + --mp3-text-color: #000000; /* couleur texte checkbox inline */ + + /* Formulaire */ + --form-bg-color: #ffffff; /* fond du formulaire */ + --form-input-bg-color: #f9f9f9; /* fond inputs */ + --form-input-border-color: #cccccc; /* bordure inputs */ + --form-input-border-focus-color: #0056b3; /* bordure focus */ + --form-input-text-color: #333333; /* texte inputs */ + --form-input-placeholder-color: #aaaaaa; /* placeholder */ + --form-button-bg-color: #007bff; /* bouton bg */ + --form-button-text-color: #ffffff; /* texte bouton */ + --form-button-bg-hover-color: #0056b3; /* bouton hover */ + + /* Checkbox */ + --checkbox-bg-default: #cccccc; + --checkbox-bg-checked: #3B82F6; + --checkbox-checkmark-border-color: #E0E0E2; + --checkbox-pulse-color: rgba(59, 130, 246, 0.5); + + /* Download status */ + --download-status-color: #007bff; + + /* Video Info Box */ + --infos-box-color: #f0f0f0; + --video-info-text-color: #222222; + --video-info-heading-color: #007bff; + --video-info-list-color: #444444; + --video-info-list-strong-color: #000000; + --video-info-link-color: #007bff; + --video-info-link-hover-color: #0056b3; +} + +body.default .download-path #savePath { + color: #ffffff; +} \ No newline at end of file diff --git a/public/styles/theme/fanatic-theme.css b/public/styles/theme/fanatic-theme.css new file mode 100644 index 0000000..8553866 --- /dev/null +++ b/public/styles/theme/fanatic-theme.css @@ -0,0 +1,36 @@ +body.fanatic{ + /* Couleurs générales */ + --background-color: #121212; /* fond bleu nuit/noir */ + --default-text-color: #eee; /* texte clair principal */ + --subtitle-color: #FF5900; /* sous-titres, accent orange vif */ + --mp3-text-color: #ffffff; /* texte checkbox inline */ + + /* Formulaire */ + --form-bg-color: #1e1e1e; /* fond formulaire sombre */ + --form-input-bg-color: #2b2b2b; /* fond inputs sombres */ + --form-input-border-color: #333333; /* bordure inputs */ + --form-input-border-focus-color: #FF5900; /* bordure focus orange */ + --form-input-text-color: #eeeeee; /* texte inputs clair */ + --form-input-placeholder-color: #666666; /* placeholder gris foncé */ + --form-button-bg-color: #FF5900; /* bouton orange */ + --form-button-text-color: #121212; /* texte bouton sombre */ + --form-button-bg-hover-color: #e65500; /* bouton hover orange foncé */ + + /* Checkbox */ + --checkbox-bg-default: #555555; /* gris moyen */ + --checkbox-bg-checked: #ff6600; /* orange vif */ + --checkbox-checkmark-border-color: #eee; /* blanc cassé */ + --checkbox-pulse-color: rgba(255, 102, 0, 0.5); /* pulse orange translucide */ + + /* Download status */ + --download-status-color: #FF5900; /* orange */ + + /* Video Info Box */ + --infos-box-color: #222222; /* fond infos sombre */ + --video-info-text-color: #eee; /* texte clair */ + --video-info-heading-color: #FF5900; /* titres orange */ + --video-info-list-color: #ccc; /* texte liste gris clair */ + --video-info-list-strong-color: #fff; /* texte important blanc */ + --video-info-link-color: #FF5900; /* liens orange */ + --video-info-link-hover-color: #e65500; /* liens hover orange foncé */ +} diff --git a/public/styles/theme/light-theme.css b/public/styles/theme/light-theme.css new file mode 100644 index 0000000..cd562b7 --- /dev/null +++ b/public/styles/theme/light-theme.css @@ -0,0 +1,36 @@ +body.light { + /* Couleurs générales */ + --background-color: #dadada; /* fond clair */ + --default-text-color: #222222; /* texte sombre */ + --subtitle-color: #007bff; /* bleu accent */ + --mp3-text-color: #000000; /* texte checkbox */ + + /* Formulaire */ + --form-bg-color: #ffffff; /* fond formulaire blanc */ + --form-input-bg-color: #fafafa; /* fond inputs */ + --form-input-border-color: #cccccc; /* bordure inputs */ + --form-input-border-focus-color: #007bff; /* focus bleu */ + --form-input-text-color: #333333; /* texte inputs */ + --form-input-placeholder-color: #888888; /* placeholder */ + --form-button-bg-color: #007bff; /* bouton bleu */ + --form-button-text-color: #ffffff; /* texte bouton */ + --form-button-bg-hover-color: #0056b3; /* hover bleu foncé */ + + /* Checkbox */ + --checkbox-bg-default: #cccccc; + --checkbox-bg-checked: #007bff; + --checkbox-checkmark-border-color: #ffffff; + --checkbox-pulse-color: rgba(0, 123, 255, 0.4); + + /* Download status */ + --download-status-color: #007bff; + + /* Video Info Box */ + --infos-box-color: #ffffff; + --video-info-text-color: #222222; + --video-info-heading-color: #007bff; + --video-info-list-color: #444444; + --video-info-list-strong-color: #000000; + --video-info-link-color: #007bff; + --video-info-link-hover-color: #0056b3; +} diff --git a/public/styles/theme/spicy-theme.css b/public/styles/theme/spicy-theme.css new file mode 100644 index 0000000..b4f2c93 --- /dev/null +++ b/public/styles/theme/spicy-theme.css @@ -0,0 +1,44 @@ +body.spicy { + /* Couleurs générales */ + --background-color: #121212; /* fond noir profond */ + --default-text-color: #f5f5f5; /* texte clair */ + --subtitle-color: #e29191; /* accent rouge piment */ + --mp3-text-color: #ffffff; /* texte checkbox inline */ + + /* Formulaire */ + --form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */ + --form-input-bg-color: #2b2b2b; /* fond inputs gris foncé */ + --form-input-border-color: #444444; /* bordure gris */ + --form-input-border-focus-color: #ff1a1a; /* focus rouge piment */ + --form-input-text-color: #eeeeee; /* texte inputs */ + --form-input-placeholder-color: #888888; /* placeholder gris moyen */ + --form-button-bg-color: #ff1a1a; /* bouton rouge vif */ + --form-button-text-color: #ffffff; /* texte bouton blanc */ + --form-button-bg-hover-color: #cc0000; /* hover rouge foncé */ + + /* Checkbox */ + --checkbox-bg-default: #555555; /* gris moyen */ + --checkbox-bg-checked: #ff1a1a; /* rouge piment */ + --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */ + --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */ + + /* Download status */ + --download-status-color: #ffffff; /* rouge vif */ + + /* Video Info Box */ + --infos-box-color: #1a1a1a; /* fond infos gris foncé */ + --video-info-text-color: #f5f5f5; /* texte clair */ + --video-info-heading-color: #ff1a1a; /* titres rouges */ + --video-info-list-color: #cccccc; /* texte liste gris clair */ + --video-info-list-strong-color: #ffffff; /* texte important blanc */ + --video-info-link-color: #ff1a1a; /* liens rouges */ + --video-info-link-hover-color: #cc0000; /* liens hover rouge foncé */ +} + +/* Optionnel: background piments */ +body.spicy { + background-image: url('../../assets/images/spicy.webp'); + background-size: cover; + background-position: center; + background-attachment: fixed; +} diff --git a/public/styles/theme/themeimport.css b/public/styles/theme/themeimport.css new file mode 100644 index 0000000..82d1565 --- /dev/null +++ b/public/styles/theme/themeimport.css @@ -0,0 +1,8 @@ +@import url("chirac-theme.css"); +@import url("dark-theme.css"); +@import url("default-theme.css"); +@import url("fanatic-theme.css"); +@import url("light-theme.css"); +@import url("cyberpunk-theme.css"); +@import url("spicy-theme.css"); +@import url("vilbrequin-theme.css"); \ No newline at end of file diff --git a/public/styles/theme/vilbrequin-theme.css b/public/styles/theme/vilbrequin-theme.css new file mode 100644 index 0000000..9a89dea --- /dev/null +++ b/public/styles/theme/vilbrequin-theme.css @@ -0,0 +1,48 @@ +body.vilbrequin { + /* Couleurs générales */ + --background-color: #0a1f3d; /* bleu Vilbrequin profond */ + --default-text-color: #535353; /* texte clair */ + --subtitle-color: #001696; /* bleu clair accent (turbo vibes) */ + --mp3-text-color: #ffffff; /* texte checkbox inline */ + + /* Formulaire */ + --form-bg-color: #12284f; /* fond formulaire bleu foncé */ + --form-input-bg-color: #1c3760; /* fond inputs bleu + clair */ + --form-input-border-color: #2a4b80; /* bordure bleue */ + --form-input-border-focus-color: #00bfff; /* focus bleu clair */ + --form-input-text-color: #f0f0f0; /* texte inputs clair */ + --form-input-placeholder-color: #b0c4de; /* placeholder gris bleuté */ + --form-button-bg-color: #ffd700; /* bouton jaune turbo */ + --form-button-text-color: #0a1f3d; /* texte bouton sombre */ + --form-button-bg-hover-color: #e6c200; /* hover jaune foncé */ + + /* Checkbox */ + --checkbox-bg-default: #2a4b80; /* bleu moyen */ + --checkbox-bg-checked: #00bfff; /* bleu clair accent */ + --checkbox-checkmark-border-color: #f0f0f0; /* blanc cassé */ + --checkbox-pulse-color: rgba(0,191,255,0.5); /* pulse bleu clair translucide */ + + /* Download status */ + --download-status-color: #ffd700; /* jaune turbo */ + + /* Video Info Box */ + --infos-box-color: #12284f; /* fond infos bleu foncé */ + --video-info-text-color: #f0f0f0; /* texte clair */ + --video-info-heading-color: #00bfff; /* titres bleu clair */ + --video-info-list-color: #dcdcdc; /* texte liste gris clair */ + --video-info-list-strong-color: #ffffff; /* texte important blanc */ + --video-info-link-color: #00bfff; /* liens bleu clair */ + --video-info-link-hover-color: #009acd; /* liens hover bleu plus foncé */ +} + +/* Optionnel: motif turbo ou jantes */ +body.vilbrequin { + background-image: url('../../assets/images/Vilbrequin.avif'); /* adapte ton image */ + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +body.vilbrequin .download-path{ + color: white; +} \ No newline at end of file diff --git a/public/styles/variables.css b/public/styles/variables.css index fb2b848..7061e41 100644 --- a/public/styles/variables.css +++ b/public/styles/variables.css @@ -1,11 +1,36 @@ -:root{ - --background-color : #0F172A; - --infos-box-color: #f1f1f1 ; - --title-color: ; - --subtitle-color : #a3aab4; - --mp3-text-color: #0F172A; - --default-text-color: #F8FAFC; +:root { + /* Couleurs générales */ + --background-color: #001224; /* body background bleu nuit */ + --default-text-color: #eee; /* texte clair principal */ + --subtitle-color: #007bff; /* sous-titres, header p */ + --mp3-text-color: #000000; /* couleur texte checkbox inline */ - --checkbox-pulse-color:#9bbcf1; + /* Formulaire */ + --form-bg-color: #ffffff; /* fond du formulaire */ + --form-input-bg-color: #f9f9f9; /* fond inputs */ + --form-input-border-color: #cccccc; /* bordure inputs */ + --form-input-border-focus-color: #0056b3; /* bordure focus */ + --form-input-text-color: #333333; /* texte inputs */ + --form-input-placeholder-color: #aaaaaa; /* placeholder */ + --form-button-bg-color: #007bff; /* bouton bg */ + --form-button-text-color: #ffffff; /* texte bouton */ + --form-button-bg-hover-color: #0056b3; /* bouton hover */ -} \ No newline at end of file + /* Checkbox */ + --checkbox-bg-default: #cccccc; + --checkbox-bg-checked: #3B82F6; + --checkbox-checkmark-border-color: #E0E0E2; + --checkbox-pulse-color: rgba(59, 130, 246, 0.5); + + /* Download status */ + --download-status-color: #007bff; + + /* Video Info Box */ + --infos-box-color: #f0f0f0; + --video-info-text-color: #222222; + --video-info-heading-color: #007bff; + --video-info-list-color: #444444; + --video-info-list-strong-color: #000000; + --video-info-link-color: #007bff; + --video-info-link-hover-color: #0056b3; +} diff --git a/server/logger.js b/server/logger.js index 59f7a18..068a1d6 100644 --- a/server/logger.js +++ b/server/logger.js @@ -58,7 +58,7 @@ const logger = createLogger({ filename: "LOGS-%DATE%.log", // nom du fichier par date datePattern: "YYYY-MM-DD", // pattern de date dans le nom zippedArchive: false, // ne pas compresser les archives - maxFiles: "14d", // conserve 14 jours d’historique + maxFiles: "7d", // conserve 14 jours d’historique format: format.combine( format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }), format.printf(({ timestamp, level, message }) =>