<!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>
index.html
style.css
index.js