File size: 7,523 Bytes
261c52d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ca9f12c
261c52d
 
 
8355010
261c52d
 
 
 
 
 
 
 
 
 
8355010
261c52d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8355010
261c52d
 
 
 
 
 
 
 
 
 
 
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
134
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paramètres - Contrôle de Patrouille</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Sidebar -->
    <custom-sidebar></custom-sidebar>
    
    <!-- Header -->
    <custom-header></custom-header>
    
    <!-- Main Content -->
    <main class="ml-64 mt-16 p-6">
<div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-800">Paramètres du Système</h1>
            <p class="text-gray-600">Gérez les paramètres de configuration de votre système</p>
        </div>
<!-- Settings Sections -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Navigation -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Catégories</h2>
                    <nav class="space-y-1">
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg bg-blue-50 text-blue-700">
                            <i data-feather="settings" class="w-4 h-4 mr-3"></i>
                            Général
                        </a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-50">
                            <i data-feather="user" class="w-4 h-4 mr-3"></i>
                            Utilisateurs
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-50">
                            <i data-feather="bell" class="w-4 h-4 mr-3"></i>
                            Notifications
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-50">
                            <i data-feather="lock" class="w-4 h-4 mr-3"></i>
                            Sécurité
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-50">
                            <i data-feather="layers" class="w-4 h-4 mr-3"></i>
                            Intégrations
                        </a>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-50">
                            <i data-feather="database" class="w-4 h-4 mr-3"></i>
                            Sauvegarde
                        </a>
                    </nav>
                </div>
            </div>
            
            <!-- General Settings -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Paramètres Généraux</h2>
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'organisation</label>
                            <input type="text" value="Sécurité Pro Ltd" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Fuseau horaire</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option>(UTC+01:00) Paris, Berlin, Madrid</option>
                                <option>(UTC+00:00) Londres, Dublin</option>
                                <option>(UTC-05:00) New York, Toronto</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Langue</label>
                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <option>Français</option>
                                <option>Anglais</option>
                                <option>Espagnol</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Adresse e-mail de contact</label>
                            <input type="email" value="contact@securitepro.fr" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Apparence</h2>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Mode sombre</p>
                                <p class="text-sm text-gray-500">Activez le thème sombre pour réduire la fatigue oculaire</p>
                            </div>
                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600">
                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition translate-x-6"></span>
                            </button>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-900">Notifications visuelles</p>
                                <p class="text-sm text-gray-500">Affichez des indicateurs visuels pour les alertes</p>
                            </div>
                            <button class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200">
                                <span class="inline-block h-4 w-4 transform rounded-full bg-white transition translate-x-1"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg">
                        Enregistrer les modifications
                    </button>
                </div>
</div>
        </div>
    </main>

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