mirror of
https://github.com/barkeser2002/just-music-premium.git
synced 2026-09-25 01:00:04 +03:00
Barış Keser
fdde1274ad
Kullanici "a-b karisimi" secti. A'nin daraltilabilir rayi (v1.4.0) + B'nin merkez
now-playing hero'su. Tasarim 8-ajanli judge-panel workflow'uyla secildi ("Center
Stage" — #view icine showView('now')), spec canliya birebir kuruldu.
- Yeni showView('now') -> renderNowHero(): buyuk kapak (kapak-accent blur backdrop) +
baslik/eyebrow + genis scrubber + iri transport + tek satir canli soz; #view icinde
in-flow (sabit overlay DEGIL), rail + alt player bar + sag panel ile birlikte yasar
- Tek motor saati: hero scrubber'i + alt bar ayni updateSeek/updatePlayBtn'den beslenir
(seeking guard'li, view==='now' ile kapaliyken sifir maliyet). Ayri ID'ler, catisma yok
- Giris: alt bardaki #pHeroBtn (💿) / mini kapak / .p-meta tik / komut paleti; buyuk kapak
+ expand -> openFullscreen theater (mini->merkez->tam ekran zoom merdiveni)
- Mevcut makineyi yeniden kullanir (--np-cover backdrop, applyCoverAccent, .bar geometri,
parseLRC memoize, viewIn); prefers-reduced-motion + feature-test'li view-transition kapak
morph'u; TR/EN i18n. Tumuyle opt-in/geri-alinabilir
- Harness: 14 spec kontrolu + 0 JS hatasi (motor aynasi, drag guard, bos durum,
vt-name cakismasi yok, i18n, geri-alinabilirlik)
679 lines
33 KiB
HTML
679 lines
33 KiB
HTML
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Just Music Premium — Windows için müzik çalar</title>
|
||
<meta name="description" content="Spotify tarzı arayüz, gerçek DSP ses motoru ve internetten klip akışı. Windows için ücretsiz ve açık kaynak müzik çalar. Sunucusuz, tamamen yerli.">
|
||
<link rel="icon" href="img/logo.png">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<script>document.documentElement.classList.add('js');</script>
|
||
<style>
|
||
/* ============ TOKENS ============ */
|
||
:root{
|
||
--bg:#0a0a0b;
|
||
--panel:#131315;
|
||
--panel-2:#191a1d;
|
||
--card:#1a1b1e;
|
||
--text:#ffffff;
|
||
--muted:#a7a7ad;
|
||
--faint:#6d6d74;
|
||
--accent:#1db954;
|
||
--accent-hi:#1ed760;
|
||
--line:rgba(255,255,255,.08);
|
||
--line-2:rgba(255,255,255,.055);
|
||
--radius:16px;
|
||
--radius-lg:22px;
|
||
--shadow:0 24px 60px -20px rgba(0,0,0,.7);
|
||
--glow:0 0 0 1px rgba(30,215,96,.35), 0 18px 50px -12px rgba(29,185,84,.45);
|
||
--maxw:1180px;
|
||
--font-d:"Sora",system-ui,sans-serif;
|
||
--font-b:"Manrope",system-ui,sans-serif;
|
||
}
|
||
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
font-family:var(--font-b);
|
||
font-size:17px;
|
||
line-height:1.65;
|
||
-webkit-font-smoothing:antialiased;
|
||
text-rendering:optimizeLegibility;
|
||
overflow-x:hidden;
|
||
position:relative;
|
||
}
|
||
img{max-width:100%;display:block}
|
||
a{color:inherit;text-decoration:none}
|
||
section{scroll-margin-top:92px}
|
||
|
||
/* atmosphere: fixed background field + grain */
|
||
.field{
|
||
position:fixed;inset:0;z-index:-2;pointer-events:none;
|
||
background:
|
||
radial-gradient(120% 90% at 50% -10%, rgba(29,185,84,.16), transparent 55%),
|
||
radial-gradient(80% 60% at 85% 8%, rgba(30,215,96,.10), transparent 60%),
|
||
radial-gradient(70% 60% at 12% 22%, rgba(29,185,84,.07), transparent 60%),
|
||
var(--bg);
|
||
}
|
||
.grain{
|
||
position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
|
||
|
||
/* ============ TYPE HELPERS ============ */
|
||
.kicker{
|
||
font-family:var(--font-b);
|
||
font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
|
||
color:var(--accent-hi);
|
||
display:inline-flex;align-items:center;gap:10px;
|
||
}
|
||
.kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
|
||
h1,h2,h3{font-family:var(--font-d);font-weight:800;line-height:1.05;letter-spacing:-.02em}
|
||
.hl{color:var(--accent-hi)}
|
||
.muted{color:var(--muted)}
|
||
|
||
/* ============ BUTTONS ============ */
|
||
.btn{
|
||
display:inline-flex;align-items:center;justify-content:center;gap:9px;
|
||
font-family:var(--font-b);font-weight:700;font-size:15px;
|
||
padding:14px 22px;border-radius:13px;border:1px solid transparent;
|
||
cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s,color .25s;
|
||
white-space:nowrap;
|
||
}
|
||
.btn-primary{
|
||
background:linear-gradient(180deg,var(--accent-hi),var(--accent));
|
||
color:#04220f;
|
||
box-shadow:0 12px 34px -12px rgba(29,185,84,.75), inset 0 1px 0 rgba(255,255,255,.35);
|
||
}
|
||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(29,185,84,.9), inset 0 1px 0 rgba(255,255,255,.4)}
|
||
.btn-ghost{
|
||
background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line);
|
||
}
|
||
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(30,215,96,.5);background:rgba(30,215,96,.08)}
|
||
.btn-sm{padding:10px 16px;font-size:13.5px;border-radius:11px}
|
||
|
||
/* ============ NAV ============ */
|
||
header.nav{
|
||
position:sticky;top:0;z-index:50;
|
||
backdrop-filter:blur(14px);
|
||
background:rgba(10,10,11,.72);
|
||
border-bottom:1px solid var(--line-2);
|
||
}
|
||
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
|
||
.brand{display:flex;align-items:center;gap:12px;min-width:0}
|
||
.brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 6px 18px -6px rgba(29,185,84,.7)}
|
||
.brand .wm{display:flex;flex-direction:column;line-height:1.05}
|
||
.brand .wm b{font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:-.01em}
|
||
.brand .wm span{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hi)}
|
||
.nav-links{display:flex;align-items:center;gap:30px}
|
||
.nav-links a{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .2s;position:relative;padding:6px 0}
|
||
.nav-links a:hover{color:var(--text)}
|
||
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .25s}
|
||
.nav-links a:hover::after{width:100%}
|
||
.nav-cta{display:flex;align-items:center;gap:14px}
|
||
.nav-toggle{display:none}
|
||
|
||
/* ============ HERO ============ */
|
||
.hero{padding:70px 0 84px;position:relative}
|
||
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
|
||
.badge-row{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
|
||
.chip{
|
||
display:inline-flex;align-items:center;gap:7px;
|
||
font-size:12.5px;font-weight:600;color:var(--muted);
|
||
padding:6px 13px;border-radius:999px;border:1px solid var(--line);
|
||
background:rgba(255,255,255,.02);
|
||
}
|
||
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 8px var(--accent)}
|
||
h1.hero-title{
|
||
margin-top:20px;
|
||
font-size:clamp(2.5rem,6.2vw,4.4rem);
|
||
}
|
||
.hero-sub{margin-top:22px;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--muted);max-width:33ch}
|
||
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
|
||
.hero-meta{margin-top:22px;font-size:13px;color:var(--faint);font-weight:600;letter-spacing:.02em}
|
||
|
||
/* logo halo shown in hero on mobile only */
|
||
.hero-logo-mobile{display:none}
|
||
|
||
/* ---- hero mock "now playing" card ---- */
|
||
.np{
|
||
position:relative;
|
||
background:linear-gradient(165deg,var(--panel-2),var(--panel));
|
||
border:1px solid var(--line);
|
||
border-radius:var(--radius-lg);
|
||
padding:22px;
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.np::before{
|
||
content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
|
||
background:linear-gradient(160deg,rgba(30,215,96,.5),transparent 40%);
|
||
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
|
||
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
|
||
}
|
||
.np-top{display:flex;align-items:center;gap:14px}
|
||
.np-art{
|
||
width:64px;height:64px;border-radius:15px;flex:none;
|
||
background:radial-gradient(120% 120% at 30% 20%,var(--accent-hi),#0e7a37);
|
||
display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(29,185,84,.8);
|
||
}
|
||
.np-art img{width:64px;height:64px;border-radius:15px}
|
||
.np-info{min-width:0}
|
||
.np-info b{font-family:var(--font-d);font-weight:700;font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.np-tag{
|
||
display:inline-flex;align-items:center;gap:6px;margin-top:6px;
|
||
font-size:11px;font-weight:600;color:var(--accent-hi);
|
||
background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.3);
|
||
padding:3px 9px;border-radius:999px;
|
||
}
|
||
.np-live{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
|
||
|
||
.np-label{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:20px 0 9px;display:flex;align-items:center;gap:8px}
|
||
.np-label i{font-style:normal;color:var(--accent)}
|
||
|
||
/* waveform (Şarkı DNA'sı) */
|
||
.wave{display:flex;align-items:center;gap:3px;height:52px}
|
||
.wave span{flex:1;min-width:2px;border-radius:3px;background:rgba(255,255,255,.14)}
|
||
.wave span.on{background:linear-gradient(180deg,var(--accent-hi),var(--accent))}
|
||
|
||
/* animated EQ (DSP) */
|
||
.eq{display:flex;align-items:flex-end;gap:5px;height:40px}
|
||
.eq span{width:7px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--accent-hi),var(--accent));transform-origin:bottom;animation:eq 1.05s ease-in-out infinite}
|
||
.eq span:nth-child(1){animation-delay:-.9s}
|
||
.eq span:nth-child(2){animation-delay:-.2s}
|
||
.eq span:nth-child(3){animation-delay:-.6s}
|
||
.eq span:nth-child(4){animation-delay:-.1s}
|
||
.eq span:nth-child(5){animation-delay:-.75s}
|
||
.eq span:nth-child(6){animation-delay:-.35s}
|
||
.eq span:nth-child(7){animation-delay:-.5s}
|
||
@keyframes eq{0%,100%{height:20%}50%{height:100%}}
|
||
|
||
.np-lyric{margin-top:8px;font-size:13.5px;line-height:1.5}
|
||
.np-lyric .now{color:var(--accent-hi);font-weight:700}
|
||
.np-lyric .next{color:var(--faint)}
|
||
|
||
.np-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
|
||
.np-controls svg{fill:var(--muted)}
|
||
.np-play{width:50px;height:50px;border-radius:50%;background:linear-gradient(180deg,var(--accent-hi),var(--accent));display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(29,185,84,.8)}
|
||
.np-play svg{fill:#04220f}
|
||
|
||
/* floating stat tags on the card */
|
||
.np-float{
|
||
position:absolute;background:var(--card);border:1px solid var(--line);
|
||
border-radius:12px;padding:9px 13px;box-shadow:var(--shadow);
|
||
font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;
|
||
}
|
||
.np-float .k{color:var(--accent-hi)}
|
||
.np-float.f1{top:-18px;right:22px;animation:bob 5s ease-in-out infinite}
|
||
.np-float.f2{bottom:64px;left:-26px;animation:bob 5.6s ease-in-out infinite .4s}
|
||
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
|
||
|
||
/* ============ SECTION HEADS ============ */
|
||
.sec{padding:72px 0}
|
||
.sec-head{max-width:640px;margin-bottom:44px}
|
||
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:16px}
|
||
.sec-head p{margin-top:14px;color:var(--muted)}
|
||
|
||
/* ============ FEATURES ============ */
|
||
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||
.feat{
|
||
grid-column:span 2;
|
||
background:linear-gradient(180deg,var(--card),#141416);
|
||
border:1px solid var(--line);border-radius:var(--radius);
|
||
padding:24px;position:relative;overflow:hidden;
|
||
transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;
|
||
}
|
||
.feat.small{grid-column:span 1}
|
||
.feat:hover{transform:translateY(-4px);border-color:rgba(30,215,96,.4);box-shadow:0 24px 50px -24px rgba(29,185,84,.5)}
|
||
.feat .num{position:absolute;top:20px;right:22px;font-family:var(--font-d);font-weight:700;font-size:13px;color:var(--faint);letter-spacing:.05em}
|
||
.feat .ico{
|
||
width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:23px;
|
||
background:radial-gradient(120% 120% at 30% 20%,rgba(30,215,96,.22),rgba(29,185,84,.06));
|
||
border:1px solid rgba(30,215,96,.25);margin-bottom:16px;
|
||
}
|
||
.feat h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
|
||
.feat p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.6}
|
||
.feat .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
|
||
.feat .tags span{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
|
||
.feat-eq{display:flex;align-items:flex-end;gap:6px;height:46px;margin-top:18px}
|
||
.feat-eq span{width:8px;border-radius:4px;background:linear-gradient(180deg,var(--accent-hi),var(--accent));transform-origin:bottom;animation:eq 1.1s ease-in-out infinite;opacity:.85}
|
||
.feat-eq span:nth-child(2n){animation-duration:1.35s}
|
||
.feat-eq span:nth-child(1){animation-delay:-.2s}
|
||
.feat-eq span:nth-child(2){animation-delay:-.7s}
|
||
.feat-eq span:nth-child(3){animation-delay:-.4s}
|
||
.feat-eq span:nth-child(4){animation-delay:-.9s}
|
||
.feat-eq span:nth-child(5){animation-delay:-.15s}
|
||
.feat-eq span:nth-child(6){animation-delay:-.6s}
|
||
.feat-eq span:nth-child(7){animation-delay:-.35s}
|
||
.feat-eq span:nth-child(8){animation-delay:-.8s}
|
||
.feat-eq span:nth-child(9){animation-delay:-.5s}
|
||
.feat-eq span:nth-child(10){animation-delay:-.25s}
|
||
|
||
/* ============ SHOWCASE ============ */
|
||
.shots{display:flex;flex-direction:column;gap:70px}
|
||
.shot{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
|
||
.shot.rev .shot-txt{order:2}
|
||
.shot-frame{
|
||
border-radius:var(--radius-lg);overflow:hidden;position:relative;
|
||
border:1px solid var(--line);
|
||
box-shadow:var(--shadow), 0 0 60px -30px rgba(29,185,84,.5);
|
||
background:var(--panel);
|
||
}
|
||
.shot-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);pointer-events:none}
|
||
.shot-frame .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#0d0d0f;border-bottom:1px solid var(--line-2)}
|
||
.shot-frame .bar i{width:11px;height:11px;border-radius:50%;background:#2a2a2e;display:block}
|
||
.shot-frame .bar i:first-child{background:#3a3a3f}
|
||
.shot-frame img{width:100%;display:block}
|
||
.shot-txt .cap-idx{font-family:var(--font-d);font-weight:700;color:var(--accent-hi);font-size:14px;letter-spacing:.05em}
|
||
.shot-txt h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:12px 0 14px}
|
||
.shot-txt p{color:var(--muted);font-size:15.5px}
|
||
.shot-txt .cap-note{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px}
|
||
|
||
/* ============ TECH ============ */
|
||
.tech{
|
||
background:linear-gradient(180deg,var(--panel),var(--panel-2));
|
||
border:1px solid var(--line);border-radius:var(--radius-lg);
|
||
padding:40px;
|
||
}
|
||
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
|
||
.pill{
|
||
display:inline-flex;align-items:center;gap:9px;
|
||
font-size:14px;font-weight:700;color:var(--text);
|
||
background:rgba(255,255,255,.03);border:1px solid var(--line);
|
||
padding:11px 17px;border-radius:12px;transition:border-color .25s,transform .25s,background .25s;
|
||
}
|
||
.pill:hover{border-color:rgba(30,215,96,.5);transform:translateY(-2px);background:rgba(30,215,96,.07)}
|
||
.pill .d{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
|
||
.tech-note{margin-top:26px;color:var(--faint);font-size:13.5px;max-width:60ch}
|
||
|
||
/* ============ FINAL CTA ============ */
|
||
.cta-band{
|
||
position:relative;overflow:hidden;
|
||
border-radius:var(--radius-lg);
|
||
background:
|
||
radial-gradient(90% 140% at 50% 0%,rgba(29,185,84,.28),transparent 60%),
|
||
linear-gradient(180deg,#14311f,#0d1a12);
|
||
border:1px solid rgba(30,215,96,.3);
|
||
padding:64px 30px;text-align:center;
|
||
box-shadow:0 40px 90px -40px rgba(29,185,84,.6);
|
||
}
|
||
.cta-band .eq{justify-content:center;margin:0 auto 26px;height:34px}
|
||
.cta-band h2{font-size:clamp(1.9rem,4vw,3rem)}
|
||
.cta-band p{color:rgba(255,255,255,.7);margin-top:14px}
|
||
.cta-band .hero-actions{justify-content:center}
|
||
.cta-foot{margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--accent-hi)}
|
||
|
||
/* ============ FOOTER ============ */
|
||
footer{border-top:1px solid var(--line-2);padding:44px 0 56px;margin-top:70px}
|
||
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
|
||
.foot-brand{display:flex;align-items:center;gap:12px}
|
||
.foot-brand img{width:34px;height:34px;border-radius:10px}
|
||
.foot-brand b{font-family:var(--font-d);font-weight:700}
|
||
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
|
||
.foot-links a{font-size:14px;color:var(--muted);font-weight:600;transition:color .2s}
|
||
.foot-links a:hover{color:var(--accent-hi)}
|
||
.foot-note{width:100%;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-2);color:var(--faint);font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
|
||
.foot-note .yerli{display:inline-flex;align-items:center;gap:8px}
|
||
.foot-note .yerli b{color:var(--muted);font-weight:600}
|
||
|
||
/* ============ REVEAL ============ */
|
||
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
|
||
.js .reveal.in{opacity:1;transform:none}
|
||
.js .reveal.d1{transition-delay:.08s}
|
||
.js .reveal.d2{transition-delay:.16s}
|
||
.js .reveal.d3{transition-delay:.24s}
|
||
.js .reveal.d4{transition-delay:.32s}
|
||
|
||
/* ============ RESPONSIVE ============ */
|
||
@media (max-width:1000px){
|
||
.features{grid-template-columns:repeat(2,1fr)}
|
||
.feat,.feat.small{grid-column:span 1}
|
||
.hero-grid{grid-template-columns:1fr;gap:40px}
|
||
.hero-visual{max-width:480px;margin-inline:auto;width:100%}
|
||
.hero-sub{max-width:none}
|
||
}
|
||
@media (max-width:820px){
|
||
.nav-links{display:none}
|
||
.shot,.shot.rev .shot-txt{grid-template-columns:1fr;order:0}
|
||
.shot-frame{order:-1}
|
||
}
|
||
@media (max-width:560px){
|
||
body{font-size:16px}
|
||
.hero{padding:46px 0 60px}
|
||
.features{grid-template-columns:1fr}
|
||
.np-float.f2{left:auto;right:22px;bottom:76px}
|
||
.tech{padding:26px}
|
||
.cta-band{padding:48px 20px}
|
||
.nav-cta .btn-ghost{display:none}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
*{animation:none!important}
|
||
html{scroll-behavior:auto}
|
||
.js .reveal{opacity:1;transform:none;transition:none}
|
||
}
|
||
</style>
|
||
|
||
<div class="field"></div>
|
||
<div class="grain"></div>
|
||
|
||
<!-- ============ NAV ============ -->
|
||
<header class="nav">
|
||
<div class="wrap nav-in">
|
||
<a class="brand" href="#top" aria-label="Just Music Premium">
|
||
<img src="img/logo.png" alt="Just Music Premium logosu">
|
||
<span class="wm"><b>Just Music</b><span>Premium</span></span>
|
||
</a>
|
||
<nav class="nav-links">
|
||
<a href="#ozellikler">Özellikler</a>
|
||
<a href="#ekran-goruntuleri">Ekran Görüntüleri</a>
|
||
<a href="#teknoloji">Teknoloji</a>
|
||
<a href="https://github.com/barkeser2002/just-music-premium">GitHub</a>
|
||
</nav>
|
||
<div class="nav-cta">
|
||
<a class="btn btn-ghost btn-sm" href="https://github.com/barkeser2002/just-music-premium">GitHub</a>
|
||
<a class="btn btn-primary btn-sm" href="https://github.com/barkeser2002/just-music-premium/releases/latest/download/JustMusic-Setup.msi">⬇ .msi İndir</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<!-- ============ HERO ============ -->
|
||
<section class="hero">
|
||
<div class="wrap hero-grid">
|
||
<div class="hero-txt">
|
||
<span class="kicker reveal">Windows için · Açık kaynak · Sunucusuz</span>
|
||
<h1 class="hero-title reveal d1">Spotify hissi,<br><span class="hl">gerçek ses motoru.</span></h1>
|
||
<p class="hero-sub reveal d2">Spotify tarzı arayüz, gerçek DSP ses motoru ve internetten klip akışı — hepsi tek bir yerli uygulamada. Sunucu yok, port yok, abonelik yok.</p>
|
||
<div class="badge-row reveal d2">
|
||
<span class="chip"><span class="dot"></span>10 bant özel EQ</span>
|
||
<span class="chip"><span class="dot"></span>Senkron sözler</span>
|
||
<span class="chip"><span class="dot"></span>Klip akışı</span>
|
||
</div>
|
||
<div class="hero-actions reveal d3">
|
||
<a class="btn btn-primary" href="https://github.com/barkeser2002/just-music-premium/releases/latest/download/JustMusic-Setup.msi">⬇ Windows için indir (.msi)</a>
|
||
<a class="btn btn-ghost" href="https://github.com/barkeser2002/just-music-premium">GitHub'da Gör</a>
|
||
</div>
|
||
<p class="hero-meta reveal d3">Windows 10/11 için · %100 ücretsiz · açık kaynak</p>
|
||
</div>
|
||
|
||
<!-- live "now playing" mock -->
|
||
<div class="hero-visual reveal d2">
|
||
<div class="np">
|
||
<div class="np-float f1"><span class="k">🎛</span> DSP · 8D aktif</div>
|
||
<div class="np-float f2"><span class="k">🎤</span> Sözler senkron</div>
|
||
|
||
<div class="np-top">
|
||
<div class="np-art"><img src="img/logo.png" alt=""></div>
|
||
<div class="np-info">
|
||
<b>Coldplay — Yellow</b>
|
||
<span class="np-tag">● internetten akış · indirme yok</span>
|
||
</div>
|
||
<span class="np-live">Şimdi çalıyor</span>
|
||
</div>
|
||
|
||
<div class="np-label"><i>◆</i> Şarkı DNA'sı</div>
|
||
<div class="wave" aria-hidden="true">
|
||
<span class="on" style="height:34%"></span><span class="on" style="height:58%"></span>
|
||
<span class="on" style="height:42%"></span><span class="on" style="height:76%"></span>
|
||
<span class="on" style="height:50%"></span><span class="on" style="height:88%"></span>
|
||
<span class="on" style="height:64%"></span><span class="on" style="height:46%"></span>
|
||
<span class="on" style="height:72%"></span><span class="on" style="height:38%"></span>
|
||
<span class="on" style="height:60%"></span><span class="on" style="height:90%"></span>
|
||
<span style="height:54%"></span><span style="height:36%"></span>
|
||
<span style="height:66%"></span><span style="height:48%"></span>
|
||
<span style="height:80%"></span><span style="height:40%"></span>
|
||
<span style="height:58%"></span><span style="height:70%"></span>
|
||
<span style="height:44%"></span><span style="height:62%"></span>
|
||
<span style="height:34%"></span><span style="height:78%"></span>
|
||
<span style="height:52%"></span><span style="height:42%"></span>
|
||
<span style="height:68%"></span><span style="height:50%"></span>
|
||
<span style="height:82%"></span><span style="height:38%"></span>
|
||
<span style="height:60%"></span><span style="height:46%"></span>
|
||
</div>
|
||
|
||
<div class="np-label"><i>◆</i> DSP motoru</div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:18px">
|
||
<div class="eq" aria-hidden="true">
|
||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||
</div>
|
||
<div class="np-lyric">
|
||
<div class="now">Yeah, they were all yellow</div>
|
||
<div class="next">I came along…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="np-controls">
|
||
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 6h2v12H6zM20 6 9 12l11 6z"/></svg>
|
||
<span class="np-play"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
|
||
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M16 6h2v12h-2zM4 6l11 6L4 18z"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FEATURES ============ -->
|
||
<section id="ozellikler" class="sec">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="kicker">Özellikler</span>
|
||
<h2>Bir müzik çaların yapabileceği her şey — <span class="hl">ve fazlası.</span></h2>
|
||
<p>Ses tarayıcıda değil, tamamen yerli bir DSP motorunda işlenir. Her şey uygulamanın içinde çalışır.</p>
|
||
</div>
|
||
|
||
<div class="features">
|
||
<!-- highlight card -->
|
||
<article class="feat reveal">
|
||
<span class="num">01</span>
|
||
<div class="ico">🎛</div>
|
||
<h3>Gerçek DSP ses motoru</h3>
|
||
<p>30 hazır EQ preset, 10 bant özel EQ ve efektler — Bass, Echo, Reverb, 8D — hepsi çalarken anında uygulanır.</p>
|
||
<div class="tags"><span>numpy</span><span>scipy</span><span>sounddevice</span></div>
|
||
<div class="feat-eq" aria-hidden="true">
|
||
<span></span><span></span><span></span><span></span><span></span>
|
||
<span></span><span></span><span></span><span></span><span></span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feat small reveal d1">
|
||
<span class="num">02</span>
|
||
<div class="ico">🎬</div>
|
||
<h3>Klip modu</h3>
|
||
<p>Çalan parçanın klibini internetten oynatır — akış, indirme yok. Ekranı kaplamaz, ana alana gömülür.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d2">
|
||
<span class="num">03</span>
|
||
<div class="ico">🪟</div>
|
||
<h3>Kalıcı mini oynatıcı</h3>
|
||
<p>Sekme değiştirince klip köşeye iner ve çalmaya devam eder; akış bir an bile kesilmez.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal">
|
||
<span class="num">04</span>
|
||
<div class="ico">🎤</div>
|
||
<h3>Senkron şarkı sözleri</h3>
|
||
<p>Zaman kodlu (LRC) sözler çalarken satır satır vurgulanır, klibin üstünde de akar.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d1">
|
||
<span class="num">05</span>
|
||
<div class="ico">🎙</div>
|
||
<h3>Stüdyo karaoke — htdemucs</h3>
|
||
<p>Demucs ile vokal ve enstrümanlar <em>gerçekten</em> ayrılır (yalnızca CPU): enstrümantal karaoke ya da akapella. Ayrılan stem'ler önbelleğe alınır, sonrası anında.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d2">
|
||
<span class="num">06</span>
|
||
<div class="ico">⬇</div>
|
||
<h3>Gömülü yt-dlp + ffmpeg</h3>
|
||
<p>Ayrı kurulum gerekmez; ara, kapaklarıyla gör — <strong>satıra tıkla anında insin</strong>, ya da seçip toplu indir. <strong>Playlist URL'si yapıştır → önizle, seç, X/Y sayaçlı toplu indir.</strong></p>
|
||
</article>
|
||
|
||
<article class="feat small reveal">
|
||
<span class="num">07</span>
|
||
<div class="ico">🔌</div>
|
||
<h3>Sunucu/port YOK</h3>
|
||
<p>Her şey in-process çalışır. QtWebEngine yalnızca görsel içindir; ses tamamen yerlidir.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d1">
|
||
<span class="num">08</span>
|
||
<div class="ico">🔄</div>
|
||
<h3>Otomatik güncelleme</h3>
|
||
<p>Yeni sürüm çıkınca arka planda indirir, kapanışta kurup uygulamayı yeniden başlatır.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d2">
|
||
<span class="num">09</span>
|
||
<div class="ico">🫧</div>
|
||
<h3>Modern kabuk + merkez hero</h3>
|
||
<p>Daraltılabilir ikon kenar çubuğu, buzlu cam, kapak renginden tema, <strong>merkez "Şimdi Çalıyor" hero</strong> (Apple Music tarzı büyük kapak + canlı söz), kelime kelime söz adası ve tam ekran theater.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal">
|
||
<span class="num">10</span>
|
||
<div class="ico">🎚</div>
|
||
<h3>Crossfade + gapless</h3>
|
||
<p>Parçalar arası eş-güçlü eritme (0–12 sn) ya da sınırda boşluksuz geçiş. Sıradaki parça önden çözülür; albüm ve DJ setlerinde tek saniye boşluk kalmaz.</p>
|
||
</article>
|
||
|
||
<article class="feat small reveal d1">
|
||
<span class="num">11</span>
|
||
<div class="ico">🎮</div>
|
||
<h3>Discord Rich Presence</h3>
|
||
<p>Çalan parça ve oynat/duraklat durumu Discord profilinde görünür (opsiyonel — kendi Discord Application ID'nle).</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ SHOWCASE ============ -->
|
||
<section id="ekran-goruntuleri" class="sec">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="kicker">Ekran Görüntüleri</span>
|
||
<h2>Çalışırken gör.</h2>
|
||
<p>Tanıdık, sade bir arayüz — arkasında ise ciddi bir ses ve klip altyapısı.</p>
|
||
</div>
|
||
|
||
<div class="shots">
|
||
<div class="shot reveal">
|
||
<div class="shot-txt">
|
||
<span class="cap-idx">01 — Klip modu</span>
|
||
<h3>Sözler, klibin üstünde senkron akar.</h3>
|
||
<p>Çalan parçanın resmî klibi ana alana gömülür; zaman kodlu sözler satır satır vurgulanarak videonun üzerinde ilerler. Sağda Şarkı DNA'sı, BPM ve spektrogram.</p>
|
||
<span class="cap-note">Klip modu — sözler klibin üstünde senkron akar.</span>
|
||
</div>
|
||
<figure class="shot-frame">
|
||
<div class="bar" aria-hidden="true"><i></i><i></i><i></i></div>
|
||
<img src="img/clip-mode.png" alt="Just Music Premium klip modu — Coldplay Yellow klibi oynarken sözler videonun üstünde senkron akıyor, sağ panelde Şarkı DNA'sı ve spektrogram">
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="shot rev reveal">
|
||
<div class="shot-txt">
|
||
<span class="cap-idx">02 — Mini oynatıcı</span>
|
||
<h3>Gezinsen de klip çalmaya devam eder.</h3>
|
||
<p>Ana sayfaya ya da başka bir listeye geçtiğinde klip küçülüp köşeye yerleşir. Çalma listelerin, kütüphanen ve akıllı listelerin bir tık uzağında; müzik hiç durmaz.</p>
|
||
<span class="cap-note">Kalıcı mini oynatıcı — gezinsen de klip çalmaya devam eder.</span>
|
||
</div>
|
||
<figure class="shot-frame">
|
||
<div class="bar" aria-hidden="true"><i></i><i></i><i></i></div>
|
||
<img src="img/mini-player.png" alt="Just Music Premium ana sayfası — çalma listesi kartları görünürken kalıcı mini video oynatıcı köşede çalmaya devam ediyor">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ TECH ============ -->
|
||
<section id="teknoloji" class="sec">
|
||
<div class="wrap">
|
||
<div class="sec-head reveal">
|
||
<span class="kicker">Teknoloji</span>
|
||
<h2>Neyle inşa edildi.</h2>
|
||
<p>Denenmiş, açık kaynak araçlardan oluşan sağlam bir yığın — tek bir .msi paketinde.</p>
|
||
</div>
|
||
<div class="tech reveal d1">
|
||
<div class="pills">
|
||
<span class="pill"><span class="d"></span>PyQt6</span>
|
||
<span class="pill"><span class="d"></span>QtWebEngine</span>
|
||
<span class="pill"><span class="d"></span>NumPy</span>
|
||
<span class="pill"><span class="d"></span>SciPy</span>
|
||
<span class="pill"><span class="d"></span>sounddevice</span>
|
||
<span class="pill"><span class="d"></span>Demucs (htdemucs)</span>
|
||
<span class="pill"><span class="d"></span>PyTorch (CPU)</span>
|
||
<span class="pill"><span class="d"></span>yt-dlp</span>
|
||
<span class="pill"><span class="d"></span>FFmpeg</span>
|
||
<span class="pill"><span class="d"></span>Deno</span>
|
||
<span class="pill"><span class="d"></span>Font Awesome</span>
|
||
<span class="pill"><span class="d"></span>PyInstaller</span>
|
||
</div>
|
||
<p class="tech-note">Arayüz PyQt6 + QtWebEngine ile çizilir, ses işleme NumPy/SciPy ve sounddevice üzerinde yerli olarak yürütülür. Klip ve indirme akışı gömülü yt-dlp + FFmpeg ile sağlanır — dışarıda bir sunucu ya da açık port olmadan.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FINAL CTA ============ -->
|
||
<section class="sec">
|
||
<div class="wrap">
|
||
<div class="cta-band reveal">
|
||
<div class="eq" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
|
||
<h2>Hemen dinlemeye başla.</h2>
|
||
<p>İndir, çalıştır, çal. Kurulum bir dakika, deneyim kalıcı.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary" href="https://github.com/barkeser2002/just-music-premium/releases/latest/download/JustMusic-Setup.msi">⬇ Windows için indir (.msi)</a>
|
||
<a class="btn btn-ghost" href="https://github.com/barkeser2002/just-music-premium">GitHub'da Gör</a>
|
||
</div>
|
||
<p class="cta-foot">Windows 10/11 · ücretsiz · açık kaynak</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer>
|
||
<div class="wrap">
|
||
<div class="foot-in">
|
||
<div class="foot-brand">
|
||
<img src="img/logo.png" alt="Just Music Premium logosu">
|
||
<div>
|
||
<b>Just Music Premium</b><br>
|
||
<span class="muted" style="font-size:13px">barkeser2002 tarafından yapıldı</span>
|
||
</div>
|
||
</div>
|
||
<div class="foot-links">
|
||
<a href="#ozellikler">Özellikler</a>
|
||
<a href="#ekran-goruntuleri">Ekran Görüntüleri</a>
|
||
<a href="#teknoloji">Teknoloji</a>
|
||
<a href="https://github.com/barkeser2002/just-music-premium">GitHub</a>
|
||
<a href="https://github.com/barkeser2002/just-music-premium/releases/latest/download/JustMusic-Setup.msi">.msi İndir</a>
|
||
</div>
|
||
</div>
|
||
<div class="foot-note">
|
||
<span class="yerli">🔊 <b>Ses tarayıcıda değil, yerli DSP motorunda çalınır.</b></span>
|
||
<span>© 2026 Just Music Premium · Windows 10/11 · Açık kaynak</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Scroll reveal — page is fully visible if this never runs (see .js gating in CSS)
|
||
(function(){
|
||
var els = document.querySelectorAll('.reveal');
|
||
if(!('IntersectionObserver' in window)){
|
||
els.forEach(function(el){el.classList.add('in')});
|
||
return;
|
||
}
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){
|
||
if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
|
||
});
|
||
},{threshold:.14, rootMargin:'0px 0px -8% 0px'});
|
||
els.forEach(function(el){io.observe(el)});
|
||
})();
|
||
</script>
|