-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
124 lines (109 loc) · 4.27 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
<!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" />
<!-- Bootstrap Modal -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<script src="scripts/index.js" defer></script>
<script src="scripts/addHoverEffect.js" defer></script>
<script src="scripts/removeHoverEffect.js" defer></script>
<script src="scripts/renderModal.js" defer></script>
<script src="scripts/renderCards.js" defer></script>
<script src="scripts/fetchData.js" defer></script>
<script src="scripts/handleClearModal.js" defer></script>
<script src="scripts/handleNavClick.js" defer></script>
<script src="scripts/filterCardsBySearch.js" defer></script>
<script src="scripts/handleFormSubmit.js" defer></script>
<script src="scripts/addEventListeners.js" defer></script>
<script src="scripts/saveData.js" defer></script>
<script src="scripts/init.js" defer></script>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="./assets/sheikah-logo.svg" />
<!-- Tab icon -->
<title>BOTW Companion</title>
</head>
<body>
<div class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog modal-dialog-centered"> <!-- Vertically Center Modal: https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<img class="modal-img" alt="Modal Card Image">
<h5>Description</h5>
<p class="modal-description"></p>
<p class="modal-category"></p>
<p class="modal-cooking-effect"></p>
<p class="modal-attack"></p>
<p class="modal-defense"></p>
<h5 class="modal-list-heading modal-drops-heading">Drops</h5>
<ul class="modal-drops modal-list"></ul>
<h5 class="modal-list-heading modal-common-locations-heading">Common Locations</h5>
<ul class="modal-locations modal-list"></ul>
</div>
<div class="modal-footer">
<button
type="button"
id="modal-close"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<header>
<a id="sheikah-logo-link" href="https://github.com/codetombomb/2023-acc-phase-1-project-demo" target="_blank"> <!-- target="_blank": This will open a link in a new tab https://www.w3schools.com/tags/att_a_target.asp -->
<img
id="sheikah-logo"
src="./assets/sheikah-logo.svg"
alt="Shiekah Logo"
/>
</a>
<div id="search-bar-wrapper">
<form id="search-bar-form">
<input
id="search-bar"
type="text"
name="search-bar"
placeholder="Search..."
required
/>
<button id="search-submit" type="submit">
<img src="./assets/submit-icon.svg" />
</button>
</form>
</div>
<div id="hero-banner"></div>
</header>
<main>
<div id="nav-wrapper">
<nav>
<ul id="nav-links">
<li class="nav-link" for="creatures">Creatures</li>
<li class="nav-link" for="equipment">Equipment</li>
<li class="nav-link" for="materials">Materials</li>
<li class="nav-link" for="monsters">Monsters</li>
<li class="nav-link" for="treasure">Treasure</li>
</ul>
</nav>
</div>
<div id="card-wrapper"></div>
</main>
</body>
</html>