meteorite/index.html at master · alisonscheng/meteorite · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meteorite</title>
    <script src="js/d3.js"></script>
    <script src="js/dat.js"></script>
    <script src="https://unpkg.com/topojson@3"></script>
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <div id='modal-text'>
          <p id='welcome'>Welcome to Meteorite</p>
          <img src='https://www.windows2universe.org/our_solar_system/meteors/geminid_meteor_animation.gif' id='gif'></img>
          <p>Click on the meteorites on the map to see details such as the name, mass, and the year it fell.  Filter the meteorites on the map by mass and by year using the filter buttons at the top.  </p>
        </div>
    </div>
    </div>
    <h1 id='title'>Meteorite</h1>
    <div id='select-options'>
      <div class="dropdown">
        <button class="dropbtn">Filter By Mass</button>
        <div class="dropdown-content">
          <span id='small'>Small</span>
          <span id='medium'>Medium</span>
          <span id='large'>Large</span>
          <span id='all'>All Meteorites</span>
        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn">Filter By Year</button>
        <div class="dropdown-content">
          <span id='pre'>Pre-1800's</span>
          <span id='1800'>1800's</span>
          <span id='1900'>1900's</span>
          <span id='2000'>2000's</span>
          <span id='allyears'>All Years</span>
        </div>
      </div>
    </div>
    <script src="bundle.js"></script>
    <script src='js/sketch.js'></script>
    <div id='footer'>
      <a href='https://github.com/snakerabbit/meteorite'>
        Github
      </a>
      <a href='https://www.linkedin.com/in/alison-cheng/'>
        LinkedIn
      </a>
      <a href='http://www.alisoncheng.me/'>
        Portfolio
      </a>
    </div>
  </body>
</html>