-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
113 lines (110 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Control Panel</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.css">
</head>
<body>
<div id="side-bar">
<div id="chatbox">
Leave Sherry a message
<iframe id="cbox" src="https://www2.cbox.ws/box/?boxid=2405175&boxtag=0tDA53" width="100%" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div>
<div id="chart-div">
<img id="chart" src="img/chart.jpg" alt="Egg candling info chart">
<div id="contact">
<a href="https://github.com/potatowagon/pi-webserver" target="_blank"><i class="fab fa-github fa-3x fa-cog"></i></a>
<a href="https://www.linkedin.com/in/sherry-wong-05b028108/" target="_blank"><i class="fab fa-linkedin fa-3x fa-cog"></i></a>
<a href="https://www.facebook.com/AutodeskASEAN/photos/a.535507763150931/1825500610818300/?type=3&theater" target="_blank"><i class="fab fa-facebook fa-3x fa-cog"></i></a>
</div>
</div>
<div id="sponsors">
Sponsors: <br><br>
<img width="200" src="/img/autodesk.png"><br><br>
<img width="200" src="img/unclewilliamlogo.jpg"><br><br>
Thankyou :)
</div>
</div>
<div id=main>
<div id="info-div">
<div id="day"></div>
<button id="help"><i class="fas fa-question fa-3x"></i></button>
<div id="info-block">
<p>
<i class="fas fa-sync-alt"></i>: Turn Eggs
<br>
<i class="far fa-lightbulb"></i> / <i class="fas fa-lightbulb"></i>: Egg canding on/off
<br>
<i class="fab fa-free-code-camp"></i> / <i class="fas fa-fire-extinguisher"></i>: Heater on/off
</p>
<p>
FAQ <br>
Q: Why turn the eggs? <br>
A: To prevent the embryo from sticking to the shell, and also to allow the nutrients and oxygen to swish around the egg.
Eggs are automatically turned once every 3 hours.
<br>
<br>
Q: Why does the heater light auto turn off? <br>
A: it turns off when current temperature > max temperature set
</p>
</div>
</div>
<iframe id="cam" src=http://chickenbox.ddns.net:8081></iframe>
<br>
<div><div id="temp" class="inline"></div><div id="temp-info" class="inline"></div></div>
<div id="humidity"></div>
<div id="autoturn-countdown"></div>
<h3>Control Panel</h3>
<button id="turn">
<i id="turn-icon" class="fas fa-sync-alt fa-7x"></i>
</button>
<button id="candling">
<i class="fas fa-lightbulb fa-7x"></i>
</button>
<button id="heater">
<i class="fab fa-free-code-camp fa-7x"></i>
</button>
<br></br>
<label for="Max Temperature">Max Temperature</label>
<input type="range" id="max-temp" name="Max Temperature"
min="25" max="40" step="1" onchange="updateMaxTemp(this.value)"/>
<div id="max-temp-val"></div>
<h3>Meet the Incubator</h3>
<div id="incubator-gallery">
<img class="incubator-img" src="img/incubator1.jpg" alt="Inside the incubator">
<img class="incubator-img" src="img/incubator2.jpg" alt="Outside the incubator">
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div id="background"></div>
<div id="info-modal">
<p>
Remote Surveillance Egg Incubator
<br>
<br>
<i class="fas fa-sync-alt"></i>: Turn Eggs
<br>
<br>
<i class="far fa-lightbulb"></i> / <i class="fas fa-lightbulb"></i>: Egg canding on/off
<br>
<br>
<i class="fab fa-free-code-camp"></i> / <i class="fas fa-fire-extinguisher"></i>: Heater on/off
<br>
<br>
<i class="fas fa-question"></i>: Manual and More Info
</p>
</div>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/client.js"></script>
<script src="/js/info.js"></script>
<script src="/js/modal.js"></script>
</body>
</html>