20-20-20/index.html at master · Districtfine/20-20-20 · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>20-20-20 Timer</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/countdown/2.6.0/countdown.min.js" defer></script>
  <script src="dist/moment-countdown.min.js" defer></script>
  <script src="dist/index.js" defer></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="src/styles/index.css">
  <link rel="stylesheet" href="src/styles/timer.css">
</head>

<body>
  <audio>
    <source src="media/alarm.mp3">
    <source src="media/ogg.mp3">
  </audio>
  <header>
    <h2>
      <u>20-20-20 Interval Timer</u>
    </h2>
    <div id="time-selector">
      Every
      <input type="number" id="working_timeVal" name="working_timeVal" value="20" max="120" />
      <select id="working_timeUnit" name="working_timeUnit">
        <option value="minutes">minutes</option>
        <option value="seconds">seconds</option>
      </select>

      <p>look 20 feet away from your screen for</p>

      <input type="number" id="resting_timeVal" name="resting_timeVal" value="20" max="120" />
      <select id="resting_timeUnit" name="resting_timeUnit">
        <option value="seconds">seconds</option>
        <option value="minutes">minutes</option>
      </select>
      <br>
      <button id="start">
        Start
      </button>
    </div>

    <div id="base-timer" hidden>
      <svg class="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g class="circle">
          <circle class="path-elapsed" cx="50" cy="50" r="45" />
          <path id="path-remaining" stroke-dasharray="283" d="
              M 50,50
              m -45,0
              a 45,45 0 1,0 90,0
              a 45,45 0 1,0 -90,0
            "></path>
        </g>
      </svg>
      <span class="inside-timer">
        <var id="current-interval"></var>
        <var id="time-left-display"></var>
        <span class="timer-controls">
          <button class="stopBtn">
            <i class="material-icons">stop</i>
          </button>
          <button class="pauseBtn">
            <i class="material-icons">pause</i>
          </button>
          <button class="skipBtn">
            <i class="material-icons">skip_next</i>
          </button>
        </span>
      </span>
    </div>
  </header>
  <main>
    <h3>
      Why use this tool?
    </h3>
    <p id="first-para">
      The 20-20-20 rule helps reduce Digital Eye strain and keep your eyes healthy. According to the American Academy of
      Ophthamology, humans normally blink 15 times per minute, but studies show that can be reduced to as little as 5
      times in a minute when using digital devices. This reduced blinking can cause discomfort.
    </p>
    <br>
    <p>
      Use this timer to ensure that you're giving your eyes regular breaks.
    </p>
  </main>

</body>

</html>