forefire/tools/htdocs/index.html at a8ae725b70f5704baeab95095752730389cc252c · forefireAPI/forefire · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ForeFire Super Console</title>
  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
  <!-- leaflet-velocity CSS -->
  <link rel="stylesheet" href="js/leaflet-velocity.css" />

  <link rel="stylesheet" href="style.css" />

    <!-- External JS Libraries -->
  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" defer></script>
  <script src="https://unpkg.com/togeojson@0.16.0/togeojson.js" defer></script>
  <script src="js/leaflet-velocity.js" defer></script>
  <script src="js/rosacewind.js" defer></script>
  <!-- Our GUI JS -->
  <script src="js/forefireGUI.js" defer></script>

</head>
<body>
  <div id="container">
    <!-- Sidebar with layer list -->
    <div id="sidebar">
      <div id="logo">
        <img src="img/forefire_logo.svg" alt="ForeFire Logo">
      </div>

      <ul id="layerList"></ul>
      <button id="updateLayers">Update Layers</button>
      <canvas id="wind" width="100" height="100"></canvas>
    </div>
    <!-- Main area -->
    <div id="mainArea">
      <!-- Header: Date with a toggle checkbox for logs -->
      <div id="dateHeader">
        Date: N/A

      </div>
      <label>
        <input type="checkbox" id="toggleLogs" checked>
        Show Logs
      </label>
      <!-- Response Console -->
      <div id="responseConsole"></div>
      <!-- Command History -->
      <div id="commandHistory"></div>
      <!-- Input Area: command input, send & refresh buttons -->
      <div id="inputArea">
        <input type="text" id="commandInput" placeholder="Enter command">
        <button id="sendCommand">Send</button>
        <button id="refreshMap">Refresh Map</button>
        <label>
          <input type="checkbox" id="autoRefreshCheckbox" />
          live
          <input type="checkbox" id="WindOrParts" />
          Arrows
        </label>
      </div>
      <!-- Predefined Command Buttons -->
      <div id="commandButtons"></div>
      <!-- Map Container -->
      <div id="map"></div>
    </div>
  </div>

</body>
</html>