source: src/main/resources/templates/customer_admin.html@ 77205be

Last change on this file since 77205be was 77205be, checked in by gjoko kostadinov <gjokokostadinov@…>, 11 months ago

Add entire code
  • Property mode set to 100644
File size: 10.0 KB
Line 
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>
Note: See TracBrowser for help on using the repository browser.