diff --git a/frontend/app.js b/frontend/app.js
index 9a174c3..8d6d721 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -942,6 +942,14 @@ function wireUI() {
els.newPlaylistBtn.addEventListener('click', () => newPlaylist(null));
+ // Landing-hero quick-search chips
+ document.querySelectorAll('.chip').forEach((c) => {
+ c.addEventListener('click', () => {
+ els.searchInput.value = c.dataset.q || c.textContent.trim();
+ els.searchForm.requestSubmit();
+ });
+ });
+
// Now-playing: Save (preload) + Add to playlist
els.saveBtn.addEventListener('click', async () => {
if (!current || !current.meta) return;
diff --git a/frontend/index.html b/frontend/index.html
index b35edf5..1248978 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -68,8 +68,23 @@
-
▶
-
Search and pick a video to start watching — ad-free.
+
+
▶
+
YT Player
+
Ad-free YouTube — no login, no tracking. Search, play, and keep playlists right on your device.
+
+ No ads
+ No sign-in
+ Offline playlists
+
+
+ Try
+
+
+
+
+
+
diff --git a/frontend/styles.css b/frontend/styles.css
index 84518d7..52f35ab 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -289,22 +289,87 @@ body::after {
.player-placeholder {
position: absolute; inset: 0;
- display: flex; flex-direction: column; align-items: center; justify-content: center;
- color: var(--text-dim); gap: 18px; text-align: center; padding: 20px;
+ display: flex; align-items: center; justify-content: center;
+ text-align: center; padding: 28px;
+ background:
+ radial-gradient(680px 420px at 50% 30%, rgba(255, 75, 50, 0.10), transparent 70%),
+ radial-gradient(circle at 50% 120%, rgba(90, 120, 255, 0.06), transparent 60%),
+ linear-gradient(180deg, var(--bg-1), #000);
}
-.player-placeholder p { max-width: 320px; font-size: 14px; }
+/* Hero landing */
+.hero {
+ display: flex; flex-direction: column; align-items: center;
+ gap: 16px; max-width: 460px;
+ animation: heroIn 0.6s var(--ease) both;
+}
+@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ph-logo {
- font-size: 30px;
- width: 84px; height: 84px;
+ font-size: 32px;
+ width: 88px; height: 88px;
display: grid; place-items: center;
- border-radius: 24px;
- color: var(--accent);
- background: var(--bg-1);
- border: 1px solid var(--line);
- box-shadow: 0 0 50px -16px var(--accent-glow);
+ border-radius: 26px;
+ color: #fff;
+ background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
+ box-shadow: 0 18px 50px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
animation: float 4s ease-in-out infinite;
}
-@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
+.hero-title {
+ margin: 6px 0 0;
+ font-family: var(--display);
+ font-weight: 800;
+ font-size: 40px;
+ letter-spacing: -0.03em;
+ line-height: 1;
+ background: linear-gradient(180deg, #fff, #c8c6cf);
+ -webkit-background-clip: text; background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+.hero-tagline {
+ margin: 0; max-width: 380px;
+ color: var(--text-2); font-size: 14.5px; line-height: 1.5;
+}
+.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 2px; }
+.hero-pill {
+ font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
+ color: var(--text-2);
+ background: var(--bg-2);
+ border: 1px solid var(--line);
+ padding: 6px 12px 6px 26px;
+ border-radius: 20px;
+ position: relative;
+}
+.hero-pill::before {
+ content: "✓";
+ position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
+ color: var(--accent); font-size: 10px; font-weight: 800;
+}
+.hero-suggests {
+ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
+ margin-top: 10px;
+}
+.hero-suggests-label {
+ font-family: var(--mono); font-size: 10px; font-weight: 700;
+ letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
+ margin-right: 2px;
+}
+.chip {
+ font-family: var(--ui); font-size: 13px; font-weight: 600;
+ color: var(--text);
+ background: var(--bg-3);
+ border: 1px solid var(--line);
+ padding: 8px 15px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: all 0.16s var(--ease);
+}
+.chip:hover {
+ color: #fff;
+ background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
+ border-color: transparent;
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px -8px var(--accent-glow);
+}
.spinner {
position: absolute;
diff --git a/releases/YTPlayer_1.0.0_x64-setup.exe b/releases/YTPlayer_1.0.0_x64-setup.exe
index f620636..6c294ff 100644
Binary files a/releases/YTPlayer_1.0.0_x64-setup.exe and b/releases/YTPlayer_1.0.0_x64-setup.exe differ
diff --git a/releases/YTPlayer_1.0.0_x64_en-US.msi b/releases/YTPlayer_1.0.0_x64_en-US.msi
index d82e330..c87b22b 100644
Binary files a/releases/YTPlayer_1.0.0_x64_en-US.msi and b/releases/YTPlayer_1.0.0_x64_en-US.msi differ
diff --git a/releases/ytplayer.exe b/releases/ytplayer.exe
index a93a230..738a4ce 100644
Binary files a/releases/ytplayer.exe and b/releases/ytplayer.exe differ