Spaces:
Running
Running
File size: 4,749 Bytes
fc0073f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sequencer - SynthWave Studio</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<custom-navbar></custom-navbar>
<div class="container mx-auto px-4 py-8">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-gray-400 to-white bg-clip-text text-transparent">
Sequencer
</h1>
<p class="text-gray-400 text-lg max-w-2xl mx-auto">
Create patterns and sequences with your synthesizer
</p>
</header>
<div class="bg-gray-800 rounded-xl p-6 shadow-2xl mb-8">
<div class="flex flex-wrap justify-between items-center mb-6">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<button id="play-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
<i data-feather="play"></i>
</button>
<button id="stop-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-3 rounded-full">
<i data-feather="square"></i>
</button>
<div class="flex items-center">
<span class="mr-2 text-gray-400">Tempo:</span>
<input type="number" id="tempo" value="120" min="40" max="240"
class="w-20 bg-gray-700 text-white rounded p-2 text-center">
</div>
</div>
<div class="flex space-x-2">
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
<i data-feather="save" class="mr-1"></i> Save
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">
<i data-feather="download" class="mr-1"></i> Export
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr>
<th class="p-2 text-left text-gray-400">Step</th>
<th class="p-2 text-center" colspan="16">Sequence</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-2 text-gray-400">C4</td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<td class="p-1"><button class="w-full h-8 bg-gray-700 hover:bg-gray-600 rounded"></button></td>
<...... NEW_FILE_START about.html >>>>>>> NEW_FILE_END
</body>
</html> |