Hugging Face's logo

Spaces:
kingarnica
/
echosphere-audio-visualizer
Running

App Files Community
echosphere-audio-visualizer
File size: 4,873 Bytes 
8df51c2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings | EchoSphere</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <audio-navbar></audio-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
                Settings
            </h1>
        </div>

        <div class="max-w-2xl mx-auto bg-gray-800 rounded-2xl p-6 shadow-xl">
            <form id="settingsForm">
                <div class="space-y-6">
                    <!-- Audio Settings -->
                    <div>
                        <h3 class="text-xl font-semibold mb-4">Audio Settings</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="fftSize" class="block text-sm font-medium text-gray-300 mb-1">FFT Size</label>
                                <select id="fftSize" name="fftSize" class="bg-gray-700 border-gray-600 text-white rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5">
                                    <option value="128">128 (Lightweight)</option>
                                    <option value="256" selected>256 (Balanced)</option>
                                    <option value="512">512 (Detailed)</option>
                                    <option value="1024">1024 (High Resolution)</option>
                                </select>
                            </div>
                            <div>
                                <label for="smoothing" class="block text-sm font-medium text-gray-300 mb-1">Smoothing</label>
                                <input type="range" id="smoothing" name="smoothing" min="0" max="1" step="0.05" value="0.8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                                <div class="flex justify-between text-xs text-gray-400 mt-1">
                                    <span>Sharp</span>
                                    <span>Smooth</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Visual Settings -->
                    <div>
                        <h3 class="text-xl font-semibold mb-4">Visual Settings</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="primaryColor" class="block text-sm font-medium text-gray-300 mb-1">Primary Color</label>
                                <input type="color" id="primaryColor" name="primaryColor" value="#818cf8" class="w-12 h-12 cursor-pointer">
                            </div>
                            <div>
                                <label for="secondaryColor" class="block text-sm font-medium text-gray-300 mb-1">Secondary Color</label>
                                <input type="color" id="secondaryColor" name="secondaryColor" value="#c026d3" class="w-12 h-12 cursor-pointer">
                            </div>
                            <div class="flex items-center">
                                <input type="checkbox" id="darkMode" name="darkMode" checked class="w-4 h-4 text-indigo-600 bg-gray-700 border-gray-600 rounded focus:ring-indigo-500">
                                <label for="darkMode" class="ml-2 text-sm font-medium text-gray-300">Dark Mode</label>
                            </div>
                        </div>
                    </div>

                    <div class="pt-4">
                        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Save Settings
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </main>

    <audio-footer></audio-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
        
        document.getElementById('settingsForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // In a real app, save settings to localStorage or backend
            alert('Settings saved!');
        });
    </script>
</body>
</html>