Hugging Face's logo

Spaces:
kingarnica
/
echosphere-audio-visualizer
Running

App Files Community
kingarnica commited on
Commit
566ddf8
·
verified ·
1 Parent(s): ebcc5cf

what im doing is a sounf libary like splice, this is not looing like a sound libary

Browse files
Files changed (2) hide show
  1. library.html +154 -18
  2. style.css +19 -0
library.html CHANGED
@@ -1,9 +1,10 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en" class="dark">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Library | Ruido</title>
7
  <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/feather-icons"></script>
@@ -12,27 +13,162 @@
12
  <audio-navbar></audio-navbar>
13
 
14
  <main class="container mx-auto px-4 py-8">
15
- <div class="text-center mb-12">
16
- <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
17
- Your Library
18
- </h1>
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
 
21
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
22
- <!-- Track cards will be populated here -->
23
- <div class="bg-gray-800 rounded-xl p-4 shadow-lg hover:shadow-xl transition">
24
- <div class="h-48 mb-4 rounded-lg overflow-hidden bg-gray-700 flex items-center justify-center">
25
- <i data-feather="music" class="w-16 h-16 text-gray-500"></i>
26
- </div>
27
- <h3 class="text-xl font-semibold">Track Title</h3>
28
- <p class="text-gray-400 mb-2">Artist Name</p>
29
- <div class="flex justify-between items-center">
30
- <span class="text-sm text-gray-500">3:42</span>
31
- <button class="text-indigo-400 hover:text-indigo-300">
32
- <i data-feather="play" class="w-5 h-5"></i>
 
 
 
 
33
  </button>
34
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
  </main>
38
 
@@ -45,4 +181,4 @@
45
  feather.replace();
46
  </script>
47
  </body>
48
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en" class="dark">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Sound Library | Ruido</title>
8
  <link rel="stylesheet" href="style.css">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
 
13
  <audio-navbar></audio-navbar>
14
 
15
  <main class="container mx-auto px-4 py-8">
16
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
17
+ <div>
18
+ <h1 class="text-3xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
19
+ Sound Library
20
+ </h1>
21
+ <p class="text-gray-400">Browse and download high-quality sounds</p>
22
+ </div>
23
+
24
+ <div class="w-full md:w-auto">
25
+ <div class="relative">
26
+ <input type="text" placeholder="Search sounds..." class="w-full md:w-64 bg-gray-800 border border-gray-700 rounded-full py-2 pl-10 pr-4 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
27
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i>
28
+ </div>
29
+ </div>
30
  </div>
31
 
32
+ <div class="mb-6 flex flex-wrap gap-2">
33
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-medium">All Sounds</button>
34
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-full text-sm font-medium transition">Drums</button>
35
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-full text-sm font-medium transition">Bass</button>
36
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-full text-sm font-medium transition">Vocals</button>
37
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-full text-sm font-medium transition">Synths</button>
38
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-full text-sm font-medium transition">FX</button>
39
+ </div>
40
+
41
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
42
+ <!-- Sound Card 1 -->
43
+ <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 group">
44
+ <div class="relative">
45
+ <img src="http://static.photos/music/640x360/1" alt="Kick Drum" class="w-full h-40 object-cover">
46
+ <button class="absolute bottom-3 right-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 transition transform group-hover:scale-110">
47
+ <i data-feather="play" class="w-4 h-4"></i>
48
  </button>
49
  </div>
50
+ <div class="p-4">
51
+ <div class="flex justify-between items-start mb-1">
52
+ <h3 class="font-medium text-white truncate">Hard Kick 808</h3>
53
+ <button class="text-gray-400 hover:text-indigo-400">
54
+ <i data-feather="download" class="w-4 h-4"></i>
55
+ </button>
56
+ </div>
57
+ <div class="flex items-center text-xs text-gray-400 gap-2">
58
+ <span>Drum</span>
59
+ <span>•</span>
60
+ <span>125 BPM</span>
61
+ <span>•</span>
62
+ <span>C#</span>
63
+ </div>
64
+ </div>
65
  </div>
