-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (127 loc) · 5.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
<!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" />
<!-- ICONS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css" />
<!-- 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=Open+Sans:wght@300&family=Quicksand:wght@300&display=swap"
rel="stylesheet">
<title>Chew View</title>
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="./assets/img/Chew View-logos_black.png" alt="The Chew View logo">
</div>
<div class="github"><a href="https://github.com/katiechurchwell/Chew-View"><i class="devicon-github-original"></i>
Check us out on
GitHub!</a></div>
</header>
<!-- HERO -->
<div class="landing-page container p-5">
<!-- blob -->
<svg id="blob" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFFFFF"
d="M41.4,-54.5C56.4,-46.1,73.1,-37.6,76.5,-25.3C79.9,-12.9,70.1,3.3,60.3,15.3C50.5,27.3,40.8,35.1,30.8,42.2C20.8,49.4,10.4,55.9,-2.3,59C-14.9,62.2,-29.8,61.9,-40.8,55C-51.7,48.2,-58.7,34.8,-65.9,19.7C-73.1,4.7,-80.6,-12,-79.2,-28.7C-77.8,-45.4,-67.6,-62.2,-53,-70.7C-38.3,-79.2,-19.1,-79.4,-3,-75.3C13.2,-71.2,26.4,-62.9,41.4,-54.5Z"
transform="translate(100 100)" />
</svg>
<div class="row">
<div class="col hero">
<img src="./assets/img/ice-cream.svg" alt="A person having fun holding a giant ice-cream cone!">
</div>
<!-- TITLE -->
<div class="col">
<div class="title p-1">
<h1>
Take the guesswork out of date night
</h1>
<p>Generate a local restaurant and movie to stream tonight!</p>
</div>
<!-- ZIPCODE ASK -->
<section id="zipcode-ask">
<!-- ZIP CODE / RESTAURANTS SEARCH FUNCTIONS -->
<label class="section-header" id="zipcode-label">Enter your zipcode to get started</label>
<div class="input-group mt-3 d-flex justify-content-center">
<input type="text" id="zip" class="zip-select" pattern="[0-9]{5}" placeholder="00000"
onfocus="this.placeholder=''" />
<button type="submit" id="submit" class="btn btn-outline-secondary">
SEARCH
</button>
</div>
<!-- ZIP CODE SEARCH HISTORY -->
<div id="zip-search-container" class="zip-search-choice pt-3">
<button type="clear" id="clear" class="btn btn-outline-secondary hide">
Clear Search History
</button>
</div>
</section>
</div>
</div>
</div>
<!-- ALL RESULTS -->
<div id="results-container" class="p-3">
<div class="row">
<!-- RESTAURANT CONTAINER -->
<div id="restaurant-results-container" class="col">
<div id="restaurant-category-container" class="d-flex flex-column align-items-end"></div>
<div id="restaurant-name-container" class="d-flex flex-column align-items-end"></div>
</div>
<!-- MOVIE CONTAINER -->
<div id="movie-results-container" class="movie-results col">
<div id="movie-genre-container"></div>
<div id="movie-title-container"></div>
</div>
</div>
</div>
<!-- RESTAURANT DETAIL MODAL -->
<div id="restaurant-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- MOVIE DETAIL MODAL -->
<div id="movie-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- JAVASCRIPT SOURCES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="./assets/js/restaurant-api.js"></script>
<script src="./assets/js/movies-tmdb.js"></script>
</body>
</html>