MeditationApp/index.html at master · saajan94/MeditationApp · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Meditation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Poiret+One"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="topbar"><h1>Meditation</h1></div>
    <div class="app">
      <div class="videoContainer">
        <video loop>
          <source src="video/rain2.mp4" type="video/mp4" />
        </video>
      </div>

      <div class="timeSelector">
        <button data-time="120">2 minutes</button>
        <button data-time="300">5 minutes</button>
        <button data-time="600">10 minutes</button>
        <button data-time="1800">30 minutes</button>
        <button data-time="3600">60 minutes</button>
      </div>

      <div class="playerContainer">
        <audio class="song">
          <source src="sounds/rain.mp3" />
        </audio>
        <img src="svg/play.svg" alt="play" class="play" />
        <svg
          class="trackOutline"
          width="453"
          height="453"
          viewBox="0 0 453 453"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="226.5"
            cy="226.5"
            r="216.5"
            stroke="white"
            stroke-width="20"
          />
        </svg>
        <svg
          class="movingOutline"
          width="453"
          height="453"
          viewBox="0 0 453 453"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="226.5"
            cy="226.5"
            r="216.5"
            stroke="#018EBA"
            stroke-width="20"
          />
        </svg>
        <h3 class="timeDisplay">0:00</h3>
      </div>

      <div class="soundSelector">
        <button data-sound="sounds/rain.mp3" data-video="video/rain2.mp4">
          <img src="svg/rain.svg" alt="rain" />
        </button>
        <button data-sound="sounds/beach.mp3" data-video="video/beach2.mp4">
          <img src="svg/beach.svg" alt="beach" />
        </button>
        <!-- <button data-sound="sounds/forest.mp3" data-video="video/beach2.mp4">
          <img src="svg/beach.svg" alt="beach" />
        </button> -->
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>