-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (91 loc) · 3.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ShowFinder App</title>
<!-- Bootstrap CDN css-->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<!-- Custom CSS file -->
<link rel="stylesheet" href="styles/app.css" />
<link rel="stylesheet" href="styles/appMediaQueries.css" />
<!-- Axios: jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="main-container">
<!-- Navbar containing the app logo -->
<nav class="navbar mb-lg-2 mb-0" id="navbar-header">
<div class="container d-flex justify-content-center">
<a class="navbar-brand mx-auto" href="#">
<img id="logo" src="images/app-logo.png" alt="ShowFinder Logo" />
</a>
</div>
</nav>
<!-- Main content area explaining what the app is and how to use it -->
<div class="main-content">
<div class="content-welcome-message">
<h3>Welcome to ShowFinder!</h3>
<p>
With ShowFinder, you can easily discover information about your favorite TV shows,
including summaries, premiere dates, and networks airing the shows. Plus, gain direct
access to official websites for even more information!
</p>
</div>
<div class="content-how-to-use mb-lg-4 mb-3 border-top border-black">
<h4 class="mt-lg-4 mt-md-2">How to Use:</h4>
<p>
Simply use the search field above to find any TV show you're interested in. Enter the
title of the show or even a keyword related to the show, and hit enter. ShowFinder will
fetch all the details you need to know about the show, helping you stay up-to-date with
your favorite series.
</p>
</div>
<div class="get-started border-bottom border-black">
<p>Get started now and dive into the world of TV entertainment with ShowFinder!</p>
</div>
</div>
<div class="row mb-4 mt-3">
<form class="d-flex" id="search-form" role="search">
<div class="col-9 me-lg-1 me-0 search-field-container">
<input
id="tv-search-field"
class="form-control me-lg-2 me-0"
type="search"
placeholder="Looking for a TV show? Start typing..."
name="tvSearch"
aria-label="Search"
/>
</div>
<div class="search-button-container">
<button
id="tv-search-button"
class="btn btn-outline-success w-lg-50 w-100"
type="submit"
>
Search
</button>
</div>
</form>
</div>
<div class="results-container mb-5">
<!-- <div class="h4 pb-2 mb-3 text-danger results-header" id="results-title">Results:</div> -->
<div class="images-container d-flex flex-wrap justify-content-center"></div>
</div>
<!-- Search Form for User -->
</div>
<!-- Bootstrap CDN jsDelivr JS with Popper.js -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<!-- Custom JavaScript file -->
<script src="js/app.js"></script>
</body>
</html>