generated from ecumene/gc-bootstrap-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (150 loc) · 7.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta property="og:image" content="img/meta.jpg"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<img src="img/joels-fishtank2.png" alt="Joel's Fishtank" class="logo">
<title>Joel's Fishtank</title>
</head>
<body>
<!-- drop down and buttons-->
<div class="item-container">
<div class="item item-1">
<select class="form-select" id="fishes" aria-label="Drop down menu to select a fish">
<option selected>Select a fish...</option>
</select>
</div>
<div class="item item-2">
<button class="btn btn-outline-secondary fish-button" type="button" id="tank-button">Add to tank!</button>
<button type="button" id="lightswitch" class="btn btn-warning">Light Switch</button>
<button type="button" class="btn btn-danger" id="clear-fish">Reset</button>
</div>
</div>
<!-- canvas -->
<div class="fishtank">
<canvas id="fishcontainer">
</canvas>
</div>
<!-- alert prompts -->
<div class="alert alert-1" id="alert-1">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:" id="info"><use xlink:href="#info-fill"/></svg>
<div id="info-alert">
Add a fish, then click & hold anywhere on the tank to move it!
</div>
</div>
</div>
<div class="alert alert-2" id="alert-2">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
</svg>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
You added a fish! Click the reset button to clear the tank!
</div>
</div>
</div>
<hr class="rounded">
<!--fish information-->
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="card">
<h1>These are my fish!</h1>
<p>This website is an online version of my real fishtank. I coded my own fish tank into JavaScript, so now my fish have been immortalized in zeros and ones. Here are some facts about, and pictures of, my fish!</p>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="card">
<img src="img/goldgourami.jpg" class="card-img-top" alt="Gold Gourami">
<div class="card-body">
<h5 class="card-title">Gold Gourami</h5>
<p class="card-text">Gold Gourami's have big personalities and are often found splashing water at me when I approach the tank.</p>
</div>
<div class="card-body">
<button type="button" class="btn btn-outline-success" id="card-button1">Add to tank!</button>
</div>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="card">
<img src="img/pearlgourami.jpg" class="card-img-top" alt="Pearl Gourami">
<div class="card-body">
<h5 class="card-title">Pearl Gourami</h5>
<p class="card-text">Pearl Gourami's are a little more shy and illusive. They tend to spend their days hiding in the plants!</p>
</div>
<div class="card-body">
<button type="button" class="btn btn-outline-success" id="card-button2">Add to tank!</button>
</div>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="card">
<img src="img/neontetra2.jpg" class="card-img-top" alt="Neon Tetra">
<div class="card-body">
<h5 class="card-title">Neon Tetra</h5>
<p class="card-text">Neon Tetras are a schooling fish, and prefer to school with 15 or more fish! They look very confused.</p>
</div>
<div class="card-body">
<button type="button" class="btn btn-outline-success" id="card-button3">Add to tank!</button>
</div>
</div>
</div>
<div class="grid-item grid-item-5">
<div class="card">
<img src="img/siamesealgeaeater.jpg" class="card-img-top" alt="Siamese Algea Eater">
<div class="card-body">
<h5 class="card-title">Siamese Algea Eater</h5>
<p class="card-text">Siamese Algea Eater's spend most of their time hiding, occasionally appearing to do some housecleaning.</p>
</div>
<div class="card-body">
<button type="button" class="btn btn-outline-success" id="card-button4">Add to tank!</button>
</div>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<div class="container-item container-item-1">
<p class="name">
<b>Joel Lake,</b> 2021
</p>
</div>
<div class="container-item container-item-2">
<a href="https://github.com/joel1842/aquarium">
<img src="img/github logo.png" alt="github">
</a>
<a href="https://www.linkedin.com/in/joel-lake-875006164/">
<img src="img/linkedin logo.png" alt="linkedin">
</a>
</div>
<div class="container-item container-item-3">
<a class="btn" href="#" role="button">Back to top</a>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="./index.js" ></script>
<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>