From 2cd1f56ebfc7a1a643f1740c713851b09a1e6430 Mon Sep 17 00:00:00 2001 From: gent009 <167322651+gent009@users.noreply.github.com> Date: Wed, 29 May 2024 09:46:11 +0100 Subject: [PATCH 1/3] spotify --- index.html | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 127 +++++++++++++++++++++++++++++++++++++ 2 files changed, 297 insertions(+), 9 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 56efbdba..b2772135 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,173 @@ - - - - + + + + Document - - - - - \ No newline at end of file + + + /> + + +
+ +
+
+ + +
+
+
+

Recently played

+
+
+ Heavy Metal +
+ Heavy Metal + Subtitle +
+
+
+ Stranger Things +
+ Stranger Things + Subtitle +
+
+
+ A Quiet Place +
+
+ A Quiet Place + Subtitle +
+
+
+ Split +
+ Split + Subtitle +
+
+
+ A Cure for Wellness +
+ A Cure for Wellness + Subtitle +
+
+
+ Sinister +
+ Sinister + Subtitle +
+
+
+
+
+

Creato per John Doe

+
+
+ Release Radar +
+ Release Radar + Subtitle +
+
+
+ Daily Mix 1 +
+ Daily Mix 1 + Subtitle +
+
+
+
+
+

Artisti più popolari

+
+
+ Young & Beautiful +
+ Young & Beautiful + Subtitle +
+
+
+ Ludovico Einaudi +
+ Ludovico Einaudi + Subtitle +
+
+
+
+
+
+ +
+ + diff --git a/style.css b/style.css new file mode 100644 index 00000000..63272db3 --- /dev/null +++ b/style.css @@ -0,0 +1,127 @@ +body, +html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #121212; + color: white; +} + +.container { + display: grid; + grid-template-areas: + "sidebar main" + "player player"; + grid-template-columns: 250px 1fr; + grid-template-rows: 1fr auto; + height: 100vh; +} + +.sidebar { + grid-area: sidebar; + background-color: #040404; + color: white; + display: flex; + flex-direction: column; + padding: 20px; +} + +.logo img { + width: 131px; + margin-bottom: 20px; +} + +.menu ul { + list-style: none; + padding: 0; + margin: 0; +} + +.menu li { + margin-bottom: 10px; +} + +.menu a { + color: white; + text-decoration: none; + display: flex; + align-items: center; +} + +.menu a i { + margin-right: 10px; +} + +.playlist h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +.playlist ul { + list-style: none; + padding: 0; + margin: 0; +} + +.playlist li { + margin-bottom: 10px; +} + +.playlist a { + color: white; + text-decoration: none; +} + +.install-app { + margin-top: auto; + margin-bottom: 20px; +} + +.install-app a { + color: white; + text-decoration: none; + display: block; + margin-bottom: 20px; +} + +.profile { + display: flex; + align-items: center; +} + +.profile img { + width: 24px; + height: 24px; + border-radius: 50%; + margin-right: 10px; +} + +.main { + grid-area: main; + display: flex; + flex-direction: column; + overflow-y: auto; + background-color: #121212; + text-decoration: none; +} + +.top-nav { + background-color: #040404; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: white; + text-decoration: none; +} + +.top-nav ul { + list-style: none; + display: flex; + padding: 0; + margin: 0; +} + +.top-nav li { + margin-right: 20px; +} From 7ed6fe4489aca8111e93aade949017796b27c6ff Mon Sep 17 00:00:00 2001 From: gent009 <167322651+gent009@users.noreply.github.com> Date: Wed, 29 May 2024 12:44:02 +0100 Subject: [PATCH 2/3] spotify --- index.html | 5 ++- style.css | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 109 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b2772135..33f619f8 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,15 @@ - Document + Spotify UI + diff --git a/style.css b/style.css index 63272db3..feef272a 100644 --- a/style.css +++ b/style.css @@ -27,7 +27,7 @@ html { } .logo img { - width: 131px; + width: 100%; margin-bottom: 20px; } @@ -102,7 +102,7 @@ html { flex-direction: column; overflow-y: auto; background-color: #121212; - text-decoration: none; + padding: 20px; } .top-nav { @@ -112,7 +112,6 @@ html { justify-content: space-between; padding: 0 20px; color: white; - text-decoration: none; } .top-nav ul { @@ -125,3 +124,106 @@ html { .top-nav li { margin-right: 20px; } + +.top-nav a { + color: white; + text-decoration: none; +} + +.upgrade-button { + background-color: gray; + border: none; + color: white; + padding: 10px 20px; + cursor: pointer; + border-radius: 50px; + font-weight: bold; +} + +.content { + flex: 1; + overflow-y: auto; +} + +.album-list { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.album { + position: relative; + width: calc(50% / 3 - 20px); + margin-bottom: 20px; +} + +.album img { + width: 100%; + border-radius: 8px; +} + +.album-info { + margin-top: 10px; +} + +.subtitle { + font-size: 0.8em; + color: #b3b3b3; +} + +.player { + grid-area: player; + background-color: #181818; + color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; +} + +.player-controls button { + background: none; + border: none; + color: white; + font-size: 18px; + margin: 0 10px; + cursor: pointer; +} + +.track-info { + display: flex; + flex-direction: column; + align-items: center; +} + +.player-progress { + display: flex; + align-items: center; +} + +.player-progress input[type="range"] { + margin: 0 10px; +} + +@media (max-width: 768px) { + .container { + grid-template-areas: + "sidebar" + "main" + "player"; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + } + .album { + width: calc(100% / 2 - 20px); + } +} + +@media (max-width: 480px) { + .sidebar { + display: none; + } + .album { + width: 100%; + } +} From 362bfd2bc31429ab5d127d6c5b81d78f79d55f41 Mon Sep 17 00:00:00 2001 From: gent009 <167322651+gent009@users.noreply.github.com> Date: Wed, 29 May 2024 23:13:28 +0100 Subject: [PATCH 3/3] spotify --- index.html | 17 +++++++++++++++-- style.css | 7 ++++--- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 33f619f8..6ae158ba 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,12 @@
+ +
+
+
+

Recently played

+
Heavy Metal
@@ -86,7 +96,7 @@

Recently played

A Quiet Place -
+
A Quiet Place Subtitle @@ -115,6 +125,7 @@

Recently played

+

Creato per John Doe

@@ -134,6 +145,7 @@

Creato per John Doe

+

Artisti più popolari

@@ -155,10 +167,11 @@

Artisti più popolari

+