|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Māori Lyrics Generator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #1a1a1a; |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%); |
|
|
} |
|
|
|
|
|
.maori-pattern { |
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgwLDAsMCwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg=='); |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.8s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.btn-glow:hover { |
|
|
box-shadow: 0 0 15px rgba(253, 187, 45, 0.7); |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); } |
|
|
40% { transform: translateY(-20px); } |
|
|
60% { transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.lyric-card { |
|
|
transition: all 0.3s ease; |
|
|
background-color: #2d2d2d; |
|
|
} |
|
|
|
|
|
.lyric-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.dark-input { |
|
|
background-color: #2d2d2d; |
|
|
border-color: #444; |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.dark-input:focus { |
|
|
border-color: #f59e0b; |
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); |
|
|
} |
|
|
|
|
|
.dark-select { |
|
|
background-color: #2d2d2d; |
|
|
border-color: #444; |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.dark-select:focus { |
|
|
border-color: #f59e0b; |
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.dark-card { |
|
|
background-color: #2d2d2d; |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
|
|
|
.dark-btn { |
|
|
background-color: #444; |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.dark-btn:hover { |
|
|
background-color: #555; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
|
|
|
<nav class="bg-gray-800 shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-music text-2xl text-yellow-500 mr-2"></i> |
|
|
<span class="text-xl font-bold text-white">Māori Lyrics Generator</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#" class="text-white hover:text-yellow-500 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="text-gray-300 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Generator</a> |
|
|
<a href="#" class="text-gray-300 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Resources</a> |
|
|
<a href="#" class="text-gray-300 hover:text-yellow-500 px-3 py-2 text-sm font-medium">About</a> |
|
|
<a href="#" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Sign In</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-yellow-500"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-gradient maori-pattern relative overflow-hidden"> |
|
|
<div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8 relative z-10"> |
|
|
<div class="text-center fade-in"> |
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-white tracking-tight"> |
|
|
<span class="block">Māori Lyrics Generator</span> |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg mx-auto text-xl text-white opacity-90"> |
|
|
Fusing tradition with technology to celebrate Māori culture through music |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4"> |
|
|
<a href="#generator" class="bg-white text-yellow-600 hover:bg-gray-100 px-8 py-3 rounded-md text-lg font-semibold transition duration-300 btn-glow"> |
|
|
Generate Lyrics |
|
|
</a> |
|
|
<a href="#learn" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-yellow-600 px-8 py-3 rounded-md text-lg font-semibold transition duration-300"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 flex justify-center pb-4"> |
|
|
<a href="#generator" class="text-white scroll-down"> |
|
|
<i class="fas fa-chevron-down text-2xl animate-bounce"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="generator" class="py-16 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12 fade-in"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
Create Your Māori Lyrics |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> |
|
|
Customize your lyrics with themes, emotions, and styles that resonate with Māori traditions |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 fade-in"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-gray-800 p-6 rounded-lg shadow-md"> |
|
|
<h3 class="text-xl font-semibold text-white mb-6">Generator Settings</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label for="theme" class="block text-sm font-medium text-gray-300">Theme</label> |
|
|
<select id="theme" class="dark-select mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm rounded-md"> |
|
|
<option value="nature">Nature (Taiao)</option> |
|
|
<option value="ancestors">Ancestors (Tīpuna)</option> |
|
|
<option value="love">Love (Aroha)</option> |
|
|
<option value="war">War (Pakanga)</option> |
|
|
<option value="unity">Unity (Kotahitanga)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="style" class="block text-sm font-medium text-gray-300">Style</label> |
|
|
<select id="style" class="dark-select mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm rounded-md"> |
|
|
<option value="waiata">Waiata (Traditional Song)</option> |
|
|
<option value="haka">Haka (War Dance)</option> |
|
|
<option value="modern">Modern Fusion</option> |
|
|
<option value="lullaby">Lullaby (Oriori)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="emotion" class="block text-sm font-medium text-gray-300">Emotion</label> |
|
|
<select id="emotion" class="dark-select mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm rounded-md"> |
|
|
<option value="joyful">Joyful (Harikoa)</option> |
|
|
<option value="solemn">Solemn (Pūmau)</option> |
|
|
<option value="powerful">Powerful (Kaha)</option> |
|
|
<option value="peaceful">Peaceful (Rangimārie)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="length" class="block text-sm font-medium text-gray-300">Length</label> |
|
|
<select id="length" class="dark-select mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm rounded-md"> |
|
|
<option value="short">Short (2-4 lines)</option> |
|
|
<option value="medium" selected>Medium (4-8 lines)</option> |
|
|
<option value="long">Long (8-12 lines)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button id="generate-btn" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-3 px-4 rounded-md font-medium transition duration-300 btn-glow"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Lyrics |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-gray-800 p-6 rounded-lg shadow-md h-full"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-semibold text-white">Generated Lyrics</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="save-btn" class="dark-btn hover:bg-gray-700 text-gray-300 p-2 rounded-md tooltip"> |
|
|
<i class="fas fa-save"></i> |
|
|
<span class="tooltip-text">Save to your collection</span> |
|
|
</button> |
|
|
<button id="translate-btn" class="dark-btn hover:bg-gray-700 text-gray-300 p-2 rounded-md tooltip"> |
|
|
<i class="fas fa-language"></i> |
|
|
<span class="tooltip-text">Show English translation</span> |
|
|
</button> |
|
|
<button id="audio-btn" class="dark-btn hover:bg-gray-700 text-gray-300 p-2 rounded-md tooltip"> |
|
|
<i class="fas fa-volume-up"></i> |
|
|
<span class="tooltip-text">Listen to pronunciation</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="loading" class="hidden text-center py-12"> |
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-yellow-500 mx-auto"></div> |
|
|
<p class="mt-4 text-gray-400">Creating your Māori lyrics...</p> |
|
|
</div> |
|
|
|
|
|
<div id="results" class="hidden"> |
|
|
<div class="bg-gray-700 p-6 rounded-md shadow-sm lyric-card"> |
|
|
<div id="maori-lyrics" class="text-lg text-white font-medium mb-4"> |
|
|
|
|
|
</div> |
|
|
<div id="english-translation" class="hidden text-gray-300 italic border-l-4 border-yellow-500 pl-4 py-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-gray-700 p-4 rounded-md shadow-sm"> |
|
|
<h4 class="font-medium text-white mb-2">Cultural Context</h4> |
|
|
<p id="cultural-context" class="text-gray-300 text-sm"> |
|
|
|
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button id="regenerate-btn" class="dark-btn hover:bg-gray-700 text-gray-300 px-4 py-2 rounded-md text-sm font-medium"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Regenerate |
|
|
</button> |
|
|
<button id="download-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-md text-sm font-medium"> |
|
|
<i class="fas fa-download mr-1"></i> Download |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="placeholder" class="text-center py-12"> |
|
|
<i class="fas fa-music text-4xl text-gray-600 mb-4"></i> |
|
|
<h4 class="text-lg font-medium text-gray-400">No lyrics generated yet</h4> |
|
|
<p class="text-gray-500 mt-2">Customize your settings and click "Generate Lyrics" to begin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="learn" class="py-16 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12 fade-in"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
Explore Māori Musical Traditions |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> |
|
|
Learn about the rich cultural heritage behind Māori music and lyrics |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 fade-in"> |
|
|
<div class="text-yellow-500 text-3xl mb-4"> |
|
|
<i class="fas fa-book-open"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Waiata Traditions</h3> |
|
|
<p class="text-gray-300"> |
|
|
Waiata are traditional Māori songs that carry history, knowledge, and emotions. They serve as oral records of tribal history and express spiritual and emotional concepts. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-flex items-center text-yellow-400 hover:text-yellow-300 font-medium"> |
|
|
Learn more <i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 fade-in"> |
|
|
<div class="text-yellow-500 text-3xl mb-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Haka Performance</h3> |
|
|
<p class="text-gray-300"> |
|
|
The haka is a ceremonial dance that combines vigorous movements, rhythmic foot-stamping, and loud chanting. It's performed for various occasions including welcomes and challenges. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-flex items-center text-yellow-400 hover:text-yellow-300 font-medium"> |
|
|
Learn more <i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 fade-in"> |
|
|
<div class="text-yellow-500 text-3xl mb-4"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-white mb-3">Te Reo Māori</h3> |
|
|
<p class="text-gray-300"> |
|
|
Te Reo Māori is the indigenous language of New Zealand. Our generator helps preserve this taonga (treasure) by creating authentic lyrics while teaching proper pronunciation. |
|
|
</p> |
|
|
<a href="#" class="mt-4 inline-flex items-center text-yellow-400 hover:text-yellow-300 font-medium"> |
|
|
Learn more <i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center fade-in"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 transition duration-300"> |
|
|
Explore All Resources <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
|
|
<div class="mb-8 lg:mb-0 fade-in"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
Join Our Growing Community |
|
|
</h2> |
|
|
<p class="mt-4 text-lg text-gray-300"> |
|
|
Connect with other creators, share your compositions, and collaborate on projects that celebrate Māori culture through music. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-yellow-900 rounded-full p-2"> |
|
|
<i class="fas fa-users text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">500+ active creators</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-yellow-900 rounded-full p-2"> |
|
|
<i class="fas fa-music text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">1,200+ lyrics generated</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-yellow-900 rounded-full p-2"> |
|
|
<i class="fas fa-comment text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">Cultural experts available for guidance</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-6 rounded-lg shadow-md fade-in"> |
|
|
<h3 class="text-xl font-semibold text-white mb-4">Featured Composition</h3> |
|
|
<div class="bg-gray-700 p-4 rounded-md shadow-sm mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">Sarah K.</p> |
|
|
<p class="text-sm text-gray-400">Created 3 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-gray-200"> |
|
|
<p class="font-medium">"Te Aroha" - A modern waiata about love and connection</p> |
|
|
<p class="mt-2 italic">"Ko te aroha te wai e ora ai te tangata..."</p> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm text-gray-400"> |
|
|
<i class="fas fa-heart text-red-400 mr-1"></i> 24 likes |
|
|
<span class="mx-2">•</span> |
|
|
<i class="fas fa-comment text-gray-400 mr-1"></i> 5 comments |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 transition duration-300"> |
|
|
View Community Creations <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-gray-300 pt-12 pb-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div class="col-span-2"> |
|
|
<h3 class="text-lg font-semibold text-white mb-4">Māori Lyrics Generator</h3> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
A platform dedicated to preserving and celebrating Māori culture through the power of music and language. |
|
|
</p> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Te Reo Māori Guide</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Cultural Protocols</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Pronunciation Guide</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Song Structures</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-200 uppercase tracking-wider mb-4">About</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Our Mission</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Cultural Advisors</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact Us</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-8 border-t border-gray-700 text-sm text-gray-500 text-center"> |
|
|
<p>© 2023 Māori Lyrics Generator. All rights reserved.</p> |
|
|
<p class="mt-2">Created with respect for Māori culture and traditions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const sampleLyrics = { |
|
|
nature: { |
|
|
waiata: { |
|
|
joyful: [ |
|
|
"E rere e te ao mārama", |
|
|
"Ko ngā manu e kōwhiti nei", |
|
|
"Te waiata o te taiao", |
|
|
"He aroha, he harikoa" |
|
|
], |
|
|
peaceful: [ |
|
|
"Te moana e takoto ana", |
|
|
"Te maunga e tū mai rā", |
|
|
"Ko ngā mea katoa e noho tahi ana", |
|
|
"He wairua rangimārie" |
|
|
] |
|
|
}, |
|
|
haka: { |
|
|
powerful: [ |
|
|
"Whakarongo! E ngā iwi!", |
|
|
"Ko te whenua e karanga nei!", |
|
|
"Kia kaha, kia māia!", |
|
|
"Kia manawanui!" |
|
|
] |
|
|
} |
|
|
}, |
|
|
ancestors: { |
|
|
waiata: { |
|
|
solemn: [ |
|
|
"E ngā tīpuna e moe nei", |
|
|
"Kei te kapo atu mātou ki ō koutou māramatanga", |
|
|
"Hei arahi i a mātou", |
|
|
"I ngā rā e heke mai nei" |
|
|
] |
|
|
} |
|
|
}, |
|
|
love: { |
|
|
waiata: { |
|
|
joyful: [ |
|
|
"E hine e, ko koe taku aroha", |
|
|
"Ko koe taku pōtiki", |
|
|
"Te hiahia o taku ngākau", |
|
|
"Mō ake tonu atu" |
|
|
] |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
const translations = { |
|
|
nature: { |
|
|
waiata: { |
|
|
joyful: [ |
|
|
"Fly, oh bright world", |
|
|
"The birds that dart about", |
|
|
"The song of nature", |
|
|
"Is love, is joy" |
|
|
], |
|
|
peaceful: [ |
|
|
"The ocean lies calm", |
|
|
"The mountain stands there", |
|
|
"All things live together", |
|
|
"In a peaceful spirit" |
|
|
] |
|
|
}, |
|
|
haka: { |
|
|
powerful: [ |
|
|
"Listen! O people!", |
|
|
"The land calls out!", |
|
|
"Be strong, be brave!", |
|
|
"Be steadfast!" |
|
|
] |
|
|
} |
|
|
}, |
|
|
ancestors: { |
|
|
waiata: { |
|
|
solemn: [ |
|
|
"Oh ancestors who sleep here", |
|
|
"We reach for your wisdom", |
|
|
"To guide us", |
|
|
"In the days to come" |
|
|
] |
|
|
} |
|
|
}, |
|
|
love: { |
|
|
waiata: { |
|
|
joyful: [ |
|
|
"Oh girl, you are my love", |
|
|
"You are my darling", |
|
|
"The desire of my heart", |
|
|
"Forever more" |
|
|
] |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
const culturalContexts = { |
|
|
nature: { |
|
|
waiata: { |
|
|
joyful: "This waiata celebrates the beauty of nature (taiao) in Māori tradition. Nature is seen as a living entity with its own wairua (spirit). The joyful tone reflects the Māori concept of connection between people and the natural world.", |
|
|
peaceful: "This peaceful waiata reflects the Māori worldview of harmony with nature. Mountains (maunga) and oceans (moana) are considered ancestors in Māori cosmology, and their presence brings a sense of tranquility." |
|
|
}, |
|
|
haka: { |
|
|
powerful: "This haka-style chant connects people to the land (whenua), a fundamental concept in Māori culture. The powerful delivery is typical of haka performances, which can express a range of emotions from challenge to welcome." |
|
|
} |
|
|
}, |
|
|
ancestors: { |
|
|
waiata: { |
|
|
solemn: "This waiata honors ancestors (tīpuna), who are considered ever-present guides in Māori tradition. The solemn tone reflects the deep respect for those who have passed on but continue to influence the living." |
|
|
} |
|
|
}, |
|
|
love: { |
|
|
waiata: { |
|
|
joyful: "This love song (waiata aroha) expresses deep affection in the Māori tradition. Such songs were traditionally composed to express personal emotions and were often performed with great feeling." |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('generate-btn').addEventListener('click', function() { |
|
|
const theme = document.getElementById('theme').value; |
|
|
const style = document.getElementById('style').value; |
|
|
const emotion = document.getElementById('emotion').value; |
|
|
|
|
|
|
|
|
document.getElementById('loading').classList.remove('hidden'); |
|
|
document.getElementById('results').classList.add('hidden'); |
|
|
document.getElementById('placeholder').classList.add('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('english-translation').classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
document.getElementById('loading').classList.add('hidden'); |
|
|
|
|
|
|
|
|
if (sampleLyrics[theme] && sampleLyrics[theme][style] && sampleLyrics[theme][style][emotion]) { |
|
|
const lyrics = sampleLyrics[theme][style][emotion]; |
|
|
const translation = translations[theme][style][emotion]; |
|
|
const context = culturalContexts[theme][style][emotion]; |
|
|
|
|
|
|
|
|
const maoriLyricsElement = document.getElementById('maori-lyrics'); |
|
|
maoriLyricsElement.innerHTML = ''; |
|
|
lyrics.forEach(line => { |
|
|
const p = document.createElement('p'); |
|
|
p.textContent = line; |
|
|
p.classList.add('mb-2'); |
|
|
maoriLyricsElement.appendChild(p); |
|
|
}); |
|
|
|
|
|
|
|
|
const englishElement = document.getElementById('english-translation'); |
|
|
englishElement.innerHTML = ''; |
|
|
translation.forEach(line => { |
|
|
const p = document.createElement('p'); |
|
|
p.textContent = line; |
|
|
p.classList.add('mb-2'); |
|
|
englishElement.appendChild(p); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('cultural-context').textContent = context; |
|
|
|
|
|
|
|
|
document.getElementById('results').classList.remove('hidden'); |
|
|
} else { |
|
|
|
|
|
document.getElementById('maori-lyrics').innerHTML = ` |
|
|
<p class="mb-2">Kāore he kupu mō tēnei kōwhiringa i tēnei wā.</p> |
|
|
<p>Kia hoki ki te kōwhiringa kē.</p> |
|
|
`; |
|
|
document.getElementById('english-translation').innerHTML = ` |
|
|
<p class="mb-2">No words available for this combination at this time.</p> |
|
|
<p>Please try a different combination.</p> |
|
|
`; |
|
|
document.getElementById('cultural-context').textContent = "Our apologies, this combination of theme, style and emotion doesn't have sample content yet. Our team is working to expand the database."; |
|
|
document.getElementById('results').classList.remove('hidden'); |
|
|
} |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('translate-btn').addEventListener('click', function() { |
|
|
const translation = document.getElementById('english-translation'); |
|
|
translation.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('audio-btn').addEventListener('click', function() { |
|
|
alert('Audio pronunciation feature would play the lyrics in te reo Māori.'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('save-btn').addEventListener('click', function() { |
|
|
alert('This would save the lyrics to your account collection.'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('download-btn').addEventListener('click', function() { |
|
|
alert('This would download the lyrics as a text file.'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('regenerate-btn').addEventListener('click', function() { |
|
|
document.getElementById('generate-btn').click(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const fadeElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
const fadeObserver = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('opacity-100', 'translate-y-0'); |
|
|
fadeObserver.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
fadeElements.forEach(element => { |
|
|
element.classList.add('opacity-0', 'translate-y-4', 'transition-all', 'duration-500'); |
|
|
fadeObserver.observe(element); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<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/ma-lyric" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
