Skip to content

Commit 2a6c790

Browse files
ErasmusdevErasmusdev
committed
new style
1 parent dcc3fa5 commit 2a6c790

File tree

1 file changed

+67
-23
lines changed

1 file changed

+67
-23
lines changed

‎Player.html‎

Lines changed: 67 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,57 +3,101 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Spotify Now Playing Widget</title>
6+
<title>Spotify Now Playing Widget - Modern Glass</title>
77
<style>
8+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
9+
810
body {
9-
font-family: Arial, sans-serif;
11+
font-family: 'Poppins', sans-serif; /* Modern font */
1012
display: flex;
1113
justify-content: center;
1214
align-items: center;
1315
height: 100vh;
14-
background-color: #121212;
15-
color: #fff;
16+
background: linear-gradient(135deg, #1d2127 0%, #0d0f12 100%); /* Darker, subtle gradient */
17+
color: #e0e0e0; /* Lighter text for contrast */
18+
margin: 0;
19+
overflow: hidden; /* Prevent scrollbars */
1620
}
1721

1822
.widget-container {
19-
background-color: #1a1a1a;
20-
padding: 20px;
21-
border-radius: 10px;
22-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
23+
background: rgba(255, 255, 255, 0.08); /* Semi-transparent background */
24+
backdrop-filter: blur(15px) saturate(180%); /* Frosted glass effect */
25+
-webkit-backdrop-filter: blur(15px) saturate(180%); /* For Safari */
26+
border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
27+
border-radius: 20px; /* More rounded corners */
28+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Stronger, diffused shadow */
29+
padding: 25px 35px; /* Increased padding */
2330
text-align: center;
31+
max-width: 320px; /* Max width for a compact widget */
32+
width: 90%; /* Responsive width */
33+
transition: all 0.3s ease; /* Smooth transitions for hover effects */
34+
}
35+
36+
.widget-container:hover {
37+
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45); /* Slightly more prominent shadow on hover */
38+
transform: translateY(-2px); /* Slight lift effect */
2439
}
2540

2641
#login-button {
27-
background-color: #1db954;
42+
background-color: #1ed760; /* Spotify green */
2843
color: white;
29-
padding: 10px 20px;
44+
padding: 12px 25px; /* Larger button */
3045
border: none;
3146
border-radius: 500px;
32-
font-weight: bold;
47+
font-weight: 600; /* Bolder font weight */
3348
cursor: pointer;
3449
text-decoration: none;
3550
display: inline-block;
51+
transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth hover */
52+
}
53+
54+
#login-button:hover {
55+
background-color: #1ab24e; /* Darker green on hover */
56+
transform: translateY(-1px);
57+
}
58+
59+
#login-section p {
60+
font-size: 0.95em;
61+
color: #b0b0b0; /* Subtler text */
62+
margin-bottom: 25px;
3663
}
3764

3865
#now-playing {
3966
display: none;
67+
opacity: 0; /* Start hidden for fade-in */
68+
transition: opacity 0.5s ease; /* Fade-in effect */
69+
}
70+
71+
#now-playing.visible {
72+
opacity: 1; /* Make visible */
4073
}
4174

4275
#album-art {
43-
width: 150px;
44-
height: 150px;
45-
border-radius: 8px;
46-
margin-bottom: 15px;
76+
width: 160px; /* Slightly larger album art */
77+
height: 160px;
78+
border-radius: 12px; /* More rounded album art */
79+
margin-bottom: 20px;
80+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* Shadow for album art */
81+
object-fit: cover; /* Ensure image covers the area */
4782
}
4883

4984
#track-title {
50-
font-size: 1.5em;
51-
font-weight: bold;
85+
font-size: 1.6em; /* Slightly larger title */
86+
font-weight: 700; /* Bold title */
87+
margin-bottom: 5px;
88+
color: #ffffff; /* Pure white title */
89+
white-space: nowrap; /* Prevent title from wrapping prematurely */
90+
overflow: hidden; /* Hide overflow */
91+
text-overflow: ellipsis; /* Add ellipsis for long titles */
5292
}
5393

5494
#artist-name {
55-
font-size: 1.2em;
56-
color: #b3b3b3;
95+
font-size: 1.1em; /* Adjusted artist name size */
96+
color: #b0b0b0; /* Subtler artist name */
97+
margin-top: 0;
98+
white-space: nowrap;
99+
overflow: hidden;
100+
text-overflow: ellipsis;
57101
}
58102
</style>
59103
</head>
@@ -73,8 +117,8 @@
73117
</div>
74118

75119
<script>
76-
const clientId = 'd6d3071a35dc4874af1dcf110017ec8d'; // REPLACE WITH YOUR CLIENT ID
77-
const redirectUri = 'https://erasmusdev.github.io/FlockersDevHub/Player.html';
120+
const clientId = 'd6d3071a35dc4874af1dcf110017ec8d'; // YOUR CLIENT ID HERE
121+
const redirectUri = 'https://erasmusdev.github.io/FlockersDevHub/Player.html'; // YOUR GITHUB PAGES URL HERE
78122
const authEndpoint = 'https://accounts.spotify.com/authorize';
79123
const tokenEndpoint = 'https://accounts.spotify.com/api/token';
80124
const scope = 'user-read-currently-playing';
@@ -118,6 +162,7 @@
118162
if (accessToken) {
119163
loginSection.style.display = 'none';
120164
nowPlayingSection.style.display = 'block';
165+
nowPlayingSection.classList.add('visible'); // Add visible class for fade-in
121166
getCurrentlyPlaying();
122167
setInterval(getCurrentlyPlaying, 5000);
123168
} else {
@@ -177,7 +222,6 @@
177222
async function getCurrentlyPlaying() {
178223
let accessToken = localStorage.getItem('accessToken');
179224
if (!accessToken) {
180-
// No token, or token expired and not refreshed, show login button
181225
localStorage.clear();
182226
location.reload();
183227
return;
@@ -199,7 +243,6 @@
199243
}
200244

201245
if (response.status === 401) {
202-
// Token expired or invalid, clear and force re-login
203246
localStorage.clear();
204247
location.reload();
205248
return;
@@ -211,6 +254,7 @@
211254
artistName.innerText = data.item.artists.map(artist => artist.name).join(', ');
212255
albumArt.src = data.item.album.images[0].url;
213256
albumArt.style.display = "block";
257+
nowPlayingSection.classList.add('visible'); // Ensure visible on updates
214258
} else {
215259
trackTitle.innerText = "Nothing playing right now.";
216260
artistName.innerText = "";

0 commit comments

Comments
 (0)