274 lines
10 KiB
PHP
Executable File
274 lines
10 KiB
PHP
Executable File
<?php
|
|
require_once('fixed/config/go_con.php');
|
|
access(39);
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en" dir="rtl">
|
|
<?php require_once('fixed/head/go.php'); ?>
|
|
<body class="rtl">
|
|
<style>
|
|
.base-timer {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.base-timer__svg {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.base-timer__circle {
|
|
fill: none;
|
|
stroke: none;
|
|
}
|
|
|
|
.base-timer__path-elapsed {
|
|
stroke-width: 7px;
|
|
stroke: grey;
|
|
}
|
|
|
|
.base-timer__path-remaining {
|
|
stroke-width: 7px;
|
|
stroke-linecap: round;
|
|
transform: rotate(90deg);
|
|
transform-origin: center;
|
|
transition: 1s linear all;
|
|
fill-rule: nonzero;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.base-timer__path-remaining.green {
|
|
color: rgb(65, 184, 131);
|
|
}
|
|
|
|
.base-timer__path-remaining.orange {
|
|
color: orange;
|
|
}
|
|
|
|
.base-timer__path-remaining.red {
|
|
color: red;
|
|
}
|
|
|
|
.base-timer__label {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48px;
|
|
}
|
|
</style>
|
|
<?php require_once('fixed/loader/go.php'); ?>
|
|
<div class="page-wrapper" id="pageWrapper">
|
|
<?php require_once('fixed/header/go.php'); ?>
|
|
<div class="page-body-wrapper">
|
|
<?php require_once('fixed/sidebar/go.php'); ?>
|
|
<!-- sound -->
|
|
<audio controls id="alarm_one" style="display: none">
|
|
<source src="uploads/sounds/alarm_one.mp3" type="audio/mpeg">
|
|
</audio>
|
|
<audio controls id="alarm_two" style="display: none">
|
|
<source src="uploads/sounds/alarm_two.mp3" type="audio/mpeg">
|
|
</audio>
|
|
<!-- sound -->
|
|
<div class="page-body">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body new-user order-list">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered text-center">
|
|
<tbody>
|
|
<tr style="text-align:center;">
|
|
<td>
|
|
<div style="display: grid;height: 80vh;place-items: center;">
|
|
<div id="app"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr style="text-align:center;">
|
|
<td>
|
|
<div id="next" class="btn btn-pill btn-primary btn-air-primary" title="btn btn-pill btn-primary btn-air-primary">التالي</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php require_once('fixed/footer/go.php'); ?>
|
|
</div>
|
|
</div>
|
|
<?php require_once('fixed/js/go.php'); ?>
|
|
<script>
|
|
// SOUND
|
|
var alarm_one = document.getElementById('alarm_one');
|
|
function soundOnePlay() {
|
|
alarm_one.play();
|
|
}
|
|
var alarm_two = document.getElementById('alarm_two');
|
|
function soundTwoPlay() {
|
|
alarm_two.play();
|
|
}
|
|
|
|
const FULL_DASH_ARRAY = 283;
|
|
const WARNING_THRESHOLD = 10;
|
|
const ALERT_THRESHOLD = 5;
|
|
|
|
const COLOR_CODES = {
|
|
info: {
|
|
color: "green"
|
|
},
|
|
warning: {
|
|
color: "orange",
|
|
threshold: WARNING_THRESHOLD
|
|
},
|
|
alert: {
|
|
color: "red",
|
|
threshold: ALERT_THRESHOLD
|
|
}
|
|
};
|
|
|
|
const TIME_LIMIT = 20;
|
|
let timePassed = 0;
|
|
let timeLeft = TIME_LIMIT;
|
|
let timerInterval = null;
|
|
let remainingPathColor = COLOR_CODES.info.color;
|
|
|
|
document.getElementById("app").innerHTML = `
|
|
<div class="base-timer">
|
|
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<g class="base-timer__circle">
|
|
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
|
|
<path
|
|
id="base-timer-path-remaining"
|
|
stroke-dasharray="283"
|
|
class="base-timer__path-remaining ${remainingPathColor}"
|
|
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 id="base-timer-label" class="base-timer__label">${formatTime(
|
|
timeLeft
|
|
)}</span>
|
|
</div>
|
|
`;
|
|
|
|
startTimer();
|
|
|
|
function onTimesUp() {
|
|
clearInterval(timerInterval);
|
|
}
|
|
|
|
function startTimer() {
|
|
timerInterval = setInterval(() => {
|
|
timePassed = timePassed += 1;
|
|
timeLeft = TIME_LIMIT - timePassed;
|
|
document.getElementById("base-timer-label").innerHTML = formatTime(
|
|
timeLeft
|
|
);
|
|
setCircleDasharray();
|
|
setRemainingPathColor(timeLeft);
|
|
|
|
if (timeLeft === 0) {
|
|
onTimesUp();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function formatTime(time) {
|
|
const minutes = Math.floor(time / 60);
|
|
let seconds = time % 60;
|
|
|
|
if (seconds < 10) {
|
|
seconds = `0${seconds}`;
|
|
}
|
|
|
|
switch (parseInt(seconds)) {
|
|
case (TIME_LIMIT/1):
|
|
swalfun('تنبيه' ,'يجب الانتباه لكل رساله تنبيهيه والعمل بها + يجب عدم اغلاق الجوال اثناء الجلسة لتصل لك التنبيهات' ,'warning');
|
|
window.addEventListener('touchstart', () => {
|
|
soundOnePlay().muted = false;
|
|
// soundOnePlay().play();
|
|
})
|
|
break;
|
|
case (TIME_LIMIT/2):
|
|
swalfun('تذكير', 'يرجى ابلاغ العميل بالآتي : يفضل عدم الاستحمام مباشرة لمدة 4 - 7 ساعات للاستفادة من التدليك لعدم فقدان ما يقارب 40% من فائدة التدليك', 'warning');
|
|
soundOnePlay().play();
|
|
break;
|
|
|
|
case (TIME_LIMIT/4):
|
|
swalfun('تذكير', 'يرجى ابلاغ العميل بالآتي : تقديم النصيحة للعميل مع تحديد وقت جلسة اخرى اذا كان يحتاج', 'warning');
|
|
soundTwoPlay().muted = false;
|
|
soundTwoPlay().play();
|
|
break;
|
|
|
|
case 0:
|
|
swalfun('تذكير', 'يرجى ابلاغ العميل بالآتي : تقديم النصيحة للعميل مع تحديد وقت جلسة اخرى اذا كان يحتاج', 'warning');
|
|
soundTwoPlay().muted = false;
|
|
soundTwoPlay().play();
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
return `${minutes}:${seconds}`;
|
|
}
|
|
|
|
function setRemainingPathColor(timeLeft) {
|
|
const { alert, warning, info } = COLOR_CODES;
|
|
if (timeLeft <= alert.threshold) {
|
|
document
|
|
.getElementById("base-timer-path-remaining")
|
|
.classList.remove(warning.color);
|
|
document
|
|
.getElementById("base-timer-path-remaining")
|
|
.classList.add(alert.color);
|
|
} else if (timeLeft <= warning.threshold) {
|
|
document
|
|
.getElementById("base-timer-path-remaining")
|
|
.classList.remove(info.color);
|
|
document
|
|
.getElementById("base-timer-path-remaining")
|
|
.classList.add(warning.color);
|
|
}
|
|
}
|
|
|
|
function calculateTimeFraction() {
|
|
const rawTimeFraction = timeLeft / TIME_LIMIT;
|
|
return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
|
|
}
|
|
|
|
function setCircleDasharray() {
|
|
const circleDasharray = `${(
|
|
calculateTimeFraction() * FULL_DASH_ARRAY
|
|
).toFixed(0)} 283`;
|
|
document
|
|
.getElementById("base-timer-path-remaining")
|
|
.setAttribute("stroke-dasharray", circleDasharray);
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
// window.addEventListener('touchstart', () => {
|
|
// soundTwoPlay().muted = false;
|
|
// // soundTwoPlay().play();
|
|
// })
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|