uhconst-admin-dashboard/settings.html at main · aliza-dev/uhconst-admin-dashboard · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings | UNCHOST</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" href="css/settings.css">
</head>
<body>

    <div class="dashboard-container">

        <aside class="sidebar">
            <div class="logo-area">
                <i class="ri-hard-hat-fill logo-icon"></i>
                <h2>UHCONST</h2>
            </div>
            <div class="menu-content">
                <nav class="nav-group">
                    <a href="dashboard.html" class="menu-item"><i class="ri-layout-grid-fill"></i> <span>Dashboard</span></a>
                    <a href="calculators.html" class="menu-item"><i class="ri-calculator-fill"></i> <span>Calculators</span></a>
                    <a href="users.html" class="menu-item"><i class="ri-group-fill"></i> <span>Users</span></a>
                    <a href="seo-meta.html" class="menu-item"><i class="ri-global-line"></i> <span>SEO & Meta</span></a>
                    <a href="#" class="menu-item"><i class="ri-image-2-fill"></i> <span>Media Library</span></a>
                    <a href="faqs.html" class="menu-item"><i class="ri-question-fill"></i> <span>FAQs</span></a>
                    <div class="menu-divider"></div>
                    <a href="#" class="menu-item"><i class="ri-shield-check-fill"></i> <span>Privacy Policy</span></a>
                    <a href="#" class="menu-item"><i class="ri-information-fill"></i> <span>About</span></a>
                    <a href="contact.html" class="menu-item"><i class="ri-phone-fill"></i> <span>Contact</span></a>
                </nav>
            </div>
            <div class="sidebar-footer">
                <a href="admin-login.html" class="menu-item logout">
                    <i class="ri-shut-down-line"></i> <span>Log Out</span>
                </a>
            </div>
        </aside>

        <main class="main-content">
            <header class="top-bar">
                <div class="header-left">
                    <div class="mobile-toggle" onclick="toggleSidebar()"><i class="ri-menu-line"></i></div>
                    <h1 class="page-title">Setting</h1>
                </div>
                <div class="user-actions">
                    <div class="icon-btn"><i class="ri-settings-3-fill" style="color: #ECB30D;"></i></div>
                    <div class="icon-btn"><i class="ri-notification-3-line"></i><span class="dot"></span></div>
                    <div class="profile-pic">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=256&q=80" alt="User" style="object-position: top;">
                    </div>
                </div>
            </header>

            <div class="content-body">

                <div class="settings-card">

                    <div class="profile-header">
                        <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=256&q=80" alt="Aiden Max" class="profile-avatar">
                        <div class="profile-meta">
                            <h2>Aiden Max</h2>
                        </div>
                        <button class="btn-edit">Edit profile</button>
                    </div>

                    <form class="settings-form">

                        <div class="form-grid">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" class="form-input" value="Aiden Max">
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" class="form-input" value="info@gmail.como">
                            </div>
                        </div>

                        <h3 class="section-heading">Password update</h3>

                        <div class="form-grid">
                            <div class="form-group">
                                <label>Password</label>
                                <div class="password-wrapper">
                                    <input type="password" class="form-input" value="password123">
                                    <i class="ri-eye-off-line toggle-password"></i>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Confirm Password</label>
                                <input type="password" class="form-input" value="password123">
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-outline">Cancel</button>
                            <button type="button" class="btn btn-primary">Save</button>
                        </div>

                    </form>

                </div>

            </div>
        </main>
    </div>
    <script src="js/dashboard.js"></script>
</body>
</html>