-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
147 lines (145 loc) · 6.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<link rel="stylesheet" href="./assets/css/mgplus.css" />
<link
rel="stylesheet"
href="https://unpkg.com/spectre.css/dist/spectre.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css"
/>
<link rel="stylesheet" href="./assets/css/mgplus.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Aboreto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Moon Fish</title>
</head>
<body>
<header>
<h1>
Mo<img src="./assets/images/moonfish.png" alt="image not available" />n
Fish
</h1>
<button
data-toggle="modal"
data-target="modal-1"
class="button"
>
About
</button>
</header>
<main class="container">
<div class="columns">
<section id="search" class="column col-3 col-lg-4 col-sm-12 container">
<div class="columns">
<input
id="searchInput"
type="text"
placeholder="city name or zipcode" autocomplete="off"
/>
<div class="column col-12">
<button id="searchBtn" class="button button--outline button--small">Search</button>
<button id="clearBtn" class="button button--outline button--small">Clear saved</button>
</div>
<div id="savedSearches" class="column col-12"></div>
</div>
</section>
<section id="display" class="column col-9 col-lg-8 col-sm-12">
<div id="about" class="clearfix">
</div>
<div class="container">
<div id="forecast" class="columns"></div>
</div>
</section>
</div>
</main>
<div class="mg-modal" id="confirmation-modal">
<div class="mg-modal--content mg-container">
<span id="hideThisSpan" class="mg-close mg-right" data-action="close"></span>
<h3>
<span class="mg-close mg-right" id="hideThisSpan" data-action="close"></span>
</h3>
<div>
<div class="modal-content clearfix" id="confirmationContent">
</div>
<label for="searchName"
>What would you like to call this search?</label
>
<input type="text" id="searchName" />
<button id="yesBtn" data-correct="yes" class="button button--small">
<span>Yes, this is correct</span>
</button>
<button id="noBtn" data-correct="no" class="button button--small button--outline">
<span>No, this isn't correct</span>
</button>
</div>
</div>
</div>
<div class="mg-modal" id="modal-1">
<div class="mg-modal--content mg-container">
<h3>
Moon Fish
<span class="mg-close mg-right" data-action="close"></span>
</h3>
<div class="mg-modal--body">
<div class="mg-tabs" data-toggle="tabs" id="tabs-example">
<ul>
<li class="mg-tabs--item active" data-target="tab1">
<a href="#" class="secondary">About Us</a>
</li>
<li class="mg-tabs--item" data-target="tab2">
<a href="#" class="button--outline">Solunar</a>
</li>
<li class="mg-tabs--item" data-target="tab3">
<a href="#" class="secondary">And More</a>
</ul>
<div class="mg-tabs--content" id="tab1">
Each member of our team has relatives who are fishers, whether casual or competitive. They all have special spots they love to fish and want to find new spots to try. Knowing the weather for that day and the coming week is useful to evaluate locations, but we had something special to add: the Solunar theory helps fishing enthusiasts know when the fish are biting!
</div>
<div class="mg-tabs--content" id="tab2">
The Solunar theory is a hypothesis that fish and other animals
behave differently depending on the phases of the moon. It
originated in 1926: John Alden Knight compiled some fishing
folklore and made a list of factors that were alleged to influence the
behavior of fish. Of the 33 factors he considered only three of them seemd to prove legitimate: the sun, the moon, and the tide. The Solunar Theory was born. Solunar tables are used mainly by fishermen
and hunters to determine what times of the month are best for
fishing and hunting.
</div>
<div class="mg-tabs--content" id="tab3">
There are more conditions that also affect animal behavior. Higher air pressure will cause fish to go into lower depths to take cover, and they'll be less likely to bite. Lower air pressure will make
fish more lethargic and more likely to hunt for food. Temperature
affects the metabolic rate of fish and thus, their energy balance
and drive for food. Wind speed will affect the choppiness of the
waves, thus changing what fish are currently out.
</div>
</ul>
</div>
</div>
</div>
</div>
<script src="./assets/js/mgplus.js"></script>
<script src="./assets/js/jQuery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>