Hugging Face's logo

Spaces:
froublot
/
edupulse-pro
Running

App Files Community
edupulse-pro
File size: 10,216 Bytes
7078fbd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings | EduPulse</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-surface-1">
<div class="flex h-screen overflow-hidden">
        <!-- Sidebar Component -->
        <script src="components/sidebar.js"></script>
        <custom-sidebar></custom-sidebar>

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Header Component -->
            <script src="components/header.js"></script>
            <custom-header></custom-header>

            <!-- Main Workspace -->
            <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
                <div class="max-w-7xl mx-auto">
                    <div class="mb-8">
                        <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
                        <p class="text-gray-500">Manage your account and application preferences</p>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        <!-- Account Settings -->
                        <div class="card p-6 lg:col-span-2">
                            <h2 class="text-xl font-semibold mb-6">Account Settings</h2>
                            
                            <div class="flex items-center mb-8">
                                <div class="relative">
                                    <div class="h-20 w-20 rounded-full bg-gray-200 overflow-hidden">
                                        <img src="http://static.photos/people/200x200/50" class="h-full w-full object-cover" alt="Profile">
                                    </div>
                                    <button class="absolute bottom-0 right-0 bg-white p-2 rounded-full shadow-md">
                                        <i class="fas fa-camera text-gray-600"></i>
                                    </button>
                                </div>
                                <div class="ml-6">
                                    <h3 class="font-medium">Dr. Sarah Johnson</h3>
                                    <p class="text-sm text-gray-500">Professor</p>
                                </div>
                            </div>

                            <div class="space-y-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                                    <input type="text" value="Dr. Sarah Johnson" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                    <input type="email" value="sarah.johnson@university.edu" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
                                    <input type="text" value="Professor" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Institution</label>
                                    <input type="text" value="University of Education" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                </div>
                            </div>

                            <div class="flex justify-end mt-8">
                                <button class="btn-primary px-6 py-2">Save Changes</button>
                            </div>
                        </div>

                        <!-- Preferences -->
                        <div class="space-y-6">
                            <!-- Appearance -->
                            <div class="card p-6">
                                <h3 class="font-semibold mb-4">Appearance</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Theme</label>
                                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                            <option>Light</option>
                                            <option>Dark</option>
                                            <option>System</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="flex items-center">
                                            <input type="checkbox" checked class="rounded text-blue-600 focus:ring-blue-500">
                                            <span class="ml-2 text-sm text-gray-700">Enable animations</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Notifications -->
                            <div class="card p-6">
                                <h3 class="font-semibold mb-4">Notifications</h3>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-700">Email notifications</span>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" checked class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 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-blue-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-700">Push notifications</span>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" checked class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 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-blue-600"></div>
                                        </label>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-700">Assignment reminders</span>
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" class="sr-only peer">
                                            <div class="w-11 h-6 bg-gray-200 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-blue-600"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Security -->
                            <div class="card p-6">
                                <h3 class="font-semibold mb-4">Security</h3>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Change Password</label>
                                        <input type="password" placeholder="New password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
                                        <input type="password" placeholder="Confirm new password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                    <button class="btn-primary w-full py-2">Update Password</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="components/sidebar.js"></script>
    <script src="components/header.js"></script>
    <script src="script.js"></script>
</body>
</html>