forked from hngi/Poseidon-Solar-Calculator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
365 lines (298 loc) · 20.1 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="The one stop shop for accurate calculation of household solar power needs. With the Poseidon Solar Calculator, we take away the hassle and have you know in the fraction of a second what precise Solar unit to purchase.">
<meta name="Keywords" content="Solar, Energy, Power, Watt">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="revisit-after" content="1 days">
<link rel="shortcut icon" href="Images/Logo/Frame.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0e498dcbfc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Solar Calculator</title>
</head>
<body>
<!-- Header -->
<section>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="Images/Logo/Frame modified.png" width="" height="60" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
<a class="nav-link ml-5" href="#calc_section">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link ml-5 other-navItems" href="#how-it-work">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link ml-5 other-navItems" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link ml-5 other-navItems" href="#section_contact">Contact Us</a>
</li>
<a href="#calc_section" class="btn btn-outline-primary rounded-pill ml-5" role="button"> Calculate
Solar Power</a>
</div>
</div>
</nav>
<!-- end of navbar -->
<section id="calc_section" class="calc_section">
<h4 class="mb-3 text-center text-uppercase color">solar power calculator</h4>
<div id="calc_inner" class="container mt-3 container-flex ">
<div class="flex1 flexy">
<form method="post" class="add_form form " id="calc_form" >
<div>
<label for="appliances">Appliances</label>
</div>
<input list="appliances" name="appliances" class="smaller" id="appliance_input" required placeholder="Applicance">
<datalist id="appliances">
<option class="opt" value="REFRIGERATOR">
<option value="PRESSING IRON">
<option value="TELEVISION">
<option value="WASHING MACHINE">
<option value="WATER HEATER">
<option value="BLENDER"></option>
<option value="DISHWASHER"></option>
<option value="COFFEE MACHINE"></option>
<option value="FREEZER"></option>
<option value="MICROWAVE"></option>
<option value="ELECTRIC KETTLE"></option>
<option value="ELECTRIC OVEN"></option>
<option value="TOASTER"></option>
<option value="FAN"></option>
<option value="AIR CONDITIONER"></option>
<option value="WATER HEATER"></option>
<option value="HALOGEN"></option>
<option value="LED BULB"></option>
<option value="DESKTOP COMPUTER"></option>
<option value="LAPTOP COMPUTER"></option>
<option value="PRINTER"></option>
<option value="ROUTER"></option>
<option value="SMART PHONE RECHARGE"></option>
<option value="SEWING MACHINE"></option>
</datalist>
<div> <label for="power_hr">Hour on per Day</label> </div>
<div >
<input type="number" id="power_hr" class="smaller" min="1" placeholder="Hour on per Day" required pattern="/[0-9]/">
</div>
<div> <label for="quantity">Quantity</label> </div>
<div >
<input type="number" class="smaller" id="quantity_input" min="1" placeholder="Quantity" required pattern="/[0-9]/" >
</div>
<div><label for="power_input">Power</label></div>
<div >
<input type="number" class="smaller" id="power_input" min="1" placeholder="Watt per Hour" required pattern="/[0-9]/">
</div>
<button id="btn" class="calc_button" type="submit">Add</button>
</form>
</div>
<div id="result" class="result flex1">
<div>
<div class="result-tab">
<p id="result_heading">results</p>
<p class="result-text"><span id="result_num">0</span><sub>watts</sub></p>
<p>solar power needed</p>
</div>
<div class="buttons">
<button id="but-daily" class="but but-active">Daily</button>
<button id="but-week" class="but">Weekly</button>
<button id="but-month" class="but">Monthly</button>
</div>
</div>
<div class="app-list">
</div>
<input type="email" name="email" id="email" placeholder="Enter Email to receive result in your inbox">
<button class="but but-send">Send</button>
</div>
</div>
</section>
<!-- header -->
<!-- HOW-IT-WORKS-SECTION-START -->
<section id="how-it-work" class="how-it-works ">
<h3 id="how-it-works-header">How it works</h3>
<div id="how-it-works">
<div class="how-it-works-main">
<img src="./Images/washing-machine.png">
<p class="appliance">1. Choose an appliance</p>
</div>
<div class="how-it-works-main">
<img src="./Images/accounting.png">
<p class="appliance">2. Input appliance power</p>
</div>
<div class="how-it-works-main">
<img src="./Images/clipboard.png">
<p class="appliance">3. Calculate and get result</p>
</div>
</div>
</section>
<!-- HOW-IT-WORKS-SECTION-END -->
<!-- FAQ SECTION -->
<section id="faq" class=" faq container mt-3 faq-margin">
<h4 class="mb-3 text-center text-uppercase text-bold fre">Frequently Asked Questions</h4>
<hr>
<h6 class="mb-5 text-center font-weight-light">Get enlightened with the stack of knowledge base you might just
find that which
you need</h6>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description1"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description1"></i>
<h6 class="d-inline bold text">Why use a Solar Calculator?</h6>
<p class="font-italic ml-5 my-3 collapse description1 text1">
A solar calculator helps you calculate with precise accuracy how many kW system sizes are required to power your selected appliances. With this information, you can know the cost of the system and make adjustments where necessary. Worthy of note is to power only the most important appliances on Solar especially if you will be purchasing a hybrid/Grid-tied unit
</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description2"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description2"></i>
<h6 class="d-inline text">Why consider Solar energy?</h6>
<p class="font-italic ml-5 my-3 collapse description2 text1">Solar energy offers great benefits both financially and environmentally. Money for electricity bills will be saved and increasing the electricity rate in the future will be protected. It also helps reduce greenhouse gas emissions which plays a role in climate change and air pollution.</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description3"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description3"></i>
<h6 class="d-inline text">How does Solar energy work?</h6>
<p class="font-italic ml-5 my-3 collapse description3 text1">Sunlight is converted into electricity using solar panels. The converted electricity can be stored in batteries to power electrical appliances. Excess energy harnessed from the panels can be exported to the grid. In the case of a grid-tied solar unit.</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description4"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description4"></i>
<h6 class="d-inline text">What are the effects of solar panels on roofs?</h6>
<p class="font-italic ml-5 my-3 collapse description4 text1">
The solar panel has no negative effect on your roof, instead it has been known to help increase the value of the house when putting it up for sale.
</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description5"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description5"></i>
<h6 class="d-inline text"> How much does it cost?</h6>
<p class="font-italic ml-5 my-3 collapse description5 text1">There can only be estimates as the installation cost varies considerably. This depends on your energy demands and how much autonomy you are willing to go for.</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description6"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description6"></i>
<h6 class="d-inline text">How do you know the number of panels to be used?</h6>
<p class="font-italic ml-5 my-3 collapse description6 text1">The Poseidon solar calculator will help you calculate your appliances based on their capacities then estimates the number of panels that will be best suitable. </p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description7"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description7"></i>
<h6 class="d-inline text">Do I pay for renewable energy?</h6>
<p class="font-italic ml-5 my-3 collapse description7 text1">The only cost is the cost of initial components and installation. No subsequent subscription or bills is required to have access to power generated.
</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description8"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description8"></i>
<h6 class="d-inline text">Is solar power clean or green energy?
</h6>
<p class="font-italic ml-5 my-3 collapse description8 text1">Solar Energy is both green and clean as it has no harmful effects on the environment.</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description9"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description9"></i>
<h6 class="d-inline text">Why do I need to calculate my solar power requirement?</h6>
<p class="font-italic ml-5 my-3 collapse description9 text1">Calculation is required to get a fair or exact estimate of solar components needed to power your appliances and home.
</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description10"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description10"></i>
<h6 class="d-inline text">Is solar power stable?
</h6>
<p class="font-italic ml-5 my-3 collapse description10 text1">Yes, solar power is stable and can be stored and inverted to be used later.
</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description11"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description11"></i>
<h6 class="d-inline text">What appliances can I enter here?
</h6>
<p class="font-italic ml-5 my-3 collapse description11 text1">All appliances that require electricity to run and that will be used in your home (kitchen, living room, bathroom, etc.). All electrical appliances are rated in KWH, which tells the amount of electricity the particular appliance consumes per hour.</p>
</div>
<div class="mb-4">
<i class="fas fa-plus-circle mr-3 size" data-toggle="collapse" data-target=".description12"></i>
<i class="fas fa-minus-circle mr-3 d-none size" data-toggle="collapse" data-target=".description12"></i>
<h6 class="d-inline text">Is this Poseidon Solar Calculator Free?</h6>
<p class="font-italic ml-5 my-3 collapse description12 text1">Yes, Poseidon Solar Calculator is absolutely free to use with no hidden charges whatsoever.
</p>
</div>
</section>
<!-- END OF FAQ SECTION -->
<!-- CONTACT US SECTION -->
<section id="section_contact" class="contact_us">
<h4 class="mb-3 text-center text-uppercase text-bold fre">CONTACT US</h4>
<!-- <hr> -->
<div id="contact_inner" class="contact_container text-center text-sm-center">
<div class="contact">
<label for="" class="msg"></label>
<form class="contact_form" id="contact_us_form">
<p>
<!-- <label for="title">Title:</label> -->
<input type="text" id="title" name="title" class="contact_input" placeholder="Your Title" required>
</p>
<p>
<!-- <label for="Name">Name:</label> -->
<input type="text" id="name" name="name" class="contact_input" placeholder="Your name" required >
</p>
<p>
<!-- <label for="Email">Email:</label> -->
<input type="email" id="email1" name="email" class="contact_input" placeholder="Your email" required>
</p>
<p>
<!-- <label for="textarea">Type your message here:</label> -->
<textarea name="" id="textarea" name="message" class="contact_textarea" cols="40" rows="5" placeholder="Type your message here:" required pattern="/^[a-z A-Z]+$/"></textarea>
</p>
<button type="submit" class="but but-send" id="btn_submit">Send</button>
</form>
</div>
</div>
</section>
<!-- END OF CONTACT US SECTION -->
<footer class="footer">
<div class="footer-back">
<div class="container">
<div class="col-sm-12 text-center ">
<h3 class="fre">POSEIDON</h3>
</div>
<p class="fre">The perfect solar calculator for your abode</p>
<div class="nav nav-pills flex-column flex-sm-row footer-nav">
<a class="link flex-sm-fill text-sm-center" href="#calc_section">HOME</a>
<a class="link flex-sm-fill text-sm-center" href="#calc_section">CALCULATE</a>
<a class="link flex-sm-fill text-sm-center" href="#how-it-work">HOW IT WORKS</a>
<a class="link flex-sm-fill text-sm-center" href="#faq">FAQ</a>
<a class="link flex-sm-fill text-sm-center" href="#section_contact">CONTACT US</a>
</div>
</div>
</div>
<div class="footer-back2">
<p>With <span><i class="fas fa-heart"></i></span> from Team Poseidon</p>
<p >© 2019</p>
</div>
</footer>
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="faq.js"></script>
<script src="solar.js"></script>
<script src="contact.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"></script>
</body>
</html>