66
+
67
+ <!-- Sound Card 2 -->
68
+ <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 group">
69
+ <div class="relative">
70
+ <img src="http://static.photos/music/640x360/2" alt="Synth Loop" class="w-full h-40 object-cover">
71
+ <button class="absolute bottom-3 right-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 transition transform group-hover:scale-110">
72
+ <i data-feather="play" class="w-4 h-4"></i>
73
+ </button>
74
+ </div>
75
+ <div class="p-4">
76
+ <div class="flex justify-between items-start mb-1">
77
+ <h3 class="font-medium text-white truncate">Dark Synth Loop</h3>
78
+ <button class="text-gray-400 hover:text-indigo-400">
79
+ <i data-feather="download" class="w-4 h-4"></i>
80
+ </button>
81
+ </div>
82
+ <div class="flex items-center text-xs text-gray-400 gap-2">
83
+ <span>Synth</span>
84
+ <span>•</span>
85
+ <span>100 BPM</span>
86
+ <span>•</span>
87
+ <span>Dm</span>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Sound Card 3 -->
93
+ <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 group">
94
+ <div class="relative">
95
+ <img src="http://static.photos/music/640x360/3" alt="Vocal Chop" class="w-full h-40 object-cover">
96
+ <button class="absolute bottom-3 right-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 transition transform group-hover:scale-110">
97
+ <i data-feather="play" class="w-4 h-4"></i>
98
+ </button>
99
+ </div>
100
+ <div class="p-4">
101
+ <div class="flex justify-between items-start mb-1">
102
+ <h3 class="font-medium text-white truncate">Vocal Chop 01</h3>
103
+ <button class="text-gray-400 hover:text-indigo-400">
104
+ <i data-feather="download" class="w-4 h-4"></i>
105
+ </button>
106
+ </div>
107
+ <div class="flex items-center text-xs text-gray-400 gap-2">
108
+ <span>Vocals</span>
109
+ <span>•</span>
110
+ <span>140 BPM</span>
111
+ <span>•</span>
112
+ <span>F</span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Sound Card 4 -->
118
+ <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 group">
119
+ <div class="relative">
120
+ <img src="http://static.photos/music/640x360/4" alt="Bass Drop" class="w-full h-40 object-cover">
121
+ <button class="absolute bottom-3 right-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 transition transform group-hover:scale-110">
122
+ <i data-feather="play" class="w-4 h-4"></i>
123
+ </button>
124
+ </div>
125
+ <div class="p-4">
126
+ <div class="flex justify-between items-start mb-1">
127
+ <h3 class="font-medium text-white truncate">Deep Bass Drop</h3>
128
+ <button class="text-gray-400 hover:text-indigo-400">
129
+ <i data-feather="download" class="w-4 h-4"></i>
130
+ </button>
131
+ </div>
132
+ <div class="flex items-center text-xs text-gray-400 gap-2">
133
+ <span>Bass</span>
134
+ <span>•</span>
135
+ <span>90 BPM</span>
136
+ <span>•</span>
137
+ <span>G#</span>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Sound Card 5 -->
143
+ <div class="bg-gray-800 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300 group">
144
+ <div class="relative">
145
+ <img src="http://static.photos/music/640x360/5" alt="FX" class="w-full h-40 object-cover">
146
+ <button class="absolute bottom-3 right-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-3 transition transform group-hover:scale-110">
147
+ <i data-feather="play" class="w-4 h-4"></i>
148
+ </button>
149
+ </div>
150
+ <div class="p-4">
151
+ <div class="flex justify-between items-start mb-1">
152
+ <h3 class="font-medium text-white truncate">Riser FX 02</h3>
153
+ <button class="text-gray-400 hover:text-indigo-400">
154
+ <i data-feather="download" class="w-4 h-4"></i>
155
+ </button>
156
+ </div>
157
+ <div class="flex items-center text-xs text-gray-400 gap-2">
158
+ <span>FX</span>
159
+ <span>•</span>
160
+ <span>-- BPM</span>
161
+ <span>•</span>
162
+ <span>--</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="mt-10 flex justify-center">
169
+ <button class="px-6 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-full font-medium transition border border-gray-700">
170
+ Load More
171
+ </button>
172
  </div>
173
  </main>
174
 
 
181
  feather.replace();
182
  </script>
183
  </body>
184
+ </html>
style.css CHANGED
@@ -43,6 +43,25 @@ audio-visualizer[static] {
43
  .pulse {
44
  animation: pulse 1.5s infinite;
45
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
 
47
  /* Custom scrollbar */
48
  ::-webkit-scrollbar {
 
43
  .pulse {
44
  animation: pulse 1.5s infinite;
45
  }
46
+ /* Sound Library Styles */
47
+ .sound-card {
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .sound-card:hover {
52
+ transform: translateY(-5px);
53
+ }
54
+
55
+ /* Play button animation */
56
+ @keyframes pulse-wave {
57
+ 0% { transform: scale(1); opacity: 1; }
58
+ 70% { transform: scale(1.1); opacity: 0.7; }
59
+ 100% { transform: scale(1); opacity: 1; }
60
+ }
61
+
62
+ .playing {
63
+ animation: pulse-wave 1.5s infinite;
64
+ }
65
 
66
  /* Custom scrollbar */
67
  ::-webkit-scrollbar {