dirondin.github.io/tv-home.html at master · dirondin/dirondin.github.io · 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">
  <title>TV Start</title>
  <style>
    html,body{height:100%;margin:0}
    body{
      background:#0b0b10;
      display:flex;
      align-items:center;
      justify-content:center;
      font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;
      color:#fff;
      padding:18px;
    }
    .col{
      display:flex;
      flex-direction:column;
      gap:18px;
      align-items:center;
    }
    a.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:320px;
      height:96px;
      border-radius:20px;
      text-decoration:none;
      color:#fff;
      font-weight:700;
      font-size:20px;
      border:1px solid rgba(255,255,255,0.06);
      box-shadow:0 8px 18px rgba(0,0,0,0.45);
    }
    a.btn:focus{outline:3px solid white}

    /* Color styles */
    .kino1{background:#e50914}
    .kino2{background:#1db954}
    .youtube{background:#ff0000}
    .prime{background:#232f3e}
    .twitch{background:#9146ff}

    @media (max-width:420px){
      a.btn{width:86vw;height:72px}
    }
  </style>
</head>
<body>
  <main class="col" role="main" aria-label="Quick Links">
    <a class="btn kino1" href="https://kpapp.link" tabindex="1">KinoPub</a>
    <a class="btn kino2" href="https://kino.pub" tabindex="2">KinoPub Web</a>
  </main>

  <script>
    // Add keyboard / remote navigation (arrow keys)
    const buttons = document.querySelectorAll('.btn');
    let current = 0;

    document.addEventListener('keydown', e => {
      if(e.key === 'ArrowDown'){
        current = (current + 1) % buttons.length;
        buttons[current].focus();
        e.preventDefault();
      }
      if(e.key === 'ArrowUp'){
        current = (current - 1 + buttons.length) % buttons.length;
        buttons[current].focus();
        e.preventDefault();
      }
      if(e.key === 'Enter'){
        buttons[current].click();
        e.preventDefault();
      }
    });

    buttons[current].focus();
  </script>
</body>
</html>