Admin Nasledstvo
108 lines
2.9 KiB
PHP
108 lines
2.9 KiB
PHP
<?php
|
|
/**
|
|
* @var $id
|
|
*/
|
|
|
|
use app\services\JWT;
|
|
|
|
?>
|
|
<?php
|
|
$message = ['bg' => 'Зареждане', 'en' => 'Loading'];
|
|
$close = ['bg' => 'Затвори', 'en' => 'Close'];
|
|
$lg = $_GET['lg'] ?? 'bg';
|
|
|
|
?>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: #000000;
|
|
}
|
|
|
|
.model-loading-progress {
|
|
position: fixed;
|
|
width: calc(100% - 20px);
|
|
padding: 40px;
|
|
background: rgba(204, 204, 204, 0.13);
|
|
z-index: 100;
|
|
bottom: 100px;
|
|
|
|
}
|
|
|
|
.model-loading-progress-load {
|
|
background: #857750;
|
|
height: 5px;
|
|
width: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
.loading-message {
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.loading-dots { display: flex; margin-top: -12px; margin-left: 5px}
|
|
.loading-dots i {
|
|
font-size: 30px;
|
|
color: #FFFFFF;
|
|
display: block;
|
|
font-style: normal;
|
|
margin: 2px;
|
|
}
|
|
|
|
.loading-dots i {
|
|
animation-name: blink;
|
|
animation-duration: 1.4s;
|
|
animation-iteration-count: infinite;
|
|
animation-fill-mode: both;
|
|
transform: scale(1);
|
|
}
|
|
.loading-dots i:nth-child(2) { animation-delay: .2s; }
|
|
.loading-dots i:nth-child(3) { animation-delay: .4s; }
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: .1;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
opacity: .1;
|
|
}
|
|
}
|
|
.model-title {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 100px;
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
<model-viewer id="modelView" style="width: 100%; height: 100%" src="/api/stream-file/<?= $id ?>/" shadow-intensity="1"
|
|
camera-controls touch-action="pan-y" slot="progress-bar"></model-viewer>
|
|
<div class="model-loading-progress">
|
|
<div class="loading-message"><?= $message[$lg] ?> <span class="loading-dots"><i>.</i><i>.</i><i>.</i></span></div>
|
|
<div class="model-loading-progress-load"></div>
|
|
</div>
|
|
<script>
|
|
const modelView = document.querySelector('#modelView');
|
|
const modelLoadingProgress = document.querySelector('.model-loading-progress');
|
|
const modelLoadingProgressLoad = document.querySelector('.model-loading-progress-load');
|
|
modelView.addEventListener('progress', (event) => {
|
|
if (event.detail && event.detail.totalProgress) {
|
|
modelLoadingProgressLoad.setAttribute('style', `width: ${100*event.detail.totalProgress}%`)
|
|
}
|
|
})
|
|
modelView.addEventListener('load', () => {
|
|
modelLoadingProgress.remove()
|
|
}, true)
|
|
</script>
|
|
|
|
<?= $this->render('/api/_mobile_view_mode', ['close' => $close[$lg], 'lg' => $lg]) ?>
|