1berry/ytDownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design changes

Browse Source
This commit is contained in:
aandrew-me 2025-04-24 22:34:09 +03:00
parent 0fea89d39a
commit 6b494ef34d
6 changed files with 124 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/css/extra.css
View File

@ -3,6 +3,7 @@
--text: rgb(45, 45, 45); --text: rgb(45, 45, 45);
--box-main: #eef4f3; --box-main: #eef4f3;
--box-toggle: rgb(215 238 233); --box-toggle: rgb(215 238 233);
--box-separation: rgb(215 238 233);
--box-toggleOn: rgb(28 232 138); --box-toggleOn: rgb(28 232 138);
--item-bg: #dddddd; --item-bg: #dddddd;
--box-shadow: none; --box-shadow: none;
@ -16,20 +17,22 @@
} }
:root[theme="dark"] { :root[theme="dark"] {
--background: rgb(40, 40, 40); --background: #121212;
--text: white; --text: rgb(229, 229, 229);
--box-main: rgb(80, 80, 80); --box-main: #1d1d1d;
--box-toggle: rgb(70, 70, 70); --box-toggle: #191919;
--box-toggleOn: rgb(28 232 138); --box-separation: #2e2e2e;
--item-bg: rgb(75, 75, 75); --box-toggleOn: #2e2e2e;
--item-bg: #191919;
--box-shadow: none; --box-shadow: none;
--select: rgb(127, 253, 127); --select: rgb(68 214 141);
--greenBtn: #6acd29; --greenBtn: #24D166;
--greenBtn-bottom: #4c8824; --greenBtn-bottom: #3e6c20;
--redBtn: #d64d4f; --redBtn: #c82b2d;
--redBtn-bottom: #854243; --redBtn-bottom: #803334;
--blueBtn: rgb(80, 128, 230); --blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180); --blueBtn-bottom: rgb(44, 78, 180);
--border: none;
} }
:root[theme="frappe"] { :root[theme="frappe"] {
@ -37,6 +40,7 @@
--text: #e2e8ff; --text: #e2e8ff;
--box-main: #303446; --box-main: #303446;
--box-toggle: #414559; --box-toggle: #414559;
--box-separation: #414559;
--box-toggleOn: #607dc1; --box-toggleOn: #607dc1;
--item-bg: #414559; --item-bg: #414559;
--select: #8caaee; --select: #8caaee;
@ -52,6 +56,7 @@
--text: #d2d6df; --text: #d2d6df;
--box-main: #4d515d; --box-main: #4d515d;
--box-toggle: #2f333d; --box-toggle: #2f333d;
--box-separation: #2f333d;
--box-toggleOn: #13a3b7; --box-toggleOn: #13a3b7;
--item-bg: #4d515d; --item-bg: #4d515d;
--select: #57b6c2; --select: #57b6c2;
@ -67,6 +72,7 @@
--text: #00ff41; --text: #00ff41;
--box-main: #0c2216; --box-main: #0c2216;
--box-toggle: #214338; --box-toggle: #214338;
--box-separation: #214338;
--box-toggleOn: #24782e; --box-toggleOn: #24782e;
--item-bg: #214338; --item-bg: #214338;
--select: #00ff41; --select: #00ff41;
@ -83,6 +89,7 @@
--text: #292d31; --text: #292d31;
--box-main: #ffffff; --box-main: #ffffff;
--box-toggle: #f3f3f3; --box-toggle: #f3f3f3;
--box-separation: #f3f3f3;
--box-toggleOn: #cce5ff; --box-toggleOn: #cce5ff;
--item-bg: #3a66d150; --item-bg: #3a66d150;
--select: #cce5ff; --select: #cce5ff;
@ -99,6 +106,7 @@
--text: #4c4f69; --text: #4c4f69;
--box-main: #eff1f5; --box-main: #eff1f5;
--box-toggle: #e6e9ef; --box-toggle: #e6e9ef;
--box-separation: #e6e9ef;
--box-toggleOn: #cce5ff; --box-toggleOn: #cce5ff;
--item-bg: #bcc0cc; --item-bg: #bcc0cc;
--select: #cce5ff; --select: #cce5ff;
@ -115,6 +123,7 @@
--text: #a4b1b3; --text: #a4b1b3;
--box-main: #003745; --box-main: #003745;
--box-toggle: #2e4c52; --box-toggle: #2e4c52;
--box-separation: #2e4c52;
--box-toggleOn: #005a6f; --box-toggleOn: #005a6f;
--item-bg: #003745; --item-bg: #003745;
--select: #2aa198; --select: #2aa198;

69
assets/css/index.css
View File

@ -13,6 +13,7 @@
--text: rgb(45, 45, 45); --text: rgb(45, 45, 45);
--box-main: #eef4f3; --box-main: #eef4f3;
--box-toggle: rgb(215 238 233); --box-toggle: rgb(215 238 233);
--box-separation: rgb(215 238 233);
--box-toggleOn: rgb(28 232 138); --box-toggleOn: rgb(28 232 138);
--item-bg: #dddddd; --item-bg: #dddddd;
--box-shadow: none; --box-shadow: none;
@ -26,13 +27,13 @@
} }
:root[theme="dark"] { :root[theme="dark"] {
--background: #141d28; --background: #121212;
--text: white; --text: rgb(229, 229, 229);
--box-main: #161b26; --box-main: #1d1d1d;
--box-toggle: #141924; --box-toggle: #191919;
--box-separation: #1c2331; --box-separation: #2e2e2e;
--box-toggleOn: #1d2835; --box-toggleOn: #2e2e2e;
--item-bg: rgb(75, 75, 75); --item-bg: #191919;
--box-shadow: none; --box-shadow: none;
--select: rgb(68 214 141); --select: rgb(68 214 141);
--greenBtn: #24D166; --greenBtn: #24D166;
@ -41,6 +42,7 @@
--redBtn-bottom: #803334; --redBtn-bottom: #803334;
--blueBtn: rgb(80, 128, 230); --blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180); --blueBtn-bottom: rgb(44, 78, 180);
--border: none;
} }
:root[theme="frappe"] { :root[theme="frappe"] {
@ -48,6 +50,7 @@
--text: #e2e8ff; --text: #e2e8ff;
--box-main: #303446; --box-main: #303446;
--box-toggle: #414559; --box-toggle: #414559;
--box-separation: #414559;
--box-toggleOn: #607dc1; --box-toggleOn: #607dc1;
--item-bg: #414559; --item-bg: #414559;
--select: #8caaee; --select: #8caaee;
@ -63,6 +66,7 @@
--text: #d2d6df; --text: #d2d6df;
--box-main: #4d515d; --box-main: #4d515d;
--box-toggle: #2f333d; --box-toggle: #2f333d;
--box-separation: #2f333d;
--box-toggleOn: #13a3b7; --box-toggleOn: #13a3b7;
--item-bg: #4d515d; --item-bg: #4d515d;
--select: #57b6c2; --select: #57b6c2;
@ -78,6 +82,7 @@
--text: #00ff41; --text: #00ff41;
--box-main: #0c2216; --box-main: #0c2216;
--box-toggle: #214338; --box-toggle: #214338;
--box-separation: #214338;
--box-toggleOn: #24782e; --box-toggleOn: #24782e;
--item-bg: #214338; --item-bg: #214338;
--select: #00ff41; --select: #00ff41;
@ -94,6 +99,7 @@
--text: #292d31; --text: #292d31;
--box-main: #ffffff; --box-main: #ffffff;
--box-toggle: #f3f3f3; --box-toggle: #f3f3f3;
--box-separation: #f3f3f3;
--box-toggleOn: #cce5ff; --box-toggleOn: #cce5ff;
--item-bg: #3a66d150; --item-bg: #3a66d150;
--select: #cce5ff; --select: #cce5ff;
@ -110,6 +116,7 @@
--text: #4c4f69; --text: #4c4f69;
--box-main: #eff1f5; --box-main: #eff1f5;
--box-toggle: #e6e9ef; --box-toggle: #e6e9ef;
--box-separation: #e6e9ef;
--box-toggleOn: #cce5ff; --box-toggleOn: #cce5ff;
--item-bg: #bcc0cc; --item-bg: #bcc0cc;
--select: #cce5ff; --select: #cce5ff;
@ -126,6 +133,7 @@
--text: #a4b1b3; --text: #a4b1b3;
--box-main: #003745; --box-main: #003745;
--box-toggle: #2e4c52; --box-toggle: #2e4c52;
--box-separation: #2e4c52;
--box-toggleOn: #005a6f; --box-toggleOn: #005a6f;
--item-bg: #003745; --item-bg: #003745;
--select: #2aa198; --select: #2aa198;
@ -173,15 +181,12 @@ body {
background-color: rgb(137, 226, 255); background-color: rgb(137, 226, 255);
color: rgb(35, 35, 35); color: rgb(35, 35, 35);
border: none; border: none;
border-bottom: 4px solid rgb(63, 169, 205);
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
#tryBtn:active { #tryBtn:active {
top: 4px;
margin-bottom: 4px;
border: none; border: none;
} }
@ -251,7 +256,7 @@ body {
color: var(--text); color: var(--text);
margin: 10px auto; margin: 10px auto;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 20px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@ -262,7 +267,7 @@ body {
height: 25px; height: 25px;
background-color: var(--item-bg); background-color: var(--item-bg);
color: var(--text); color: var(--text);
padding: 10px 25px; padding: 16px 25px;
border-radius: 15px; border-radius: 15px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -283,11 +288,12 @@ body {
.title { .title {
padding: 12px 10px; padding: 12px 10px;
border-radius: 8px; border-radius: 8px;
margin-left: 4px;
border: none; border: none;
outline: none; outline: none;
width: 50%; width: 50%;
text-align: center; text-align: center;
background-color: var(--box-toggle); background-color: var(--box-separation);
color: var(--text); color: var(--text);
font-size: large; font-size: large;
font-family: "Ubuntu"; font-family: "Ubuntu";
@ -315,8 +321,8 @@ body {
} }
.itemClose { .itemClose {
position: absolute; position: absolute;
top: 5px; top: 8px;
right: 5px; right: 8px;
cursor: pointer; cursor: pointer;
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
@ -329,9 +335,9 @@ body {
} }
#closeHidden { #closeHidden {
bottom: 5px; bottom: 7px;
position: absolute; position: absolute;
right: 5px; right: 10px;
cursor: pointer; cursor: pointer;
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
@ -350,8 +356,9 @@ body {
background-color: var(--box-main); background-color: var(--box-main);
border-radius: 15px; border-radius: 15px;
width: 80%; width: 80%;
padding: 10px 10px 15px 10px; padding: 10px 10px 25px 10px;
color: var(--text); color: var(--text);
border: var(--border);
} }
#videoBox, #audioBox { #videoBox, #audioBox {
@ -393,7 +400,7 @@ body {
.toggleBtn { .toggleBtn {
width: 50%; width: 50%;
font-size: x-large; font-size: x-large;
border: none; border: var(--border);
background-color: var(--box-toggle); background-color: var(--box-toggle);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
@ -439,6 +446,10 @@ body {
width: 400px; width: 400px;
} }
.formatSelect {
margin-right: 4px;
}
label { label {
position: relative; position: relative;
top: 3px; top: 3px;
@ -468,7 +479,6 @@ input[type="number"]::-webkit-outer-spin-button {
background-color: var(--greenBtn); background-color: var(--greenBtn);
color: white; color: white;
border: none; border: none;
border-bottom: 5.5px solid var(--greenBtn-bottom);
font-size: large; font-size: large;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -476,9 +486,8 @@ input[type="number"]::-webkit-outer-spin-button {
position: relative; position: relative;
} }
.submitBtn:active { .submitBtn:active {
background-color: var(--greenBtn-bottom);
border: none; border: none;
top: 5.5px;
margin-bottom: 5.5px;
} }
.resumeBtn { .resumeBtn {
@ -487,7 +496,6 @@ input[type="number"]::-webkit-outer-spin-button {
background-color: rgb(64, 227, 64); background-color: rgb(64, 227, 64);
color: white; color: white;
border: none; border: none;
border-bottom: 4px solid rgb(54, 205, 54);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
outline: none; outline: none;
@ -568,7 +576,6 @@ button {
color: white; color: white;
background-color: var(--blueBtn); background-color: var(--blueBtn);
border: none; border: none;
border-bottom: 4px solid var(--blueBtn-bottom);
position: relative; position: relative;
padding: 15px; padding: 15px;
border-radius: 10px; border-radius: 10px;
@ -590,8 +597,7 @@ button {
} }
#extractBtn:active, .blueBtn:active { #extractBtn:active, .blueBtn:active {
top: 4px; background-color: var(--blueBtn-bottom);
margin-bottom: 12px;
border: none; border: none;
} }
@ -599,7 +605,6 @@ button {
color: white; color: white;
background-color: var(--redBtn); background-color: var(--redBtn);
border: none; border: none;
border-bottom: 5px solid var(--redBtn-bottom);
position: relative; position: relative;
padding: 15px; padding: 15px;
border-radius: 10px; border-radius: 10px;
@ -609,8 +614,7 @@ button {
} }
.advancedToggle:active { .advancedToggle:active {
top: 5px; background-color: var(--blueBtn-bottom);
margin-bottom: 13px;
border: none; border: none;
} }
@ -887,4 +891,9 @@ body::-webkit-scrollbar-thumb {
opacity: 0.8; opacity: 0.8;
} }
/* End */ ::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
/* End */

BIN
assets/images/close.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

74
html/index.html
View File

@ -47,7 +47,7 @@
<a id="playlistWin" class="menuItem">Download Playlist</a> <a id="playlistWin" class="menuItem">Download Playlist</a>
<!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> --> <!-- <a id="newPlaylistWin" class="menuItem">New Playlist</a> -->
<a id="preferenceWin" class="menuItem">Preferences</a> <a id="preferenceWin" class="menuItem">Preferences</a>
<a id="compressorWin" class="menuItem">Compressor</a> <a id="compressorWin" class="menuItem">Compressor</a>
<a id="aboutWin" class="menuItem">About</a> <a id="aboutWin" class="menuItem">About</a>
<span id="themeTxt" class="menuItem">Theme:</span> <span id="themeTxt" class="menuItem">Theme:</span>
<select name="themeToggle" id="themeToggle"> <select name="themeToggle" id="themeToggle">
@ -93,48 +93,54 @@
</div> </div>
<p id="title">Title </p> <p id="title">Title </p>
<!-- Video tab --> <div class="videoAudioContainer">
<div id="videoList"> <!-- Video tab -->
<div class="separationBox"> <div id="videoList">
<h2 id="videoHeader">Video</h2> <div class="separationBox">
<label class="formatSelect">Select Format </label> <h2 id="videoHeader">Video</h2>
<select id="videoFormatSelect" class="select"> <label class="formatSelect">Select Format </label>
</select> <select id="videoFormatSelect" class="select">
<br> </select>
<input type="hidden" name="url" class="url" id="url"> <br>
<input type="hidden" name="url" class="url" id="url">
<!-- Audio options for video --> <!-- Audio options for video -->
<div id="audioForVideo"> <div id="audioForVideo">
<h2 id="audioHeader">Audio</h2> <h2 id="audioHeader">Audio</h2>
<label class="formatSelect">Select Audio Format </label> <label class="formatSelect">Select Audio Format </label>
<select id="audioForVideoFormatSelect" class="select"> <select id="audioForVideoFormatSelect" class="select">
</select>
<br>
<input type="hidden" name="url" class="url">
</div>
<br>
</div>
<br>
<button class="submitBtn" id="videoDownload">Download</button>
<button id="advancedVideoToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
</div>
<!-- Audio tab -->
<div id="audioList">
<div id="audioPresent">
<label class="formatSelect">Select Format </label>
<select id="audioFormatSelect" class="select">
</select> </select>
<br> <br>
<input type="hidden" name="url" class="url"> <input type="hidden" name="url" class="url">
<button class="submitBtn" id="audioDownload">Download</button>
<button id="advancedAudioToggle" class="blueBtn" onClick="advancedToggle()">More options</button>
</div> </div>
<br>
</div>
<br>
<button class="submitBtn" id="videoDownload">Download</button>
<button id="advancedVideoToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
</div>
<!-- Audio tab -->
<div id="audioList">
<div id="audioPresent">
<label class="formatSelect">Select Format </label>
<select id="audioFormatSelect" class="select">
</select>
<br>
<input type="hidden" name="url" class="url">
<button class="submitBtn" id="audioDownload">Download</button>
<button id="advancedAudioToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
</div> </div>
</div> </div>
<div id="advanced"> <div id="advanced">
<!-- <div class="advancedItem">
<p>Custom yt-dlp arguments</p>
<input type="text" id="argInput">
</div> -->
<div class="advancedItem"> <div class="advancedItem">
<span id="quitTxt">Close app when download finishes</span> <span id="quitTxt">Close app when download finishes</span>
<input type="checkbox" id="quitChecked" class="cb"> <input type="checkbox" id="quitChecked" class="cb">

2
html/playlist.html
View File

@ -135,7 +135,7 @@
</div> </div>
<br> <br>
<button id="advancedToggle" class="advancedToggle">More options</button> <button id="advancedToggle" class="blueBtn">More options</button>
<br> <br>
<!-- Hidden --> <!-- Hidden -->

25
src/common.js
View File

@ -38,8 +38,31 @@ getId("menuIcon").addEventListener("click", () => {
}); });
getId("themeToggle").addEventListener("change", () => { getId("themeToggle").addEventListener("change", () => {
document.documentElement.setAttribute("theme", getId("themeToggle").value);
localStorage.setItem("theme", getId("themeToggle").value); localStorage.setItem("theme", getId("themeToggle").value);
const x = window.innerWidth;
const y = 0;
const maxRadius = Math.hypot(window.innerWidth, window.innerHeight);
const transition = document.startViewTransition(() => {
document.documentElement.setAttribute("theme", getId("themeToggle").value);
});
transition.ready.then(() => {
document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`
]
},
{
duration: 1100,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
pseudoElement: '::view-transition-new(root)'
}
);
});
}); });
const storageTheme = localStorage.getItem("theme"); const storageTheme = localStorage.getItem("theme");