1 | <!DOCTYPE html>
|
---|
2 | <html lang="en">
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
---|
6 | <title>Profile settings page</title>
|
---|
7 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
---|
8 | integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
---|
9 |
|
---|
10 | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
---|
11 | <link href="css/headers.css" rel="stylesheet" />
|
---|
12 | <link href="css/customer_admin.css" rel="stylesheet"/>
|
---|
13 | </head>
|
---|
14 | <body>
|
---|
15 | <!-- Navbar start -->
|
---|
16 | <header class="p-3 mb-3 border-bottom">
|
---|
17 | <div class="row" style="justify-content: space-between;">
|
---|
18 | <div class="col-md-10 mb-10">
|
---|
19 | <h4>Profile settings for <span id="fullName"></span></h4>
|
---|
20 | </div>
|
---|
21 | <div class="col-md-1 mb-1">
|
---|
22 | <button id="profile" class="btn btn-primary btn-block" onclick="goToHomePage()">
|
---|
23 | Homepage
|
---|
24 | </button>
|
---|
25 | </div>
|
---|
26 | <div class="col-md-1 mb-1">
|
---|
27 | <button id="logout" class="btn btn-primary btn-block">
|
---|
28 | Logout
|
---|
29 | </button>
|
---|
30 | </div>
|
---|
31 | </div>
|
---|
32 | </header>
|
---|
33 |
|
---|
34 | <nav>
|
---|
35 | <div class="nav nav-tabs" id="nav-customer-tab" role="tablist">
|
---|
36 | <a class="nav-link active" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab"
|
---|
37 | aria-controls="nav-profile" aria-selected="true">Profile Info</a>
|
---|
38 | <a class="nav-link" id="nav-appointment-tab" data-bs-toggle="tab" href="#nav-appointment" role="tab"
|
---|
39 | aria-controls="nav-appointment" aria-selected="false">Upcoming Appointments</a>
|
---|
40 | <a class="nav-link" id="nav-past-appointment-tab" data-bs-toggle="tab" href="#nav-past-appointment" role="tab"
|
---|
41 | aria-controls="nav-review" aria-selected="false">Past appointments</a>
|
---|
42 | <a class="nav-link" id="nav-review-tab" data-bs-toggle="tab" href="#nav-review" role="tab"
|
---|
43 | aria-controls="nav-review" aria-selected="false">My reviews</a>
|
---|
44 | </div>
|
---|
45 | </nav>
|
---|
46 | <div class="tab-content" id="nav-customer-tabContent">
|
---|
47 | <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
|
---|
48 | <div class="col-lg-6 mb-5 mb-lg-0">
|
---|
49 | <div class="card-body py-5 px-md-5">
|
---|
50 | <form>
|
---|
51 | <div class="row">
|
---|
52 | <div class="col-md-6 mb-4">
|
---|
53 | <div class="form-outline">
|
---|
54 | <label for="firstName">First name</label>
|
---|
55 | <input type="text" id="firstName" class="form-control" placeholder="First name"
|
---|
56 | aria-label="Firstname"/>
|
---|
57 | </div>
|
---|
58 | </div>
|
---|
59 | <div class="col-md-6 mb-4">
|
---|
60 | <div class="form-outline">
|
---|
61 | <label for="lastName">Last name</label>
|
---|
62 | <input type="text" id="lastName" class="form-control" placeholder="Last name"
|
---|
63 | aria-label="lastname"/>
|
---|
64 | </div>
|
---|
65 | </div>
|
---|
66 | </div>
|
---|
67 | <!-- Phone number input -->
|
---|
68 | <div class="form-outline mb-4">
|
---|
69 | <label for="phoneNumber">Phone number</label>
|
---|
70 | <input type="number" id="phoneNumber" class="form-control" placeholder="Phone number"
|
---|
71 | aria-label="phoneNumber"/>
|
---|
72 | </div>
|
---|
73 |
|
---|
74 | <!-- Email input -->
|
---|
75 | <div class="form-outline mb-4">
|
---|
76 | <label for="email">Email</label>
|
---|
77 | <input type="email" id="email" class="form-control" placeholder="Email"
|
---|
78 | aria-label="Email"/>
|
---|
79 | </div>
|
---|
80 | <!-- Username input -->
|
---|
81 | <div class="form-outline mb-4">
|
---|
82 | <label for="username">Username</label>
|
---|
83 | <input type="text" id="username" class="form-control" placeholder="Username"
|
---|
84 | aria-label="username"/>
|
---|
85 | </div>
|
---|
86 | <button type="button" class="btn btn-primary btn-block mb-4" id="update_customer_button">
|
---|
87 | Update profile
|
---|
88 | </button>
|
---|
89 | </form>
|
---|
90 | </div>
|
---|
91 | </div>
|
---|
92 | </div>
|
---|
93 | <div class="tab-pane fade" id="nav-appointment" role="tabpanel" aria-labelledby="nav-appointment-tab">
|
---|
94 | <div class="form-outline col-lg-12 row">
|
---|
95 | <div class="form-outline col-lg-12">
|
---|
96 | <div class="table-responsive">
|
---|
97 | <table class="table">
|
---|
98 | <thead>
|
---|
99 | <tr>
|
---|
100 | <th scope="col">#</th>
|
---|
101 | <th scope="col">Full name</th>
|
---|
102 | <th scope="col">Email</th>
|
---|
103 | <th scope="col">Phone number</th>
|
---|
104 | <th scope="col">Time period</th>
|
---|
105 | <th scope="col">Service</th>
|
---|
106 | <th scope="col">Action</th>
|
---|
107 | </tr>
|
---|
108 | </thead>
|
---|
109 | <tbody id="appointments-table-body">
|
---|
110 | </tbody>
|
---|
111 | </table>
|
---|
112 | </div>
|
---|
113 | </div>
|
---|
114 | </div>
|
---|
115 | </div>
|
---|
116 | <div class="tab-pane fade" id="nav-past-appointment" role="tabpanel" aria-labelledby="nav-past-appointment-tab">
|
---|
117 | <div class="form-outline col-lg-12 row">
|
---|
118 | <div class="form-outline col-lg-12">
|
---|
119 | <div class="table-responsive">
|
---|
120 | <table class="table">
|
---|
121 | <thead>
|
---|
122 | <tr>
|
---|
123 | <th scope="col">#</th>
|
---|
124 | <th scope="col">Full name</th>
|
---|
125 | <th scope="col">Email</th>
|
---|
126 | <th scope="col">Phone number</th>
|
---|
127 | <th scope="col">Time period</th>
|
---|
128 | <th scope="col">Service</th>
|
---|
129 | <th scope="col">Action</th>
|
---|
130 | </tr>
|
---|
131 | </thead>
|
---|
132 | <tbody id="past-appointments-table-body">
|
---|
133 | </tbody>
|
---|
134 | </table>
|
---|
135 | </div>
|
---|
136 | </div>
|
---|
137 | </div>
|
---|
138 | <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
|
---|
139 | <div class="modal-dialog">
|
---|
140 | <div class="modal-content">
|
---|
141 | <div class="modal-header">
|
---|
142 | <h1 class="modal-title fs-5" id="reviewModalLabel">New message</h1>
|
---|
143 | <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
---|
144 | </div>
|
---|
145 | <div class="modal-body">
|
---|
146 | <form>
|
---|
147 | <div class="mb-3">
|
---|
148 | <label for="recipient-name" class="col-form-label">Recipient:</label>
|
---|
149 | <input type="text" class="form-control" id="recipient-name" />
|
---|
150 | </div>
|
---|
151 | <div class="id-class"></div>
|
---|
152 | <div class="rating">
|
---|
153 | <input type="radio" name="rating" value="5" id="5">
|
---|
154 | <label for="5">☆</label>
|
---|
155 | <input type="radio" name="rating" value="4" id="4">
|
---|
156 | <label for="4">☆</label>
|
---|
157 | <input type="radio" name="rating" value="3" id="3">
|
---|
158 | <label for="3">☆</label>
|
---|
159 | <input type="radio" name="rating" value="2" id="2">
|
---|
160 | <label for="2">☆</label>
|
---|
161 | <input type="radio" name="rating" value="1" id="1">
|
---|
162 | <label for="1">☆</label>
|
---|
163 | </div>
|
---|
164 | <div class="mb-3">
|
---|
165 | <label for="message-text" class="col-form-label">Message:</label>
|
---|
166 | <textarea class="form-control" id="message-text"></textarea>
|
---|
167 | </div>
|
---|
168 | </form>
|
---|
169 | </div>
|
---|
170 | <div class="modal-footer">
|
---|
171 | <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
---|
172 | <button type="button" class="btn btn-primary" id="post-review-button">Leave a review</button>
|
---|
173 | </div>
|
---|
174 | </div>
|
---|
175 | </div>
|
---|
176 | </div>
|
---|
177 | </div>
|
---|
178 | <div class="tab-pane fade" id="nav-review" role="tabpanel" aria-labelledby="nav-review-tab">
|
---|
179 | <div id="my-reviews" class="form-outline col-lg-12 row">
|
---|
180 | <div class="card m-3" style="max-width: 300px; padding: 0;">
|
---|
181 | <div class="card-header text-bg-success">
|
---|
182 | ☆☆☆☆☆
|
---|
183 | </div>
|
---|
184 | <ul class="list-group list-group-flush">
|
---|
185 | <li class="list-group-item"><i>Business:</i> Businessname<</li>
|
---|
186 | <li class="list-group-item"><i>Service:</i> Customer Name</li>
|
---|
187 | <li class="list-group-item"><i>Reviewer:</i> Customer Name</li>
|
---|
188 | <li class="list-group-item"><i>Comment:</i> Lorem ipsum diem amet</li>
|
---|
189 | <li class="list-group-item"><small class="text-body-secondary">Created on 29-11-2023T11:32:23</small></li>
|
---|
190 | </ul>
|
---|
191 | </div>
|
---|
192 | </div>
|
---|
193 | </div>
|
---|
194 | </div>
|
---|
195 |
|
---|
196 |
|
---|
197 | <script src='js/jquery-1.10.2.js' type="text/javascript"></script>
|
---|
198 | <script src="js/customer_admin.js" type="text/javascript"></script>
|
---|
199 | <script src="js/bootstrap.bundle.min.js"></script>
|
---|
200 | <script src="js/logout.js" type="text/javascript"></script>
|
---|
201 | </body>
|
---|
202 | </html> |
---|