forked from dmaysteinman/Remote-Education-Resource
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (138 loc) · 6.8 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Compiled and minified CSS -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Helping Communities Transition to Online Learning</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet" />
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet" />
<!-- Custom styles -->
<link rel="stylesheet" href="assets/style/style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Lets Get Learning </a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./resources.html">Online-Resources</a>
</li>
<!-- Dropdown with features? -->
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Calendar</a>
<a class="dropdown-item" href="#">Calculator</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li> -->
</ul>
</div>
</nav>
<!-- Card -->
<!-- add padding, and resize image -->
<div class="card card-cascade wider reverse">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top"
src="https://www.vedamo.com/wp-content/uploads/2018/07/Setting-up-online-school.png"
alt="Card image cap" />
</div>
<!-- Card content -->
<div class="card-body card-body-cascade p-5 text-center">
<!-- Title -->
<h1 class="card-title">Helping Parents & Students Thrive in an Online Environment</h1>
<!-- Text -->
<p class="card-text">
Struggling to adjust to online schooling? You're not alone.
<br>
We've hand picked a few YouTube channels that focus on education. Just pick a channel and type in a
topic to find relevant videos.
<br>
Looking to contact schools in your area? Just select your state, then type in a zip code for the most
up-to-date list of nearby schools.
</p>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 my-3">
<div class="card">
<div class="card-body">
<h2>Search for Video Resources</h2>
<form id="youtube-form">
<div class="form-group">
<select id="channelSelect" class="mdb-select md-form">
<option value="" disabled selected>Select YouTube channel</option>
</select>
<br>
<input type="text" placeholder="Search for a topic" id="search-term"
list="topic-history" /><datalist id="topic-history"></datalist>
<button id="search-button" type="button" class="btn btn-custom text-white"
onclick="getVideo()">Search</button>
</div>
</form>
<div id="video-results"></div>
</div>
</div>
</div>
<div class="col-sm-6 my-3">
<div class="card">
<div class="card-body">
<h2>Find Schools in Your Area</h2>
<form id="youtube-form">
<div class="form-group">
<select id="state-select" class="mdb-select md-form">
<option value="" disabled selected>Select your state</option>
</select>
<br>
<input id="search-zip" type="text" placeholder="Enter ZIP code"
list="zip-history" /><datalist id="zip-history"></datalist>
<button id="search-button-state" class="btn btn-custom text-white"
type="button">Search</button>
</div>
</form>
<div id="data-results"></div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<p>Page by HEHORT</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/logic.js"></script>
</body>
</html>