mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
1.1
This commit is contained in:
MasterAcnolo
@@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
<!-- Release -->
|
<!-- Release -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Build -->
|
<!-- Build -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
> This project aims to enable free, open-source, and unrestricted downloading of Video/Audio content. Eventually, it will allow users to choose
|
> 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)
|
✅ Detailed Logs (Console + Logs)
|
||||||
✅ Automatic Fetch of Information
|
✅ Automatic Fetch of Information
|
||||||
✅ Playlist Download
|
✅ Playlist Download
|
||||||
|
✅ Theme selection
|
||||||
|
✅ Custom output path selection for videos
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
<!-- Release -->
|
<!-- Release -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Build -->
|
<!-- Build -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
> 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
|
> 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)
|
✅ Logs détaillés (console + fichiers logs)
|
||||||
✅ Récupération automatique des informations
|
✅ Récupération automatique des informations
|
||||||
✅ Téléchargement des playlists
|
✅ Téléchargement des playlists
|
||||||
|
✅ Choix de thèmes
|
||||||
|
✅ Choix du chemin de sortie des vidéos personnalisés
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
BIN
public/assets/images/Vilbrequin.avif
Normal file
BIN
public/assets/images/Vilbrequin.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/cyberpunk4.webp
Normal file
BIN
public/assets/images/cyberpunk4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 805 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 934 KiB |
BIN
public/assets/images/spicy.webp
Normal file
BIN
public/assets/images/spicy.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@@ -19,7 +19,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1 id="title"> Freedom Loader </h1>
|
<h1 id="title"> Freedom Loader </h1>
|
||||||
@@ -51,54 +51,40 @@
|
|||||||
<button type="submit">Télécharger</button>
|
<button type="submit">Télécharger</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="download-path">
|
|
||||||
Sera enregistré dans <span id="savePath"></span>
|
|
||||||
<button id="changePath">Modifier</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="downloadStatus"></div>
|
|
||||||
|
|
||||||
<!--Il faut utiliser un formulaire, parce que on doit envoyer a un serveur
|
<!--Il faut utiliser un formulaire, parce que on doit envoyer a un serveur
|
||||||
les données à traiter. Pour cela on définit une route vers /download, ca va
|
les données à traiter. Pour cela on définit une route vers /download, ca va
|
||||||
être l'espèce de "canal" attribué a ça. Ca va faire que si jamais on veut ensuite recup
|
être l'espèce de "canal" attribué a ça. Ca va faire que si jamais on veut ensuite recup
|
||||||
les infos du form, il faut aller sur ce canal précis (/download). La méthode POST dit
|
les infos du form, il faut aller sur ce canal précis (/download). La méthode POST dit
|
||||||
que l'on envoie des données.-->
|
que l'on envoie des données.-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="download-path">
|
||||||
|
Sera enregistré dans <span id="savePath"></span>
|
||||||
|
<button id="changePath">Modifier</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="downloadStatus"></div>
|
||||||
|
|
||||||
<div class="infos-container">
|
<div class="infos-container">
|
||||||
<div id="videoInfo" style="margin-top: 20px;"></div>
|
<div id="videoInfo" style="margin-top: 20px;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<footer class="theme-switcher">
|
||||||
|
<label for="themeSelect">Thème :</label>
|
||||||
|
<select id="themeSelect" aria-label="Choisir le thème">
|
||||||
|
<!-- <option value="dark">Sombre</option>
|
||||||
|
<option value="light">Clair</option>
|
||||||
|
<option value="Chirac">Chirac</option>
|
||||||
|
<option value="Fanatic">Fanatic</option> -->
|
||||||
|
</select>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script src="script/custompath.js"></script>
|
<script src="script/custompath.js"></script>
|
||||||
<script src="script/downloadstatus.js"></script>
|
<script src="script/downloadstatus.js"></script>
|
||||||
<script src="script/fetchinfo.js"></script>
|
<script src="script/fetchinfo.js"></script>
|
||||||
<script src="script/chirac.js"></script>
|
<script src="script/chirac.js"></script>
|
||||||
|
<script src="script/customthemes.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<!-- ----------------------------------------------------
|
|
||||||
| Freedom Loader [Lang FR|EN] |
|
|
||||||
----------------------------------------------------
|
|
||||||
| URL : [________________________] [Copier] |
|
|
||||||
| |
|
|
||||||
| [ ] Audio seulement (MP3) |
|
|
||||||
| [ ] Sous-titres |
|
|
||||||
| Qualité : [Best ▼] |
|
|
||||||
| Format : [MP4 ▼] |
|
|
||||||
| |
|
|
||||||
| Chapitres : [ ] Chapitre 1 |
|
|
||||||
| [ ] Chapitre 2 |
|
|
||||||
| |
|
|
||||||
| Nom de fichier : [__________] |
|
|
||||||
| Dossier : [C:/Downloads ▼] |
|
|
||||||
| |
|
|
||||||
| [ Télécharger ] |
|
|
||||||
| |
|
|
||||||
| État du téléchargement : [==== 50% ====] |
|
|
||||||
----------------------------------------------------
|
|
||||||
| Historique | Paramètres | Infos vidéo |
|
|
||||||
---------------------------------------------------- -->
|
|
||||||
@@ -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 <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Ce script attend que le DOM soit complètement chargé pour initialiser
|
Ce script attend que le DOM soit complètement chargé pour initialiser
|
||||||
l'affichage et la gestion du chemin de sauvegarde personnalisé.
|
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.
|
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é.
|
5. Met à jour l'affichage et la valeur cachée du chemin sélectionné.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", async () => {
|
window.addEventListener("DOMContentLoaded", async () => {
|
||||||
const defaultPath = await window.electronAPI.getDefaultDownloadPath();
|
|
||||||
const savePathElem = document.getElementById("savePath");
|
const savePathElem = document.getElementById("savePath");
|
||||||
|
|
||||||
if (savePathElem) {
|
// 1️Essayer de charger depuis le localStorage
|
||||||
savePathElem.textContent = defaultPath;
|
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");
|
let hidden = document.getElementById("savePathInput");
|
||||||
if (!hidden) {
|
if (!hidden) {
|
||||||
hidden = document.createElement("input");
|
hidden = document.createElement("input");
|
||||||
@@ -26,14 +53,19 @@ window.addEventListener("DOMContentLoaded", async () => {
|
|||||||
hidden.id = "savePathInput";
|
hidden.id = "savePathInput";
|
||||||
document.getElementById("downloadForm").appendChild(hidden);
|
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 () => {
|
document.getElementById("changePath").addEventListener("click", async () => {
|
||||||
const selectedPath = await window.electronAPI.selectDownloadFolder();
|
const selectedPath = await window.electronAPI.selectDownloadFolder();
|
||||||
if (selectedPath) {
|
if (selectedPath) {
|
||||||
|
// Met à jour l'affichage
|
||||||
savePathElem.textContent = selectedPath;
|
savePathElem.textContent = selectedPath;
|
||||||
hidden.value = selectedPath;
|
hidden.value = selectedPath;
|
||||||
|
|
||||||
|
// Et le stocke en localStorage pour la prochaine fois
|
||||||
|
localStorage.setItem("customDownloadPath", selectedPath);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
105
public/script/customthemes.js
Normal file
105
public/script/customthemes.js
Normal file
@@ -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 <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 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();
|
||||||
@@ -15,15 +15,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.checkmark {
|
.checkmark {
|
||||||
--clr: #3B82F6 ;
|
--clr: var(--checkbox-bg-checked);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 1.3em;
|
height: 1.3em;
|
||||||
width: 1.3em;
|
width: 1.3em;
|
||||||
background-color: #ccc;
|
background-color: var(--checkbox-bg-default);
|
||||||
border-radius: 50%;
|
border-radius: .5rem;
|
||||||
transition: 300ms;
|
transition: background-color 300ms, border-radius 300ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-mp3 input:checked ~ .checkmark {
|
.checkbox-mp3 input:checked ~ .checkmark {
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
top: 0.25em;
|
top: 0.25em;
|
||||||
width: 0.25em;
|
width: 0.25em;
|
||||||
height: 0.5em;
|
height: 0.5em;
|
||||||
border: solid #E0E0E2;
|
border: solid var(--checkbox-checkmark-border-color);
|
||||||
border-width: 0 0.15em 0.15em 0;
|
border-width: 0 0.15em 0.15em 0;
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|||||||
41
public/styles/components/editpathbutton.css
Normal file
41
public/styles/components/editpathbutton.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
38
public/styles/components/themebutton.css
Normal file
38
public/styles/components/themebutton.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
min-height: 1.5em;
|
min-height: 1.5em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #007bff;
|
color: var(--download-status-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
form {
|
form {
|
||||||
background-color: #fff;
|
background-color: var(--form-bg-color);
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
@@ -13,8 +13,10 @@ form input[type="text"],
|
|||||||
form input[type="url"],
|
form input[type="url"],
|
||||||
form select {
|
form select {
|
||||||
padding: 0.75em;
|
padding: 0.75em;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--form-input-border-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
background-color: var(--form-input-bg-color);
|
||||||
|
color: var(--form-input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form input[type="checkbox"] {
|
form input[type="checkbox"] {
|
||||||
@@ -22,8 +24,8 @@ form input[type="checkbox"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
form button {
|
form button {
|
||||||
background-color: #007bff;
|
background-color: var(--form-button-bg-color);
|
||||||
color: #fff;
|
color: var(--form-button-text-color);
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.75em;
|
padding: 0.75em;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -32,42 +34,43 @@ form button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
form button:hover {
|
form button:hover {
|
||||||
background-color: #0056b3;
|
background-color: var(--form-button-bg-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form#downloadForm {
|
form#downloadForm {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-inline {
|
.checkbox-inline {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
color: var(--form-input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#UrlInput {
|
#UrlInput {
|
||||||
padding: 0.75em 1em;
|
padding: 0.75em 1em;
|
||||||
border-color: #ccc;
|
border-color: var(--form-input-border-color);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
background-color: #f9f9f9;
|
background-color: var(--form-input-bg-color);
|
||||||
color: #333;
|
color: var(--form-input-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#UrlInput:focus {
|
#UrlInput:focus {
|
||||||
border-color: #0056b3;
|
border-color: var(--form-input-border-focus-color);
|
||||||
box-shadow: 0 0 5px rgba(0,123,255,0.4);
|
box-shadow: 0 0 5px rgba(0,123,255,0.4);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: #fff;
|
background-color: var(--form-input-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#UrlInput::placeholder {
|
#UrlInput::placeholder {
|
||||||
color: #aaa;
|
color: var(--form-input-placeholder-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
background-color: var(--infos-box-color);
|
background-color: var(--infos-box-color);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
|
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
|
||||||
color: #222;
|
color: var(--video-info-text-color);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -27,7 +27,7 @@
|
|||||||
#videoInfo h3 {
|
#videoInfo h3 {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-bottom: 0.6em;
|
margin-bottom: 0.6em;
|
||||||
color: #007bff;
|
color: var(--video-info-heading-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
@@ -51,15 +51,15 @@
|
|||||||
#videoInfo ul li {
|
#videoInfo ul li {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #444;
|
color: var(--video-info-list-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoInfo ul li strong {
|
#videoInfo ul li strong {
|
||||||
color: #000;
|
color: var(--video-info-list-strong-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoInfo ul li a {
|
#videoInfo ul li a {
|
||||||
color: #007bff;
|
color: var(--video-info-link-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -4,10 +4,22 @@
|
|||||||
@import url("layout/header.css");
|
@import url("layout/header.css");
|
||||||
@import url("layout/videoinfo.css");
|
@import url("layout/videoinfo.css");
|
||||||
@import url("components/checkbox.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');
|
@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{
|
html,body{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -35,6 +47,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header p{
|
header p{
|
||||||
@@ -45,22 +58,11 @@ header p{
|
|||||||
color: var(--mp3-text-color);
|
color: var(--mp3-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #videoInfo {
|
body,
|
||||||
margin-top: 100px;
|
.container,
|
||||||
padding: 1em;
|
input,
|
||||||
max-width: 600px;
|
button,
|
||||||
margin-left: auto;
|
select,
|
||||||
margin-right: auto;
|
label {
|
||||||
border-radius: 8px;
|
transition: background-color 0.2s ease, color 0.5s ease, border-color 0.2s ease;
|
||||||
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;
|
|
||||||
} */
|
|
||||||
|
|||||||
98
public/styles/theme/chirac-theme.css
Normal file
98
public/styles/theme/chirac-theme.css
Normal file
@@ -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
|
||||||
|
|
||||||
|
*/
|
||||||
45
public/styles/theme/cyberpunk-theme.css
Normal file
45
public/styles/theme/cyberpunk-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
36
public/styles/theme/dark-theme.css
Normal file
36
public/styles/theme/dark-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
40
public/styles/theme/default-theme.css
Normal file
40
public/styles/theme/default-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
36
public/styles/theme/fanatic-theme.css
Normal file
36
public/styles/theme/fanatic-theme.css
Normal file
@@ -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é */
|
||||||
|
}
|
||||||
36
public/styles/theme/light-theme.css
Normal file
36
public/styles/theme/light-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
44
public/styles/theme/spicy-theme.css
Normal file
44
public/styles/theme/spicy-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
8
public/styles/theme/themeimport.css
vendored
Normal file
8
public/styles/theme/themeimport.css
vendored
Normal file
@@ -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");
|
||||||
48
public/styles/theme/vilbrequin-theme.css
Normal file
48
public/styles/theme/vilbrequin-theme.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
@@ -1,11 +1,36 @@
|
|||||||
:root{
|
:root {
|
||||||
--background-color : #0F172A;
|
/* Couleurs générales */
|
||||||
--infos-box-color: #f1f1f1 ;
|
--background-color: #001224; /* body background bleu nuit */
|
||||||
--title-color: ;
|
--default-text-color: #eee; /* texte clair principal */
|
||||||
--subtitle-color : #a3aab4;
|
--subtitle-color: #007bff; /* sous-titres, header p */
|
||||||
--mp3-text-color: #0F172A;
|
--mp3-text-color: #000000; /* couleur texte checkbox inline */
|
||||||
--default-text-color: #F8FAFC;
|
|
||||||
|
|
||||||
--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 */
|
||||||
|
|
||||||
|
/* 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;
|
||||||
}
|
}
|
||||||
@@ -58,7 +58,7 @@ const logger = createLogger({
|
|||||||
filename: "LOGS-%DATE%.log", // nom du fichier par date
|
filename: "LOGS-%DATE%.log", // nom du fichier par date
|
||||||
datePattern: "YYYY-MM-DD", // pattern de date dans le nom
|
datePattern: "YYYY-MM-DD", // pattern de date dans le nom
|
||||||
zippedArchive: false, // ne pas compresser les archives
|
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: format.combine(
|
||||||
format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
|
format.timestamp({ format: "YYYY-MM-DD HH:mm:ss" }),
|
||||||
format.printf(({ timestamp, level, message }) =>
|
format.printf(({ timestamp, level, message }) =>
|
||||||
|
|||||||
Reference in New Issue
Block a user