Add files via upload

avenali5 · Jul 3, 2020 · f8b7c7d · f8b7c7d
1 parent 565babd
commit f8b7c7d
Show file tree

Hide file tree

Showing 3 changed files with 686 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="shortcut icon" href="svgs/icon.svg" type="image/x-icon">
+    <title>Relaxer</title>
+</head>
+
+<body>
+    <div class="app">
+        <div class="logo">
+            <img src="svgs/logo.png" alt="logo">
+        </div>
+        <div class="vid-container"> 
+            <video loop class="pc-back">
+                <source src="video/rain1.mp4" type="video/mp4" codecs="mp4v.20.8, mp4a.40.2"'>
+            </video>
+
+        </div>
+        <div class="time-select">
+            <button data-time="120">2 Minutes</button>
+            <button data-time="300" class="medium-mins">5 Minutes</button>
+            <button data-time="600" class="long-mins">10 Minutes</button>
+        </div>
+        <div class="player-container">
+            <audio class="song">
+                <source src="sounds/rain2.mp3" />
+            </audio>
+            <img src="svgs/play.svg" class="play"></img>
+            <svg class="track-outline" 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="moving-outline" 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>
+            <img src="svgs/replay.svg" class="replay"></img>
+
+            <h3 class="time-display">0:00</h3>
+        </div>
+        <div class="sound-picker">
+            <button class="sound-pc" data-sound="sonds/rain2.mp3" data-video="video/rain2.webm"><img src="svgs/rain.svg"
+                     alt=""></button>
+            <button class="sound-pc" data-sound="sounds/beach.wav" data-video="video/beach2.webm"><img src="svgs/beach.svg"
+                     alt=""></button>
+        </div>
+    </div>
+
+    <div class="breathe-container" id="container">
+      <button class="change-background">Change Background</button>
+
+    <div class="circle-container">
+
+        <p id="text"></p>
+
+        <div class="circle"></div>
+      <div class="pointer-container">
+        <span class="pointer"></span>
+      </div>
+
+        <div class="gradient-circle"></div>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,116 @@
+const song = document.querySelector(".song");
+const play = document.querySelector(".play");
+const replay = document.querySelector(".replay");
+const outline = document.querySelector(".moving-outline circle");
+const video = document.querySelector(".vid-container .pc-back");
+//Sounds
+const sounds = document.querySelectorAll(".sound-picker button");
+//Time Display
+const timeDisplay = document.querySelector(".time-display");
+const outlineLength = outline.getTotalLength();
+//Duration
+const timeSelect = document.querySelectorAll(".time-select button");
+let fakeDuration = 600;
+
+outline.style.strokeDashoffset = outlineLength;
+outline.style.strokeDasharray = outlineLength;
+timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(fakeDuration % 60)}0`;
+
+
+
+sounds.forEach(sound => { 
+    sound.onclick = function () {
+        song.src = this.getAttribute("data-sound");
+        video.src = this.getAttribute("data-video");
+        checkPlaying(song);
+    };
+});
+
+
+play.onclick = function () {
+    checkPlaying(song);
+};
+
+replay.onclick = function () {
+    restartSong(song);
+
+};
+
+
+const restartSong = song => {
+    let currentTime = song.currentTime;
+    song.currentTime = 0;
+}
+
+timeSelect.forEach(option => {
+    option.addEventListener("click", function () {
+        fakeDuration = this.getAttribute("data-time");
+        timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(fakeDuration % 60)}0`;
+    });
+});
+
+const checkPlaying = song => {
+    if (song.paused) {
+        song.play();
+        video.play();
+        play.src = "./svgs/pause.svg";
+    } else {
+        song.pause();
+        video.pause();
+        play.src = "./svgs/play.svg";
+    }
+};
+
+
+song.ontimeupdate = function () {
+    let currentTime = song.currentTime;
+    let elapsed = fakeDuration - currentTime;
+    let seconds = Math.floor(elapsed % 60);
+    let minutes = Math.floor(elapsed / 60);
+    timeDisplay.textContent = `${minutes}:${seconds}`;
+    let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
+    outline.style.strokeDashoffset = progress;
+
+    if (currentTime >= fakeDuration) {
+        song.pause();
+        song.currentTime = 0;
+        play.src = "./svgs/play.svg";
+        video.pause();
+        phoneVideo.pause();
+    }
+};
+
+
+
+//Segunda parte
+const circle = document.querySelector('.circle-container');
+const text = document.querySelector('#text');
+const breather = document.querySelector(".breathe-container")
+const changeBknd = document.querySelector(".change-background")
+
+changeBknd.onclick = function (){
+    breather.classList.toggle("city")
+}
+
+
+const totalTime = 7500;
+const breatheTime = (totalTime / 5) * 2;
+const holdTime = totalTime / 5;
+
+breathAnimation();
+
+function breathAnimation() {
+    text.innerText = 'Breathe In!';
+    circle.className = 'container grow';
+
+    setTimeout(() => {
+        text.innerText = 'Hold';
+
+        setTimeout(() => {
+            text.innerText = 'Breathe Out!';
+            circle.className = 'container shrink';
+        }, holdTime);
+    }, breatheTime);
+}
+
+setInterval(breathAnimation, totalTime);