fishFinder/index.html at master · moT01/fishFinder · 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
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fish Finder</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" href="icons/fish-icon-128x128.png">

    <!--downloaded copies-->
    <link rel="stylesheet" href="libraries/leaflet/leaflet-1.5.1.css">
    <link rel="stylesheet" href="libraries/leaflet/marker-cluster-1.4.0.css">

    <link rel="stylesheet" href="index.css" >
    <link rel="manifest" href="manifest.json">

    <!-- ios support -->
    <!-- home screen icons -->
    <link rel="apple-touch-icon" href="icons/fish-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="icons/fish-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="192x192" href="icons/fish-icon-192x192.png">

    <!-- splash screen images - need to make images proper sizes-->
    <!--meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="/apple_splash_2048.png" sizes="2048x2732" rel="apple-touch-startup-image" />
    <link href="/apple_splash_1668.png" sizes="1668x2224" rel="apple-touch-startup-image" />
    <link href="/apple_splash_1536.png" sizes="1536x2048" rel="apple-touch-startup-image" />
    <link href="/apple_splash_1125.png" sizes="1125x2436" rel="apple-touch-startup-image" />
    <link href="/apple_splash_1242.png" sizes="1242x2208" rel="apple-touch-startup-image" />
    <link href="/apple_splash_750.png" sizes="750x1334" rel="apple-touch-startup-image" />
    <link href="/apple_splash_640.png" sizes="640x1136" rel="apple-touch-startup-image" /-->

    <meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
    <meta name="theme-color" content="#FFE1C4">
  </head>

  <body>
    <div id="map"></div>

    <div id="mapLayers">
      <img class="mapLayer" title="terrain" src="images/terrain.png">
      <img class="mapLayer" title="satellite" src="images/satellite.png">
      <img class="mapLayer" title="compass" src="images/compass.png">
    </div>

    <div id="menu">
      <select id="speciesInput">
        <option selected disabled>Target Species</option>
        <option value="walleye">Walleye</option>
        <option value="crappie">Crappie</option>
        <option value="sunfish">Sunfish</option>
        <option value="yellow perch">Perch</option>
        <option value="northern pike">Northern Pike</option>
        <option value="muskellunge">Muskellunge</option>
        <option value="tiger muskellunge">Tiger Muskellunge</option>
        <option value="largemouth bass">Largemouth Bass</option>
        <option value="smallmouth bass">Smallmouth Bass</option>
        <option value="rock bass">Rock Bass</option>
        <option value="white bass">White Bass</option>
        <option value="channel catfish">Channel Catfish</option>
        <option value="flathead catfish">Flathead Catfish</option>
        <option value="brook trout">Brook Trout</option>
        <option value="brown trout">Brown Trout</option>
        <option value="lake trout">Lake Trout</option>
        <option value="rainbow trout">Rainbow Trout</option>
        <option value="lake sturgeon">Lake Sturgeon</option>
        <option value="lake whitefish">Lake Whitefish</option>
        <option value="carp">Carp/Sucker</option>
        <option value="burbot">Burbot</option>
        <option value="bullhead">Bullhead</option>
        <option value="bowfin (dogfish)">Bowfin</option>
      </select>
    </div>

    <div id='sources'>Map made with <b><i><a href="http://leafletjs.com/" target="_blank">leaflet</a></i></b> and <b><i><a href="http://www.mapbox.com" target="_blank">mapbox</a></i></b>
      <br/>Lake data courtesy of the <b><i><a href="http://www.dnr.state.mn.us/index.html" target="_blank">Minnesota DNR</a></i></b></div>
    </div>


    <div id="popupContent">
      <div class="popupTitle" id="popupLake"></div>
      <div class="popupFlex">
        <div id="popupCounty"></div>
      </div>
      <div id="popupLoader"><div></div><div></div><div></div><div></div><div></div></div>
      <div id="popupAfterLoad">
        <div id="popupDetails" class="popupFlex">
          <table>
            <tr>
              <td class="popupDetail">Acres</td>
              <td>:</td>
              <td class="popupInfo" id="popupAcres"></td>
            </tr>
            <tr>
              <td class="popupDetail">Shoreline</td>
              <td>:</td>
              <td class="popupInfo" id="popupShoreline"></td>
            </tr>
          </table>
          <table>
            <tr>
              <td class="popupDetail">Max Depth</td>
              <td>:</td>
              <td class="popupInfo" id="popupDepth"></td>
            </tr>
            <tr>
              <td class="popupDetail">Water Clarity</td>
              <td>:</td>
              <td class="popupInfo" id="popupClarity"></td>
            </tr>
          </table>
        </div>
        <hr class="popupHR">
        <div class="popupTitle" id="popupSpecies"></div>
        <canvas id="chart"></canvas>
        <div class="popupFlex">
          <div id="popupLongest"></div>
          <a id="popupLink" href="#" target="_blank">More Info</a>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="register-service-worker.js"></script>

    <!--downloaded copies-->
    <script type="text/javascript" src="libraries/leaflet/leaflet-1.5.1.min.js"></script>
    <script type="text/javascript" src="libraries/leaflet/marker-cluster-1.4.0.min.js"></script>
    <script type="text/javascript" src="libraries/chartjs/chartjs-2.8.0.min.js"></script>
    <script type="module" src="/js/index.js"></script>
  </body>
</html>