模板1edit icon

Fork(复制)
下载
嵌入
设置
BUG反馈
index.html
style.css
index.js
现在支持上传本地图片了!
            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern File Explorer & Music Player</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <aside class="sidebar">
            <div class="logo">
                <i class="fas fa-music"></i>
                <h1>MediaHub</h1>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="active"><i class="fas fa-folder"></i> <span>文件浏览器</span></li>
                    <li><i class="fas fa-music"></i> <span>音乐库</span></li>
                    <li><i class="fas fa-play"></i> <span>播放队列</span></li>
                </ul>
            </nav>
        </aside>
      
        <main class="main-content">
            <section class="file-explorer">
                <div class="section-header">
                    <h2>文件浏览</h2>
                    <div class="search-container">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索文件...">
                    </div>
                </div>
                
                <div class="path-bar">
                    <button class="path-item active">C:</button>
                    <button class="path-item">Music</button>
                    <button class="path-item">Playlists</button>
                </div>
                
                <div class="file-list">
                    <div class="file-item folder">
                        <i class="fas fa-folder"></i>
                        <span>DJ音乐</span>
                    </div>
                    <div class="file-item folder">
                        <i class="fas fa-folder"></i>
                        <span>江枫DJ音乐</span>
                    </div>
                    <div class="file-item music">
                        <i class="fas fa-music"></i>
                        <div class="file-info">
                            <div class="file-name">Summer Breeze.mp3</div>
                            <div class="file-meta">4.2MB • 3:45</div>
                        </div>
                        <div class="file-actions">
                            <button class="play-btn"><i class="fas fa-play"></i></button>
                        </div>
                    </div>
                    <div class="file-item music">
                        <i class="fas fa-music"></i>
                        <div class="file-info">
                            <div class="file-name">Autumn Leaves.mp3</div>
                            <div class="file-meta">5.1MB • 4:12</div>
                        </div>
                        <div class="file-actions">
                            <button class="play-btn"><i class="fas fa-play"></i></button>
                        </div>
                    </div>
                </div>
            </section>
          
            <section class="music-player">
                <div class="now-playing">
                    <div class="album-cover">
                        <img src="https://source.unsplash.com/random/300x300/?album" alt="Album Cover">
                    </div>
                    <div class="song-info">
                        <h3 class="song-title">Summer Breeze</h3>
                        <p class="song-artist">Ocean Waves</p>
                        <div class="song-duration">3:45 / 3:45</div>
                    </div>
                </div>
                
                <div class="player-controls">
                    <div class="control-buttons">
                        <button class="control-btn"><i class="fas fa-random"></i></button>
                        <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                        <button class="control-btn play-pause-btn"><i class="fas fa-pause"></i></button>
                        <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                        <button class="control-btn"><i class="fas fa-redo"></i></button>
                    </div>
                    
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress"></div>
                        </div>
                    </div>
                </div>
                
                <div class="lyrics-container">
                    <div class="lyrics-content">
                        <p class="lyric-line active">阳光洒在海面上</p>
                        <p class="lyric-line">微风轻抚我的脸</p>
                        <p class="lyric-line">这美好时光如梦似幻</p>
                        <p class="lyric-line">让人心旷神怡</p>
                        <p class="lyric-line">海浪轻轻拍打着岸边</p>
                        <p class="lyric-line">夏日微风带来凉爽</p>
                        <p class="lyric-line">此刻只想静静享受</p>
                        <p class="lyric-line">这难得的宁静</p>
                    </div>
                </div>
                
                <div class="volume-control">
                    <i class="fas fa-volume-up"></i>
                    <div class="volume-slider">
                        <div class="slider-track"></div>
                        <div class="slider-thumb"></div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="index.js"></script>
</body>
</html>
        
预览
控制台