generated from chingu-voyages/voyage-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
184 lines (164 loc) · 6.84 KB
/
index.html
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Solar Panel Services</title>
</head>
<body>
<header>
<h1>Solar Panel Services</h1>
<nav class="nav">
<p class="welcome"></p>
<div class="notifContainer">
<img id='notification' src="img/bell.png" alt="notification icon">
<p id="acceptNotify"></p>
</div>
</nav>
</header>
<main>
<!-- choose if user is admin or citizen -->
<section class="landpage">
<!-- <a href="#about" id="aboutBtn">About us</a> -->
<button id="aboutBtn">About us</button>
<button id="citzien" class="landpageBtn">Make visit request</button>
<button id="admin" class="landpageBtn">Admin</button>
<button id="myAccount" class="landpageBtn">My request</button>
</section>
<!-- about us section -->
<section id="about">
<p id="paraAbout">
The city of Los Angeles is encouraging residents to install private solar panels
as part of a local initiative to combat global warming.
We provides a free service where a city-hired specialist evaluates
the installation and maintenance costs of solar panels.
</p>
</section>
<!-- user/citizen section -->
<section class="form" id="formUser">
<form action="" class="allUserData">
<label class="titleform">Visiting request by Los Angeles citizen</label>
<div>
<label for="phone">Phone</label>
<input type="number" id="phone" name="phone">
</div>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="address">Address</label>
<input id="adresOption" type="text" list="address" name="address"></div>
<datalist id="address">
<!-- Add Los angeles address options -->
</datalist>
</div>
<div>
<label for="mail">Mail</label>
<input type="email" id="mail" name="mail">
</div>
<div>
<label for="preferredVisit">Perferred timeslot</label>
<input type="datetime" id="time" name="time" placeholder="that preferred timeslot is only indicative">
</div>
<div id="citizeSubmitForm">
<button id="submit" type="submit">Submit</button>
</div>
</form>
<!-- to notice citizen the address is wrong -->
<p id="wrongAddress"></p>
</section>
<!-- box for ensure request -->
<section id="alertMessage">
<blockquote id="almessage">
<p>Your request is sent</p>
<p class="cancel">To cancel an appointment
by calling a specific phone number (e.g., 1-800-123-4567) </p>
<button id="ok">Ok</button>
</blockquote>
</section>
<!-- section appear when client makes visit request to see account on app
will be filled from indexedDB-->
<section class="accountPage account">
<h3>Visit Request</h3>
<dl id="datDescription">
<dt id="changeStatus">Time of visit:</dt>
<dd class="clientstatus"></dd>
<dt>Client Name:</dt>
<dd class="clientName"></dd>
<dt>Phone:</dt>
<dd class="clientphone"></dd>
<dt>Mail:</dt>
<dd class="clientmail"></dd>
<dt>address:</dt>
<dd class="clientaddress"></dd>
<dt>preferred timeslot:</dt>
<dd class="clienttime">
</dd>
</dl>
<p>Preferred timeslot is only indicative and that you will receive confirmation a few hours before the scheduled visit </p>
<div>
<button id="homepage">HOMEPAGE</button>
</div>
</section>
<!--Check My account or my request -->
<section class="myVisitAccouSec">
<form action="" class="myaccVisitform">
<label for="myacco" class="accouVisit">Enter your phone made your request</label>
<input type="number" id="myacco">
<div>
<button type="submit">My visit request</button>
</div>
</form>
<p class="noaccount"></p>
</section>
<!--Admin section-->
<section id="adminformsec" >
<div class="admSecForm">
<form action="" id="formAdmin">
<label class="titleform">Admin log in</label>
<label for="mailAdmin">Mail</label>
<input type="email" id="mailAdmin">
<label for="passwordAdmin">Password</label>
<input type="password" id="passAdmin">
<div id="submitBtnContain">
<button type="submit" id="adminFormSubmit">log in</button>
</div>
</form>
</div>
</section>
<!-- note if don't fill two input below input -->
<p id="alermAdmin"></p>
<!-- sections as message appeared for admin show if have access or no after enter password and mail-->
<section id="yesAccessStatus">
<div class="yesAminAcces">
<p id="yesAccess"></p>
<button id="yesAccessBtn">OK</button>
</div>
</section>
<section id="noAccessStatus">
<p id="noAccess"></p>
<button id="noAccessBtn">OK</button>
</section>
<!--message appear during table loading -->
<p class="tableLoading"></p>
<!-- make table to show all data of citizen that were stored in indexedDB and retrieved by admin -->
<section class="tablesec">
<button class="home">Home page</button>
<button class="sortTableBtn" onclick="sortTable()">Sort table</button>
<button class="printTable">Print table</button>
<div>
<table id="table"></table>
</div>
</section>
<!-- print section -->
<section id="printSec">
</section>
<!-- here will appeared data to print -->
<button class="backtable"> Back to table</button>
</main>
<footer> ©Solar panel services</footer>
<script src="js/try.js"></script>
</body>
</html>