-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (104 loc) · 5.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='bootstrap.css') }}" />
<title>Mars News</title>
</head>
<body>
<div class="jumbotron centering">
<div class="text-center">
<h1 class="display-3">Mission to Mars</h1>
</div>
<div class="text-center">
<p class="lead">
<a class="btn btn-primary btn-lg" href="/scrape" role="button">Scrape new data</a>
</p>
</div>
</div>
<div class="container">
<h2>Dolor ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<hr/>
</div>
<div class="container">
<h2>Featured Mars Image</h2>
<div class="row">
<div class="col-8">
<img class="img-fluid" src={{featured_image[0]}} />
</div>
<div class="col">
<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Current Weather on Mars</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's</p>
</div>
</div>
<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Mars facts</div>
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Value</th>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<hr/>
</div>
<div class="container">
<div class="text-center">
<h2>Mars Hemispheres</h2>
</div>
<div class="w-100"></div>
<div class="row">
<div class="col">
<img class="figure-img" src="{{url_for('static', filename='mars1.jpg')}}" />
<h3 class="figure-caption">Cerberus Hemisphere Enhanced</h3>
</div>
<div class="col">
<img class="figure-img" src="{{url_for('static', filename='mars2.jpg')}}" />
<h3 class="figure-caption">Cerberus Hemisphere Enhanced</h3>
</div>
<div class="w-100"></div>
<div class="col">
<img class="figure-img" src="{{url_for('static', filename='mars3.jpg')}}" />
<h3 class="figure-caption">Cerberus Hemisphere Enhanced</h3>
</div>
<div class="col">
<img class="figure-img" src="{{url_for('static', filename='mars1.jpg')}}" />
<h3 class="figure-caption">Cerberus Hemisphere Enhanced</h3>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>