Skip to content

Commit 075f155

Browse files
ChicagoScanningMGChicagoScanningMG
authored
Timer
Standalone timer added
1 parent 900e3a3 commit 075f155

File tree

3 files changed

+390
-0
lines changed

3 files changed

+390
-0
lines changed

‎timer/script.js‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
var spinner = $('#loader');
2+
const scriptURLC ='https://script.google.com/macros/s/AKfycbwOfIsJmBwuIP4LF633tpTgrR7GJD9M8b4NN0EZ7fmSueHKXXcr0gMgeCnNzW7n7GFv/exec';
3+
// const scriptURLC ='turd';
4+
const serverlessForm = document.forms['serverless-form'];
5+
var timerOn = false;
6+
var bgAnimate = false;
7+
8+
$("#reset-btn").click(function(){
9+
$("#contactForm").trigger("reset");
10+
$(".pulled-detail").html("");
11+
resetTimer();
12+
});
13+
14+
var countdownDuration = 10 * 60 * 1000;
15+
16+
$("#restart-button").click(function(){
17+
18+
console.log("restart button Clicked");
19+
countdownDuration = 10 * 60 * 1000;
20+
$("#stop-timer").html("10:00");
21+
if (timerOn == false){
22+
23+
timerOn = true;
24+
runTimer();
25+
26+
}
27+
$("body").css({"animation-name":"", "animation-duration":"", "animation-iteration-count":""})
28+
29+
})
30+
31+
$("#stop-button").click(function(){
32+
console.log("stop button Clicked");
33+
resetTimer();
34+
35+
})
36+
37+
function resetTimer(){
38+
39+
timerOn = false;
40+
bgAnimate = false;
41+
$("body").css({"animation-name":"", "animation-duration":"", "animation-iteration-count":""})
42+
$("#stop-timer-button").css("display", "");
43+
$("#stop-timer-div").css("display", "none");
44+
$("body").css("background-color", "black");
45+
// clearInterval(timer);
46+
countdownDuration = 10 * 60 * 1000;
47+
48+
}
49+
50+
$("#stop-timer-button").click(function(){
51+
52+
runTimer();
53+
54+
})
55+
56+
function runTimer(){
57+
58+
console.log("stop timer button clicked");
59+
timerOn = true;
60+
$("#stop-timer-button").css("display", "none");
61+
$("#stop-timer-div").css("display", "inherit");
62+
$("#stop-timer").css("width", $("#stop-timer").width());
63+
64+
65+
var now = new Date().getTime();
66+
var countdownTime = now + countdownDuration;
67+
68+
console.log("Countdown Duration: " + countdownDuration);
69+
console.log("current Time: " + now);
70+
console.log("Countdown Time: " + countdownTime);
71+
72+
var timer = setInterval(function(){
73+
console.log("Tick");
74+
75+
var now = new Date().getTime();
76+
77+
var distance = (now + countdownDuration) - now;
78+
console.log("countdownTime: " + countdownTime);
79+
80+
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
81+
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
82+
if (seconds < 10) seconds = "0" + seconds;
83+
84+
$("#stop-timer").html(minutes + ":" + seconds);
85+
86+
countdownDuration = countdownDuration - 1000;
87+
88+
// If the count down is finished, write some text
89+
if (distance <= 0) {
90+
clearInterval(timer);
91+
countdownDuration = 10 * 60 * 1000;
92+
timerOn = false;
93+
bgAnimate = true;
94+
95+
// var flashRed = setInterval(function(){
96+
//
97+
// if (bgAnimate == false){
98+
// clearInterval(flashRed);
99+
// return;
100+
// }
101+
//
102+
// $("body").animate({"background-color": "rgb(235, 0, 0)"}, 400)
103+
// .delay(400)
104+
// .animate({"background-color": "black"}, 400);
105+
//
106+
// }, 1600);
107+
108+
$("body").css({"animation-name":"doneFlash", "animation-duration":"1.6s", "animation-iteration-count":"infinite"})
109+
110+
}
111+
112+
if (timerOn == false) {
113+
clearInterval(timer);
114+
countdownDuration = 10 * 60 * 1000;
115+
}
116+
117+
}, 1000);
118+
119+
}

