|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>SilenceRemover AI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
colors: { |
|
|
tape: { |
|
|
black: '#09090b', |
|
|
dark: '#18181b', |
|
|
gray: '#27272a', |
|
|
lightGray: '#3f3f46', |
|
|
primary: '#7c3aed', |
|
|
primaryHover: '#6d28d9', |
|
|
text: '#f4f4f5', |
|
|
muted: '#a1a1aa', |
|
|
yellow: '#fbbf24', |
|
|
red: '#ef4444' |
|
|
} |
|
|
}, |
|
|
backgroundImage: { |
|
|
'grain': "url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.03%22/%3E%3C/svg%3E')", |
|
|
}, |
|
|
animation: { |
|
|
'scan': 'scan 2s linear infinite', |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'shimmer': 'shimmer 2s infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
scan: { |
|
|
'0%': { transform: 'translateY(-100%)' }, |
|
|
'100%': { transform: 'translateY(400%)' }, |
|
|
}, |
|
|
shimmer: { |
|
|
'0%': { transform: 'translateX(-100%)' }, |
|
|
'100%': { transform: 'translateX(100%)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
background-color: #09090b; |
|
|
color: #f4f4f5; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #09090b; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #27272a; |
|
|
border-radius: 3px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #3f3f46; |
|
|
} |
|
|
|
|
|
|
|
|
input[type=range] { |
|
|
-webkit-appearance: none; |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
input[type=range]::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
height: 20px; |
|
|
width: 20px; |
|
|
border-radius: 50%; |
|
|
background: #fff; |
|
|
cursor: pointer; |
|
|
margin-top: -8px; |
|
|
box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); |
|
|
border: 4px solid #7c3aed; |
|
|
} |
|
|
|
|
|
input[type=range]::-webkit-slider-runnable-track { |
|
|
width: 100%; |
|
|
height: 4px; |
|
|
cursor: pointer; |
|
|
background: #3f3f46; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-checkbox { |
|
|
appearance: none; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.toggle-label { |
|
|
display: block; |
|
|
overflow: hidden; |
|
|
cursor: pointer; |
|
|
border: 0 solid #e5e7eb; |
|
|
border-radius: 9999px; |
|
|
background-color: #27272a; |
|
|
transition: background-color 0.3s ease-in-out; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.toggle-circle { |
|
|
position: absolute; |
|
|
top: 4px; |
|
|
left: 4px; |
|
|
background-color: white; |
|
|
border-radius: 50%; |
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked + .toggle-label { |
|
|
background-color: #7c3aed; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked + .toggle-label .toggle-circle { |
|
|
transform: translateX(100%); |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(24, 24, 27, 0.6); |
|
|
backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.08); |
|
|
} |
|
|
|
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px) scale(0.98); } |
|
|
to { opacity: 1; transform: translateY(0) scale(1); } |
|
|
} |
|
|
</style> |
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0", |
|
|
"react/": "https://aistudiocdn.com/react@^19.2.0/", |
|
|
"react": "https://aistudiocdn.com/react@^19.2.0", |
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link rel="stylesheet" href="/index.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div id="root"></div> |
|
|
<script type="module" src="/index.tsx"></script> |
|
|
</body> |
|
|
</html> |
