forked from anomic84/US-Brewery-Finder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (72 loc) · 3.67 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
<!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">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.0.6/dist/leaflet.markercluster.js"></script>
<link type="text/css" rel="stylesheet"
href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.css" />
<link type="text/css" rel="stylesheet"
href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="/src/input.css">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="./assets/style.css">
<title>Brewery Finder</title>
</head>
<body>
<nav class="border border-amber-800 border-4 w-screen p-4 bg-blue-400">
<h1 class="text-amber-200 text-center title">US Brewery Finder</h1>
</nav>
<!-- whole dive under nav -->
<div class="container w-full main-columns">
<!-- search column -->
<div class="container grid grid-row-2 col1">
<!-- search bar -->
<!-- <div class="container border border-black rounded"> -->
<div class="">
<input type="text" name="searchbutton" id="city-input" placeholder="Enter City Name"
class=" pt-2 pb-2 border border-amber-800 border-4 grid grid-row-1 w-full rounded">
<button class="bg-amber-800 hover:bg-amber-600 text-blue-200 px-4 py-2 grid grid-row-1 w-full rounded"
for="searchbutton" id="search-button">Search</button>
</div>
<!-- search history -->
<div class="container" id="search-history">
</div>
</div>
<!-- information and map column -->
<div class="container grid grid-row-2 col2 h-100">
<!-- MAP -->
<div class="container grid grid-row-2 h-100 maparea border border-black rounded" id="map">
</div>
<!-- Brewery Info-->
<div class="container info-store p-4 bg-amber-800 grid grid-row-2" id="store-info">
</div>
<div>
<ul id="store-list"></ul>
</div>
</div>
</div>
<!--
<div>
<iframe width="500" height="400" frameborder="0"
src="https://www.bing.com/maps/embed?h=400&w=500&cp=47.36161812160387~-122.596435546875&lvl=11&typ=d&sty=r&src=SHELL&FORM=MBEDV8"
scrolling="no">
</iframe>
<div style="white-space: nowrap; text-align: center; width: 500px; padding: 6px 0;">
<a id="largeMapLink" target="_blank"
href="https://www.bing.com/maps?cp=47.36161812160387~-122.596435546875&sty=r&lvl=11&FORM=MBEDLD">View
Larger Map</a> |
<a id="dirMapLink" target="_blank"
href="https://www.bing.com/maps/directions?cp=47.36161812160387~-122.596435546875&sty=r&lvl=11&rtp=~pos.47.36161812160387_-122.596435546875____&FORM=MBEDLD">Get
Directions</a>
</div> -->
</div>
<script src="./assets/script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.2.js"
integrity="sha256-pkn2CUZmheSeyssYw3vMp1+xyub4m+e+QK4sQskvuo4=" crossorigin="anonymous"></script>
</body>
</html>