Soundex/index.html at main · thaisserpac/Soundex · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soundex - Your Spotify Analyzer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-900 text-white antialiased">

    <div id="main-container" class="min-h-screen p-4 sm:p-6 lg:p-8 flex flex-col">

        <!-- View 1: Login Page -->
        <div id="login-view" class="flex flex-col items-center justify-center text-center flex-grow">
            <h1 class="text-5xl md:text-7xl font-black text-green-400 mb-4">Soundex</h1>
            <p class="text-lg md:text-xl text-gray-300 max-w-2xl mb-8">
                Unlock the story behind your streams. See your most-played artists, tracks, and albums, and discover new music perfectly tailored to your taste.
            </p>
            <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mb-8">
                <h2 class="text-2xl font-bold mb-4">How it Works</h2>
                <ol class="text-left space-y-3 text-gray-400">
                    <li><span class="font-bold text-green-400">Step 1:</span> Click the button below to connect.</li>
                    <li><span class="font-bold text-green-400">Step 2:</span> Log in to your Spotify account to authorize access.</li>
                    <li><span class="font-bold text-green-400">Step 3:</span> Instantly see your personalized music stats!</li>
                </ol>
                <p class="text-xs text-gray-500 mt-4">Note: We only request read-only access to your top artists and tracks. We do not store any of your data.</p>
            </div>
            <button id="login-button" class="bg-green-500 hover:bg-green-600 text-gray-900 font-bold py-4 px-8 rounded-full text-lg transition duration-300 flex items-center justify-center space-x-3 transform hover:scale-105">
                <span>Login with Spotify</span>
            </button>
        </div>

        <!-- View 2: Dashboard -->
        <div id="dashboard-view" class="hidden">
            <header class="flex flex-col sm:flex-row justify-between items-center mb-8">
                <div class="flex items-center space-x-4 mb-4 sm:mb-0">
                     <div id="user-profile-pic" class="w-12 h-12 rounded-full bg-gray-700"></div>
                     <h1 id="user-display-name" class="text-2xl font-bold">Your Dashboard</h1>
                </div>
                <div>
                    <select id="time-range-select" class="bg-gray-800 border border-gray-700 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="short_term">Last 4 Weeks</option>
                        <option value="medium_term" selected>Last 6 Months</option>
                        <option value="long_term">All Time</option>
                    </select>
                </div>
            </header>

            <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Top Artists -->
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h2 class="text-2xl font-bold mb-4">Top Artists</h2>
                    <ul id="top-artists-list" class="space-y-4"></ul>
                </div>
                <!-- Top Tracks -->
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h2 class="text-2xl font-bold mb-4">Top Tracks</h2>
                    <ul id="top-tracks-list" class="space-y-4"></ul>
                </div>
                <!-- Top Albums -->
                <div class="bg-gray-800 p-6 rounded-lg">
                    <h2 class="text-2xl font-bold mb-4">Top Albums</h2>
                    <ul id="top-albums-list" class="space-y-4"></ul>
                </div>
            </main>

            <footer class="text-center mt-12">
                 <button id="get-recommendations-button" class="bg-green-500 hover:bg-green-600 text-gray-900 font-bold py-3 px-6 rounded-full text-lg transition duration-300 transform hover:scale-105">
                    Get Track Recommendations
                </button>
            </footer>
        </div>

        <!-- View 3: Recommendations Page -->
        <div id="recommendations-view" class="hidden flex-grow flex flex-col">
             <header class="flex items-center mb-8">
                <button id="back-to-dashboard-button" class="bg-gray-700 hover:bg-gray-600 py-2 px-4 rounded-lg mr-4">&larr; Back</button>
                <h1 class="text-3xl font-bold">Your Recommendations</h1>
            </header>
            <div id="recommendations-loading" class="flex-grow flex items-center justify-center">
                <p class="text-xl text-gray-400">Generating your personalized playlist...</p>
            </div>
            <ul id="recommendations-list" class="hidden grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
                <!-- Recommendation items will be injected here -->
            </ul>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>