-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (110 loc) · 5.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>🦘KangaBrew</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Added in 🥾Bootstrap 2022-11-16 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<!-- 🎯Attempting to add confetti to click of Activate Party mode (left-> right only) -->
</head>
<body>
<header id="header-container" class="container-fluid">
<div class="row">
<div class="col-sm">
<h1>🦘🍺🥳 KangaBrew</h1>
<h2>Your Brewery Hop Companion</h2>
</div>
<!-- Default switch -->
<div class="col-sm ms-auto">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="partyModeFlexSwitch" />
<label class="form-check-label" for="partyModeFlexSwitch">🥳Activate PARTY Mode?!</label>
</div>
</div>
<div class="col-sm ms-auto">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="webStorageModeFlexSwitch" />
<label class="form-check-label" for="webStorageModeFlexSwitch">🧪Activate (Experimental) Web Storage Mode</label>
</div>
</div>
</div>
</header>
<canvas id="world" hidden></canvas>
<div id="error-container" class="hidden">
<h2 id="error-message">Placeholder text for error message at runtime</h2>
</div>
<div class="row">
<div class ="col-lg-3 col-md-4 col-sm-5 col-auto">
<div id="search-container" class="row">
<h2 id="search-header"><u>Search</u></h2>
<form id="search-form">
<label for="city-search">City</label>
<input id="city-search" type="text" placeholder="City" name="city">
<input id="submit-search" class="" type="submit" value="Search">
</form>
</div>
<div id="navigate-results-buttons" class="row">
<h3 for="city-searched"><u>Current City</u></h3>
<h4 id="city-searched"></h4>
<h4 id="results-label"><u>Results</u><h4>
<h5 id="results-value"></h5>
<button id="search-previous-button" class="btn" type="button" disabled>⬅️ Previous Page</button>
<button id="search-next-button" class="btn" type="button" disabled>➡️ Next Page</button>
</div>
<div id="detail-container" class="row">
<h1 id="brewery-name"></h1>
<h2 id="brewery-type"></h2>
<h5 id="brewery-address"></h5>
<a id="brewery-url"></a>
<button id="add-brewery-button" type="button" class="btn btn-primary">Add</button>
</div>
<div id="my-breweries-container" class="row">
<h1 id="my-breweries-header"><u>My Breweries</u></h1>
<ol id="my-breweries-list">
</ol>
</div>
</div>
<div id="results-container" class="col-lg-9 col-md-8 col-sm-7 col-auto">
<h2 id="results-header-h1"><u>Search Results</u></h2>
<table class="table table-striped table-bordered table-hover table-responsive">
<thead>
<tr id="table-header">
<th scope="col" id="table-header-result-add" class="d-table-cell">Quick Add</th>
<th scope="col" id="table-header-result-details" class="d-table-cell">See Details</th>
<th scope="col" id="table-header-result-number" class="d-table-cell">Result</th>
<th scope="col" id="table-header-result-name" class="d-table-cell">Brewery</th>
<th scope="col" id="table-header-result-type" class="d-none d-md-table-cell">Type</th>
<th scope="col" id="table-header-result-address" class="d-none d-lg-table-cell">Address</th>
<th scope="col" id="table-header-result-phone" class="d-table-cell">Phone</th>
</tr>
</thead>
<tbody id="results-table-body" class="">
<!-- The results from the search will go here -->
</tbody>
</table>
</div>
</div>
<footer id="footer-container" class="">
<h5 class="row d-flex justify-content-center">Ben Merryman | 2023</h5>
<!-- Tab9: Create a Bold and underline resources below -->
<h4 class="row d-flex justify-content-center underline">Resources</h4>
<a class="row d-flex justify-content-center" href="https://getbootstrap.com/" target="_blank">🥾 Bootstrap</a>
<a class="row d-flex justify-content-center" href="https://codepen.io/linrock/pen/nMadjQ" target="_blank">🥳 Confetti</a>
<a class="row d-flex justify-content-center" href="https://www.openbrewerydb.org/" target="_blank">🍺 openbrewerydb.org API</a>
</footer>
</body>
<!-- load order matters, 🌐global.js variables, then 🔨 helper.js functions, then
⌛index.js for forms behavior and initial render calls -->
<script src="./src/global.js"></script>
<script src="./src/helper.js"></script>
<script src="./src/index.js"></script>
<!-- 🎊 Trying to get confetti party to work -->
<script src="./confetti/confetti.js"></script>
</html>