speedometer/index.html at main · mamdous-usual/speedometer · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="High-performance GPS speedometer Progressive Web App">
  <meta name="theme-color" content="#282c34">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Speedometer">

  <!-- PWA Manifest -->
  <link rel="manifest" href="public/manifest.json">

  <!-- Favicon and App Icons -->
  <link rel="icon" type="image/svg+xml" href="public/icons/icon.svg">
  <link rel="apple-touch-icon" href="public/icons/icon.svg">

  <!-- Styles -->
  <link rel="stylesheet" href="src/css/speedometer.css">

  <title>Speedometer</title>
</head>
<body>
  <!-- Main Application Container -->
  <main id="app" class="app-container">
    <!-- Header with status indicators -->
    <header class="app-header">
      <h1 class="app-title">Speedometer</h1>
      <div class="header-controls">
        <!-- View Toggle (Analog/Digital) -->
        <div class="view-toggle">
          <button id="btn-analog" class="view-btn active" type="button" title="Analog View">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"/>
              <path d="M12 6v6l4 2"/>
            </svg>
          </button>
          <button id="btn-digital" class="view-btn" type="button" title="Digital View">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2"/>
              <path d="M7 8h2v8H7zM11 8h2v8h-2zM15 8h2v8h-2"/>
            </svg>
          </button>
        </div>

        <!-- Theme Toggle -->
        <button id="btn-theme" class="theme-btn" type="button" title="Toggle Theme">
          <svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="5"/>
            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
          </svg>
          <svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
        </button>

        <!-- Status indicators -->
        <div class="status-indicators">
          <span id="gps-status" class="status-badge" data-status="inactive">
            <span class="status-dot"></span>
            <span class="status-text">GPS</span>
          </span>
          <span id="accuracy-badge" class="accuracy-badge" title="GPS Accuracy">
            <span class="accuracy-value">--</span>m
          </span>
        </div>
      </div>
    </header>

    <!-- Speedometer Display - Analog View -->
    <section id="analog-view" class="speedometer-section speedometer-analog" aria-label="Analog Speedometer">
      <div class="speedometer-wrapper">
        <canvas id="speedometer-canvas" width="400" height="400" aria-label="Speed gauge"></canvas>
      </div>
    </section>

    <!-- Speedometer Display - Digital View -->
    <section id="digital-view" class="speedometer-section speedometer-digital hidden" aria-label="Digital Speedometer">
      <div class="digital-display">
        <div class="digital-main">
          <span id="digital-speed-value" class="digital-speed-value">000</span>
          <span class="digital-speed-unit">km/h</span>
        </div>
        <div class="digital-secondary">
          <div class="digital-info-item">
            <span class="digital-info-label">MAX</span>
            <span id="digital-max-speed" class="digital-info-value">0</span>
          </div>
          <div class="digital-info-item">
            <span class="digital-info-label">AVG</span>
            <span id="digital-avg-speed" class="digital-info-value">0</span>
          </div>
          <div class="digital-info-item">
            <span class="digital-info-label">TRIP</span>
            <span id="digital-distance" class="digital-info-value">0.00</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Additional Stats Panel (for analog view) -->
    <section id="stats-panel" class="stats-panel" aria-label="Trip Statistics">
      <div class="stat-item">
        <span class="stat-label">Max Speed</span>
        <span id="max-speed" class="stat-value">0</span>
        <span class="stat-unit">km/h</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">Avg Speed</span>
        <span id="avg-speed" class="stat-value">0</span>
        <span class="stat-unit">km/h</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">Distance</span>
        <span id="total-distance" class="stat-value">0.00</span>
        <span class="stat-unit">km</span>
      </div>
    </section>

    <!-- Control Buttons -->
    <section class="controls-section" aria-label="Controls">
      <button id="btn-start" class="control-btn btn-primary" type="button">
        <span class="btn-icon">▶</span>
        <span class="btn-text">Start</span>
      </button>
      <button id="btn-reset" class="control-btn btn-secondary" type="button" disabled>
        <span class="btn-icon">↺</span>
        <span class="btn-text">Reset</span>
      </button>
    </section>

    <!-- Error/Info Messages -->
    <div id="message-container" class="message-container" hidden>
      <p id="message-text" class="message-text"></p>
    </div>
  </main>

  <!-- Offline indicator -->
  <div id="offline-indicator" class="offline-indicator" hidden>
    <span>📡 Offline Mode</span>
  </div>

  <!-- JavaScript Modules -->
  <script type="module" src="src/js/app.js"></script>
</body>
</html>