|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Music Workstation | Digital Music Creation Suite</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: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
|
|
color: #e2e8f0; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.instrument-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: linear-gradient(90deg, #38bdf8, #818cf8); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active-nav::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.sound-wave { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(56, 189, 248, 0.1)" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); |
|
|
background-size: cover; |
|
|
background-repeat: no-repeat; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<header class="py-6 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-music text-3xl gradient-text"></i> |
|
|
<h1 class="text-2xl font-bold gradient-text">Music Workstation</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link active-nav text-white font-medium">Home</a> |
|
|
<a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Instruments</a> |
|
|
<a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Tools</a> |
|
|
<a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Library</a> |
|
|
<a href="#" class="nav-link text-gray-400 hover:text-white font-medium">Community</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="px-4 py-2 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-medium hover:from-blue-500 hover:to-indigo-600 transition-all"> |
|
|
Sign In |
|
|
</button> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="container mx-auto flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 leading-tight"> |
|
|
Your ultimate <span class="gradient-text">digital platform</span> for music creation |
|
|
</h2> |
|
|
<p class="text-lg text-gray-300 mb-8 max-w-lg"> |
|
|
This powerful suite combines advanced instruments, AI-driven tools, and a vast sound library to facilitate music creation, editing, and sharing. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-medium hover:from-blue-500 hover:to-indigo-600 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Start Creating |
|
|
</button> |
|
|
<button class="px-6 py-3 rounded-full bg-gray-800 text-white font-medium hover:bg-gray-700 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-book mr-2"></i> Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 relative"> |
|
|
<div class="relative bg-gray-800 bg-opacity-50 rounded-2xl p-6 backdrop-blur-lg border border-gray-700"> |
|
|
<div class="absolute inset-0 rounded-2xl border-2 border-transparent border-dashed border-opacity-20 animate-pulse"></div> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="text-gray-400 text-sm">Music Workstation v2.4</div> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded-lg p-4 mb-4"> |
|
|
<div class="flex items-center space-x-3 mb-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">New Project</div> |
|
|
<div class="text-xs text-gray-400">Unsaved session</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-40 bg-gray-800 rounded flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-sliders-h text-3xl text-indigo-400 mb-2"></i> |
|
|
<p class="text-gray-400 text-sm">Drag instruments here to start</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
<div class="bg-gray-700 rounded p-2 text-center"> |
|
|
<i class="fas fa-piano-keyboard text-xl mb-1 text-blue-400"></i> |
|
|
<div class="text-xs">Piano</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded p-2 text-center"> |
|
|
<i class="fas fa-guitar text-xl mb-1 text-purple-400"></i> |
|
|
<div class="text-xs">Guitar</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded p-2 text-center"> |
|
|
<i class="fas fa-drum text-xl mb-1 text-yellow-400"></i> |
|
|
<div class="text-xs">Drums</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded p-2 text-center"> |
|
|
<i class="fas fa-microphone text-xl mb-1 text-red-400"></i> |
|
|
<div class="text-xs">Vocals</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="sound-wave"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="container mx-auto"> |
|
|
|
|
|
<div class="flex flex-wrap border-b border-gray-700 mb-8"> |
|
|
<button class="tab-btn px-6 py-3 font-medium text-white border-b-2 border-blue-400" data-tab="instruments"> |
|
|
<i class="fas fa-guitar mr-2"></i> Main Instruments |
|
|
</button> |
|
|
<button class="tab-btn px-6 py-3 font-medium text-gray-400 hover:text-white" data-tab="tools"> |
|
|
<i class="fas fa-tools mr-2"></i> Production Tools |
|
|
</button> |
|
|
<button class="tab-btn px-6 py-3 font-medium text-gray-400 hover:text-white" data-tab="library"> |
|
|
<i class="fas fa-music mr-2"></i> Sound Library |
|
|
</button> |
|
|
<button class="tab-btn px-6 py-3 font-medium text-gray-400 hover:text-white" data-tab="quickstart"> |
|
|
<i class="fas fa-rocket mr-2"></i> Quick Start |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="instruments" class="tab-content active"> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text">Main Instruments</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="instrument-card bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700 border border-gray-700"> |
|
|
<div class="w-12 h-12 rounded-lg bg-blue-900 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-piano-keyboard text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Piano Studio</h3> |
|
|
<p class="text-gray-400 mb-4">Experience a virtual piano with weighted key simulation, offering various piano sounds and acoustics, along with recording and playback features.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 text-xs rounded">88 keys</span> |
|
|
<span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 text-xs rounded">5 piano types</span> |
|
|
<span class="px-2 py-1 bg-blue-900 bg-opacity-50 text-blue-300 text-xs rounded">Recording</span> |
|
|
</div> |
|
|
<button class="w-full py-2 rounded-lg bg-blue-900 bg-opacity-30 text-blue-400 hover:bg-opacity-50 transition-all"> |
|
|
Open Piano |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="instrument-card bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700 border border-gray-700"> |
|
|
<div class="w-12 h-12 rounded-lg bg-purple-900 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-guitar text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Acoustic Guitar Lab</h3> |
|
|
<p class="text-gray-400 mb-4">Enjoy realistic string dynamics with multiple guitar models and tunings, including strumming and fingerpicking patterns.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 text-xs rounded">6/12 string</span> |
|
|
<span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 text-xs rounded">15 tunings</span> |
|
|
<span class="px-2 py-1 bg-purple-900 bg-opacity-50 text-purple-300 text-xs rounded">Strum patterns</span> |
|
|
</div> |
|
|
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-purple-400 hover:bg-opacity-50 transition-all"> |
|
|
Open Guitar |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="instrument-card bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700 border border-gray-700"> |
|
|
<div class="w-12 h-12 rounded-lg bg-yellow-900 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-drum text-yellow-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Drum Station</h3> |
|
|
<p class="text-gray-400 mb-4">Access a complete drum kit with customizable pieces, a rhythm patterns library, and a beat matching assistant.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 text-xs rounded">20 kits</span> |
|
|
<span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 text-xs rounded">100+ patterns</span> |
|
|
<span class="px-2 py-1 bg-yellow-900 bg-opacity-50 text-yellow-300 text-xs rounded">Beat matching</span> |
|
|
</div> |
|
|
<button class="w-full py-2 rounded-lg bg-yellow-900 bg-opacity-30 text-yellow-400 hover:bg-opacity-50 transition-all"> |
|
|
Open Drums |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="instrument-card bg-gray-800 rounded-xl p-6 transition-all duration-300 hover:bg-gray-700 border border-gray-700"> |
|
|
<div class="w-12 h-12 rounded-lg bg-pink-900 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-sliders-h text-pink-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">DJ Console</h3> |
|
|
<p class="text-gray-400 mb-4">Utilize a BPM counter and tempo sync, track mixing and crossfading, and real-time effects processing.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-2 py-1 bg-pink-900 bg-opacity-50 text-pink-300 text-xs rounded">2 decks</span> |
|
|
<span class="px-2 py-1 bg-pink-900 bg-opacity-50 text-pink-300 text-xs rounded">10+ effects</span> |
|
|
<span class="px-2 py-1 bg-pink-900 bg-opacity-50 text-pink-300 text-xs rounded">Auto sync</span> |
|
|
</div> |
|
|
<button class="w-full py-2 rounded-lg bg-pink-900 bg-opacity-30 text-pink-400 hover:bg-opacity-50 transition-all"> |
|
|
Open Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tools" class="tab-content"> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text">Production Tools</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-10 h-10 rounded-lg bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-wave-square text-blue-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Audio Editor</h3> |
|
|
<p class="text-gray-400 text-sm">Professional waveform manipulation</p> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> |
|
|
<span>Waveform editing</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> |
|
|
<span>Volume and sound manipulation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-blue-400 mr-2"></i> |
|
|
<span>Multi-track mixing</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-2 rounded-lg bg-blue-900 bg-opacity-30 text-blue-400 hover:bg-opacity-50 transition-all"> |
|
|
Launch Editor |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-10 h-10 rounded-lg bg-purple-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-exchange-alt text-purple-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Media Converter</h3> |
|
|
<p class="text-gray-400 text-sm">Transform between formats</p> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-purple-400 mr-2"></i> |
|
|
<span>Extract audio from video</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-purple-400 mr-2"></i> |
|
|
<span>Visualize audio as video</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-purple-400 mr-2"></i> |
|
|
<span>Format conversion tools</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-purple-400 hover:bg-opacity-50 transition-all"> |
|
|
Launch Converter |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-10 h-10 rounded-lg bg-green-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-robot text-green-400"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">AI Music Generator</h3> |
|
|
<p class="text-gray-400 text-sm">Powered by advanced algorithms</p> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>Transform text into music</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>Style transfer and adaptation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>Automatic accompaniment</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full py-2 rounded-lg bg-green-900 bg-opacity-30 text-green-400 hover:bg-opacity-50 transition-all"> |
|
|
Launch AI Generator |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="library" class="tab-content"> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text">Sound Library</h2> |
|
|
|
|
|
<div class="mb-12"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-white">Traditional Instruments</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-orange-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-om text-orange-400"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold">Indian Classical</h4> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-orange-900 bg-opacity-30 text-orange-300 text-sm rounded-full">Sitar</span> |
|
|
<span class="px-3 py-1 bg-orange-900 bg-opacity-30 text-orange-300 text-sm rounded-full">Tabla</span> |
|
|
<span class="px-3 py-1 bg-orange-900 bg-opacity-30 text-orange-300 text-sm rounded-full">Harmonium</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-torii-gate text-red-400"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold">East Asian</h4> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-red-900 bg-opacity-30 text-red-300 text-sm rounded-full">Guzheng</span> |
|
|
<span class="px-3 py-1 bg-red-900 bg-opacity-30 text-red-300 text-sm rounded-full">Shamisen</span> |
|
|
<span class="px-3 py-1 bg-red-900 bg-opacity-30 text-red-300 text-sm rounded-full">Gamelan</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-globe-africa text-yellow-400"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold">African</h4> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-yellow-900 bg-opacity-30 text-yellow-300 text-sm rounded-full">Djembe</span> |
|
|
<span class="px-3 py-1 bg-yellow-900 bg-opacity-30 text-yellow-300 text-sm rounded-full">Talking Drum</span> |
|
|
<span class="px-3 py-1 bg-yellow-900 bg-opacity-30 text-yellow-300 text-sm rounded-full">Kalimba</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-4 text-white">Modern Instruments</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-bolt text-blue-400"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold">Electronic</h4> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-30 text-blue-300 text-sm rounded-full">Synthesizers</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-30 text-blue-300 text-sm rounded-full">Drum Machines</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-30 text-blue-300 text-sm rounded-full">Digital Wind</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-30 text-blue-300 text-sm rounded-full">Bass Synths</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-30 text-blue-300 text-sm rounded-full">Pad Generators</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-violin text-purple-400"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-bold">Orchestral</h4> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-30 text-purple-300 text-sm rounded-full">Strings</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-30 text-purple-300 text-sm rounded-full">Brass</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-30 text-purple-300 text-sm rounded-full">Woodwinds</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-30 text-purple-300 text-sm rounded-full">Percussion</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-30 text-purple-300 text-sm rounded-full">Choir</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quickstart" class="tab-content"> |
|
|
<h2 class="text-3xl font-bold mb-8 gradient-text">Quick Start Guide</h2> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-8"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0 md:pr-6"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-white">Get Started in 4 Easy Steps</h3> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
Follow this simple guide to begin your music creation journey with Music Workstation. |
|
|
</p> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<span class="text-indigo-400 font-bold">1</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Select an instrument</h4> |
|
|
<p class="text-gray-400 text-sm">or start with AI generation</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<span class="text-indigo-400 font-bold">2</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Record your music</h4> |
|
|
<p class="text-gray-400 text-sm">or import existing files</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<span class="text-indigo-400 font-bold">3</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Edit and mix</h4> |
|
|
<p class="text-gray-400 text-sm">using the production tools</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<span class="text-indigo-400 font-bold">4</span> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Export your creation</h4> |
|
|
<p class="text-gray-400 text-sm">in your preferred format</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-900 rounded-lg p-6 h-full"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-headphones text-indigo-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Quick Start Video</h4> |
|
|
<p class="text-gray-400 text-sm">Watch our 3-minute tutorial</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg aspect-video flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-play-circle text-5xl text-indigo-400 opacity-50"></i> |
|
|
</div> |
|
|
<button class="w-full py-3 rounded-lg bg-indigo-900 bg-opacity-30 text-indigo-400 hover:bg-opacity-50 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Play Tutorial |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-question-circle text-blue-400 mr-3"></i> |
|
|
<span>Need Help?</span> |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Our comprehensive documentation covers all features and includes troubleshooting guides. |
|
|
</p> |
|
|
<button class="w-full py-2 rounded-lg bg-blue-900 bg-opacity-30 text-blue-400 hover:bg-opacity-50 transition-all"> |
|
|
Visit Help Center |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-users text-purple-400 mr-3"></i> |
|
|
<span>Join Community</span> |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Connect with other musicians, share your creations, and get feedback from our growing community. |
|
|
</p> |
|
|
<button class="w-full py-2 rounded-lg bg-purple-900 bg-opacity-30 text-purple-400 hover:bg-opacity-50 transition-all"> |
|
|
Join Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i class="fas fa-music text-2xl gradient-text"></i> |
|
|
<h3 class="text-xl font-bold gradient-text">Music Workstation</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Your ultimate digital platform for music creation, editing, and sharing. |
|
|
</p> |
|
|
<div class="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> |
|
|
<h4 class="text-lg font-bold mb-4 text-white">Products</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Music Workstation Pro</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Mobile App</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Plugins</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Sound Packs</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4 text-white">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4 text-white">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0"> |
|
|
© 2023 Music Workstation. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const tabButtons = document.querySelectorAll('.tab-btn'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
|
|
tabButtons.forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
|
|
|
tabButtons.forEach(btn => { |
|
|
btn.classList.remove('border-b-2', 'border-blue-400', 'text-white'); |
|
|
btn.classList.add('text-gray-400'); |
|
|
}); |
|
|
|
|
|
tabContents.forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.remove('text-gray-400'); |
|
|
this.classList.add('border-b-2', 'border-blue-400', 'text-white'); |
|
|
|
|
|
|
|
|
const tabId = this.getAttribute('data-tab'); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
tabButtons[0].click(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden'); |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = '1'; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.instrument-card').forEach(card => { |
|
|
card.style.opacity = '0'; |
|
|
card.style.transform = 'translateY(20px)'; |
|
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
|
|
observer.observe(card); |
|
|
}); |
|
|
}); |
|
|
</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/maim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
|
|
|
