Hugging Face's logo

Spaces:
XXXMARK
/
mamudas
Running

App Files Community
XXXMARK commited on
Commit
3b9be15
·
verified ·
1 Parent(s): 777d043

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +724 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mamudas
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mamudas
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,724 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Maori Music Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .tab-content {
11
+ display: none;
12
+ }
13
+ .tab-content.active {
14
+ display: block;
15
+ animation: fadeIn 0.5s;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; }
19
+ to { opacity: 1; }
20
+ }
21
+ .audio-wave {
22
+ height: 40px;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ }
27
+ .wave-bar {
28
+ width: 4px;
29
+ height: 10px;
30
+ margin: 0 2px;
31
+ background-color: #4F46E5;
32
+ border-radius: 2px;
33
+ animation: wave 1.2s infinite ease-in-out;
34
+ }
35
+ .wave-bar:nth-child(2) { animation-delay: 0.1s; }
36
+ .wave-bar:nth-child(3) { animation-delay: 0.2s; }
37
+ .wave-bar:nth-child(4) { animation-delay: 0.3s; }
38
+ .wave-bar:nth-child(5) { animation-delay: 0.4s; }
39
+ @keyframes wave {
40
+ 0%, 100% { transform: scaleY(0.5); }
41
+ 50% { transform: scaleY(2); }
42
+ }
43
+ .maori-pattern {
44
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZD0iTTAgNTBoNTB2NTBINTB2LTUwSDB6IiBmaWxsPSIjNGY0NmU1IiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=');
45
+ background-size: 100px 100px;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-100 font-sans">
50
+ <div class="min-h-screen flex flex-col">
51
+ <!-- Header -->
52
+ <header class="bg-indigo-700 text-white shadow-lg maori-pattern">
53
+ <div class="container mx-auto px-4 py-6">
54
+ <div class="flex justify-between items-center">
55
+ <div class="flex items-center space-x-4">
56
+ <i class="fas fa-music text-3xl"></i>
57
+ <h1 class="text-2xl font-bold">Maori Music Dashboard</h1>
58
+ </div>
59
+ <div class="flex items-center space-x-4">
60
+ <button class="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded-lg flex items-center">
61
+ <i class="fas fa-user-circle mr-2"></i>
62
+ Profile
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <main class="flex-grow container mx-auto px-4 py-6">
71
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
72
+ <!-- Tabs Navigation -->
73
+ <div class="flex border-b border-gray-200">
74
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300 active" data-tab="songs">
75
+ <i class="fas fa-pen-fancy mr-2"></i>Song Writing
76
+ </button>
77
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300" data-tab="genres">
78
+ <i class="fas fa-guitar mr-2"></i>Genres
79
+ </button>
80
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300" data-tab="ideas">
81
+ <i class="fas fa-lightbulb mr-2"></i>Ideas
82
+ </button>
83
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300" data-tab="translate">
84
+ <i class="fas fa-language mr-2"></i>Translations
85
+ </button>
86
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300" data-tab="audio">
87
+ <i class="fas fa-microphone mr-2"></i>Audio
88
+ </button>
89
+ <button class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all border-b-2 border-transparent hover:border-indigo-300" data-tab="ai">
90
+ <i class="fas fa-robot mr-2"></i>AI Assistant
91
+ </button>
92
+ </div>
93
+
94
+ <!-- Tab Contents -->
95
+ <div class="p-6">
96
+ <!-- Song Writing Tab -->
97
+ <div id="songs" class="tab-content active">
98
+ <div class="mb-6">
99
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Write Your Maori Song</h2>
100
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
101
+ <div>
102
+ <label class="block text-gray-700 mb-2">Title (English)</label>
103
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Song title in English">
104
+ </div>
105
+ <div>
106
+ <label class="block text-gray-700 mb-2">Title (Te Reo Maori)</label>
107
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Waiata ingoa i roto i te reo Māori">
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="mb-6">
113
+ <label class="block text-gray-700 mb-2">Lyrics (English)</label>
114
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-40" placeholder="Write your lyrics in English"></textarea>
115
+ </div>
116
+
117
+ <div class="mb-6">
118
+ <label class="block text-gray-700 mb-2">Lyrics (Te Reo Maori)</label>
119
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-40" placeholder="Tuhia ō kupu i roto i te reo Māori"></textarea>
120
+ </div>
121
+
122
+ <div class="flex flex-wrap gap-3 mb-6">
123
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
124
+ <i class="fas fa-save mr-2"></i> Save
125
+ </button>
126
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
127
+ <i class="fas fa-copy mr-2"></i> Copy
128
+ </button>
129
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
130
+ <i class="fas fa-download mr-2"></i> Download
131
+ </button>
132
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
133
+ <i class="fas fa-book mr-2"></i> Send to Notion
134
+ </button>
135
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
136
+ <i class="fas fa-music mr-2"></i> Send to Suno
137
+ </button>
138
+ </div>
139
+
140
+ <div class="bg-gray-50 p-4 rounded-lg">
141
+ <h3 class="font-medium text-gray-700 mb-2">Recent Songs</h3>
142
+ <div class="space-y-2">
143
+ <div class="p-3 hover:bg-gray-100 rounded-lg cursor-pointer">
144
+ <div class="font-medium">Whakaaria Mai</div>
145
+ <div class="text-sm text-gray-500">Traditional hymn</div>
146
+ </div>
147
+ <div class="p-3 hover:bg-gray-100 rounded-lg cursor-pointer">
148
+ <div class="font-medium">Pōkarekare Ana</div>
149
+ <div class="text-sm text-gray-500">Love song</div>
150
+ </div>
151
+ <div class="p-3 hover:bg-gray-100 rounded-lg cursor-pointer">
152
+ <div class="font-medium">E Ipo</div>
153
+ <div class="text-sm text-gray-500">Contemporary waiata</div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Genres Tab -->
160
+ <div id="genres" class="tab-content">
161
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Maori Music Genres</h2>
162
+
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
164
+ <div class="bg-indigo-50 p-6 rounded-lg border border-indigo-100">
165
+ <div class="flex items-center mb-4">
166
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
167
+ <i class="fas fa-drum text-indigo-600 text-xl"></i>
168
+ </div>
169
+ <h3 class="font-bold text-lg">Traditional Waiata</h3>
170
+ </div>
171
+ <p class="text-gray-600 mb-4">Ancient songs passed down through generations, often telling stories of ancestors and history.</p>
172
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">Explore Songs →</button>
173
+ </div>
174
+
175
+ <div class="bg-yellow-50 p-6 rounded-lg border border-yellow-100">
176
+ <div class="flex items-center mb-4">
177
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
178
+ <i class="fas fa-guitar text-yellow-600 text-xl"></i>
179
+ </div>
180
+ <h3 class="font-bold text-lg">Waiata-ā-Ringa</h3>
181
+ </div>
182
+ <p class="text-gray-600 mb-4">Action songs combining singing with synchronized hand movements, popular in kapa haka.</p>
183
+ <button class="text-yellow-600 hover:text-yellow-800 font-medium">Explore Songs →</button>
184
+ </div>
185
+
186
+ <div class="bg-green-50 p-6 rounded-lg border border-green-100">
187
+ <div class="flex items-center mb-4">
188
+ <div class="bg-green-100 p-3 rounded-full mr-4">
189
+ <i class="fas fa-headphones text-green-600 text-xl"></i>
190
+ </div>
191
+ <h3 class="font-bold text-lg">Contemporary Maori</h3>
192
+ </div>
193
+ <p class="text-gray-600 mb-4">Modern music blending traditional Maori elements with pop, rock, hip-hop and other genres.</p>
194
+ <button class="text-green-600 hover:text-green-800 font-medium">Explore Songs →</button>
195
+ </div>
196
+
197
+ <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
198
+ <div class="flex items-center mb-4">
199
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
200
+ <i class="fas fa-pray text-purple-600 text-xl"></i>
201
+ </div>
202
+ <h3 class="font-bold text-lg">Karakia</h3>
203
+ </div>
204
+ <p class="text-gray-600 mb-4">Chants and incantations used for spiritual purposes, blessings and ceremonies.</p>
205
+ <button class="text-purple-600 hover:text-purple-800 font-medium">Explore Songs →</button>
206
+ </div>
207
+
208
+ <div class="bg-red-50 p-6 rounded-lg border border-red-100">
209
+ <div class="flex items-center mb-4">
210
+ <div class="bg-red-100 p-3 rounded-full mr-4">
211
+ <i class="fas fa-users text-red-600 text-xl"></i>
212
+ </div>
213
+ <h3 class="font-bold text-lg">Haka</h3>
214
+ </div>
215
+ <p class="text-gray-600 mb-4">Vibrant traditional war dances with powerful chanting and vigorous movements.</p>
216
+ <button class="text-red-600 hover:text-red-800 font-medium">Explore Songs →</button>
217
+ </div>
218
+
219
+ <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
220
+ <div class="flex items-center mb-4">
221
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
222
+ <i class="fas fa-child text-blue-600 text-xl"></i>
223
+ </div>
224
+ <h3 class="font-bold text-lg">Oriori</h3>
225
+ </div>
226
+ <p class="text-gray-600 mb-4">Lullabies and children's songs often containing genealogical information and tribal history.</p>
227
+ <button class="text-blue-600 hover:text-blue-800 font-medium">Explore Songs →</button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Ideas Tab -->
233
+ <div id="ideas" class="tab-content">
234
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Song Ideas & Inspiration</h2>
235
+
236
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
237
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
238
+ <h3 class="font-bold text-lg mb-4">New Idea</h3>
239
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32" placeholder="Write your song idea here..."></textarea>
240
+ <div class="mt-4 flex justify-between">
241
+ <div>
242
+ <label class="inline-flex items-center">
243
+ <input type="checkbox" class="rounded text-indigo-600">
244
+ <span class="ml-2">Melody</span>
245
+ </label>
246
+ <label class="inline-flex items-center ml-4">
247
+ <input type="checkbox" class="rounded text-indigo-600">
248
+ <span class="ml-2">Lyrics</span>
249
+ </label>
250
+ </div>
251
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
252
+ Save Idea
253
+ </button>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
258
+ <h3 class="font-bold text-lg mb-4">Inspiration Generator</h3>
259
+ <div class="mb-4">
260
+ <label class="block text-gray-700 mb-2">Theme</label>
261
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg">
262
+ <option>Love</option>
263
+ <option>Nature</option>
264
+ <option>Ancestors</option>
265
+ <option>War</option>
266
+ <option>Peace</option>
267
+ <option>Journey</option>
268
+ </select>
269
+ </div>
270
+ <div class="mb-4">
271
+ <label class="block text-gray-700 mb-2">Mood</label>
272
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg">
273
+ <option>Happy</option>
274
+ <option>Sad</option>
275
+ <option>Powerful</option>
276
+ <option>Calm</option>
277
+ <option>Mysterious</option>
278
+ </select>
279
+ </div>
280
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
281
+ Generate Inspiration
282
+ </button>
283
+ </div>
284
+ </div>
285
+
286
+ <h3 class="font-bold text-lg mb-4">Your Idea Bank</h3>
287
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
288
+ <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">
289
+ <div class="flex justify-between items-start mb-2">
290
+ <h4 class="font-medium">Ocean Journey</h4>
291
+ <div class="flex space-x-2">
292
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-edit"></i></button>
293
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-trash"></i></button>
294
+ </div>
295
+ </div>
296
+ <p class="text-sm text-gray-600 mb-2">A song about the great migration across the Pacific...</p>
297
+ <div class="flex justify-between text-xs text-gray-500">
298
+ <span>Last edited: 2 days ago</span>
299
+ <span><i class="fas fa-music mr-1"></i>Melody</span>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
304
+ <div class="flex justify-between items-start mb-2">
305
+ <h4 class="font-medium">Mountain's Call</h4>
306
+ <div class="flex space-x-2">
307
+ <button class="text-yellow-600 hover:text-yellow-800"><i class="fas fa-edit"></i></button>
308
+ <button class="text-yellow-600 hover:text-yellow-800"><i class="fas fa-trash"></i></button>
309
+ </div>
310
+ </div>
311
+ <p class="text-sm text-gray-600 mb-2">The sacred mountains speaking to the people...</p>
312
+ <div class="flex justify-between text-xs text-gray-500">
313
+ <span>Last edited: 1 week ago</span>
314
+ <span><i class="fas fa-pen mr-1"></i>Lyrics</span>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
319
+ <div class="flex justify-between items-start mb-2">
320
+ <h4 class="font-medium">Dawn Chant</h4>
321
+ <div class="flex space-x-2">
322
+ <button class="text-green-600 hover:text-green-800"><i class="fas fa-edit"></i></button>
323
+ <button class="text-green-600 hover:text-green-800"><i class="fas fa-trash"></i></button>
324
+ </div>
325
+ </div>
326
+ <p class="text-sm text-gray-600 mb-2">Welcoming the new day with traditional chants...</p>
327
+ <div class="flex justify-between text-xs text-gray-500">
328
+ <span>Last edited: 3 days ago</span>
329
+ <span><i class="fas fa-music mr-1"></i><i class="fas fa-pen mr-1"></i>Both</span>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Translations Tab -->
336
+ <div id="translate" class="tab-content">
337
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Te Reo Maori Translations</h2>
338
+
339
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
340
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
341
+ <h3 class="font-bold text-lg mb-4">English to Te Reo</h3>
342
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32" placeholder="Enter English text to translate"></textarea>
343
+ <button class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg w-full">
344
+ Translate to Te Reo
345
+ </button>
346
+ </div>
347
+
348
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
349
+ <h3 class="font-bold text-lg mb-4">Te Reo to English</h3>
350
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32" placeholder="Enter Te Reo text to translate"></textarea>
351
+ <button class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg w-full">
352
+ Translate to English
353
+ </button>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="bg-indigo-50 p-6 rounded-lg">
358
+ <h3 class="font-bold text-lg mb-4">Translation History</h3>
359
+ <div class="space-y-4">
360
+ <div class="bg-white p-4 rounded-lg shadow-sm">
361
+ <div class="flex justify-between items-start mb-2">
362
+ <div>
363
+ <div class="font-medium">Original: "The river flows swiftly"</div>
364
+ <div class="text-sm text-indigo-600">Translated: "Kei te rere tino tere te awa"</div>
365
+ </div>
366
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-copy"></i></button>
367
+ </div>
368
+ <div class="text-xs text-gray-500">Translated 3 hours ago</div>
369
+ </div>
370
+
371
+ <div class="bg-white p-4 rounded-lg shadow-sm">
372
+ <div class="flex justify-between items-start mb-2">
373
+ <div>
374
+ <div class="font-medium">Original: "Kei te aroha au ki a koe"</div>
375
+ <div class="text-sm text-indigo-600">Translated: "I love you"</div>
376
+ </div>
377
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-copy"></i></button>
378
+ </div>
379
+ <div class="text-xs text-gray-500">Translated 1 day ago</div>
380
+ </div>
381
+
382
+ <div class="bg-white p-4 rounded-lg shadow-sm">
383
+ <div class="flex justify-between items-start mb-2">
384
+ <div>
385
+ <div class="font-medium">Original: "The stars shine brightly tonight"</div>
386
+ <div class="text-sm text-indigo-600">Translated: "Kei te tino whiti te whetū i tēnei pō"</div>
387
+ </div>
388
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-copy"></i></button>
389
+ </div>
390
+ <div class="text-xs text-gray-500">Translated 2 days ago</div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Audio Tab -->
397
+ <div id="audio" class="tab-content">
398
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Audio Management</h2>
399
+
400
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
401
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
402
+ <h3 class="font-bold text-lg mb-4">Upload Audio</h3>
403
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
404
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
405
+ <p class="text-gray-600 mb-4">Drag & drop your audio files here or click to browse</p>
406
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
407
+ Select Files
408
+ </button>
409
+ </div>
410
+ <div class="mt-4">
411
+ <label class="block text-gray-700 mb-2">File Name</label>
412
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Enter a name for your audio file">
413
+ </div>
414
+ <div class="mt-4">
415
+ <label class="block text-gray-700 mb-2">Description</label>
416
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg h-20" placeholder="Add a description"></textarea>
417
+ </div>
418
+ <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
419
+ Upload Audio
420
+ </button>
421
+ </div>
422
+
423
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
424
+ <h3 class="font-bold text-lg mb-4">Record Audio</h3>
425
+ <div class="bg-gray-100 rounded-lg p-6 text-center mb-4">
426
+ <div class="audio-wave mb-4">
427
+ <div class="wave-bar"></div>
428
+ <div class="wave-bar"></div>
429
+ <div class="wave-bar"></div>
430
+ <div class="wave-bar"></div>
431
+ <div class="wave-bar"></div>
432
+ </div>
433
+ <div class="flex justify-center space-x-4">
434
+ <button class="bg-red-500 hover:bg-red-600 text-white p-3 rounded-full">
435
+ <i class="fas fa-microphone"></i>
436
+ </button>
437
+ <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 p-3 rounded-full" disabled>
438
+ <i class="fas fa-stop"></i>
439
+ </button>
440
+ <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 p-3 rounded-full" disabled>
441
+ <i class="fas fa-play"></i>
442
+ </button>
443
+ </div>
444
+ </div>
445
+ <div class="mb-4">
446
+ <label class="block text-gray-700 mb-2">Recording Name</label>
447
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Enter a name for your recording">
448
+ </div>
449
+ <div class="mb-4">
450
+ <label class="block text-gray-700 mb-2">Description</label>
451
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg h-20" placeholder="Add a description"></textarea>
452
+ </div>
453
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
454
+ Save Recording
455
+ </button>
456
+ </div>
457
+ </div>
458
+
459
+ <h3 class="font-bold text-lg mb-4">Your Audio Files</h3>
460
+ <div class="overflow-x-auto">
461
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
462
+ <thead class="bg-gray-100">
463
+ <tr>
464
+ <th class="py-3 px-4 text-left">Name</th>
465
+ <th class="py-3 px-4 text-left">Type</th>
466
+ <th class="py-3 px-4 text-left">Date</th>
467
+ <th class="py-3 px-4 text-left">Size</th>
468
+ <th class="py-3 px-4 text-left">Actions</th>
469
+ </tr>
470
+ </thead>
471
+ <tbody class="divide-y divide-gray-200">
472
+ <tr>
473
+ <td class="py-3 px-4">
474
+ <div class="flex items-center">
475
+ <i class="fas fa-music text-indigo-600 mr-3"></i>
476
+ <span>Waiata Traditional</span>
477
+ </div>
478
+ </td>
479
+ <td class="py-3 px-4">MP3</td>
480
+ <td class="py-3 px-4">2023-05-15</td>
481
+ <td class="py-3 px-4">3.2 MB</td>
482
+ <td class="py-3 px-4">
483
+ <div class="flex space-x-2">
484
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-play"></i></button>
485
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-download"></i></button>
486
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-share-alt"></i></button>
487
+ <button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
488
+ </div>
489
+ </td>
490
+ </tr>
491
+ <tr>
492
+ <td class="py-3 px-4">
493
+ <div class="flex items-center">
494
+ <i class="fas fa-microphone text-indigo-600 mr-3"></i>
495
+ <span>Haka Practice</span>
496
+ </div>
497
+ </td>
498
+ <td class="py-3 px-4">WAV</td>
499
+ <td class="py-3 px-4">2023-05-10</td>
500
+ <td class="py-3 px-4">12.5 MB</td>
501
+ <td class="py-3 px-4">
502
+ <div class="flex space-x-2">
503
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-play"></i></button>
504
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-download"></i></button>
505
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-share-alt"></i></button>
506
+ <button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
507
+ </div>
508
+ </td>
509
+ </tr>
510
+ <tr>
511
+ <td class="py-3 px-4">
512
+ <div class="flex items-center">
513
+ <i class="fas fa-music text-indigo-600 mr-3"></i>
514
+ <span>Karakia Morning</span>
515
+ </div>
516
+ </td>
517
+ <td class="py-3 px-4">MP3</td>
518
+ <td class="py-3 px-4">2023-05-05</td>
519
+ <td class="py-3 px-4">2.8 MB</td>
520
+ <td class="py-3 px-4">
521
+ <div class="flex space-x-2">
522
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-play"></i></button>
523
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-download"></i></button>
524
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-share-alt"></i></button>
525
+ <button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button>
526
+ </div>
527
+ </td>
528
+ </tr>
529
+ </tbody>
530
+ </table>
531
+ </div>
532
+ </div>
533
+
534
+ <!-- AI Assistant Tab -->
535
+ <div id="ai" class="tab-content">
536
+ <h2 class="text-xl font-bold text-gray-800 mb-6">AI Songwriting Assistant</h2>
537
+
538
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
539
+ <div class="md:col-span-2 bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
540
+ <h3 class="font-bold text-lg mb-4">AI Prompt</h3>
541
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-40" placeholder="Ask the AI to help with your song... (e.g. 'Write a Maori love song about the ocean', 'Suggest rhymes for 'aroha'', 'Help translate this verse to Te Reo')"></textarea>
542
+ <div class="mt-4 flex justify-between">
543
+ <div class="flex space-x-2">
544
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-lg text-sm">
545
+ <i class="fas fa-lightbulb mr-1"></i> Ideas
546
+ </button>
547
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-lg text-sm">
548
+ <i class="fas fa-language mr-1"></i> Translate
549
+ </button>
550
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded-lg text-sm">
551
+ <i class="fas fa-rhombus mr-1"></i> Rhyme
552
+ </button>
553
+ </div>
554
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
555
+ Generate
556
+ </button>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
561
+ <h3 class="font-bold text-lg mb-4">AI Settings</h3>
562
+ <div class="mb-4">
563
+ <label class="block text-gray-700 mb-2">Creativity Level</label>
564
+ <input type="range" class="w-full" min="0" max="100" value="70">
565
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
566
+ <span>Precise</span>
567
+ <span>Balanced</span>
568
+ <span>Creative</span>
569
+ </div>
570
+ </div>
571
+ <div class="mb-4">
572
+ <label class="block text-gray-700 mb-2">Language Focus</label>
573
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg">
574
+ <option>Te Reo Maori</option>
575
+ <option>English</option>
576
+ <option>Bilingual</option>
577
+ </select>
578
+ </div>
579
+ <div class="mb-4">
580
+ <label class="block text-gray-700 mb-2">Song Type</label>
581
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg">
582
+ <option>Waiata (Song)</option>
583
+ <option>Haka</option>
584
+ <option>Karakia (Chant)</option>
585
+ <option>Oriori (Lullaby)</option>
586
+ <option>Contemporary</option>
587
+ </select>
588
+ </div>
589
+ <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
590
+ Save Settings
591
+ </button>
592
+ </div>
593
+ </div>
594
+
595
+ <div class="bg-indigo-50 rounded-lg p-6 mb-8">
596
+ <h3 class="font-bold text-lg mb-4">AI Response</h3>
597
+ <div class="bg-white p-4 rounded-lg shadow-sm mb-4">
598
+ <div class="flex justify-between items-start mb-2">
599
+ <h4 class="font-medium">Maori Love Song About the Ocean</h4>
600
+ <div class="flex space-x-2">
601
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-copy"></i></button>
602
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-save"></i></button>
603
+ </div>
604
+ </div>
605
+ <div class="text-gray-700 mb-2">
606
+ <p class="mb-2"><strong>English:</strong> The ocean waves call to me, carrying your love across the sea...</p>
607
+ <p><strong>Te Reo:</strong> Kei te karanga mai ngā ngaru o te moana, e mau ana tō aroha i runga i te moana...</p>
608
+ </div>
609
+ <div class="text-xs text-gray-500">Generated 5 minutes ago</div>
610
+ </div>
611
+
612
+ <div class="bg-white p-4 rounded-lg shadow-sm">
613
+ <div class="flex justify-between items-start mb-2">
614
+ <h4 class="font-medium">Rhymes for "Aroha"</h4>
615
+ <div class="flex space-x-2">
616
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-copy"></i></button>
617
+ <button class="text-indigo-600 hover:text-indigo-800"><i class="fas fa-save"></i></button>
618
+ </div>
619
+ </div>
620
+ <div class="text-gray-700 mb-2">
621
+ <ul class="list-disc pl-5">
622
+ <li>Poha (basket)</li>
623
+ <li>Koha (gift)</li>
624
+ <li>Moha (knowledge)</li>
625
+ <li>Roha (spread out)</li>
626
+ <li>Toha (distribute)</li>
627
+ </ul>
628
+ </div>
629
+ <div class="text-xs text-gray-500">Generated 1 day ago</div>
630
+ </div>
631
+ </div>
632
+
633
+ <h3 class="font-bold text-lg mb-4">AI Suggestions</h3>
634
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
635
+ <button class="bg-white border border-gray-200 rounded-lg p-4 text-left hover:bg-indigo-50 hover:border-indigo-200 transition-all">
636
+ <div class="font-medium mb-2">Write a haka for sports team</div>
637
+ <div class="text-sm text-gray-600">Generate a powerful haka with traditional elements</div>
638
+ </button>
639
+ <button class="bg-white border border-gray-200 rounded-lg p-4 text-left hover:bg-indigo-50 hover:border-indigo-200 transition-all">
640
+ <div class="font-medium mb-2">Translate common phrases</div>
641
+ <div class="text-sm text-gray-600">Get Te Reo translations for songwriting phrases</div>
642
+ </button>
643
+ <button class="bg-white border border-gray-200 rounded-lg p-4 text-left hover:bg-indigo-50 hover:border-indigo-200 transition-all">
644
+ <div class="font-medium mb-2">Suggest song structure</div>
645
+ <div class="text-sm text-gray-600">Get help organizing verses, chorus, bridge</div>
646
+ </button>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </main>
652
+
653
+ <!-- Footer -->
654
+ <footer class="bg-gray-800 text-white py-6 maori-pattern">
655
+ <div class="container mx-auto px-4">
656
+ <div class="flex flex-col md:flex-row justify-between items-center">
657
+ <div class="mb-4 md:mb-0">
658
+ <h2 class="text-xl font-bold">Maori Music Dashboard</h2>
659
+ <p class="text-gray-400">Preserving and creating taonga puoro</p>
660
+ </div>
661
+ <div class="flex space-x-6">
662
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-facebook-f"></i></a>
663
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-twitter"></i></a>
664
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-instagram"></i></a>
665
+ <a href="#" class="hover:text-indigo-300"><i class="fab fa-youtube"></i></a>
666
+ </div>
667
+ </div>
668
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
669
+ <p>© 2023 Maori Music Dashboard. All rights reserved.</p>
670
+ </div>
671
+ </div>
672
+ </footer>
673
+ </div>
674
+
675
+ <script>
676
+ // Tab functionality
677
+ document.addEventListener('DOMContentLoaded', function() {
678
+ const tabButtons = document.querySelectorAll('.tab-btn');
679
+
680
+ tabButtons.forEach(button => {
681
+ button.addEventListener('click', function() {
682
+ // Remove active class from all buttons and contents
683
+ document.querySelectorAll('.tab-btn').forEach(btn => {
684
+ btn.classList.remove('active');
685
+ btn.classList.remove('border-indigo-600');
686
+ btn.classList.remove('text-indigo-600');
687
+ });
688
+
689
+ document.querySelectorAll('.tab-content').forEach(content => {
690
+ content.classList.remove('active');
691
+ });
692
+
693
+ // Add active class to clicked button
694
+ this.classList.add('active');
695
+ this.classList.add('border-indigo-600');
696
+ this.classList.add('text-indigo-600');
697
+
698
+ // Show corresponding content
699
+ const tabId = this.getAttribute('data-tab');
700
+ document.getElementById(tabId).classList.add('active');
701
+ });
702
+ });
703
+
704
+ // Simulate audio wave animation
705
+ const waveBars = document.querySelectorAll('.wave-bar');
706
+ setInterval(() => {
707
+ waveBars.forEach(bar => {
708
+ const randomHeight = Math.random() * 30 + 10;
709
+ bar.style.height = `${randomHeight}px`;
710
+ });
711
+ }, 300);
712
+
713
+ // Demo functionality for AI generate button
714
+ const aiGenerateBtn = document.querySelector('#ai button.bg-indigo-600');
715
+ if (aiGenerateBtn) {
716
+ aiGenerateBtn.addEventListener('click', function(e) {
717
+ e.preventDefault();
718
+ alert('AI generation functionality would be implemented here with a proper backend service.');
719
+ });
720
+ }
721
+ });
722
+ </script>
723
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=XXXMARK/mamudas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
724
+ </html>
prompts.txt ADDED
File without changes