apod-app/index.html at master · dbinebrink/apod-app · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
<title>test apod</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<link href="css/lightpick.css" rel="stylesheet">

<!-- JS STUFF HERE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

<script src="js/lightpick.js"></script>


<style>


.lightpick__day.is-today {
	color: #666;
	font-weight: bold;
}

#random-button {
	border-radius: 4px;
	background: #4ba2dc;
	padding: 10px 25px;
	margin: 5px;
	color: #fff;
	border: 0;
	font-weight: bold;
}

@media screen and (min-width: 576px) {
	.jumbotron {
		padding: 30px;
	}
}

@media screen and (min-width: 576px) {
	.modal-lg {
		max-width: 1000px;
		max-height: 900px;
	}
}

</style>


</head>

<body>


<header class="jumbotron jumbotron-fluid" style="background: url('images/galaxy2-final.jpg'); background-size: 0% 0%; background-size: cover;">
	<div class="container text-white">
		<div class="row">
		<div class="col-md-9">
			<h1>NASA Astronomy Pictures Archive</h1>
			<p class="pr-4">This is a small application to browse NASA's Astronomy Picture of the Day archive. This web site is currently pulling from the official NASA APOD API.</p>
		</div>
		<div class="col-md-3 my-auto">
			<button class="mt-1 mb-1" id="random-button">Random Image</button>
		</div>
		</div>
	</div>
</header>


<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">

			<img src="" class="img-responsive mx-auto" id="full-image" alt="Full Image" style="max-width: 1000px; max-height: 900px;">

    </div>
  </div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-8">

			<div class="container">
			    <div class="row">
			        <div class="col-12 px-2">

		                <div class="card">

							<a href="#" data-toggle="modal" data-target="#myModal" id="modal-link">
		                    <img class="card-img-top bg-light img-responsive" src="" alt="Astronomy Picture of the Day" id="apod-image" style="min-height: 100px">
		                	</a>

		                    <div class="card-body">
		                        <h5 class="card-title" id="apod-title">Loading...</h5>
		                        <em id="apod-date"></em>
		                        <p class="mt-3" id="apod-description"></p>
												</div>

		                </div>

			        </div>
			    </div>
			</div>
		</div>

		<!-- CALENDAR AND DATEPICKER HERE -->
		<div class="col-md-4 border pt-3 bg-light">

			<p><strong id="info-message"></strong></p>

			<input type="text" id="date" name="datepicker" placeholder="Choose Date" class="my-1" style="display: none;">
			<div id="calendar-area" class="mt-0 p-1"></div>

		</div>

	</div>
</div>

<br><br>

<footer class="jumbotron jumbotron-fluid mb-0" style="background: url('images/galaxy2-final.jpg'); background-size: 0% 0%; background-size: cover;">
	<div class="container">

		<p class="text-white">Thanks for visiting, let me know if you have any feedback.</p>

	</div>
</footer>

<script src="js/app.js"></script>

</body>
</html>