-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (111 loc) · 4.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>UFO Finder</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" href="static/css/style.css" />
</head>
<body class="bg-dark">
<div class="wrapper">
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="index.html">UFO Sightings</a>
</nav>
<!-- Jumbotron -->
<div class="jumbotron">
<h1 class="display-4">The Truth is Out There</h1>
</div>
<!-- Article title and paragraph -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4 article-title">
<h3>UFO Sightings: Fact or Fancy? <small>Ufologists weigh in</small></h3>
</div>
<div class="col-md-8 article-p">
<p>
Are we alone in the universe? For millennia, humans have turned to the sky to answer
this question. Now, thanks to research generously funded by W. Avy, a UFO-enthusiast
and amatuer Ufologist, we can supplement our sky-searching with data analysis. <br><br>"The
release of this analysis is well-timed: it coincides with the celebration of World UFO
Day, which is a moment for ufologists around the world to connect, relax, and sample a
range of UFO-themed snacks," said Dr. Ursula F. Olivier, the world's preeminent expert
on circular sightings. "Citizen-scientists can be especially helpful in both
cataloguing sightings - which is hugely helpful for us in our search for aliens - and
in helping us celebrate the work that has already been done, such as this data
visualisation project, which will help us raise awareness of the ubiquity of
sightings!"<br><br> Not everyone is ready to celebrate, however. Local CEO and vocal
anti-alien activist V Isualize reached out to our reporters to go on record as firmly
opposed to any attempts to provide access to this data. "If there are aliens, they
certainly would like to be left alone," she stated, before directing us to the Leave
Aliens Alone (LAA) community engagement initiative she founded and funds. <br><br>So what do
YOU think? Dig through the data yourself, and let us know what you see.
</p>
</div>
</div>
</div>
<!-- Filter -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<form class="bg-dark">
<p>Filter Search</p>
<ul class="list-group bg-dark">
<!-- Date input Field -->
<li class="list-group-item bg-dark">
<label for="datetime">Enter a Date</label><br>
<input type="text" placeholder="1/10/2010" id="datetime" />
</li>
<!-- City filter -->
<li class="list-group-item bg-dark">
<label for="city">Enter a City</label><br>
<input type="text" placeholder="el cajon" id="city" />
</li>
<li class="list-group-item bg-dark">
<label for="state">Enter a State</label><br>
<input type="state" placeholder="ca" id="state" />
</li>
<li class="list-group-item bg-dark">
<label for="country">Enter a Country</label><br>
<input type="text" placeholder="us" id="country" />
</li>
<li class="list-group-item bg-dark">
<label for="shape">Enter a Shape</label><br>
<input type="text" placeholder="triangle" id="shape" />
</li>
<!-- <li class="bg-dark"> -->
<!-- <button id="filter-btn" type="button" class="btn-dark">
Filter Table
</button> -->
</li>
</ul>
</form>
</div>
<!-- Table -->
<div class="col-md-9">
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Shape</th>
<th>Duration</th>
<th>Comments</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<script src="static/js/data.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>