forked from Avdhesh-Varshney/blog-script
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (88 loc) · 4.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cosmoXplore</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<br>
<!-- Mars Rover Photos -->
<h1 align="center" class="section_title" id="mars">Mars Rover Imagery</h1>
<br>
<!-- Default display -->
<div class="rover_container">
<div class="rover_section_img">
<img src="./Images/mars.png" class="mars_illus">
</div>
<div class="rover_section_text">
<p>Welcome to an extraordinary adventure into the Martian landscape, where we invite you to explore the wonders of the Red Planet through the lens of various rovers that have traversed its surface. Our journey takes us deep into the photographic archives, a treasure trove of captivating images captured by these robotic explorers. Each rover, armed with sophisticated cameras, has documented the Martian terrain, unveiling its mysteries one snapshot at a time.
The heart of this exploration lies in a comprehensive database meticulously organized to offer you an unparalleled visual chronicle of Mars' exploration. This repository is a testament to the marvels of technology and the spirit of scientific curiosity that drives humanity to push the boundaries of exploration.
But how do you, the explorer, access this vast collection? Fear not, for we present a user-friendly approach that allows you to effortlessly navigate through the visual wonders of Mars. By simply entering the Earth date corresponding to a specific photo, you unlock a portal to the Red Planet's past, witnessing moments frozen in time by the lenses of our robotic companions.
The convenience of this method provides unparalleled flexibility, enabling you to tailor your exploration based on your interests. Whether you're drawn to the intricate geological formations that dot the Martian surface, mesmerized by the dance of atmospheric phenomena in the thin Martian air, or captivated by the milestones achieved by the rovers themselves, our immersive experience ensures that your curiosity is rewarded.
This journey offers a deeper understanding of Mars' unique features and the scientific endeavors that drive these robotic explorers. From the striking landscapes to the subtle details that tell the story of a planet's evolution, each image contributes to our collective knowledge of the Red Planet.
Join us in unlocking the mysteries of Mars as we navigate through the cutting-edge technology and unparalleled exploration that has brought us face to face with the enigmatic Red Planet.</p>
</div>
</div>
<!-- display on enetering a date -->
<div class="rover_display">
<div class="inner_conatiner">
<div class="image_div">
<img id="roverImg" src="./assets/feel the fear and do it anyway.png">
</div>
<div class="info_container">
<div class="info1">
<div class="row">
<div class="card">
<h4>Earth Date</h4>
<p class="date">....<p>
</div>
</div>
<div class="row">
<div class="card">
<h4>Rover Name</h4>
<p class="roverName">....<p>
</div>
</div>
<div class="row">
<div class="card">
<h4>Camera</h4>
<p class="camera">....<p>
</div>
</div>
</div>
<div class="info2">
<div class="row">
<div class="card">
<h4>Launch Date</h4>
<p class="launch">....<p>
</div>
</div>
<div class="row">
<div class="card">
<h4>Land Date</h4>
<p class="land">....<p>
</div>
</div>
<div class="row">
<div class="card">
<h4>Status</h4>
<p class="status">....<p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="input-group mb-4 input_container">
<input class="date_input" type="text" ="form-control" placeholder="Enter the date for retrieving Mars Rover Images. (YYYY-MM-DD)" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-primary mars_button" type="button" id="button-addon2" onclick="displayRover()" >Enter</button>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>