mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
Préparation du Champ de Bataille
This commit is contained in:
MasterAcnolo
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 968 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zm2 226.3c37.1 22.4 62 63.1 62 109.7s-24.9 87.3-62 109.7c-7.6 4.6-17.4 2.1-22-5.4s-2.1-17.4 5.4-22C269.4 401.5 288 370.9 288 336s-18.6-65.5-46.5-82.3c-7.6-4.6-10-14.4-5.4-22s14.4-10 22-5.4zm-91.9 30.9c6 2.5 9.9 8.3 9.9 14.8l0 128c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5L113.4 376 80 376c-8.8 0-16-7.2-16-16l0-48c0-8.8 7.2-16 16-16l33.4 0 35.3-35.3c4.6-4.6 11.5-5.9 17.4-3.5zm51 34.9c6.6-5.9 16.7-5.3 22.6 1.3C249.8 304.6 256 319.6 256 336s-6.2 31.4-16.3 42.7c-5.9 6.6-16 7.1-22.6 1.3s-7.1-16-1.3-22.6c5.1-5.7 8.1-13.1 8.1-21.3s-3.1-15.7-8.1-21.3c-5.9-6.6-5.3-16.7 1.3-22.6z"/></svg>
|
||||
|
Before Width: | Height: | Size: 955 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 805 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,90 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'self' 'unsafe-inline' data:;
|
||||
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
|
||||
font-src https://fonts.gstatic.com;
|
||||
img-src 'self' data: https://i.ytimg.com;
|
||||
">
|
||||
<title></title>
|
||||
|
||||
<!--CSS-->
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
|
||||
<!--Icons-->
|
||||
<link rel="icon" href="assets/icons/file-audio-solid.svg" type="image/svg+xml">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<header>
|
||||
<h1 id="title"> Freedom Loader </h1>
|
||||
<p id="subtitle"> Because why not? </p>
|
||||
</header>
|
||||
|
||||
<form action="/download" method="POST" id="downloadForm">
|
||||
<input name="url" placeholder="URL" id="UrlInput">
|
||||
|
||||
<label class="checkbox-inline">
|
||||
|
||||
<label class="checkbox-mp3">
|
||||
<input type="checkbox" name="audioOnly" value="1">
|
||||
<div class="checkmark"></div>
|
||||
</label>
|
||||
<!-- <input type="checkbox" name="audioOnly" value="1"> -->
|
||||
Audio seulement (MP3)
|
||||
</label>
|
||||
<!-- <input type="checkbox" name="audioOnly" value="1"> Audio seulement (MP3) -->
|
||||
<select name="quality">
|
||||
<option value="best">Meilleure qualité</option>
|
||||
<option value="medium">Qualité moyenne</option>
|
||||
<option value="worst">Qualité minimale</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
</select>
|
||||
|
||||
<button type="submit">Télécharger</button>
|
||||
</form>
|
||||
|
||||
<!--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
|
||||
ê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
|
||||
que l'on envoie des données.-->
|
||||
|
||||
</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 id="videoInfo" style="margin-top: 20px;"></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/downloadstatus.js"></script>
|
||||
<script src="script/fetchinfo.js"></script>
|
||||
<script src="script/chirac.js"></script>
|
||||
<script src="script/customthemes.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
/*
|
||||
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/>.
|
||||
*/
|
||||
|
||||
function Chirac(){
|
||||
const title = document.getElementById("title");
|
||||
title.innerHTML = "Chirac Loader";
|
||||
|
||||
const subtitle = document.getElementById("subtitle");
|
||||
subtitle.innerHTML = "J'aime les pommes";
|
||||
subtitle.style.color= "black";
|
||||
|
||||
document.body.style.backgroundImage = "url('assets/images/goat2.webp')";
|
||||
document.body.style.backgroundSize = "cover";
|
||||
document.body.style.backgroundPosition = "center";
|
||||
document.body.style.backgroundAttachment = "fixed";
|
||||
|
||||
console.log("Je serai le président de tous les français");
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
/*
|
||||
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
|
||||
l'affichage et la gestion du chemin de sauvegarde personnalisé.
|
||||
|
||||
1. Récupère le chemin de téléchargement par défaut depuis le main process via l'API exposée.
|
||||
2. Met à jour le texte affiché dans l'élément avec l'id "savePath".
|
||||
3. Crée un input caché nommé "savePath" dans le formulaire pour envoyer ce chemin lors du submit.
|
||||
4. Ajoute un écouteur sur le bouton "changePath" pour permettre à l'utilisateur
|
||||
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 savePathElem = document.getElementById("savePath");
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
// 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");
|
||||
hidden.type = "hidden";
|
||||
hidden.name = "savePath";
|
||||
hidden.id = "savePathInput";
|
||||
document.getElementById("downloadForm").appendChild(hidden);
|
||||
}
|
||||
hidden.value = savedPath;
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
/*
|
||||
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",
|
||||
nf : "NF",
|
||||
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 ?",
|
||||
nf : "You call it music, i call it my Therapist",
|
||||
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();
|
||||
@@ -1,73 +0,0 @@
|
||||
/*
|
||||
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/>.
|
||||
*/
|
||||
|
||||
// Récupération du formulaire de téléchargement
|
||||
const form = document.getElementById("downloadForm");
|
||||
|
||||
// Élément où on affichera l’état du téléchargement (en cours, erreur, succès)
|
||||
const statusDiv = document.getElementById("downloadStatus");
|
||||
|
||||
// Récupération du bouton de soumission pour pouvoir le désactiver pendant la requête
|
||||
const button = form.querySelector("button");
|
||||
|
||||
// Écouteur d’événement pour intercepter la soumission du formulaire
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault(); // Empêche le rechargement automatique de la page
|
||||
|
||||
// Désactive le bouton pour éviter les clics multiples pendant la requête
|
||||
button.disabled = true;
|
||||
|
||||
// Affiche un message d’attente pour informer l’utilisateur
|
||||
statusDiv.textContent = "Téléchargement en cours...";
|
||||
|
||||
// Prépare les données du formulaire au format URL-encoded
|
||||
const formData = new FormData(form);
|
||||
const params = new URLSearchParams(formData);
|
||||
|
||||
try {
|
||||
// Envoie la requête POST vers /download avec les données du formulaire
|
||||
const res = await fetch("/download", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: params,
|
||||
});
|
||||
|
||||
// Si la réponse n’est pas un succès (code HTTP 4xx ou 5xx)
|
||||
if (!res.ok) {
|
||||
statusDiv.textContent = "❌ Erreur pendant le téléchargement.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Récupère le texte envoyé par le serveur (message de succès ou erreur)
|
||||
const text = await res.text();
|
||||
|
||||
// Affiche le message retourné par le serveur
|
||||
statusDiv.textContent = text;
|
||||
} catch {
|
||||
// Gestion des erreurs réseau ou autres exceptions
|
||||
statusDiv.textContent = "❌ Une erreur s’est produite.";
|
||||
} finally {
|
||||
// Réactive le bouton pour permettre d’autres soumissions
|
||||
button.disabled = false;
|
||||
|
||||
// Efface le message d’état après 5 secondes pour garder l’interface propre
|
||||
setTimeout(() => {
|
||||
statusDiv.textContent = "";
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
@@ -1,136 +0,0 @@
|
||||
/*
|
||||
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/>.
|
||||
*/
|
||||
|
||||
// On attend que le DOM soit complètement chargé
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Récupération des éléments du DOM pour interaction
|
||||
const urlInput = document.getElementById("UrlInput");
|
||||
const infoDiv = document.getElementById("videoInfo");
|
||||
|
||||
// Stocke la dernière URL fetchée pour éviter les requêtes répétées inutiles
|
||||
let lastFetchedUrl = "";
|
||||
|
||||
// Active les logs DEBUG pour le développement
|
||||
const DEBUG = true;
|
||||
|
||||
// Écoute les changements dans l'input URL
|
||||
urlInput.addEventListener("input", async () => {
|
||||
const url = urlInput.value.trim();
|
||||
|
||||
if (DEBUG) console.log("[DEBUG] Input détecté :", url);
|
||||
|
||||
// Si l'URL est vide ou trop courte, on reset l'affichage
|
||||
if (!url || url.length < 5) {
|
||||
if (DEBUG) console.log("[DEBUG] URL vide ou trop courte, reset affichage.");
|
||||
infoDiv.innerHTML = "";
|
||||
infoDiv.classList.remove("visible");
|
||||
lastFetchedUrl = "";
|
||||
return;
|
||||
}
|
||||
|
||||
// Si l'URL est identique à la dernière requêtée, on ne refait pas la requête
|
||||
if (url === lastFetchedUrl) {
|
||||
if (DEBUG) console.log("[DEBUG] Même URL que précédemment, pas de fetch.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Mémorise l'URL actuelle comme dernière URL traitée
|
||||
lastFetchedUrl = url;
|
||||
|
||||
try {
|
||||
if (DEBUG) console.log("[DEBUG] Envoi requête POST vers /info avec URL:", url);
|
||||
|
||||
// Envoi de la requête POST pour récupérer les infos de la vidéo
|
||||
const res = await fetch("/info", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
body: new URLSearchParams({ url }),
|
||||
});
|
||||
|
||||
if (DEBUG) console.log("[DEBUG] Réponse status:", res.status);
|
||||
|
||||
// Si la réponse HTTP est une erreur, on affiche un message
|
||||
if (!res.ok) {
|
||||
console.error(`[ERROR] Réponse HTTP ${res.status}: ${res.statusText}`);
|
||||
infoDiv.innerHTML = "❌ Impossible de récupérer les infos (erreur serveur).";
|
||||
infoDiv.classList.remove("visible");
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse la réponse JSON contenant les infos vidéo
|
||||
const data = await res.json();
|
||||
if (DEBUG) console.log("[DEBUG] Données reçues:", data);
|
||||
|
||||
// Vérification simple que les données attendues sont présentes
|
||||
if (!data || !data.title || !data.thumbnail) {
|
||||
console.warn("[WARNING] Données incomplètes", data);
|
||||
infoDiv.innerHTML = "❌ Données incomplètes reçues.";
|
||||
infoDiv.classList.remove("visible");
|
||||
return;
|
||||
}
|
||||
|
||||
// Formatage de la durée en minutes et secondes
|
||||
const minutes = Math.floor(data.duration / 60);
|
||||
const seconds = data.duration % 60;
|
||||
const durationStr = `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
|
||||
|
||||
// Formatage de la date d'upload au format JJ/MM/AAAA
|
||||
const date = data.upload_date || "";
|
||||
const readableDate = date
|
||||
? `${date.slice(6, 8)}/${date.slice(4, 6)}/${date.slice(0, 4)}`
|
||||
: "Inconnue";
|
||||
|
||||
// Conversion taille approximative en Mo
|
||||
const sizeMB = data.filesize_approx
|
||||
? (data.filesize_approx / (1024 * 1024)).toFixed(2) + " Mo"
|
||||
: "Inconnue";
|
||||
|
||||
// Gestion des catégories, affichage par défaut si absentes
|
||||
const categories = data.categories
|
||||
? data.categories.join(", ")
|
||||
: "Non spécifiées";
|
||||
|
||||
// Construction du HTML pour afficher les informations de la vidéo
|
||||
infoDiv.innerHTML = `
|
||||
<h3>${data.title}</h3>
|
||||
<img src="${data.thumbnail}" width="320" alt="Thumbnail">
|
||||
<ul>
|
||||
<li><strong>Durée :</strong> ${durationStr}</li>
|
||||
<li><strong>Uploader :</strong> ${data.uploader || "Inconnu"}</li>
|
||||
<li><strong>Date d’upload :</strong> ${readableDate}</li>
|
||||
<li><strong>Vues :</strong> ${data.view_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>Likes :</strong> ${data.like_count?.toLocaleString() || "?"}</li>
|
||||
<li><strong>URL :</strong> <a href="${data.webpage_url}" target="_blank" rel="noopener noreferrer">${data.webpage_url}</a></li>
|
||||
<li><strong>Channel :</strong> <a href="${data.channel_url}" target="_blank" rel="noopener noreferrer">${data.channel_url}</a></li>
|
||||
<li><strong>Taille estimée :</strong> ${sizeMB}</li>
|
||||
<li><strong>Catégories :</strong> ${categories}</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Affiche la div contenant les infos
|
||||
infoDiv.classList.add("visible");
|
||||
|
||||
if (DEBUG) console.log("[DEBUG] Info affichée avec succès.");
|
||||
} catch (e) {
|
||||
// En cas d'erreur réseau ou JSON, on affiche un message d'erreur
|
||||
console.error("[CRITICAL] Erreur lors de la récupération:", e);
|
||||
infoDiv.innerHTML = "❌ Erreur réseau ou JSON.";
|
||||
infoDiv.classList.remove("visible");
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,73 +0,0 @@
|
||||
.checkbox-mp3 input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-mp3 {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 1.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
--clr: var(--checkbox-bg-checked);
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
background-color: var(--checkbox-bg-default);
|
||||
border-radius: .5rem;
|
||||
transition: background-color 300ms, border-radius 300ms;
|
||||
}
|
||||
|
||||
.checkbox-mp3 input:checked ~ .checkmark {
|
||||
background-color: var(--clr);
|
||||
border-radius: .5rem;
|
||||
animation: pulse 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-mp3 input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
left: 0.45em;
|
||||
top: 0.25em;
|
||||
width: 0.25em;
|
||||
height: 0.5em;
|
||||
border: solid var(--checkbox-checkmark-border-color);
|
||||
border-width: 0 0.15em 0.15em 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 var(--checkbox-pulse-color);
|
||||
rotate: 20deg;
|
||||
}
|
||||
|
||||
50% {
|
||||
rotate: -20deg;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 0 0 0 10px var(--checkbox-pulse-color);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 13px var(--checkbox-pulse-color);
|
||||
rotate: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
.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: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.download-path button#changePath:hover {
|
||||
background-color: var(--form-button-bg-hover-color);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.container, .infos-container {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* height: 10000px; */
|
||||
padding: 1em;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
#downloadStatus {
|
||||
|
||||
margin-top: 1em;
|
||||
min-height: 1.5em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: var(--download-status-color);
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
form {
|
||||
background-color: var(--form-bg-color);
|
||||
padding: 2em;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="url"],
|
||||
form select {
|
||||
padding: 0.75em;
|
||||
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"] {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
form button {
|
||||
background-color: var(--form-button-bg-color);
|
||||
color: var(--form-button-text-color);
|
||||
border: none;
|
||||
padding: 0.75em;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: var(--form-button-bg-hover-color);
|
||||
}
|
||||
|
||||
form#downloadForm {
|
||||
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;
|
||||
color: var(--form-input-text-color);
|
||||
}
|
||||
|
||||
#UrlInput {
|
||||
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: 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: var(--form-input-placeholder-color);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
|
||||
header h1{
|
||||
margin-bottom: 0.2vw;
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
#videoInfo {
|
||||
margin-top: 20px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 1.5em 2em;
|
||||
background-color: var(--infos-box-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
|
||||
color: var(--video-info-text-color);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.5s ease, max-height 0.5s ease;
|
||||
user-select: text;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#videoInfo.visible {
|
||||
opacity: 1;
|
||||
max-height: 1500px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#videoInfo h3 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.6em;
|
||||
color: var(--video-info-heading-color);
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#videoInfo img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1em;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#videoInfo ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#videoInfo ul li {
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 500;
|
||||
color: var(--video-info-list-color);
|
||||
}
|
||||
|
||||
#videoInfo ul li strong {
|
||||
color: var(--video-info-list-strong-color);
|
||||
}
|
||||
|
||||
#videoInfo ul li a {
|
||||
color: var(--video-info-link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#videoInfo ul li a:hover,
|
||||
#videoInfo ul li a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 480px) {
|
||||
#videoInfo {
|
||||
padding: 1em;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#videoInfo h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
@import url("layout/form.css");
|
||||
@import url("layout/container.css");
|
||||
@import url("layout/ctr-infos.css");
|
||||
@import url("layout/header.css");
|
||||
@import url("layout/videoinfo.css");
|
||||
@import url("components/checkbox.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;
|
||||
scroll-behavior: smooth;
|
||||
/* outline: 2px solid red; */ /*<-- Utile pour le début ça */
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background-color);
|
||||
/* background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--default-text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
header p{
|
||||
color: var(--subtitle-color);
|
||||
}
|
||||
|
||||
.checkbox-inline{
|
||||
color: var(--mp3-text-color);
|
||||
}
|
||||
|
||||
body,
|
||||
.container,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
label {
|
||||
transition: background-color 0.2s ease, color 0.5s ease, border-color 0.2s ease;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
body.chirac {
|
||||
/* Background image Chirac */
|
||||
background-image: url('../../assets/images/Chirac.png');
|
||||
/* 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
|
||||
|
||||
*/
|
||||
@@ -1,45 +0,0 @@
|
||||
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/Cyberpunk.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
: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;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
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é */
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
body.nf {
|
||||
/* Couleurs générales */
|
||||
--background-color: #1a1a1a; /* fond sombre neutre */
|
||||
--default-text-color: #e6dfd5; /* texte beige clair */
|
||||
--subtitle-color: #f5f0e6; /* beige très clair (titres) */
|
||||
--mp3-text-color: #d8cfc2; /* texte checkbox */
|
||||
|
||||
/* Formulaire */
|
||||
--form-bg-color: #2a2a2a; /* fond formulaire gris sombre */
|
||||
--form-input-bg-color: #222222; /* fond inputs sombre */
|
||||
--form-input-border-color: #4a4036; /* bordure beige/brun */
|
||||
--form-input-border-focus-color: #cbb89d; /* beige doré en focus */
|
||||
--form-input-text-color: #f0e8dd; /* texte clair/beige */
|
||||
--form-input-placeholder-color: #9a8f80; /* placeholder beige/gris */
|
||||
--form-button-bg-color: #cbb89d; /* bouton beige doré */
|
||||
--form-button-text-color: #1a1a1a; /* texte sombre */
|
||||
--form-button-bg-hover-color: #b7a588; /* hover beige plus foncé */
|
||||
|
||||
/* Checkbox */
|
||||
--checkbox-bg-default: #4a4036; /* brun/gris */
|
||||
--checkbox-bg-checked: #cbb89d; /* beige doré */
|
||||
--checkbox-checkmark-border-color: #1a1a1a; /* noir profond */
|
||||
--checkbox-pulse-color: rgba(203,184,157,0.3); /* halo beige doux */
|
||||
|
||||
/* Download status */
|
||||
--download-status-color: #cbb89d; /* beige doré */
|
||||
|
||||
/* Video Info Box */
|
||||
--infos-box-color: #2a2a2a; /* fond sombre */
|
||||
--video-info-text-color: #e6dfd5; /* texte beige clair */
|
||||
--video-info-heading-color: #f5f0e6; /* titres beige clair */
|
||||
--video-info-list-color: #d8cfc2; /* texte liste */
|
||||
--video-info-list-strong-color: #ffffff; /* texte fort blanc cassé */
|
||||
--video-info-link-color: #cbb89d; /* liens beige doré */
|
||||
--video-info-link-hover-color: #b7a588; /* hover beige plus foncé */
|
||||
}
|
||||
|
||||
/* Fond inspiré de ton image beige */
|
||||
body.nf {
|
||||
background-image: url('../../assets/images/NF.jpg'); /* mets ton image ici */
|
||||
background-size: cover;
|
||||
background-position: 70% center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body.nf .download-path {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
/*
|
||||
|
||||
|
||||
|
||||
*/
|
||||
|
||||
body.spicy {
|
||||
/* Couleurs générales */
|
||||
--background-color: #121212; /* fond noir profond */
|
||||
--default-text-color: #581010; /* texte clair */
|
||||
--subtitle-color: #3d0909; /* 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:contain;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
9
public/styles/theme/themeimport.css
vendored
9
public/styles/theme/themeimport.css
vendored
@@ -1,9 +0,0 @@
|
||||
@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");
|
||||
@import url("nf-theme.css");
|
||||
@@ -1,48 +0,0 @@
|
||||
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.webp'); /* adapte ton image */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
body.vilbrequin .download-path{
|
||||
color: white;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
: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;
|
||||
}
|
||||
Reference in New Issue
Block a user