-
Notifications
You must be signed in to change notification settings - Fork 0
/
vent.html
107 lines (91 loc) · 3.6 KB
/
vent.html
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponder</title>
<!-- FontAweome CDN Link for Icons -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<script>
$(document).ready(function(){
function alignModal(){
var modalDialog = $(this).find(".modal-dialog");
// Applying the top margin on modal to align it vertically center
modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
}
// Align modal when it is displayed
$(".modal").on("shown.bs.modal", alignModal);
// Align modal when user resize the window
$(window).on("resize", function(){
$(".modal:visible").each(alignModal);
});
});
</script>
</head>
<body>
<!-- back button -->
<a class="custom-button p-3" href="./index.html">Go Back</a>
<!-- page title -->
<div class="container mt-5 mb-5">
<div class="row text-center border">
<h1 class="title">Vent</h1>
</div>
</div>
<!-- vent text area -->
<div class="container">
<div class="row">
<textarea row="10" cols="60" name="description">
</textarea>
</div>
</div>
<!-- timer progress bar -->
<div class="row m-5 justify-content-center">
<div id="progressBar">
<div class="bar"></div>
</div>
</div>
<!-- modal for completion -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Great job! Hope your stress is gone.</p>
</div>
</div>
</div>
</div>
<!-- timer js -->
<script>
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(timeleft/60) + ":"+ timeleft%60);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
else {
$('.modal').modal('show');
setTimeout(function(){
$('.modal').modal('hide');
window.location = "index.html"
},2500);
}
};
// get time from session Storage
var time = sessionStorage.getItem("time");
// get number of seconds
time = time * 60;
// run timer progress
progress(time, time, $('#progressBar'));
</script>
</body>
</html>