-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (94 loc) · 5.69 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trackify</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spotify-web-api-js"></script>
</head>
<body class="bg-dark text-green" >
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="trackify.png" alt="Trackify Logo" width="30" height="30" class="d-inline-block align-text-top">
Trackify
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class='main-controller'>
<!-- Main Content -->
<div class="container mt-5 text-center">
<h1 class="display-4">Trackify</h1>
<button id="spotify-login" class="btn btn-success mt-3">Login with Spotify</button>
</div>
<!-- Greeting Section -->
<div id="greeting" class="container mt-5 p-4 text-green rounded shadow-lg" style="background: linear-gradient(135deg, #1DB954, #191414); display: none;">
<h2 class="text-center mb-4" style="font-weight: bold; font-size: 1.8rem;">🎵 Good <span id="greeting-time"></span>, <span id="username"></span>!</h2>
</div>
<!-- Currently Playing Section -->
<div id="currently-playing" class="container mt-5 p-4 text-green rounded shadow-lg" style="background: linear-gradient(135deg, #1DB954, #191414); padding: 20px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);">
<h2 class="text-center mb-4" style="font-weight: bold; font-size: 1.8rem;">🎵 Currently Playing</h2>
<!-- Dynamic content will be injected here -->
</div>
<!-- Friends' Activity Section
<div id="friends-activity" class="container mt-5">
<h2 class="text-center">Friend Activity</h2>
<div class="friends-activity-container row justify-content-center mt-4">
</div>
</div> -->
<!-- Stats Section -->
<div id="stats" class="container mt-5" style="display:none;">
<h2 class="text-center">Your Top 5 Tracks</h2>
<div class="stats-container row justify-content-center mt-4"></div>
</div>
<!-- Minutes Listened Section -->
<div id="minutes" class="container mt-5">
<h2 class="text-center">Number of Minutes (50 tracks)</h2>
<div class="minutes-container row justify-content-center mt-4"></div>
</div>
<!-- Footer -->
<div class="footermain" >
<footer class="mt-5 p-4 text-center" style="background: linear-gradient(135deg, #1DB954, #191414); color: white;">
<div class="container">
<div class="row align-items-center">
<!-- Branding Section -->
<div class="col-md-6 text-md-start mb-3 mb-md-0">
<div>
<span>© 2024 Trackify. All Rights Reserved.</span>
</div>
<div>
<span>©Made by Aaditya Sandeep Ardhapurkar</span>
</div>
</div>
<!-- Social Media Links -->
<div class="col-md-6 text-md-end">
<a href="https://instagram.com/" target="_blank" rel="noopener noreferrer" class="text-green mx-2" style="text-decoration: none; color: #1DB954;">
<i class="bi bi-instagram fs-4"></i>
</a>
<a href="https://spotify.com/" target="_blank" rel="noopener noreferrer" class="mx-3" style="text-decoration: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 24 24">
<path d="M12 2.25C6.615 2.25 2.25 6.615 2.25 12S6.615 21.75 12 21.75 21.75 17.385 21.75 12 17.385 2.25 12 2.25zm4.318 15.027a.702.702 0 01-.973.192c-2.668-1.746-6.03-2.127-9.932-1.132a.703.703 0 11-.34-1.366c4.237-1.058 7.951-.627 10.963 1.287.33.216.42.654.192.973zm1.176-2.736a.878.878 0 01-1.218.24c-3.058-2.003-7.707-2.587-11.38-1.379a.878.878 0 01-.508-1.678c4.141-1.252 9.21-.594 12.668 1.59.41.268.529.817.24 1.217zm.096-2.87c-3.492-2.27-8.967-2.474-12.335-1.318a1.055 1.055 0 01-.615-2.014c3.805-1.162 9.847-.91 13.752 1.524a1.056 1.056 0 01-1.118 1.808z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="client.js"></script>
</body>
</html>