‎timer/stylesheet.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/*
2+
* Globals
3+
*/
4+
5+
6+
/* Custom default button */
7+
.btn-secondary,
8+
.btn-secondary:hover,
9+
.btn-secondary:focus {
10+
color: #333;
11+
text-shadow: none; /* Prevent inheritance from `body` */
12+
}
13+
14+
15+
/*
16+
* Base structure
17+
*/
18+
@keyframes doneFlash {
19+
20+
0% {background-color: black;}
21+
25% {background-color: rgb(235, 0, 0);}
22+
50% {background-color: rgb(235, 0, 0);}
23+
75% {background-color: black;}
24+
100% {background-color: black;}
25+
26+
}
27+
28+
body {
29+
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
30+
background-color: black;
31+
color: white;
32+
margin: 5px;
33+
}
34+
35+
main{
36+
border: 2em double;
37+
border-color: white;
38+
}
39+
40+
h3 {
41+
42+
font-size: 0.8em;
43+
44+
}
45+
46+
.cover-container {
47+
max-width: 42em;
48+
}
49+
50+
input {
51+
52+
border-radius: 5px;
53+
border-style: none;
54+
/* margin: 5px; */
55+
56+
}
57+
58+
button {
59+
60+
border-radius: 100px;
61+
border-style: none;
62+
/* margin: 5px; */
63+
64+
}
65+
66+
label {
67+
68+
text-align: right;
69+
font-size: 0.8em;
70+
71+
}
72+
73+
.row {
74+
75+
margin: 5px;
76+
77+
}
78+
79+
.video-notes-field {
80+
81+
font-size: .8em;
82+
width: 100%
83+
84+
}
85+
86+
textarea {
87+
88+
border-radius: 5px;
89+
border-style: none;
90+
91+
}
92+
93+
.pulled-detail{
94+
95+
margin: 0;
96+
97+
}
98+
99+
#version-num{
100+
position: fixed;
101+
bottom: 0%;
102+
}
103+
104+
.timer-button{
105+
106+
height: 32px;
107+
width: 32px;
108+
margin: auto;
109+
margin-left: 5px;
110+
margin-right: 5px;
111+
border-radius: 100%;
112+
113+
}
114+
115+
#stop-timer {
116+
117+
margin: auto;
118+
margin-left: 0px;
119+
margin-right: 0px;
120+
121+
}
122+
123+
124+
/*
125+
* Header
126+
*/
127+
128+
.nav-masthead .nav-link {
129+
padding: .25rem 0;
130+
font-weight: 700;
131+
color: rgba(255, 255, 255, .5);
132+
background-color: transparent;
133+
border-bottom: .25rem solid transparent;
134+
}
135+
136+
.nav-masthead .nav-link:hover,
137+
.nav-masthead .nav-link:focus {
138+
border-bottom-color: rgba(255, 255, 255, .25);
139+
}
140+
141+
.nav-masthead .nav-link + .nav-link {
142+
margin-left: 1rem;
143+
}
144+
145+
.nav-masthead .active {
146+
color: #fff;
147+
border-bottom-color: #fff;
148+
}
149+
150+
/*
151+
*Link Styles
152+
*/
153+
.white-link{
154+
color: white;
155+
}
156+
157+
.bg-pink{
158+
background-color: rgb(230, 3, 214);
159+
}
160+
161+
.text-white{
162+
color: white;
163+
}
164+
165+
.single-line-text{
166+
margin: 5px;
167+
}
168+
169+
.move-left {
170+
width: auto;
171+
box-shadow: none;
172+
}

‎timer/timer.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!doctype html>
2+
<html lang="en" class="h-100">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="description" content="">
9+
<meta name="author" content="Michael J. Gerrity | MichaelJGerrity.com">
10+
<meta name="generator" content="Hugo 0.79.0">
11+
<title>AV Logger</title>
12+
13+
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/cover/">
14+
15+
16+
17+
<!-- Bootstrap core CSS -->
18+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
19+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
20+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
21+
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>
22+
23+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
24+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/[email protected]/dark.min.css">
25+
<script src="JQColor.js"></script>
26+
27+
28+
29+
<style>
30+
.bd-placeholder-img {
31+
font-size: 1.125rem;
32+
text-anchor: middle;
33+
-webkit-user-select: none;
34+
-moz-user-select: none;
35+
user-select: none;
36+
}
37+
38+
@media (min-width: 768px) {
39+
.bd-placeholder-img-lg {
40+
font-size: 3.5rem;
41+
}
42+
}
43+
44+
#loader {
45+
display: none;
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
right: 0;
50+
bottom: 0;
51+
width: 100%;
52+
background: rgba(0, 0, 0, .75) url("https://i.imgur.com/zlY3REY.png") no-repeat center center; //include your spinner url
53+
z-index: 10000
54+
}
55+
56+
</style>
57+
58+
59+
<!-- Custom styles for this template -->
60+
<link href="stylesheet.css" rel="stylesheet" type="text/css">
61+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
62+
63+
64+
</head>
65+
66+
<body class="text-white">
67+
68+
<div id="video-notes">
69+
70+
<div class="row">
71+
<!-- <input type="timecode" id="stop-time" name="stop-time" class="col-9 resetAble" value="" placeholder="XX:XX:XX" autocomplete="off"> -->
72+
<input type="button" id="stop-timer-button" value="Stop Timer" class="col-4">
73+
<div class="col-9" id="stop-timer-div" style="display: none">
74+
<h1 class="" id="stop-timer">10:00</h1><input type="button" class="timer-button fa fa-input" id="stop-button" value="&#xf28d;"><input type="button" class="timer-button fa fa-input" id="restart-button" value="&#xf1da;">
75+
</div>
76+
77+
</div>
78+
79+
<span id="loader"></span>
80+
81+
<script src="script.js"></script>
82+
</body>
83+
84+
<script>
85+
86+
function timecodeMask() {
87+
var num = $(this).val().replace(/\D/g,'');
88+
$(this).val(num.substring(0,2) + ':' + num.substring(2,4) + ':' + num.substring(4,6));
89+
if ($("#stop-time").val() == "::"){
90+
91+
$("#stop-time").val("");
92+
93+
}
94+
}
95+
$('[type="timecode"]').keyup(timecodeMask);
96+
97+
</script>
98+
99+
</html>

0 commit comments

Comments
 (0)