-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (112 loc) · 5.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</div>
<!-- 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?<br><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 amateur ufologist, we can s
upplement 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 visualization
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? Are we alone in the universe? Are aliens
trying to contact us, or do they want to be left alone? 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">
<li class="list-group-item bg-dark">
<label for="date">Enter Date</label>
<input type="text" placeholder="1/10/2010" id="datetime" />
</li>
<li class="list-group-item bg-dark">
<label for="city">Enter City</label>
<input type="text" placeholder="roswell" id="city" />
</li>
<li class="list-group-item bg-dark">
<label for="state">Enter State</label>
<input type="text" placeholder="ca" id="state" />
</li>
<li class="list-group-item bg-dark">
<label for="country">Enter Country</label>
<input type="text" placeholder="us" id="country" />
</li>
<li class="list-group-item bg-dark">
<label for="shape">Enter Shape</label>
<input type="text" placeholder="circle" id="shape" />
</li>
<!-- 'Filter Table' Button -- <li class="list-group-item bg-dark"> -- button id="filter-btn" type="button" class="btn 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.js"></script>
<script src="static/js/data.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>