smallphones/index.html at main · Charky-Dev/smallphones · 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
<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Phones <150 mm</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
      <link rel="stylesheet" href="base.css">
</head>

<body>
  <main class="container">
    <h1>Small Phones (<150 mm) 2025</h1>
        <p>A curated list of small smartphones with a height under 150 mm. Use the filters and sorting options below to
          find the perfect compact device for you.</p>
        <p><i>Data sourced from GSM Arena and manufacturer specifications.</i></p>
        <p>If you find any missing or incorrect data, please open an issue or a pull request on <a
            href="https://github.com/smaudd/smallphones/issues/">GitHub</a>.</p>
        <p>If you want to access this data in a RAW format, you can <a href="data.csv" download the download>CSV file
            here</a>.</p>

        <section id="filters">
          <h4>Filters</h4>
          <div id="filter-container">
            <div id="filter-dropdown-container"></div>
            <div id="filter-list-container"></div>
          </div>
        </section>

        <section id="sorting">
          <h4>Sorting</h4>
          <div id="sort-container">
            <label>
              Sort by:
              <select id="sort-column">
              </select>
            </label>
            <label>
              Order:
              <select id="sort-order">
                <option value="asc">Ascending</option>
                <option value="desc">Descending</option>
              </select>
            </label>
          </div>
        </section>

        <section id="devices">
          <h3>Devices</h3>
          <div id="device-list"></div>
        </section>
  </main>
  <script src="index.js"></script>
</body>

</html>