Project1/index.html at master · kbrowngithub/Project1 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>We put the OUT in outdoors and passout!</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/that-nogo-font-casual" type="text/css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/opendyslexic" type="text/css">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/otfpoc" type="text/css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
    <div id="header" class="back-image-white flex flex-col sm:flex-row w-full leading-tight sm:leading-loose justify-between">
        <div class="back-image-white flex flex-col md:flex-row w-auto">
            <h1 class="font-nogo text-3xl ml-4 w-full min-w-0">Welcome to a Hipster's Paradise!</h1>
        </div>
		<div id="myModal" class="modal">

			<!-- Modal content -->
        <div class="modal-content">
			<span class="close">&times;</span>
			<p>Modal text ..</p>
		</div>

        </div>
		<div class="flex flex-col sm:flex-row">
			<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-1 invisible" role="alert">
				<p class="text-sm font-bold">Looks like it's your first time here</p>
				<p class="text-sm">Just Type in a location or zip code and hit enter to get started</p>
			</div>
            <input type="text" id="search" placeholder="ex. 'Denver, CO.'" class="border border-black border-solid rounded m-3">
			<button id="getLocation" class = "font-bold px-3 bg-teal-300 hover:bg-white border-r-2 border-l-2 border-solid border-black">Get Location</button>
			<button id="saveButton" class = "font-bold px-3 bg-teal-300 hover:bg-white border-r-2 border-solid border-black">Save Search</button>
        </div>
    </div>
    <div class="flex flex-col sm:flex-row">
        <div class="back-image-white w-full mt-1 sm:mt-5 mx-0 sm:mx-2 sm:rounded-lg px-2 pb-2 sm:w-auto flex-grow-0 border-2 border-solid border-black">
            <h1 class="font-agh font-bold text-2xl leading-tight text-center sm:rounded-t-lg border-b-2 border-black border-dotted">
                Saved Searches
            </h1>
            <table>
                <thead>
                    <th>Saved Search Term</th>
                    <th>Search Again</th>
                </thead>
                <tbody id="savedSearches">
                </tbody>
			</table>
			<div class = "content-center mx-auto my-2">
				<button id = "clear-searches" class = "bg-teal-300 hover:bg-teal-500 p-2 rounded-lg border border-solid border-black">Clear Searches</button>
			</div>
        </div>
        <div class="back-image-white w-full mt-1 sm:mt-5 mx-0 sm:mx-2 sm:rounded-lg px-2 pb-2 sm:w-auto flex-grow border-2 border-solid border-black">
            <h1 class="font-agh font-bold text-2xl leading-tight text-center sm:rounded-t-lg border-b-2 border-black border-dotted">
                Venues With Upcoming Events in This Area
            </h1>
            <table id="events" class = "p-2">
                <tr></tr>
            </table>
        </div>
        <div class="back-image-white w-full mt-1 sm:mt-5 mx-0 sm:mx-2 sm:rounded-lg px-2 pb-2 sm:w-auto flex-grow border-2 border-solid border-black">
            <h1
                class="font-agh font-bold text-2xl leading-tight text-center sm:rounded-t-lg border-b-2 border-black border-dotted">
                Breweries Nearby
            </h1>
            <table id="breweries">
                <tr></tr>
            </table>
        </div>

    </div>
    <div class="flex flex-col sm:flex-row w-full" id="image-div"></div>
    <div id="errModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p></p>
        </div>

    </div>
    <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-database.js"></script>
    <script src="assets/javascript/app.js"></script>
</body>

</html>