Spaces:
No application file
No application file
| <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', // Zinc-950 | |
| dark: '#18181b', // Zinc-900 | |
| gray: '#27272a', // Zinc-800 | |
| lightGray: '#3f3f46', // Zinc-700 | |
| primary: '#7c3aed', // Violet-600 | |
| primaryHover: '#6d28d9', // Violet-700 | |
| 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; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #09090b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #27272a; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3f3f46; | |
| } | |
| /* Range Slider */ | |
| 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; /* Lighter gray by default for visibility */ | |
| border-radius: 2px; | |
| } | |
| /* Custom Toggle Switch */ | |
| .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); | |
| } | |
| /* Animation Utilities */ | |
| .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> |