mirror of
https://github.com/barkeser2002/just-music-premium.git
synced 2026-09-25 08:40:06 +03:00
Barış Keser
db8a83823b
- Web arayüzü (HTML/CSS/JS) + yerli DSP ses motoru (numpy/scipy/sounddevice) - QWebChannel köprüsü, sunucu/port yok, app:// özel şeması - 30 EQ preset + efekt paneli, karaoke, ruh hali motoru, FFT görselleştirici - yt-dlp Python kütüphanesi + gömülü ffmpeg/deno; Lyrica ile senkron sözler - Klip modu: internetten akış (indirme yok), gömülü görünüm + kalıcı mini oynatıcı
111 lines
5.8 KiB
HTML
111 lines
5.8 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>
|
||
</head>
|
||
<body>
|
||
<div id="ambient" class="ambient"></div>
|
||
<div id="app">
|
||
|
||
<!-- ÜST BAR -->
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<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="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> Tara</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>Ana Sayfa</span></button>
|
||
<button class="nav-link" data-view="search"><i class="fa-solid fa-magnifying-glass"></i> <span>Ara</span></button>
|
||
<button class="nav-link" data-view="effects"><i class="fa-solid fa-sliders"></i> <span>Efektler</span></button>
|
||
</nav>
|
||
<div class="library">
|
||
<div class="library-head">
|
||
<span class="lib-title">📚 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> Ekle</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="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>
|