mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
297 lines
14 KiB
HTML
297 lines
14 KiB
HTML
<!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:;
|
|
">
|
|
|
|
<link rel="stylesheet" href="styles/styles.css">
|
|
<link rel="stylesheet" href="styles/layout/topbar.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="topbar" id="topbar">
|
|
<div class="custom-controls">
|
|
<button id="devtools-btn" title="Dev Tools">Tools</button>
|
|
<button id="logs-btn" title="Logs">Logs</button>
|
|
<button id="website-btn" title="Website">Website</button>
|
|
<button id="wiki-btn" title="Wiki">Wiki</button>
|
|
<!-- <button id="theme-btn" title="Theme">Theme</button> -->
|
|
</div>
|
|
<div class="window-controls">
|
|
<button id="minimize-btn" title="Réduire"><img src="assets/icon/minimize.svg"></button>
|
|
<button id="maximize-btn" title="Maximiser"><img src="assets/icon/maximize.svg"></button>
|
|
<button id="close-btn" title="Fermer"><img src="assets/icon/close.svg"></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<button class="settings-button" id="settings-button">
|
|
<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-q</title><path d="M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z" style="fill:none;stroke:var(--settings-button-text-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
|
|
</button>
|
|
|
|
|
|
<div class="settings-panel" id="settings-panel">
|
|
<div class="settings-modal">
|
|
|
|
<button class="close-btn" onclick="closePanel()">✕</button>
|
|
|
|
<div class="settings-title">
|
|
<h2>SETTINGS</h2>
|
|
<p style="font-size: 0.8em;">Changes are saved automatically. <br> Somes changes could need a restart</p>
|
|
</div>
|
|
|
|
<!-- Basic Settings visibles -->
|
|
<div class="settings-section">
|
|
<h3>Basic Settings</h3>
|
|
|
|
<div class="setting-item" id="theme" style="margin-left: 32px;">
|
|
<div class="setting-info">
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
<span class="setting-title">Thème</span>
|
|
|
|
<select id="themeSelect" data-key="theme" aria-label="Choisir le thème">
|
|
|
|
</select>
|
|
<button id="refresh-themes-btn" title="Refresh themes" class="refresh-themes-btn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<small>Choose the theme of the application</small>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="discordRPC" id="discordRPC">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Discord RPC</span>
|
|
<small>Enable/disable Discord Rich Presence for your app.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="autoDownloadPlaylist" id="autoDownloadPlaylist">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Download Playlist automatically?</span>
|
|
<small>If enabled, playlists will download without confirmation.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="setting-item">
|
|
<input type="checkbox" data-key="notifySystem" id="notifySystem">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Notification at the end</span>
|
|
<small>Notify when a download finishes.</small>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="customTopBar" id="customTopBar">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Custom Top bar</span>
|
|
<small>Use this if the topbar is missing or you prefer a custom one.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="autoCheckInfo" id="autoCheckInfo">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Auto Fetch Info</span>
|
|
<small>Automatically fetch information for new downloads.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Advanced Settings -->
|
|
<details class="settings-section">
|
|
<summary>Advanced Settings</summary>
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="autoUpdate" id="autoUpdate">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Auto Update</span>
|
|
<small>Enable automatic app updates.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="setting-item">
|
|
<input type="checkbox" data-key="outputTitleCheck" id="outputTitleCheck">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Output title (special chars)</span>
|
|
<small>Check for unusual characters in output titles.</small>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="addMetadata" id="addMetadata">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Add Metadata</span>
|
|
<small>Include metadata in downloaded files.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="addThumbnail" id="addThumbnail">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Add Thumbnail</span>
|
|
<small>Include thumbnails in downloaded files.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item" style="margin-left: 32px; margin-top: 20px;">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Custom Codec</span>
|
|
<select data-key="customCodec">
|
|
<option value="h264">H264</option>
|
|
<option value="av1">AV1</option>
|
|
<option value="av01">AV01</option>
|
|
<option value="vp9.2">VP9.2</option>
|
|
<option value="vp9">VP9</option>
|
|
<option value="h265">H265</option>
|
|
<option value="theora">Theora</option>
|
|
</select>
|
|
<small>Choose your preferred video codec.</small>
|
|
</div>
|
|
</div>
|
|
|
|
</details>
|
|
|
|
<!-- Developer Settings -->
|
|
<details class="settings-section">
|
|
<summary>Developer Settings</summary>
|
|
|
|
<!-- <div class="setting-item">
|
|
<input type="checkbox" data-key="downloadSystem" id="downloadSystem">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Download System</span>
|
|
<small>Enable/disable the internal download system.</small>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- <div class="setting-item">
|
|
<input type="checkbox" data-key="logSystem" id="logSystem">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Log System</span>
|
|
<small>Enable logging system.</small>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="setting-item">
|
|
<input type="checkbox" data-key="verboseLogs" id="verboseLogs">
|
|
<div class="setting-info">
|
|
<span class="setting-title">Verbose Logs</span>
|
|
<small>Show verbose logs for debugging purposes.</small>
|
|
</div>
|
|
</div>
|
|
|
|
</details>
|
|
|
|
<div class="settings-footer">
|
|
<button id="open-theme">Open Theme Folder</button>
|
|
<button id="open-json-btn">Open JSON Configuration</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<main>
|
|
<div class="container" id="container">
|
|
<h1 id="title"> Freedom Loader </h1>
|
|
<p id="subtitle"> Because why not? </p>
|
|
|
|
<form action="/download" method="POST" id="downloadForm">
|
|
<div class="url-input-container">
|
|
<input type="text" name="url" placeholder="URL" id="UrlInput">
|
|
<button type="button" id="pasteBtn" class="paste-btn" title="Paste from clipboard">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<label class="checkbox-inline">
|
|
|
|
<label class="checkbox-mp3">
|
|
<input type="checkbox" name="audioOnly" value="1">
|
|
<div class="checkmark"></div>
|
|
</label>
|
|
Audio Only (MP3)
|
|
</label>
|
|
<select name="quality">
|
|
<option value="best">Best Quality</option>
|
|
<option value="medium">Medium Quality</option>
|
|
<option value="worst">Lowest Quality</option>
|
|
<option value="1080">1080p</option>
|
|
<option value="720">720p</option>
|
|
<option value="480">480p</option>
|
|
</select>
|
|
|
|
<button type="submit" onclick="startProgress()">Download</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<div class="download-path">
|
|
Will be save on <span id="savePath"></span>
|
|
<button id="changePath">Edit</button>
|
|
</div>
|
|
|
|
<div class="progress-container">
|
|
<div id="downloadProgressWrapper">
|
|
<div id="downloadProgress"></div>
|
|
</div>
|
|
<div style="display: flex; gap: 20px; align-items: center;">
|
|
<div id="downloadProgressText"></div>
|
|
<div id="downloadSpeedText"></div>
|
|
<button type="button" id="stopBtn" onclick="stopDownload()" class="stop-btn" style="display:none;" title="Stop download">■</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="downloadStatus" style="display: none;"></div>
|
|
|
|
<div class="infos-container">
|
|
|
|
<div id="loaderBox" class="loader-box" style="display:none;">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<span>Fetching info...</span>
|
|
</div>
|
|
|
|
<div id="videoInfo" style="margin-top: 20px;"></div>
|
|
</div>
|
|
|
|
<span id="version-badge" class="version-badge"></span>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<h2 id="reference"> Because Why Not ? </h2>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="script/clipboardPaste.js"></script>
|
|
<script src="script/custompath.js"></script>
|
|
<script src="script/settingsPanel.js"></script>
|
|
<script src="script/appVersion.js"></script>
|
|
<script src="script/downloadstatus.js"></script>
|
|
<script src="script/fetchinfo.js"></script>
|
|
<script src="script/progressBar.js"></script>
|
|
<script src="script/customthemes.js"></script>
|
|
<script type="module" src="script/topbar.js"></script>
|
|
|
|
</body>
|
|
</html> |