Spaces:

bibihezibra
/

voiceforge-audio-studio

Running

App Files Files Community

voiceforge-audio-studio / index.html

bibihezibra

Build a web app for recording audio translations with these features:

7050e07 verified 6 months ago

raw

history blame contribute delete

10.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>VoiceForge Audio Studio</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<nav-bar class="bg-white shadow-sm border-b border-gray-200"></nav-bar>

	<main id="app-content" class="container mx-auto px-4 py-8 max-w-6xl">
	<!-- Dashboard Content -->
	<div id="dashboard-view" class="space-y-6">
	<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
	<h1 class="text-2xl font-bold text-gray-800 mb-6">Dashboard</h1>

	<div class="grid md:grid-cols-3 gap-4 mb-6">
	<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-blue-600 text-sm font-medium">Total Earnings</p>
	<p class="text-2xl font-bold text-blue-900">€<span id="total-earnings">0.00</span></p>
	</div>
	<i data-feather="dollar-sign" class="w-8 h-8 text-blue-500"></i>
	</div>
	</div>

	<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-green-600 text-sm font-medium">Completed Recordings</p>
	<p class="text-2xl font-bold text-green-900"><span id="completed-count">0</span></p>
	</div>
	<i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
	</div>
	</div>

	<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-purple-600 text-sm font-medium">Pending Review</p>
	<p class="text-2xl font-bold text-purple-900"><span id="pending-count">0</span></p>
	</div>
	<i data-feather="clock" class="w-8 h-8 text-purple-500"></i>
	</div>
	</div>
	</div>

	<div class="flex flex-col sm:flex-row gap-4">
	<button id="start-recording-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
	<i data-feather="mic" class="w-5 h-5"></i>
	Start Recording Session
	</button>
	<button id="recent-recordings-btn" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
	<i data-feather="list" class="w-5 h-5"></i>
	View Recent Work
	</button>
	</div>
	</div>

	<div id="recent-work" class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hidden">
	<h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Recordings</h2>
	<div id="recent-list" class="space-y-3">
	<!-- Recent recordings will be populated here -->
	</div>
	</div>
	</div>

	<!-- Recording Interface -->
	<div id="recording-view" class="hidden">
	<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
	<!-- Progress Bar -->
	<div class="mb-6">
	<div class="flex justify-between items-center mb-2">
	<span class="text-sm font-medium text-gray-600">Progress</span>
	<span class="text-sm font-medium text-gray-600"><span id="current-sentence">1</span> of 10</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2">
	<div id="progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 10%"></div>
	</div>
	</div>

	<!-- French Sentence Display -->
	<div class="mb-8">
	<h3 class="text-sm font-medium text-gray-600 mb-2">French Sentence to Translate:</h3>
	<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
	<p id="french-sentence" class="text-lg text-gray-800 leading-relaxed">Loading...</p>
	</div>
	</div>

	<!-- Audio Player for Reference -->
	<div class="mb-8">
	<h3 class="text-sm font-medium text-gray-600 mb-2">French Audio Reference:</h3>
	<audio id="french-audio" controls class="w-full">
	Your browser does not support the audio element.
	</audio>
	</div>

	<!-- Recording Controls -->
	<div class="space-y-4">
	<div class="flex justify-center">
	<button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white rounded-full p-8 transition duration-200 transform hover:scale-105 shadow-lg">
	<i data-feather="mic" class="w-12 h-12"></i>
	</button>
	</div>

	<div id="recording-indicator" class="hidden text-center">
	<span class="inline-flex items-center gap-2 text-red-500 font-medium">
	<span class="animate-pulse">●</span>
	Recording...
	<span id="recording-timer">00:00</span>
	</span>
	</div>

	<!-- Pulaar Audio Player -->
	<div id="pulaar-audio-section" class="hidden">
	<h3 class="text-sm font-medium text-gray-600 mb-2">Your Pulaar Recording:</h3>
	<audio id="pulaar-audio" controls class="w-full mb-4">
	Your browser does not support the audio element.
	</audio>
	</div>

	<!-- Action Buttons -->
	<div class="grid grid-cols-2 gap-4">
	<button id="skip-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
	<i data-feather="skip-forward" class="w-5 h-5"></i>
	Skip
	</button>
	<button id="next-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
	<i data-feather="arrow-right" class="w-5 h-5"></i>
	Next
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Admin Dashboard -->
	<div id="admin-view" class="hidden space-y-6">
	<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
	<h1 class="text-2xl font-bold text-gray-800 mb-6">Admin Dashboard</h1>

	<!-- Stats -->
	<div class="grid md:grid-cols-4 gap-4 mb-6">
	<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
	<p class="text-sm text-gray-600 mb-1">Total Submissions</p>
	<p class="text-xl font-bold text-gray-800" id="admin-total-submissions">0</p>
	</div>
	<div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
	<p class="text-sm text-yellow-600 mb-1">Pending Review</p>
	<p class="text-xl font-bold text-yellow-800" id="admin-pending">0</p>
	</div>
	<div class="bg-green-50 rounded-lg p-4 border border-green-200">
	<p class="text-sm text-green-600 mb-1">Approved</p>
	<p class="text-xl font-bold text-green-800" id="admin-approved">0</p>
	</div>
	<div class="bg-red-50 rounded-lg p-4 border border-red-200">
	<p class="text-sm text-red-600 mb-1">Rejected</p>
	<p class="text-xl font-bold text-red-800" id="admin-rejected">0</p>
	</div>
	</div>

	<!-- Submissions List -->
	<div class="space-y-4">
	<h2 class="text-lg font-semibold text-gray-800">Recent Submissions</h2>
	<div id="submissions-list" class="space-y-3">
	<!-- Submissions will be populated here -->
	</div>
	</div>
	</div>
	</div>
	</main>

	<script src="components/navbar.js"></script>
	<script src="script.js"></script>
	<script>feather.replace();</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>