-
Notifications
You must be signed in to change notification settings - Fork 0
/
Encyclopedia.html
128 lines (107 loc) · 6.22 KB
/
Encyclopedia.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Encyclopedia - ACNH Apps</title>
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="Style/Style.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=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet" />
<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=Satisfy&display=swap" rel="stylesheet" />
<script src="Scripts/universalScripts/header.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/time.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/addSubtractDays.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/eventsFunctions.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/suggestiveTextbox.js" defer type="text/javascript"></script>
<script src="Scripts/lists/Bugs.js" defer type="text/javascript"></script>
<script src="Scripts/lists/Fish.js" defer type="text/javascript"></script>
<script src="Scripts/lists/Diving.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/searchCritter.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/bookBehavior.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/encyclopediaIndex.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/bugPage.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/fishPage.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/divePage.js" defer type="text/javascript"></script>
<script src="Scripts/Encyclopedia/Encyclopedia.js" defer type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S7H31G1T9W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-S7H31G1T9W');
</script>
</head>
<body class="backImage">
<header class="flex align" id="header"></header>
<main class="mainContent flexVertical">
<h3>How to Use:</h3>
<p>Select your hemisphere.<br><br>
Use the arrows under the book to navigate. In the index, click on a critter to see their specifications.
Or use the search input to immediatly look for the critter in mind.<br><br>
Use the shortcuts above the book to go to the diffrent sections (Bugs, Fish, Diving)<br><br>
If you want to go back to the cover of the encyclopedia, Click on the page number<br><br>
</p>
<div style="align-self: center; font-size: 1.2em;">
<div>
<input type="radio" name="hemisphere" id="northHem" onchange="hemChange()" value="northHem" checked>
<label for="northHem">Northern Hemisphere</label>
</div>
<div>
<input type="radio" name="hemisphere" id="southHem" onchange="hemChange()" value="southHem">
<label for="southHem">Southern Hemisphere</label>
</div>
</div>
<form class="flex form" autocomplete="off" style="height: 40px;">
<div class="autocomplete" style="width: 100%;">
<input type="text" id="creatureInput" style="height: 90%; width: 98%;">
</div>
<button type="button" class="btn" id="search" style="width:35%; padding: 0px;" onclick="searchCritter()">
<img src="https://cdn-icons-png.flaticon.com/512/149/149852.png" alt="Search" style="height: 70%;">
</button>
</form>
<div class="flexVertical" id="encyclopediaDiv" style="height: 550px; gap: 0px;">
<div id="Shortcuts">
<button class="shortcutBtn" onclick="Bug()">
<img src="https://dodo.ac/np/images/f/f8/Common_Butterfly_NH_Icon.png" alt="" style="width: 50px;">
</button>
<button class="shortcutBtn" onclick="Fish()">
<img src="https://dodo.ac/np/images/4/4d/Bitterling_NH_Icon.png" alt="" style="width: 50px;">
</button>
<button class="shortcutBtn" onclick="Dive()">
<img src="https://dodo.ac/np/images/5/58/Octopus_NH_Icon.png" alt="" style="width: 50px;">
</button>
</div>
<div class="flexVertical" id="encyclopedia" style="gap: 0px">
<div id="book"></div>
</div>
</div>
</main>
<footer class="flex bottomLinks">
<p>DA: DA-9419-3603-8052<br>Creator ID: MA-4116-4314-7050<br>HHN ID: RA-7852-3149-7307</p>
</footer>
</body>
<script>
if ('serviceWorker' in navigator) {
// Register a service worker after the load event
addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js').then(console.log('Service worker successfully installed.'));
if (!matchMedia('(display-mode: standalone)').matches) { // only execute if app is not already installed
console.log('Executing app install reminder.'),
// reminds the user they can install the app
alert('Consider installing the app!\nDesktop Browser - click install button in top-right of address bar\nMobile Browser - click Add To Homescreen after clicking share button');
};
});
};
onappinstalled = event => {
console.log('Thank you for installing the app!');
};
</script>
</html>