224 行
7.1 KiB
Smarty
224 行
7.1 KiB
Smarty
{__NOLAYOUT__}<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title>{:__('Warning')}</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
|
||
<style type="text/css">
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||
background-size: 200% 200%;
|
||
animation: gradientBG 15s ease infinite;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
body {
|
||
padding: 20px;
|
||
}
|
||
@keyframes gradientBG {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
.box {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 24px;
|
||
box-shadow: 0 25px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.2) inset;
|
||
width: 100%;
|
||
max-width: 440px;
|
||
padding: 52px 44px;
|
||
text-align: center;
|
||
backdrop-filter: blur(20px);
|
||
animation: slideUp 0.5s ease-out;
|
||
}
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
.icon {
|
||
width: 90px;
|
||
height: 90px;
|
||
margin: 0 auto 28px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
animation: scaleIn 0.5s ease-out 0.2s both;
|
||
}
|
||
@keyframes scaleIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.icon-success {
|
||
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
||
color: #155724;
|
||
box-shadow: 0 8px 24px rgba(21, 87, 36, 0.2);
|
||
}
|
||
.icon-error {
|
||
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
|
||
color: #721c24;
|
||
box-shadow: 0 8px 24px rgba(114, 18, 36, 0.2);
|
||
}
|
||
.icon-info {
|
||
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
|
||
color: #0c5460;
|
||
box-shadow: 0 8px 24px rgba(12, 84, 96, 0.2);
|
||
}
|
||
.msg {
|
||
font-size: 19px;
|
||
color: #2d3748;
|
||
margin-bottom: 20px;
|
||
line-height: 1.6;
|
||
word-break: break-all;
|
||
font-weight: 500;
|
||
}
|
||
.timer {
|
||
font-size: 14px;
|
||
color: #718096;
|
||
margin-bottom: 12px;
|
||
}
|
||
.timer b {
|
||
color: #667eea;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
min-width: 18px;
|
||
display: inline-block;
|
||
}
|
||
.progress-bar {
|
||
height: 4px;
|
||
background: #e2e8f0;
|
||
border-radius: 2px;
|
||
margin-bottom: 32px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-bar i {
|
||
display: block;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 2px;
|
||
transition: width 1s linear;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
gap: 14px;
|
||
}
|
||
.btns a {
|
||
flex: 1;
|
||
display: block;
|
||
padding: 15px 0;
|
||
border-radius: 12px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.btns a::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
.btns a:hover::before {
|
||
left: 100%;
|
||
}
|
||
.btn-back {
|
||
background: #edf2f7;
|
||
color: #4a5568;
|
||
}
|
||
.btn-back:hover {
|
||
background: #e2e8f0;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
||
}
|
||
.btn-jump {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
.btn-jump:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
|
||
}
|
||
@media (max-width: 480px) {
|
||
.box { padding: 40px 28px; border-radius: 20px; }
|
||
.btns { flex-direction: column; }
|
||
.icon { width: 80px; height: 80px; font-size: 34px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
{php}$iconClass = $code == 1 ? 'icon-success' : ($code == 0 ? 'icon-error' : 'icon-info');{/php}
|
||
<div class="box">
|
||
<div class="icon {$iconClass|htmlentities}">
|
||
{if $code == 1}✓{elseif $code == 0}✕{else}ℹ{/if}
|
||
</div>
|
||
<div class="msg">{$msg|htmlentities}</div>
|
||
{if $url}
|
||
<div class="timer">
|
||
{:__('This page will be re-directed in %s seconds', '<b id="wait">' . htmlentities($wait) . '</b>')}
|
||
</div>
|
||
<div class="progress-bar">
|
||
<i id="progress" style="width: 100%"></i>
|
||
</div>
|
||
<div class="btns">
|
||
<a href="__PUBLIC__" class="btn-back">{:__('Go back')}</a>
|
||
<a id="href" href="{$url|htmlentities}" class="btn-jump">{:__('Jump now')}</a>
|
||
</div>
|
||
{else}
|
||
<div class="btns">
|
||
<a href="__PUBLIC__" class="btn-jump" style="width: 100%">{:__('Go back')}</a>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{if $url}
|
||
<script>
|
||
(function () {
|
||
var wait = document.getElementById('wait'),
|
||
href = document.getElementById('href').href,
|
||
progress = document.getElementById('progress'),
|
||
total = parseInt(wait.innerHTML),
|
||
curr = total;
|
||
var interval = setInterval(function () {
|
||
curr--;
|
||
wait.innerHTML = curr;
|
||
progress.style.width = (curr / total * 100) + '%';
|
||
if (curr <= 0) {
|
||
clearInterval(interval);
|
||
location.href = href;
|
||
}
|
||
}, 1000);
|
||
})();
|
||
</script>
|
||
{/if}
|
||
</body>
|
||
</html>
|