-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (47 loc) · 1.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A site for viewing NASA APOD (Astronomy Picture Of the Day)" />
<title>Astronomy Picture of the Day</title>
<script src="resources/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
<script src="app.js" type="text/javascript" defer></script>
</head>
<body>
<img id="loader" src="images/loading.gif" alt="Loading..." />
<main id="full">
<header>
<h1>NASA's Astronomy Picture of the Day for <span id="date"></span></h1>
<h2 id="img_title"></h2>
</header>
<p id="explanation"></p>
<div id="outer">
<form action="">
<div class="inner">
<label for="selectdate">Enter Date: </label>
<input name="d" type="date" id="selectdate" min="1995-06-16" max="" required />
</div>
<div class="inner">
<button type="submit" id="go">GO</button>
</div>
<div class="inner">
<button id="showHalf" type="button">Show partially loaded image</button>
</div>
</form>
</div>
<p id="waiting">Loading image...</p>
<img id="load_img" src="images/loading.gif" alt="Loading..." />
<a id="image_anchor" href="" target="_blank" rel="noopener noreferrer">
<img id="main_image" src="" alt="Image" />
</a>
<div id="video_container"></div>
<footer>
<p id="learnMore">Learn more about Astronomy Picture Of the Day (APOD) <a href="https://apod.nasa.gov/apod/lib/aptree.html" target="_blank" rel="noopener noreferrer">Here</a></p>
<p id="copyright">Image Copyright: ©</p>
</footer>
</main>
</body>
</html>