Spaces:

djwugee
/

sf-06c

Running

App Files Files Community

djwugee commited on Mar 11, 2024

Commit

d8f2f36

verified ·

1 Parent(s): bd166dc

Add 1 files

Browse files

Files changed (1) hide show

index.html +41 -19

index.html CHANGED Viewed

@@ -1,19 +1,41 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Wavesurfer</title></head><body style="min-height: 100vh; font-family: sans-serif;padding: 20px; background-color: #f7f7f7;">
+    <div>
+        <div x-data="{ activeTrack: null }">
+          <div>
+            <h1>Wavesurfer</h1>
+            <div class="mt-4">
+              <button class="btn">Add track</button>
+            </div>
+            <div class="mt-4">
+              <button class="btn" @click="play">
+                <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
+                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                </svg>
+              </button>
+              <button class="btn ml-2" @click="stop">
+                <svg class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
+                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8zM4 5a2 2 0 012-2h4a2 2 0 012 2v6H4V5z" clip-rule="evenodd" />
+                </svg>
+              </button>
+            </div>
+            <div class="mt-6 flex flex-wrap justify-around">
+              <div v-for="(track, key) in tracks" :class="[key == activeTrack ? 'bg-gray-200' : '']">
+                <button class="btn w-1/2 text-left pr-2" @click="activeTrack = key">{{ track.name }}</button>
+                <div class="mt-4 -mx-2 flex justify-between items-center">
+                 <label>Solo</label>
+                 <input class="ml-2 mr-4" type="checkbox" :checked="track.solo" @input="track.solo = !track.solo" />
+                 <label>Mute</label>
+                 <input class="ml-2 mr-4" type="checkbox" :checked="track.mute" @input="track.mute = !track.mute" />
+                 <label>Pan</label>
+                 <input class="ml-2 mr-4" type="range" min="0" max="1" step="0.05" :value="track.pan" @input="track.pan = (event.target.value)" />
+                 <label>Volume</label>
+                 <input class="ml-2 mr-4" type="range" min="0" max="1" step="0.05" :value="track.gain" @input="track.gain = (event.target.value)" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+</body></html>