mirror of
https://github.com/barkeser2002/just-music-premium.git
synced 2026-09-25 06:39:55 +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)
115 lines
6.4 KiB
HTML
115 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Just Music</title>
|
||
<link rel="stylesheet" href="fontawesome/css/all.min.css">
|
||
<link rel="stylesheet" href="app.css">
|
||
<script src="qwebchannel.js"></script>
|
||
<script src="i18n.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="ambient" class="ambient"></div>
|
||
<div id="app">
|
||
|
||
<!-- ÜST BAR -->
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<button id="sidebarToggle" class="round-btn" title="Kenar çubuğunu daralt/genişlet"><i class="fa-solid fa-bars"></i></button>
|
||
<button id="navBack" class="round-btn" title="Geri"><i class="fa-solid fa-chevron-left"></i></button>
|
||
<button id="navFwd" class="round-btn" title="İleri"><i class="fa-solid fa-chevron-right"></i></button>
|
||
</div>
|
||
<div class="search-wrap">
|
||
<button id="homeBtn" class="home-btn" title="Ana Sayfa"><i class="fa-solid fa-house"></i></button>
|
||
<div class="search-box">
|
||
<span class="search-ic"><i class="fa-solid fa-magnifying-glass"></i></span>
|
||
<input id="topSearch" type="text" placeholder="Ne çalmak istiyorsun?" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<select id="langSel" class="mini-sel" title="Dil / Language"></select>
|
||
<select id="themeSel" class="mini-sel" title="Tema"></select>
|
||
<label class="accent-wrap" title="Özel vurgu rengi"><input type="color" id="accentPick" value="#1db954"></label>
|
||
<button id="scanBtn" class="chip-btn" title="Müzik klasörünü tara"><i class="fa-solid fa-rotate"></i> <span data-i18n="Tara">Tara</span></button>
|
||
<button id="statsBtn" class="chip-btn" title="İstatistikler"><i class="fa-solid fa-chart-simple"></i></button>
|
||
<button id="compactBtn" class="chip-btn" title="Kompakt mod (panelleri gizle)"><i class="fa-solid fa-compress"></i></button>
|
||
<button id="helpBtn" class="chip-btn" title="Klavye kısayolları (Ctrl+K komut paleti)"><i class="fa-solid fa-keyboard"></i></button>
|
||
<button id="backupBtn" class="chip-btn" title="Yedek al"><i class="fa-solid fa-floppy-disk"></i></button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- GÖVDE -->
|
||
<div class="body">
|
||
<aside class="sidebar">
|
||
<nav class="nav-links">
|
||
<button class="nav-link active" data-view="home"><i class="fa-solid fa-house"></i> <span data-i18n="Ana Sayfa">Ana Sayfa</span></button>
|
||
<button class="nav-link" data-view="search"><i class="fa-solid fa-magnifying-glass"></i> <span data-i18n="Ara">Ara</span></button>
|
||
<button class="nav-link" data-view="effects"><i class="fa-solid fa-sliders"></i> <span data-i18n="Efektler">Efektler</span></button>
|
||
</nav>
|
||
<div class="library">
|
||
<div class="library-head">
|
||
<span class="lib-title" data-i18n="📚 Kitaplığın">📚 Kitaplığın</span>
|
||
<div class="lib-actions">
|
||
<button id="importBtn" class="plus-btn" title="MP3 içe aktar"><i class="fa-solid fa-plus"></i> <span data-i18n="Ekle">Ekle</span></button>
|
||
<button id="createPlaylist" class="plus-btn" title="Çalma listesi oluştur"><i class="fa-solid fa-plus"></i></button>
|
||
</div>
|
||
</div>
|
||
<input id="libSearch" class="lib-search" type="text" placeholder="🔍 Kütüphanede ara">
|
||
<div id="playlistList" class="playlist-list"></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main" id="view"></main>
|
||
|
||
<aside class="right-panel" id="rightPanel"></aside>
|
||
</div>
|
||
|
||
<!-- ALT PLAYER -->
|
||
<footer class="player">
|
||
<div class="p-left">
|
||
<img id="pCover" class="p-cover" alt="">
|
||
<div class="p-meta">
|
||
<div id="pTitle" class="p-title">Müzik Çalar Hazır</div>
|
||
<div class="p-sub-row"><span id="pArtist" class="p-artist"></span><span id="moodChip" class="mood-chip"></span></div>
|
||
</div>
|
||
<button id="pFav" class="icon-btn fav" title="Beğen"><i class="fa-regular fa-heart"></i></button>
|
||
<canvas id="playerViz" class="player-viz" title="Görselleştirici"></canvas>
|
||
</div>
|
||
<div class="p-center">
|
||
<div class="p-controls">
|
||
<button id="pShuffle" class="icon-btn" title="Karıştır"><i class="fa-solid fa-shuffle"></i></button>
|
||
<button id="pPrev" class="icon-btn" title="Önceki"><i class="fa-solid fa-backward-step"></i></button>
|
||
<button id="pPlay" class="play-btn" title="Oynat/Duraklat"><i class="fa-solid fa-play"></i></button>
|
||
<button id="pNext" class="icon-btn" title="Sonraki"><i class="fa-solid fa-forward-step"></i></button>
|
||
<button id="pRepeat" class="icon-btn" title="Tekrarla"><i class="fa-solid fa-repeat"></i></button>
|
||
</div>
|
||
<div class="p-seek">
|
||
<span id="pCur" class="time">0:00</span>
|
||
<div class="bar" id="seekBar"><div class="bar-fill" id="seekFill"></div><div class="bar-knob" id="seekKnob"></div></div>
|
||
<span id="pDur" class="time">0:00</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-right">
|
||
<button id="pVideo" class="icon-btn" title="Klip izle (internetten akış — indirme yok)"><i class="fa-solid fa-film"></i></button>
|
||
<button id="pKaraoke" class="icon-btn" title="Karaoke — vokal azalt"><i class="fa-solid fa-microphone-slash"></i></button>
|
||
<button id="pAmbient" class="icon-btn" title="Ambiyans ışığı"><i class="fa-solid fa-lightbulb"></i></button>
|
||
<button id="pQueueBtn" class="icon-btn" title="Kuyruk (Sıradaki)"><i class="fa-solid fa-list-ol"></i></button>
|
||
<button id="pLyricsBtn" class="icon-btn" title="Şarkı Sözleri"><i class="fa-solid fa-align-left"></i></button>
|
||
<button id="pHeroBtn" class="icon-btn" title="Şimdi çalıyor (merkez)"><i class="fa-solid fa-record-vinyl"></i></button>
|
||
<button id="pFsBtn" class="icon-btn" title="Tam ekran"><i class="fa-solid fa-expand"></i></button>
|
||
<button id="pPanelBtn" class="icon-btn active" title="Çalınıyor paneli"><i class="fa-solid fa-table-columns"></i></button>
|
||
<select id="speedSel" class="mini-sel" title="Hız"></select>
|
||
<select id="sleepSel" class="mini-sel" title="Uyku zamanlayıcı"></select>
|
||
<button id="pMute" class="icon-btn" title="Sessize al"><i class="fa-solid fa-volume-high"></i></button>
|
||
<div class="vol" id="volBar" title="Ses (100+ = boost)"><div class="vol-fill" id="volFill"></div></div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|