-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (135 loc) · 7.22 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
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="APOD (Astronomy Picture of the Day) is a website that uses the NASA API to display a different picture of the cosmos every day.">
<!-- Favicon generated here: https://favicon.io/ -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<title>Astronomy Picture of the Day</title>
<!-- Google 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=Josefin+Sans&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- Local CSS -->
<link rel="stylesheet" href="style/style.css">
<!-- jQuery 3.6.0 https://code.jquery.com/ -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!-- Local JS -->
<script src="js/utils.js"></script>
<script src="js/api.js"></script>
<script src="js/main.js" defer></script>
</head>
<body>
<!-- Only displays when the user clicks over the image. -->
<div class="modal-img" id="modal" style="display: none;">
<button class="main-btn -fill-up -close" id="close-modal" type="button" title="Close">
✕
</button>
<img class="media" id="modal-img" src="#" alt="#">
</div>
<div class="container-col">
<header class="header-container">
<nav class="nav">
<a class="logo" href="./">apod</a>
<ul class="menu">
<li>
<button class="link" id="random-header" type="button" title="Click to load a random picture">
Random Picture
</button>
</li>
<li>
<a class="link" href="#about">About</a>
</li>
</ul>
</nav>
</header>
<main class="main-section -bg-img">
<h1 class="section-title">
<span class="highlight">A</span>stronomy <span class="highlight">P</span>icture <span class="highlight">o</span>f the <span class="highlight">D</span>ay
</h1>
<section class="wrapper-content">
<figure class="figure">
<figcaption>
<strong>Day:</strong> <u id="date"></u> <!-- Date is defined on JS. -->
</figcaption>
<img class="media" id="media-img" src="#" alt="#" title="Click to see the full image">
<!-- Hidden by default, only shows if the media isn't a image. -->
<iframe class="media" id="media-video" src="#" frameborder="0" allowfullscreen style="display: none;"></iframe>
</figure>
<div class="main-content">
<article class="content">
<h3 class="title" id="title"></h3> <!-- Title is defined on JS. -->
<p class="explanation">
<strong>Explanation:</strong>
<span id="explanation"></span> <!-- Explanation is defined on JS. -->
</p>
<!-- Hidden by default, sometimes there's no copyright owner. -->
<p class="credits" style="display: none;">
<strong>Credits:</strong> <ins id="copy-owner"></ins> <!-- Owner is defined on JS. -->
</p>
</article> <!-- .content -->
<!-- This form is hidden by default. -->
<form class="main-form" style="display: none;">
<legend class="title">Enter a valid date to get a picture of that specific day.</legend>
<fieldset class="field">
<label class="label" for="input-date">
Enter a date:
</label>
<input class="input" id="input-date" type="date" name="date" min="1995-06-16" required>
<button class="main-btn -full -fill-up" type="submit">
Send
</button>
</fieldset>
<!-- Hidden by default, only displays when there's a error. -->
<p class="error" id="error" style="display: none;">Mensagem de erro</p>
</form> <!-- .main-form -->
<div class="buttons">
<button class="main-btn -full -fill-up" id="go-to-form" type="button">
Choose a day
</button>
<!-- Hidden by default, sometimes there's no HD image. -->
<a class="main-btn -full -fill-up" id="hdr-img" href="#" target="_blank" rel="external" title="Click here to see a higher quality image" style="display: none;">
See HDR image
</a>
<!-- Hidden by default, until the user clicks on the 'Choose a day' button. -->
<button class="main-btn -full -fill-up" id="back-btn" type="button" style="display: none;">
← Back to current day
</button>
<button class="main-btn -full -fill-up" id="random" type="button" title="Click to choose a random picture" style="display: none;">
Random picture
</button>
</div>
</div> <!-- .main-content -->
</section> <!-- .wrapper-content -->
</main>
<section class="main-section" id="about">
<h2 class="section-title">About</h2>
<div class="wrapper-about">
<p class="about">
<strong>Discover the cosmos!</strong> Since <ins>June 16, 1995</ins>, each day of our fascinating universe is
featured, along with a brief explanation written by a professional astronomer.
</p>
<p class="about -small -box">
<strong class="title"><u class="title">About image permissions:</u></strong>
All the images on the <strong>APOD</strong> page are credited to the owner or institution where they originated. Some of
the images are copyrighted to use these pcitures publicly or commercially one must write to the owners for permission.
For the copyrighted images, the copyright owner is identified in the APOD credit line (please see the copyright owener
name afther the explanation). NASA images are in the public domain, official guidelines for their use can be found <a class="main-link" href="http://www.nasa.gov/audience/formedia/features/MP_Photo_Guidelines.html" target="_blank" rel="noopener external">here</a>.
</p>
</div>
</section>
<footer class="footer-container">
<p class="copyright">
<a class="main-link" href="https://github.com/willy-r" target="_blank" rel="noreferrer noopener external">William Rodrigues</a>
© <span id="year"></span> - All rights reserved
</p>
<p class="credits">
Website made for study purposes, inspired in the <a class="main-link" href="https://apod.nasa.gov/apod/astropix.html" target="_blank" rel="noopener external">original APOD website</a>, by <a class="main-link" href="https://api.nasa.gov/" target="_blank" rel="noopener external"><strong>NASA API</strong></a>.
</p>
</footer>
</div> <!-- .container-col -->
</body>
</html>