1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 8 <link rel="stylesheet" href="style.css"> 9 <title>Spotify Clone</title> 10</head> 11 12<body> 13 <div class="wrapper d-flex flex-column-reverse flex-md-row"> 14 <div class="sideNav d-flex flex-row flex-md-column"> 15 <div class="sideNav__nav sideNav__top d-flex flex-row flex-md-column"> 16 <!-- logo --> 17 18 <a href="#" class="sideNav__logo d-none d-md-block"><img src="./imgs/Spotify_Logo_RGB_White.png" 19 alt="spotify_logo"></a> 20 21 <!-- sidebar links --> 22 <div class=" sideNav__nav-links d-flex flex-row flex-md-column text-left"> 23 <a href="index.html"> <svg class="mr-2" viewBox="0 0 512 512" width="24" height="24" 24 xmlns="http://www.w3.org/2000/svg"> 25 <path 26 d="M 256.274 60.84 L 84.324 166.237 L 84.324 443.063 L 193.27 443.063 L 193.27 293.73 L 320.228 293.73 L 320.228 443.063 L 428.222 443.063 L 428.222 165.476 L 256.274 60.84 Z M 256.274 35.95 L 448.452 149.145 L 448.452 464.395 L 300 464.395 L 300 315.062 L 213.499 315.062 L 213.499 464.395 L 64.095 464.395 L 64.095 150.161 L 256.274 35.95 Z" 27 fill="currentColor"></path> 28 </svg> <span>Home</span></a> 29 <a href="#searchModal" data-toggle="modal" data-target="#searchModal"><svg class="mr-2"
30 viewBox="0 0 512 512" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 31 <path 32 d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285-80.254-21.46-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286 80.254 21.461z" 33 fill="currentColor" fill-rule="evenodd"></path> 34 </svg><span>Search</span></a> 35 <a href="artists.html"><svg class="mr-2" viewBox="0 0 512 512" width="24" height="24" 36 xmlns="http://www.w3.org/2000/svg"> 37 <path class="mr-2" 38 d="M291.301 81.778l166.349 373.587-19.301 8.635-166.349-373.587zM64 463.746v-384h21.334v384h-21.334zM192 463.746v-384h21.334v384h-21.334z" 39 fill="currentColor"></path> 40 </svg><span> Your Artists</span></a> 41 <a href="categories.html"><svg class="mr-2" viewBox="0 0 512 512" width="24" height="24" 42 xmlns="http://www.w3.org/2000/svg"> 43 <path class="mr-2" 44 d="M291.301 81.778l166.349 373.587-19.301 8.635-166.349-373.587zM64 463.746v-384h21.334v384h-21.334zM192 463.746v-384h21.334v384h-21.334z" 45 fill="currentColor"></path> 46 </svg><span>Browse</span></a> 47 48 </div> 49 <!-- sidebar playlist --> 50 51 <div class=" sideNav__nav-links sideNav__playlist d-none d-md-flex flex-row flex-md-column text-left mt-5"> 52 <h6 class="ml-3">PLAYLIST</h6> 53 <a class="sideNav__nav-addPlay" data-toggle="modal" data-target="#createPlaylistModal"><i 54 class="fas fa-plus "></i><span>Create Playlist</span></a> 55 <a href="#"><span class="sideNav__nav-play-thumb"><i class="fas fa-music"></i></span><span> My 56 Playlist</span></a> 57 58 </div> 59 </div> 60 61 <!-- sidebar install app --> 62 <div class="sideNav__footer sideNav__nav-links text-left d-none d-md-block"> 63 <a href="#"> <svg role="img" height="24" width="24" viewBox="0 0 24 24" class="mr-2"> 64 <path 65 d="M11.5 0C5.149 0 0 5.148 0 11.5 0 17.851 5.149 23 11.5 23S23 17.851 23 11.5C23 5.148 17.851 0 11.5 0zm0 22C5.71 22 1 17.29 1 11.5S5.71 1 11.5 1 22 5.71 22 11.5 17.29 22 11.5 22zm.499-6.842V5h-1v10.149l-3.418-3.975-.758.652 4.678 5.44 4.694-5.439-.757-.653-3.439 3.984z" 66 fill="currentColor"> 67 </path> 68 </svg> Install App</a> 69 <a href="#" class="sideNav__user d-flex justify-content-between"> 70 <div class="d-flex"> 71 <div class="sideNav__user-avatar"><img id="img-avatar" src="" class="img-fluid" alt=""></div> 72 <span id="usernameSpan"></span> 73 </div><span id="logout"><i class="fas fa-sign-out-alt"></i></span> 74 </a> 75 </div> 76 </div> 77 78 79 80 81 82 <main class="container-fluid"> 83 <div class="navArrows"><a href="#"><i class="fas fa-chevron-left" onclick="previous()"></i></a><a 84 href="#"><i class="fas fa-chevron-right" onclick="forward()"></i></a></div> 85 <section class="playlist"> 86 <div class="row"> 87 88 <div class="col-12"> 89 <div class="playlist__jumbotron jumbotron jumbotron-fluid"> 90 <div class="jumbo__overlay"></div> 91 92 <div class="container"> 93 <div class="row"> 94 95 <div class="col-12 text-center jumbo-content"> 96 <h2 class='text-white'>Favorte Artists</h2> 97 <h1 class="display-4 playlistTitle"></h1> 98 <div class="d-flex flex-column buttons-links-wrapper"> 99 <div 100 class="d-flex justify-content-center buttons-wrapper align-items-center"> 101 <button type="button" class="btn-login btn-green ">Play</button> 102 <button type="button" 103 class="btn-login btn-dark-trasparent">Follow</button> 104 <i class="fa fa-ellipsis-h" aria-hidden="true"></i> 105 </div> 106 </div> 107 108 </div> 109 110 111 112 </div> 113 114 </div> 115 </div> 116 </div> 117 118 </div> 119 120 <div class="navBar col-12 d-flex justify-content-center jumbo-links"> 121 <a href="#" class="navBar__link active">Overview</a> 122 <a href="#" class="navBar__link">Related Artists</a> 123 <a href="#" class="navBar__link">About</a> 124 </div> 125 </section> 126 127 <section class="container-fluid my-auto "> 128 <h3 class="text-left my-3" style="font-weight: bold">Favorite Artists</h3> 129 130 <div class="row artists__container"> 131 </div> 132 133 </section> 134 <!-- Create Playlist Modal --> 135 <div class="modal fade" id="createPlaylistModal" tabindex="-1" role="dialog" 136 aria-labelledby="createPlaylistModalLabel" aria-hidden="true"> 137 <div class="modal-dialog" role="document"> 138 <div class="modal-content"> 139 <div class="modal-header text-center"> 140 <h5 class="modal-title" id="createPlaylistModalLabel">Create Playlist</h5> 141 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
142 <span aria-hidden="true"><i class="far fa-times-circle text-white"></i></span> 143 </button> 144 </div> 145 <div class="modal-body"> 146 <div class="input-group mb-3"> 147 <input id="playlistName" type="text" class="form-control" placeholder="Playlist Name" 148 value="" aria-label="Playlist Name" aria-describedby="playslist-name"> 149 150 </div> 151 </div> 152 <div class="modal-footer"> 153 154 <button type="button" id="createPlaylistBtn" class="btn-login btn-green btn-modals" 155 data-dismiss="modal">Create 156 Playlist</button> 157 </div> 158 </div> 159 </div> 160 </div> 161 162 <!-- Search Modal --> 163 <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" 164 aria-hidden="true"> 165 <div class="modal-dialog" role="document"> 166 <div class="modal-content"> 167 <div class="modal-header text-center"> 168 <h5 class="modal-title" id="searchModalLabel">Search</h5> 169 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 170 <span aria-hidden="true"><i class="far fa-times-circle text-white"></i></span> 171 </button> 172 </div> 173 <div class="modal-body"> 174 <div class="input-group mb-3"> 175 <input id="searchValue" type="text" class="form-control" placeholder="Search Artist" 176 value="" aria-label="Playlist Name" aria-describedby="playslist-name"> 177 178 </div> 179 </div> 180 <div class="modal-footer"> 181 182 <button type="button" id="searchBtn" class="btn-login btn-green btn-modals" 183 data-dismiss="modal">search</button> 184 </div> 185 </div> 186 </div> 187 </div> 188 189 </main> 190 191 </div> 192 <section class="player"> 193 <iframe src="https://open.spotify.com/embed/track/0VjIjW4GlUZAMYd2vXMi3b" id="music-player" frameborder="0" 194 allowtransparency="true" allow="encrypted-media" autoplay="1"></iframe> 195 </section> 196 197 198
198<script src="./js/index.js"></script>
198 199 <!-- jQuery library --> 200
200<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
200 201 202 <!-- Popper JS --> 203
203<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
203 204 205 <!-- Latest compiled JavaScript --> 206
206<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
206 207
207<script src="https://kit.fontawesome.com/84a612360c.js" crossorigin="anonymous"></script>
207 208 209</body> 210 211</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.