Sindbad~EG File Manager
<?php
// use Cake\Core\Configure;
// $url = $this->Url->build(['controller' => 'Timer', 'action' => 'index']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Timer - CâmaraSAP</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?= $this->Url->build('/') ?>/adminlte/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet"
href="<?= $this->Url->build('/') ?>/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?= $this->Url->build('/') ?>/adminlte/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="<?= $this->Url->build('/') ?>/css/councilorsVotings.css">
<link rel="apple-touch-icon" sizes="57x57" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?= $this->Url->build('/') ?>/img/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="<?= $this->Url->build('/') ?>/img/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?= $this->Url->build('/') ?>/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?= $this->Url->build('/') ?>/img/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?= $this->Url->build('/') ?>/img/icons/favicon-16x16.png">
<link rel="manifest" href="<?= $this->Url->build('/') ?>/img/icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="<?= $this->Url->build('/') ?>/img/icons/ms-icon-144x144.png">
<style type="text/css">
.content-wrapper {
background-color: #343a40;
color: #fff;
}
.timer-box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50dvh;
gap: 20px;
}
.timer-box h1 {
font-size: 13rem;
}
.timer-box i {
font-size: 5rem;
margin-bottom: 20px;
}
.warning {
background-color: yellow;
}
.danger {
color: red !important;
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
</style>
</head>
<body class="hold-transition layout-top-nav dark-mode content-wrapper">
<div class="comeback d-flex justify-content-between align-items-center">
<a href="<?= $this->Url->build(['controller' => 'Dashboard', 'action' => 'index']) ?>" class="btn btn-link text-white" style="font-size: 1.3rem;">
<i class="fas fa-arrow-left me-2"></i> Voltar
</a>
<a href="#" onclick="toggleFullScreen()" class="btn btn-link text-white" style="font-size: 1.3rem;">
<i class="fas fa-expand"></i>
</a>
</div>
<h1 style="text-align: center; font-size: 4em; margin-bottom: 20px; font-weight: bold; margin-top: 8dvh;">Cronômetro</h1>
<div class="timer">
<div class="col-lg-12 col-12">
<div class="timer-box" id="timer-box">
<div class="inner">
<h1 style="font-weight: bold; font-size: 33dvw;" id="panel-timer">00:00</h1>
<br>
</div>
<div class="icon">
<i class="fas fa-clock timer-icon"></i>
</div>
</div>
</div>
</div>
<script src="<?= $this->Url->build('/') ?>/adminlte/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var urlTimer = '<?= $this->Url->build(['controller' => 'Panel', 'action' => 'index/ajax/timer']); ?>';
var countdownInterval;
var remainingSeconds;
function loadTimer() {
$.ajax({
url: urlTimer,
type: "GET",
dataType: "json",
success: function (data) {
$('#panel-timer').html(data.time);
$('#panel-datetime').html(data.datetime);
var timeParts = data.time.split(':');
var minutes = parseInt(timeParts[0], 10);
var seconds = parseInt(timeParts[1], 10);
var totalSeconds = minutes * 60 + seconds;
var currentTime = Math.floor(Date.now() / 1000);
var endTime = currentTime + totalSeconds;
remainingSeconds = endTime - currentTime;
if (remainingSeconds > 0 && remainingSeconds <= 30) {
updateDisplay(remainingSeconds);
} else {
$('#panel-timer').removeClass('danger');
$('.content-wrapper').removeClass('bg-warning');
$('.timer-icon').removeClass('danger');
$('.content-wrapper').addClass('bg-dark');
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.error('Erro ao carregar o timer:', textStatus, errorThrown);
}
});
}
function updateDisplay(remainingSeconds) {
if (remainingSeconds <= 15 && remainingSeconds > 0) {
$('#panel-timer').addClass('danger');
$('.timer-icon').addClass('danger');
} else if (remainingSeconds <= 30) {
$('.content-wrapper').removeClass('bg-dark');
$('.content-wrapper').addClass('bg-warning');
}
}
loadTimer();
setInterval(function () {
loadTimer();
}, 800);
});
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists