Hugging Face's logo

Spaces:
astro-coder
/
deepsite-project
Running

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

A music streaming web app,that supports offline search,download and has AI intergration. It is built using jaclang and byllm also it should work on a vast library of music using youtubes API key

Browse files
Files changed (1) hide show
  1. index.html +208 -18
index.html CHANGED
@@ -1,19 +1,209 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
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);
20
+ }
21
+ .music-card:hover {
22
+ transform: translateY(-5px);
23
+ transition: transform 0.3s ease;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="gradient-bg min-h-screen text-white">
28
+ <!-- Navigation -->
29
+ <nav class="glass-effect p-4 sticky top-0 z-50">
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
+
44
+ <!-- Hero Section -->
45
+ <section class="container mx-auto px-4 py-16 text-center">
46
+ <h2 class="text-5xl font-bold mb-4">Stream Millions of Songs</h2>
47
+ <p class="text-xl mb-8">AI-powered music discovery with offline download capabilities</p>
48
+ <div class="max-w-2xl mx-auto">
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>
58
+ </section>
59
+
60
+ <!-- Featured Music Section -->
61
+ <section id="library" class="container mx-auto px-4 py-12">
62
+ <h3 class="text-3xl font-bold mb-8">Featured Music</h3>
63
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
64
+ <!-- Music Card 1 -->
65
+ <div class="music-card glass-effect rounded-lg p-4">
66
+ <img src="http://static.photos/music/320x240/1" alt="Album Cover" class="w-full rounded-lg mb-4">
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>
75
+ </button>
76
+ </div>
77
+ </div>
78
+ <!-- Repeat similar cards 3 more times -->
79
+ <div class="music-card glass-effect rounded-lg p-4">
80
+ <img src="http://static.photos/music/320x240/2" alt="Album Cover" class="w-full rounded-lg mb-4">
81
+ <h4 class="font-semibold">Energy Boost</h4>
82
+ <p class="text-sm text-gray-300">Top Hits</p>
83
+ <div class="flex justify-between items-center mt-4">
84
+ <button class="p-2 rounded-full bg-purple-600 hover:bg-purple-700">
85
+ <i data-feather="play" class="w-4 h-4"></i>
86
+ </button>
87
+ <button class="p-2 rounded-full bg-white/20 hover:bg-white/30">
88
+ <i data-feather="download" class="w-4 h-4"></i>
89
+ </button>
90
+ </div>
91
+ </div>
92
+ <div class="music-card glass-effect rounded-lg p-4">
93
+ <img src="http://static.photos/music/320x240/3" alt="Album Cover" class="w-full rounded-lg mb-4">
94
+ <h4 class="font-semibold">Focus Flow</h4>
95
+ <p class="text-sm text-gray-300">Study Beats</p>
96
+ <div class="flex justify-between items-center mt-4">
97
+ <button class="p-2 rounded-full bg-purple-600 hover:bg-purple-700">
98
+ <i data-feather="play" class="w-4 h-4"></i>
99
+ </button>
100
+ <button class="p-2 rounded-full bg-white/20 hover:bg-white/30">
101
+ <i data-feather="download" class="w-4 h-4"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ <div class="music-card glass-effect rounded-lg p-4">
106
+ <img src="http://static.photos/music/320x240/4" alt="Album Cover" class="w-full rounded-lg mb-4">
107
+ <h4 class="font-semibold">Relaxation</h4>
108
+ <p class="text-sm text-gray-300">Ambient Sounds</p>
109
+ <div class="flex justify-between items-center mt-4">
110
+ <button class="p-2 rounded-full bg-purple-600 hover:bg-purple-700">
111
+ <i data-feather="play" class="w-4 h-4"></i>
112
+ </button>
113
+ <button class="p-2 rounded-full bg-white/20 hover:bg-white/30">
114
+ <i data-feather="download" class="w-4 h-4"></i>
115
+ </button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- AI Assistant Section -->
122
+ <section id="ai" class="container mx-auto px-4 py-12">
123
+ <div class="glass-effect rounded-lg p-8">
124
+ <h3 class="text-3xl font-bold mb-4">AI Music Assistant</h3>
125
+ <p class="mb-6">Describe the music you want to hear and our AI will find the perfect matches</p>
126
+ <div class="flex space-x-4">
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>
135
+ </section>
136
+
137
+ <!-- Downloads Section -->
138
+ <section id="downloads" class="container mx-auto px-4 py-12">
139
+ <h3 class="text-3xl font-bold mb-8">Your Downloads</h3>
140
+ <div class="glass-effect rounded-lg p-6">
141
+ <p class="text-center text-gray-300">No downloads yet. Start downloading your favorite music!</p>
142
+ </div>
143
+ </section>
144
+
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) -->
153
+ <div id="audioPlayer" class="fixed bottom-0 left-0 right-0 glass-effect p-4 hidden">
154
+ <div class="container mx-auto flex items-center justify-between">
155
+ <div class="flex items-center space-x-4">
156
+ <img src="http://static.photos/music/64x64/1" alt="Now Playing" class="w-12 h-12 rounded">
157
+ <div>
158
+ <h4 class="font-semibold">Song Title</h4>
159
+ <p class="text-sm text-gray-300">Artist</p>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-center space-x-4">
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>
171
+ </button>
172
+ </div>
173
+ <div class="flex-1 max-w-md">
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>
182
+ </div>
183
+ </div>
184
+
185
+ <script>
186
+ // Initialize feather icons
187
+ feather.replace();
188
+
189
+ // Basic music player functionality
190
+ document.addEventListener('DOMContentLoaded', function() {
191
+ const playButtons = document.querySelectorAll('.music-card button:first-child');
192
+ const audioPlayer = document.getElementById('audioPlayer');
193
+
194
+ playButtons.forEach(button => {
195
+ button.addEventListener('click', function() {
196
+ audioPlayer.classList.remove('hidden');
197
+ // Simulate playing music
198
+ const card = this.closest('.music-card');
199
+ const title = card.querySelector('h4').textContent;
200
+ const artist = card.querySelector('p').textContent;
201
+
202
+ audioPlayer.querySelector('h4').textContent = title;
203
+ audioPlayer.querySelector('p').textContent = artist;
204
+ });
205
+ });
206
+ });
207
+ </script>
208
+ </body>
209
  </html>