File size: 6,662 Bytes
c9c8373
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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 | DevDaRK Shadow AI Pro</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            colors: {
              dark: {
                100: '#1a1a1a',
                200: '#0d0d0d',
                300: '#000000',
                400: '#0a0a0a',
                500: '#050505',
              }
            }
          }
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-dark-300 text-gray-200 min-h-screen font-mono">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-12">
        <section class="max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-6xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-purple-800 glitch-text">
                System Settings
            </h1>

            <p class="text-xl opacity-90 terminal-style mb-12">
                [SYSTEM] Accessing configuration console...<br>
                [WARNING] Requires admin privileges
            </p>

            <div class="bg-dark-200 rounded-xl p-8 border border-dark-400">
                <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
                    <i data-feather="settings" class="w-6 h-6 text-red-500"></i>
                    Core Configuration
                </h2>

                <div class="space-y-6 mb-8">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">Dark Mode</h3>
                            <p class="text-sm opacity-70">Enable shadow interface</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" checked class="sr-only peer">
                            <div class="w-11 h-6 bg-dark-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
                        </label>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-2">AI Aggression Level</h3>
                        <div class="flex items-center gap-4">
                            <select class="bg-dark-400 border border-dark-300 text-gray-200 rounded-lg px-4 py-2 w-full">
                                <option>Stealth Mode</option>
                                <option selected>Balanced</option>
                                <option>Aggressive</option>
                                <option>Terminal Velocity</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-2">Encryption Protocol</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <label class="flex items-center gap-2">
                                <input type="radio" name="encryption" checked class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300">
                                Shadow AES-256
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300">
                                Quantum X-512
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300">
                                Void Crypt
                            </label>
                            <label class="flex items-center gap-2">
                                <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300">
                                DarkNet Standard
                            </label>
                        </div>
                    </div>
                </div>

                <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
                    <i data-feather="shield" class="w-6 h-6 text-purple-500"></i>
                    Security Settings
                </h2>

                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-semibold">Self-Destruct Protocol</h3>
                            <p class="text-sm opacity-70">Enable emergency data wipe</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-11 h-6 bg-dark-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                        </label>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-2">Biometric Authentication</h3>
                        <p class="text-sm opacity-70 mb-4">Require fingerprint or facial recognition for access</p>
                        <button class="bg-gradient-to-r from-purple-800 to-red-900 px-6 py-2 rounded-lg font-bold hover:opacity-90 transition-all flex items-center gap-2">
                            <i data-feather="fingerprint"></i> Configure Biometrics
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script>
        feather.replace();
    </script>
</body>
</html>