spectrum-allocation/index.html at main · ignas450/spectrum-allocation · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>LT Spectrum Allocation</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Cellular Spectrum Allocation in Lithuania</h1>

  <div class="top-panels">
    <section id="channelLookup">
      <h2>Highlight spectrum (BETA)</h2>
      <p class="lookup-help">Choose a lookup method to highlight a section of the spectrum.</p>
      <form id="channelLookupForm" class="lookup-form">
        <label>
          Highlight by
          <select id="lookupMode">
            <option value="lte-bandwidth">EARFCN + bandwidth</option>
            <option value="frequency">Start/end frequency</option>
          </select>
        </label>
        <div class="lookup-inputs">
          <label class="mode-bandwidth"><span id="channelTypeLabel">EARFCN</span>
            <input id="channelNumber" type="text" inputmode="numeric" placeholder="e.g. 1348" />
          </label>
          <label class="mode-bandwidth">Bandwidth (MHz)
            <input id="channelBandwidth" type="text" inputmode="decimal" placeholder="e.g. 20" />
          </label>
          <label class="mode-frequency">Start frequency (MHz)
            <input id="startFrequency" type="text" inputmode="decimal" placeholder="e.g. 1830" />
          </label>
          <label class="mode-frequency">End frequency (MHz)
            <input id="endFrequency" type="text" inputmode="decimal" placeholder="e.g. 1850" />
          </label>
        </div>
        <button type="submit">Find and highlight</button>
      </form>
      <p id="channelLookupResult" class="lookup-result" aria-live="polite"></p>
    </section>

    <section id="allocationSummary">
      <div class="summary-heading">
        <h2>Spectrum ownership overview</h2>
      </div>
      <div id="bandFilter" class="band-tabs" role="tablist" aria-label="Spectrum bands">
        <button type="button" class="band-tab active" data-filter="overall" role="tab" aria-selected="true">Overall</button>
        <button type="button" class="band-tab" data-filter="lowband" role="tab" aria-selected="false">Low-bands</button>
        <button type="button" class="band-tab" data-filter="midband" role="tab" aria-selected="false">Mid-bands</button>
        <button type="button" class="band-tab" data-filter="highband" role="tab" aria-selected="false">High-bands</button>
      </div>
      <div class="pie-layout">
        <div id="pieChart" class="pie-chart" role="img" aria-label="Carrier spectrum share pie chart"></div>
        <div id="pieLegend" class="pie-legend"></div>
      </div>
    </section>
  </div>
  <section id="allocationDetails">
    <!-- <h2>Spectrum allocation</h2> -->
    <div id="spectrums"></div>
  </section>

  <section id="pageInfo" class="page-info">
    <dl>
      <div>
        <dt>Last updated</dt>
        <dd>August 29, 2026</dd>
      </div>
      <div>
        <dt>Sources</dt>
        <dd>
          <a href="https://www.rrt.lt/" target="_blank" rel="noopener noreferrer">Communications Regulatory Authority of Lithuania (RRT)</a>,
          <a href="https://www.cellmapper.net/map?MCC=246&MNC=?&type=LTE&latitude=55.2&longitude=24&zoom=8" target="_blank" rel="noopener noreferrer">CellMapper</a>
        </dd>
      </div>
    </dl>
    <!-- <a class="archive-link" href="archive/index.html">View spectrum history</a> -->
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>