diff --git a/assets/*shels.jpg b/assets/*shels.jpg new file mode 100644 index 00000000..8ebda455 Binary files /dev/null and b/assets/*shels.jpg differ diff --git a/assets/65daysofstatic_onetimeforalltime.jpg b/assets/65daysofstatic_onetimeforalltime.jpg new file mode 100644 index 00000000..e4b07dba Binary files /dev/null and b/assets/65daysofstatic_onetimeforalltime.jpg differ diff --git a/assets/alcest_souvenirsdunautremonde.jpg b/assets/alcest_souvenirsdunautremonde.jpg new file mode 100644 index 00000000..69196ba0 Binary files /dev/null and b/assets/alcest_souvenirsdunautremonde.jpg differ diff --git a/assets/bamba.jpg b/assets/bamba.jpg new file mode 100644 index 00000000..25944e37 Binary files /dev/null and b/assets/bamba.jpg differ diff --git a/assets/caspian_duskanddisquiet.jpg b/assets/caspian_duskanddisquiet.jpg new file mode 100644 index 00000000..81fa22f8 Binary files /dev/null and b/assets/caspian_duskanddisquiet.jpg differ diff --git a/assets/childishgambino_camp.jpg b/assets/childishgambino_camp.jpg new file mode 100644 index 00000000..fec47386 Binary files /dev/null and b/assets/childishgambino_camp.jpg differ diff --git a/assets/dan_bendmogwairemix.jpeg b/assets/dan_bendmogwairemix.jpeg new file mode 100644 index 00000000..220db97e Binary files /dev/null and b/assets/dan_bendmogwairemix.jpeg differ diff --git a/assets/die_iosonouncane.jpg b/assets/die_iosonouncane.jpg new file mode 100644 index 00000000..f742811f Binary files /dev/null and b/assets/die_iosonouncane.jpg differ diff --git a/assets/domakesaythink_thelandlordisdead.jpg b/assets/domakesaythink_thelandlordisdead.jpg new file mode 100644 index 00000000..f6d6d412 Binary files /dev/null and b/assets/domakesaythink_thelandlordisdead.jpg differ diff --git a/assets/folkrock.jpg b/assets/folkrock.jpg new file mode 100644 index 00000000..1574ef4e Binary files /dev/null and b/assets/folkrock.jpg differ diff --git a/assets/haim_moshe.jpg b/assets/haim_moshe.jpg new file mode 100644 index 00000000..7d6161c9 Binary files /dev/null and b/assets/haim_moshe.jpg differ diff --git a/assets/kendrick_mrmorale.jpg b/assets/kendrick_mrmorale.jpg new file mode 100644 index 00000000..7c44beaa Binary files /dev/null and b/assets/kendrick_mrmorale.jpg differ diff --git a/assets/mixes/chill_mix.jpg b/assets/mixes/chill_mix.jpg new file mode 100644 index 00000000..dd4ea153 Binary files /dev/null and b/assets/mixes/chill_mix.jpg differ diff --git a/assets/mixes/explosions_in_the_sky_mix.jpg b/assets/mixes/explosions_in_the_sky_mix.jpg new file mode 100644 index 00000000..0786d2b4 Binary files /dev/null and b/assets/mixes/explosions_in_the_sky_mix.jpg differ diff --git a/assets/mixes/folk_acoustic_mix.jpg b/assets/mixes/folk_acoustic_mix.jpg new file mode 100644 index 00000000..7148fca7 Binary files /dev/null and b/assets/mixes/folk_acoustic_mix.jpg differ diff --git a/assets/mixes/hiphop_mix.jpg b/assets/mixes/hiphop_mix.jpg new file mode 100644 index 00000000..8d8a97b2 Binary files /dev/null and b/assets/mixes/hiphop_mix.jpg differ diff --git a/assets/mixes/indie_mix.jpg b/assets/mixes/indie_mix.jpg new file mode 100644 index 00000000..64442616 Binary files /dev/null and b/assets/mixes/indie_mix.jpg differ diff --git a/assets/mixes/metal_mix.jpg b/assets/mixes/metal_mix.jpg new file mode 100644 index 00000000..6baa9153 Binary files /dev/null and b/assets/mixes/metal_mix.jpg differ diff --git a/assets/mixes/nineties_mix.jpg b/assets/mixes/nineties_mix.jpg new file mode 100644 index 00000000..b84e0699 Binary files /dev/null and b/assets/mixes/nineties_mix.jpg differ diff --git a/assets/mogwai_thehawkishowling.jpg b/assets/mogwai_thehawkishowling.jpg new file mode 100644 index 00000000..2e91994c Binary files /dev/null and b/assets/mogwai_thehawkishowling.jpg differ diff --git a/assets/mohican_theabuseischaracter.jpg b/assets/mohican_theabuseischaracter.jpg new file mode 100644 index 00000000..c058e40a Binary files /dev/null and b/assets/mohican_theabuseischaracter.jpg differ diff --git a/assets/profile_picture.jpg b/assets/profile_picture.jpg new file mode 100644 index 00000000..d81da79a Binary files /dev/null and b/assets/profile_picture.jpg differ diff --git a/assets/welostthesea_departuresongs.jpg b/assets/welostthesea_departuresongs.jpg new file mode 100644 index 00000000..ad13af2e Binary files /dev/null and b/assets/welostthesea_departuresongs.jpg differ diff --git a/assets/ye_ye.jpg b/assets/ye_ye.jpg new file mode 100644 index 00000000..774f53e2 Binary files /dev/null and b/assets/ye_ye.jpg differ diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..5a52f807 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,616 @@ +* { + margin: 0; + box-sizing: border-box; +} + +:root { + --dark-bg: #121212; + --text-dimmed: #a7a7a7; + --spotify-green: rgba(30, 215, 96, 1); +} + +body { + height: 100vh; + font-family: Circular; + background-color: #000000; + color: var(--text-dimmed); +} + +.page-wrapper { + height: 100%; + display: grid; + grid-template-rows: calc(100% - 75px - 10px) 75px; +} + +.content-wrapper { + display: grid; + height: 100%; + margin: 10px 10px 0; + grid-template-columns: 250px 1fr; + column-gap: 10px; + grid-template-rows: 1fr; +} + +.sidebar { + z-index: 0; + position: fixed; + height: calc(100% - 75px - 10px); + top: 10px; + left: 10px; + width: 250px; + display: grid; + grid-template-rows: auto 1fr; + row-gap: 10px; +} + +.navigation-wrapper { + display: grid; + background-color: var(--dark-bg); + border-radius: 10px; +} + +.navigation-button { + margin: 12px; + display: grid; + grid-template-columns: 24px auto 1fr; + column-gap: 20px; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.active { + color: white; + + #icon { + fill: white; + } +} + +#home, +#search { + margin-left: 25px; + + &:hover { + color: white; + + svg { + fill: white; + } + } +} + +#home { + margin-top: 20px; +} + +#search { + margin-bottom: 20px; +} + +#icon { + height: 24px; + width: 24px; + fill: var(--text-dimmed); +} + +.library-wrapper { + background-color: var(--dark-bg); + border-radius: 10px; +} + +.library-header { + margin: 15px; + margin-left: 25px; + display: grid; + grid-template-columns: 24px 1fr; + column-gap: 20px; + justify-content: center; + align-items: center; + font-weight: bold; + + &:hover { + color: white; + + #icon { + fill: white; + } + } +} + +.library-list { + position: absolute; + overflow-y: scroll; + width: 100%; + height: calc(100% - 150px - 27px); + padding: 0; +} + +.playlist { + list-style: none; + display: grid; + margin: 5px 10px; + padding: 5px 5px; + justify-content: center; + align-items: center; + grid-template-columns: 45px 1fr; + column-gap: 20px; + + &:hover { + background-color: #303030; + border-radius: 10px; + } +} + +#playlist-icon { + height: 45px; + width: 45px; + border-radius: 5px; +} + +.playlist-details { + display: grid; + grid-auto-flow: row; +} + +.playlist-name, +.playlist-details, +.playlist-metadata, +.card-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.playlist-name { + color: white; +} + +.playlist-metadata { + display: grid; + grid-template-columns: 16px calc(100% - 21px); + column-gap: 5px; + font-size: 13px; +} + +#pinned-icon { + height: 16px; + width: 16px; + fill: var(--spotify-green); +} + +.content { + position: fixed; + left: 270px; + width: calc(100% - 280px); + height: calc(100% - 75px - 10px); + grid-column: 4 / span 1; + background: rgb(24, 24, 24); + background: linear-gradient( + 0deg, + rgba(18, 18, 18, 1) 0%, + rgba(18, 18, 18, 1) 50%, + rgba(69, 69, 69, 0.69) 100% + ); + border-radius: 10px; +} + +.browser { + overflow-y: scroll; + position: absolute; + height: calc(100% - 65px); + width: 100%; + display: grid; + margin-bottom: -50px; +} + +.browser-banner { + position: relative; + z-index: 1000; + width: 100%; + height: 65px; + display: grid; + grid-template-columns: auto 1fr auto; +} + +.arrow-buttons { + display: grid; + grid-auto-flow: column; + justify-content: left; + align-items: center; + column-gap: 10px; + margin-left: 35px; +} + +.arrow-icon-wrapper { + display: grid; + justify-content: center; + align-items: center; + border-radius: 20px; + padding: 10px; + background-color: rgba(0, 0, 0, 0.5); +} + +#arrow-icon { + width: 16px; + height: 16px; + fill: rgba(255, 255, 255, 0.5); +} + +.user-actions { + grid-column: 3 / -1; + display: grid; + grid-auto-flow: column; + justify-content: right; + align-items: center; + column-gap: 10px; + margin-right: 35px; +} + +#upgrade-button, +#install-button { + padding: 5px 10px; + font-weight: bold; + border-radius: 10px; +} + +#upgrade-button { + border: 2px solid white; + background-color: white; + color: #121212; +} + +#install-button { + display: grid; + grid-auto-flow: column; + column-gap: 7.5px; + justify-content: center; + align-items: center; + border: none; + background-color: rgba(0, 0, 0, 0); + color: white; +} + +#install-icon { + width: 16px; + height: 16px; + fill: white; + margin-bottom: 1px; +} + +#profile-picture { + width: 25px; + height: 25px; + border-radius: 20px; +} + +.list-wrapper { + margin-top: 35px; + height: auto; + display: grid; + grid-template-rows: 50px calc(250px + 75px + 10px); + grid-template-columns: repeat(5, 250px); + justify-content: space-around; + align-items: center; + grid-auto-flow: row; + row-gap: 30px; +} + +.list-title { + grid-row: 1 / span 1; + grid-column: 1 / -1; + color: white; +} + +.card { + display: grid; + grid-template-rows: 250px 75px; + row-gap: 10px; + justify-content: center; + align-items: start; + + &:hover { + .card-play-button { + display: grid; + justify-content: center; + align-items: center; + } + } +} + +.card-cover { + position: relative; + height: 250px; + width: 250px; +} + +#mix-cover { + width: 250px; + height: 250px; + border-radius: 5px; +} + +.card-play-button { + animation: fadeInText 300ms 0ms forwards; + display: none; + position: absolute; + bottom: 15px; + right: 10px; + width: 56px; + height: 56px; + border-radius: 50px; + border: none; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; + background-color: var(--spotify-green); +} + +@keyframes fadeInText { + from { + transform: translateY(15px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +#card-play-icon { + height: 20px; + width: 20px; +} + +.card-details { + display: grid; + width: 100%; + row-gap: 5px; +} + +.card-title { + color: white; +} + +.card-subtitle { + width: 100%; + display: -webkit-box; + max-width: 100%; + margin: 0 auto; + -webkit-line-clamp: 2; + /* autoprefixer: off */ + -webkit-box-orient: vertical; + /* autoprefixer: on */ + overflow: hidden; + text-overflow: ellipsis; +} + +.music-player { + z-index: 1; + position: fixed; + bottom: 0; + width: 100%; + height: 75px; +} + +.player-wrapper { + height: 100%; + display: grid; + grid-template-columns: 1fr 2fr 1fr; +} + +.now-playing { + width: 100%; + display: grid; + grid-template-columns: 5px 56px auto 16px; + justify-content: left; + align-items: center; + column-gap: 15px; +} + +#now-playing-cover { + grid-column: 2 / span 1; + height: 50px; + border-radius: 5px; +} + +.now-playing-track-info { + grid-column: 3 / span 1; + width: 100%; + font-size: 14px; + display: grid; +} + +.now-playing-track-name { + color: white; +} + +#add-to-library-icon { + height: 16px; + width: 16px; + fill: var(--spotify-green); +} + +.player-controls { + width: 100%; + display: grid; + padding: 10px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + justify-content: center; + align-items: center; +} + +.media-controls-wrapper { + grid-column: 2 / span 1; + display: grid; + grid-auto-flow: column; + justify-content: center; + align-items: center; + column-gap: 35px; +} + +#media-controls-icon { + height: 16px; + width: 16px; + fill: #d5d5d5; + + &:hover { + fill: var(--spotify-green); + } +} + +.play-pause-button { + display: grid; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + border-radius: 25px; + border: none; +} + +#media-controls-play-pause-icon { + height: 16px; + width: 16px; + fill: #121212; +} + +.timeline-wrapper { + grid-column: 1 / -1; + grid-row: 2 / -1; + display: grid; + grid-template-columns: auto 1fr auto; + column-gap: 5px; +} + +.timeline { + display: grid; + align-items: center; +} + +#timeline { + -webkit-appearance: none; + width: 100%; + height: 5px; + background: #303030; + border-radius: 2px; + outline: none; +} + +#timeline::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--spotify-green); + cursor: pointer; +} + +.misc-controls { + padding-right: 35px; + display: grid; + grid-auto-flow: column; + justify-content: right; + align-items: center; + column-gap: 25px; +} + +.current-time, +.time-remaining { + font-size: 12px; +} + +#misc-controls-icon { + height: 16px; + width: 16px; + fill: #d5d5d5; + + &:hover { + fill: var(--spotify-green); + } +} + +@media (max-width: 1775px) { + .list-wrapper { + grid-template-columns: repeat(4, 250px); + } +} + +@media (max-width: 1475px) { + .list-wrapper { + grid-template-columns: repeat(3, 250px); + } +} + +@media (max-width: 1215px) { + .player-wrapper { + grid-template-columns: 1fr 2fr 0.5fr; + } + + .misc-controls { + display: none; + } +} + +@media (max-width: 1200px) { + .list-wrapper { + grid-template-columns: repeat(2, 250px); + } +} + +@media (max-width: 720px) { + .list-wrapper { + grid-template-columns: repeat(1, 250px); + } +} + +@media (max-width: 600px) { + .arrow-buttons { + display: none; + } +} + +@media (max-width: 450px) { + .user-actions { + display: none; + } +} + +@media (max-width: 900px) { + .player-wrapper { + grid-template-columns: 0.5fr 2fr 0.5fr; + } + + .sidebar { + width: 75px; + } + + .misc-controls, + .now-playing-track-info, + .add-to-library-button, + .sidebar span, + .playlist-details { + display: none; + } + + .library-header, + .navigation-button { + grid-template-columns: 24px; + } + + #home, + #search, + .library-header { + margin-left: 12px; + } + + .playlist { + grid-template-columns: 45px; + } + + .content { + left: 95px; + width: calc(100% - 105px); + } +} diff --git a/fonts/CircularSp-Bold.woff2 b/fonts/CircularSp-Bold.woff2 new file mode 100644 index 00000000..0b8659dc Binary files /dev/null and b/fonts/CircularSp-Bold.woff2 differ diff --git a/fonts/CircularSp-Regular.woff2 b/fonts/CircularSp-Regular.woff2 new file mode 100644 index 00000000..90cfc354 Binary files /dev/null and b/fonts/CircularSp-Regular.woff2 differ diff --git a/fonts/CircularSpTitle-Black.woff2 b/fonts/CircularSpTitle-Black.woff2 new file mode 100644 index 00000000..428e3bb2 Binary files /dev/null and b/fonts/CircularSpTitle-Black.woff2 differ diff --git a/fonts/CircularSpTitle-Bold.woff2 b/fonts/CircularSpTitle-Bold.woff2 new file mode 100644 index 00000000..7eb88233 Binary files /dev/null and b/fonts/CircularSpTitle-Bold.woff2 differ diff --git a/fonts/fonts.css b/fonts/fonts.css new file mode 100644 index 00000000..1a305a79 --- /dev/null +++ b/fonts/fonts.css @@ -0,0 +1,15 @@ +/* +Fonts scraped from Spotify's website +*/ + +@font-face { + font-family: Circular; + font-weight: normal; + src: url("CircularSp-Regular.woff2"); +} + +@font-face { + font-family: Circular; + font-weight: bold; + src: url("CircularSp-Bold.woff2"); +} diff --git a/index.html b/index.html index 56efbdba..33da609a 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,772 @@ - + - - - - - Document - - - - - \ No newline at end of file + + + + + + + + Spotify + + +
+
+
+
+ + +
+
+
+ + + + Your Library +
+
    +
  • + +
    +
    + Folk Rock +
    +
    + + Pinned + + + Playlist • Thomas Jensen +
    +
    +
    • +
  • + +
    +
    + Souvenirs d'un autre monde +
    +
    + + Pinned + + + Album • Alcest +
    +
    +
    • +
  • + +
    +
    + The Landlord Is Dead +
    +
    + Album • Do Make Say Think +
    +
    +
    • +
  • + +
    +
    + DIE +
    +
    + Album • Iosonouncane +
    +
    +
    • +
  • + +
    +
    + Mr. Morale & the Big Steppers +
    +
    + Album • Kendrick Lamar +
    +
    +
    • +
  • + +
    +
    + Ye +
    +
    + Album • Kanye West +
    +
    +
    • +
  • + +
    +
    + Dusk And Disquiet +
    +
    + Album • Caspian +
    +
    +
    • +
  • + +
    +
    + ישראלי +
    +
    + Playlist • Thomas Jensen +
    +
    +
    • +
  • + +
    +
    + The Abuse Is Character +
    +
    + Album • Mohican +
    +
    +
    • +
  • + +
    +
    + The Hawk Is Howling +
    +
    + Album • Mogwai +
    +
    +
    • +
  • + +
    +
    + One Time for All Time +
    +
    + Album • 65daysofstatic +
    +
    +
    • +
  • + +
    +
    + נשבע-גרסת המשולש +
    +
    + Album • Haim Moshe +
    +
    +
    • +
  • + +
    +
    + Departure Songs +
    +
    + Album • We Lost The Sea +
    +
    +
    • +
  • + +
    +
    + Camp +
    +
    + Album • Childish Gambino +
    +
    +
    • +
  • + +
    +
    + Bend (Mogwai Remix) +
    +
    + Single • D.A.N. • Mogwai +
    +
    +
    • +
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+ +
+
+
+

