-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (147 loc) · 8.31 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
<!-- ACNH DATABASE by ADAM MORSA
twitter.com/ramblingadam
github.com/ramblingadam
All fetched images, audio, and data displayed by this project are copyright Nintendo.
Copyright Adam Morsa. All rights reserved. The code for this project is licensed under the GNU GPL v2.0 License (https://github.com/ramblingadam/acnh/blob/main/LICENSE.md) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="animal crossing, new horizons, fish, bugs, sea creatures, villagers, diving, blathers, museum">
<meta name="description" content="Easily search for villagers, fish, bugs, and sea creatures by name, species, availability, and more. See whose birthday's are coming up, check sell prices of critters, or easily read Blathers' museum donation text whenever you like!">
<title>Animal Crossing: New Horizons Database</title>
<!-- Fonts -->
<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=Concert+One&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!-- Font-Awesome Icons -->
<script src="https://kit.fontawesome.com/ab085a1591.js" crossorigin="anonymous"></script>
<!-- external CSS link -->
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#acd8e4">
</head>
<body>
<div id="toTop"><a href="#"><i class="fa-solid fa-angle-up"></i></a></div>
<section class="welcomeWindowBG">
<div class="welcomeWindow">
<h2><img class="menuIcon" src="assets/icon_bug.png">Welcome to the ACNH Database!<img class="menuIcon" src="assets/icon_sea.png"></h2>
<span>A Fan Project by <a href="https://twitter.com/ramblingadam" target='_blank'>Adam Morsa</a></span>
<h3><img class="menuIcon" src="assets/icon_star.png">Features<img class="menuIcon" src="assets/icon_star.png"></h3>
<h3><img class="menuIcon" src="assets/icon_villager.png">Villagers</h3>
<ul>
<li>Search villagers by <em>name</em>, <em>species</em>, <em>personality</em>, or <em>birthday</em>.</li>
<li>Enjoy discovering each villager's <em>personal quote</em> and <em>catchphrase</em>.</li>
<li>5/12/24 Update: Fixed missing images and music which disappeared during the Herokupocalypse.</li>
<li>6/4/22 Update: 2.0 villagers now available via custom API! <em>Woohoo!</em></li>
</ul>
<h3><img class="menuIcon" src="assets/icon_critters.png">Critters</h3>
<ul>
<li>Search bugs, fish, and sea creatures by <em>species</em>, <em>location</em>, <em>rarity</em>, or <em>month available</em>.</li>
<li>Toggle your hemisphere by clicking the <em>globe icon</em> next to the search bar.</li>
<li>Easily see the <em>sell price</em> and <em>time available</em> of every critter at a glance.</li>
<li>Critters that are currently available to catch are <em>automagically</em> highlighted.</li>
<li>Click on a critter to read the <em>full speech</em> given by museum curator <em>Blathers</em> when that critter is donated.</li>
</ul>
<h3><img class="menuIcon" src="assets/icon_antiquities.png">Fossils & Art</h3>
<ul>
<li>Search fossils and art by <em>name</em>.</li>
<li>Click on a fossil to read the <em>full speech</em> given by museum curator <em>Blathers</em> when that fossil is donated.</li>
<li>Click on an art piece to read the <em>museum description</em>.</li>
</ul>
<h3><img class="menuIcon" src="assets/icon_music.png"></i>Ambience</h3>
<ul>
<li>Enjoy the <em>soothing</em> soundtrack of AC:NH as you browse the database. The track played <em>syncs up</em> to your local time for the <em>authentic</em> Animal Crossing experience.</li>
<li>Oh no, is the <em>2pm</em> music playing? Have no fear, toggle the music off with the <em>speaker button</em> at the top of the page.</li>
<li>Prefer the <em>rain</em> to the heat of the sun? So do I. Click the <em>weather</em> icon at the top to bring on the rain, and enjoy the accompanying rainy music track.</li>
</ul>
<h3><img class="menuIcon" src="assets/icon_present.png">More to come...?</h3>
<ul>
<li>Maybe! Follow me on <a href="https://twitter.com/ramblingadam" target='_blank'>Twitter</a> for updates on this and my other <em>fun</em> projects!</li>
<li><em>Thanks so much</em> for visiting! I hope you have as much fun playing with this app as I did building it!</li>
<li>Click or tap <em>anywhere</em> to get started!</li>
</ul>
</div>
</section>
<section class="blathersFullWindow blathersHidden blathersHiddenZ">
<!-- <section class="blathersFullWindow"> -->
<div class="blathersFullInnerWindow">
<h2 id="blathersFullCritterName" class="name"></h2>
<div id="blathersFullImgBox">
<img id="blathersFullCritterImg" src="">
<img class = "blathersFace" src="assets/blathers_book.png">
</div>
<p id="blathersFullCritterText"></p>
</div>
</section>
<header>
<img id="balloon" src="assets/balloon_sm.png">
<img id="pascal" src="assets/pascal_swim_sm.png">
<img id="seaplane" src="assets/seaplane_sm.png">
<!-- <div class="raindrop"></div> -->
<div class="logoBox">
<!-- ! CHARACTER SPY -->
<img id="spy" src="assets/char_tom.png">
<!-- ! MAIN LOGO -->
<img class="logo" src="assets/headerImgCustom_sm.png">
<!-- ! MUSIC TOGGLE BUTTON -->
<i id="musicToggle" class="fa-solid fa-volume-high"></i>
<!-- <i id="musicToggle" class="fa-solid fa-volume-xmark"></i> -->
<!-- ! WEATHER BUTTON -->
<i id="weatherBtn" class="fa-solid fa-cloud-showers-heavy"></i>
<!-- <i id="weatherBtn" class="fa-solid fa-sun"></i> -->
<!-- ! INFO BUTTON -->
<i id="infoBtn" class="fa-solid fa-circle-info"></i>
<!-- ! PERSONAL LINKS -->
<a href="https://twitter.com/ramblingadam" target="_blank"><i id="twitter" class="fa-brands fa-twitter"></i></a>
<a href="https://github.com/ramblingadam" target="_blank"><i id="github" class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/adam-morsa" target="_blank"><i id="linkedin" class="fa-brands fa-linkedin"></i></a>
<!-- ! NOW PLAYING POPUP -->
<div class="nowPlayingBox nowPlayingHidden">
<p class="nowPlayingHeader"><i class="fa-solid fa-music"></i> <span id="nowPlayingSong">1AM, Rainy</span></p>
</div>
</div>
<nav class="">
<ul class="desktopMenu">
<li class="btnVillagers"><img class="menuIcon" src="assets/icon_villager.png">Villagers</li>
<li class="btnFish"><img class="menuIcon" src="assets/icon_fish.png">Fish</li>
<li class="btnBugs"><img class="menuIcon" src="assets/icon_bug.png">Bugs</li>
<li class="btnSea"><img class="menuIcon" src="assets/icon_sea.png">Diving</li>
<li class="btnFossils"><img class="menuIcon" src="assets/icon_fossil.png">Fossils</li>
<li class="btnArt"><img class="menuIcon" src="assets/icon_art2.png">Art</li>
<!-- <li id="btnSongs">Songs</li> -->
</ul>
<ul class="mobileMenu">
<li class="btnVillagers"><img class="menuIcon" src="assets/icon_villager.png"></li>
<li class="btnFish"><img class="menuIcon" src="assets/icon_fish.png"></li>
<li class="btnBugs"><img class="menuIcon" src="assets/icon_bug.png"></li>
<li class="btnSea"><img class="menuIcon" src="assets/icon_sea.png"></li>
<li class="btnFossils"><img class="menuIcon" src="assets/icon_fossil.png"></li>
<li class="btnArt"><img class="menuIcon" src="assets/icon_art2.png"></li>
<!-- <li id="btnSongs">Songs</li> -->
</ul>
</nav>
</header>
<!-- Main Area -->
<section class="content">
<div class="searchBox">
<figure>
<i id="hemisphereToggle" class="fa-solid fa-earth-americas"></i>
<input spellcheck="false" type="search" id="search" placeholder="Search name, species, personality, birthday...">
</figure>
</div>
<ul id="contentGrid">
<!-- API Content Goes Here -->
</ul>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>