spotify-clone/index.html at master · SupShadow/spotify-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify Clone</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
                    <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
                </svg>
                <span>Spotify Clone</span>
            </div>

            <nav class="nav-menu">
                <a href="#" class="nav-item active">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                        <path d="M12.5 3.247a1 1 0 0 0-1 0L4 7.577V20h4.5v-6a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v6H20V7.577l-7.5-4.33z"/>
                    </svg>
                    Home
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                        <path d="M10.533 1.279c-5.18 0-9.407 4.14-9.407 9.279s4.226 9.279 9.407 9.279c2.234 0 4.29-.77 5.907-2.058l4.353 4.353a1 1 0 1 0 1.414-1.414l-4.344-4.344a9.157 9.157 0 0 0 2.077-5.816c0-5.14-4.226-9.28-9.407-9.28zm-7.407 9.279c0-4.006 3.302-7.28 7.407-7.28s7.407 3.274 7.407 7.28-3.302 7.279-7.407 7.279-7.407-3.273-7.407-7.28z"/>
                    </svg>
                    Suchen
                </a>
            </nav>

            <div class="playlist-section">
                <h3>Meine Playlist</h3>
                <div class="playlist" id="playlist">
                    <!-- Songs werden via JS eingefügt -->
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="content-header">
                <h1>Willkommen</h1>
                <p>Wähle einen Song aus der Playlist</p>
            </div>

            <div class="now-playing-large" id="nowPlayingLarge">
                <div class="cover-large">
                    <img src="" alt="Cover" id="coverLarge">
                </div>
                <div class="track-info-large">
                    <h2 id="titleLarge">Kein Song ausgewählt</h2>
                    <p id="artistLarge">-</p>
                </div>
            </div>
        </main>

        <!-- Player Bar -->
        <footer class="player-bar">
            <div class="now-playing">
                <img src="" alt="Cover" id="currentCover" class="current-cover">
                <div class="track-info">
                    <span class="track-title" id="currentTitle">-</span>
                    <span class="track-artist" id="currentArtist">-</span>
                </div>
            </div>

            <div class="player-controls">
                <div class="control-buttons">
                    <button class="control-btn" id="shuffleBtn">
                        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                            <path d="M13.151 15.814l.98-.98c.302-.302.692-.519 1.12-.624l3.003-.735c.27-.066.415-.35.308-.603l-.668-1.566a1.756 1.756 0 0 0-.497-.636l-2.466-2.078a1.76 1.76 0 0 0-.635-.358l-3.122-.954a.432.432 0 0 0-.508.21l-.79 1.478a1.753 1.753 0 0 0-.172.831l.134 3.282c.021.507.23.987.587 1.345l1.397 1.397a1.756 1.756 0 0 0 1.33.492z"/>
                        </svg>
                    </button>
                    <button class="control-btn" id="prevBtn">
                        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                            <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                        </svg>
                    </button>
                    <button class="control-btn play-btn" id="playBtn">
                        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" id="playIcon">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </button>
                    <button class="control-btn" id="nextBtn">
                        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                            <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                        </svg>
                    </button>
                    <button class="control-btn" id="repeatBtn">
                        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                            <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
                        </svg>
                    </button>
                </div>

                <div class="progress-container">
                    <span class="time" id="currentTime">0:00</span>
                    <div class="progress-bar" id="progressBar">
                        <div class="progress" id="progress"></div>
                    </div>
                    <span class="time" id="duration">0:00</span>
                </div>
            </div>

            <div class="volume-controls">
                <button class="control-btn" id="volumeBtn">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" id="volumeIcon">
                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                    </svg>
                </button>
                <div class="volume-bar" id="volumeBar">
                    <div class="volume-level" id="volumeLevel"></div>
                </div>
            </div>
        </footer>
    </div>

    <audio id="audio"></audio>
    <script src="js/app.js"></script>
</body>
</html>