Recently played

+
+
+ + +
+
+ + Sea of the Dying Dhow + + *shels +
+
+
+
+ + +
+ +
+ DIE + + Iosonouncane + +
+
+
+
+ + +
+ +
+ + Departure Songs + + + We Lost The Sea + +
+
+
+
+ + +
+
+ + Dusk And Disquiet + + Caspian +
+
+
+
+ + +
+
+ + One Time For All Time + + + 65daysofstatic + +
+
+
+
+

Your top mixes

+
+
+ + +
+
+ + Explosions In The Sky Mix + + + Do Make Say Think, We Lost The Sea, + Caspian and Sigur Rós + +
+
+
+
+ + +
+ +
+ 90s Mix + + The Weeknd, The Goo Goo Dolls, Coolio + and more + +
+
+
+
+ + +
+ +
+ Chill Mix + + Do Make Say Think, Godspeed You! Black + Emperor, Explosions In The Sky and more + +
+
+
+
+ + +
+
+ + Hip Hop Mix + + + Future, Kendrick Lamar, J. Cole, 2Pac + and more + +
+
+
+
+ + +
+
+ Metal Mix + + *shels, And So I Watch You from Afar, + and Sunbather + +
+
+
+
+

Your playlists

+
+
+ + +
+
+ Folk Rock + + Thomas Jensen + +
+
+
+
+ + +
+
+ ישראלי + + Thomas Jensen + +
+
+
+
+
+
+ +
+ + +