skip-iot-kit/index.html at main · skipgu/skip-iot-kit · 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
<!DOCTYPE html>
<html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SKIP IoT Kit</title>
  <style>
    /* This site should be pretty minimal, so no libraries are used,
     * and the styling is handled manually with CSS.*/
    body {
      /* Add a subtle linear-gradient to the background*/
      background: linear-gradient(45deg, #DD5055, #fff, #3DE5EB);
      height: 100vh;
      margin: 0;
      /* Display options */
      display: flex;
      align-items: center;
      justify-content: center;
      /* Font */
      font-family: 'Arial', sans-serif;
      font-size: 2em;
      color: #333;
      text-align: center;
    }
    .img-container {
      width: 256px;
      height: 256px;
    }
    .top-container {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    /* Mobile-specific preferences */
    @media (max-width: 600px) {
      body {
        flex-direction: column;
        justify-content: flex-start;
        background: linear-gradient(5deg, #DD5055, #fff, #3DE5EB);
      }
      .img-container {
        width: 100px;
        height: 100px;
      }
      h4 { font-size: 0.75em; }
      .top-container { flex-direction: row; }
    }
    iframe { border: none; }
    a { color: #111; }
  </style>
</head>
<body>
  <!-- Display the img and the guidelines text in a wrapper -->
  <div class="top-container">
    <a href="https://skipgu.org/">
      <img src="imgs/logo_skip.png" class="img-container"/>
    </a>
    <!-- Link to the guidelines of this initiative -->
    <a href="https://github.com/skipgu/skip-iot-kit/blob/main/TERMS_OF_SERVICE.md">
      <h4>Guidelines</h4>
    </a>
  </div>
  <!-- Embed the Google Spreadsheet to an iframe elem-->
  <iframe height="600px" width="100%" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTviKANt1dNy8veWi2vkAiUaeLgUrIGsggTV_VmRYuh3rumGX7_6qNthSVxn_sPJrIqzTCqfN2OLkSM/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
</body>
</html>