Hugging Face's logo

Spaces:
astro-coder
/
deepsite-project
Running

App Files Community
astro-coder commited on
Commit
92cf7d9
·
verified ·
1 Parent(s): a811414

Now name the app MusiQue,purplish pink background more modernized look

Browse files
Files changed (1) hide show
  1. index.html +24 -24
index.html CHANGED
@@ -4,16 +4,16 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>MusicStreamApp - AI-Powered Music Streaming</title>
8
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
  .gradient-bg {
14
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
  }
16
- .glass-effect {
17
  background: rgba(255, 255, 255, 0.1);
18
  backdrop-filter: blur(10px);
19
  border: 1px solid rgba(255, 255, 255, 0.2);
@@ -30,14 +30,14 @@
30
  <div class="container mx-auto flex justify-between items-center">
31
  <div class="flex items-center space-x-2">
32
  <i data-feather="music" class="w-8 h-8"></i>
33
- <h1 class="text-2xl font-bold">MusicStreamApp</h1>
34
- </div>
35
- <div class="flex space-x-4">
36
- <a href="#" class="hover:text-purple-200">Home</a>
37
- <a href="#library" class="hover:text-purple-200">Library</a>
38
- <a href="#downloads" class="hover:text-purple-200">Downloads</a>
39
- <a href="#ai" class="hover:text-purple-200">AI Assistant</a>
40
  </div>
 
 
 
 
 
 
41
  </div>
42
  </nav>
43
 
@@ -49,9 +49,9 @@
49
  <div class="relative">
50
  <input type="text"
51
  placeholder="Search for songs, artists, or albums..."
52
- class="w-full p-4 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-purple-300">
53
- <button class="absolute right-2 top-2 bg-purple-600 hover:bg-purple-700 p-2 rounded-full">
54
- <i data-feather="search" class="w-5 h-5"></i>
55
  </button>
56
  </div>
57
  </div>
@@ -67,8 +67,8 @@
67
  <h4 class="font-semibold">Chill Vibes</h4>
68
  <p class="text-sm text-gray-300">Various Artists</p>
69
  <div class="flex justify-between items-center mt-4">
70
- <button class="p-2 rounded-full bg-purple-600 hover:bg-purple-700">
71
- <i data-feather="play" class="w-4 h-4"></i>
72
  </button>
73
  <button class="p-2 rounded-full bg-white/20 hover:bg-white/30">
74
  <i data-feather="download" class="w-4 h-4"></i>
@@ -127,8 +127,8 @@
127
  <input type="text"
128
  placeholder="e.g., upbeat electronic music for working out"
129
  class="flex-1 p-3 rounded-lg bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder-white/70 focus:outline-none">
130
- <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-semibold">
131
- Generate
132
  </button>
133
  </div>
134
  </div>
@@ -145,8 +145,8 @@
145
  <!-- Footer -->
146
  <footer class="glass-effect mt-12 p-6">
147
  <div class="container mx-auto text-center">
148
- <p>&copy; 2024 MusicStreamApp. Built with Jaclang and Byllm.</p>
149
- </div>
150
  </footer>
151
 
152
  <!-- Audio Player (Hidden by default) -->
@@ -163,8 +163,8 @@
163
  <button>
164
  <i data-feather="skip-back" class="w-5 h-5"></i>
165
  </button>
166
- <button class="bg-purple-600 rounded-full p-3">
167
- <i data-feather="play" class="w-6 h-6"></i>
168
  </button>
169
  <button>
170
  <i data-feather="skip-forward" class="w-5 h-5"></i>
@@ -174,8 +174,8 @@
174
  <div class="flex items-center space-x-2">
175
  <span class="text-sm">0:00</span>
176
  <div class="flex-1 bg-white/20 rounded-full h-1">
177
- <div class="bg-purple-600 h-1 rounded-full w-0"></div>
178
- </div>
179
  <span class="text-sm">0:00</span>
180
  </div>
181
  </div>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>MusiQue - AI-Powered Music Streaming</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
  <style>
13
  .gradient-bg {
14
+ background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
15
  }
16
+ .glass-effect {
17
  background: rgba(255, 255, 255, 0.1);
18
  backdrop-filter: blur(10px);
19
  border: 1px solid rgba(255, 255, 255, 0.2);
 
30
  <div class="container mx-auto flex justify-between items-center">
31
  <div class="flex items-center space-x-2">
32
  <i data-feather="music" class="w-8 h-8"></i>
33
+ <h1 class="text-2xl font-bold">MusiQue</h1>
 
 
 
 
 
 
34
  </div>
35
+ <div class="flex space-x-4">
36
+ <a href="#" class="hover:text-pink-200">Home</a>
37
+ <a href="#library" class="hover:text-pink-200">Library</a>
38
+ <a href="#downloads" class="hover:text-pink-200">Downloads</a>
39
+ <a href="#ai" class="hover:text-pink-200">AI Assistant</a>
40
+ </div>
41
  </div>
42
  </nav>
43
 
 
49
  <div class="relative">
50
  <input type="text"
51
  placeholder="Search for songs, artists, or albums..."
52
+ class="w-full p-4 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-pink-300">
53
+ <button class="absolute right-2 top-2 bg-pink-600 hover:bg-pink-700 p-2 rounded-full">
54
+ <i data-feather="search" class="w-5 h-5"></i>
55
  </button>
56
  </div>
57
  </div>
 
67
  <h4 class="font-semibold">Chill Vibes</h4>
68
  <p class="text-sm text-gray-300">Various Artists</p>
69
  <div class="flex justify-between items-center mt-4">
70
+ <button class="p-2 rounded-full bg-pink-600 hover:bg-pink-700">
71
+ <i data-feather="play" class="w-4 h-4"></i>
72
  </button>
73
  <button class="p-2 rounded-full bg-white/20 hover:bg-white/30">
74
  <i data-feather="download" class="w-4 h-4"></i>
 
127
  <input type="text"
128
  placeholder="e.g., upbeat electronic music for working out"
129
  class="flex-1 p-3 rounded-lg bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder-white/70 focus:outline-none">
130
+ <button class="bg-pink-600 hover:bg-pink-700 px-6 py-3 rounded-lg font-semibold">
131
+ Generate
132
  </button>
133
  </div>
134
  </div>
 
145
  <!-- Footer -->
146
  <footer class="glass-effect mt-12 p-6">
147
  <div class="container mx-auto text-center">
148
+ <p>&copy; 2024 MusiQue. Built with Jaclang and Byllm.</p>
149
+ </div>
150
  </footer>
151
 
152
  <!-- Audio Player (Hidden by default) -->
 
163
  <button>
164
  <i data-feather="skip-back" class="w-5 h-5"></i>
165
  </button>
166
+ <button class="bg-pink-600 rounded-full p-3">
167
+ <i data-feather="play" class="w-6 h-6"></i>
168
  </button>
169
  <button>
170
  <i data-feather="skip-forward" class="w-5 h-5"></i>
 
174
  <div class="flex items-center space-x-2">
175
  <span class="text-sm">0:00</span>
176
  <div class="flex-1 bg-white/20 rounded-full h-1">
177
+ <div class="bg-pink-600 h-1 rounded-full w-0"></div>
178
+ </div>
179
  <span class="text-sm">0:00</span>
180
  </div>
181
  </div>