File: /home/assibfaf/public_html/prox-templates/payment/payment.status.tpl
<!doctype html>
<html lang="en">
<head>
{if $status == "success"}
<title>Payment successful</title>
{else}
<title>Payment failed</title>
{/if}
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,600,600i,400i,700,700i,900&display=swap" rel="stylesheet">
</head>
<body>
{literal}
<style type="text/css">
*, :after, :before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-family: 'Lato','Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
}
body{
color: #888;
margin: 0;
font-family: 'Lato','Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
}
#main{
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.redirect-box {
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: white;
border: 1px solid #d6dcde;
width: 580px;
max-width: 90%;
padding: 80px 30px;
margin: 100px auto;
text-align: center;
}
@media screen and (max-width: 800px) {
.redirect-box {
margin: 40px auto;
padding: 30px 5%;
}
}
.successful,
.failed {
margin-bottom: 20px;
}
.successful {
color: #8ab45f;
}
.failed {
color: #b45f5f;
}
.redirect-box .loading-animation {
width: 40px;
height: 40px;
opacity: 0;
visibility: hidden;
margin: 30px auto;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.redirect-box .loading-animation.show {
opacity: 1;
visibility: visible;
}
.redirect-box .loading-animation .count {
display: inline-block;
width: 100%;
line-height: 39px;
text-align: center;
position: absolute;
z-index: 1;
font-size: 16px;
left: 0;
top: 0;
color: #6dbad3;
}
.redirect-info {
overflow: hidden;
font-size: 15px;
color: #586051;
}
.redirect-info-p {
line-height: 18px;
margin-bottom: 5px;
}
.redirect-info-p a {
text-decoration: underline;
white-space: nowrap;
}
/* Loading animation ↓↓↓ */
.loading-animation {
margin: 0;
height: 40px;
width: 40px;
position: relative;
border-radius: 999px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
}
.loading-animation:after {
content: "";
position: absolute;
width: 36px;
height: 36px;
left: 0px;
top: 0px;
margin: 2px;
background: #ffffff;
opacity: 1;
border-radius: 999px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
}
.ie8 .loading-animation {
display: none;
}
.loading-animation .side {
height: 40px;
width: 20px;
position: absolute;
overflow: hidden;
top: 0;
}
.loading-animation .side > .fill {
position: absolute;
width: 20px;
height: 40px;
background: #0099cc;
border-radius: 999px;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
-webkit-animation: cssSpinnerRight 2s infinite linear;
-moz-animation: cssSpinnerRight 2s infinite linear;
animation: cssSpinnerRight 2s infinite linear;
}
.loading-animation .side.sp_right {
left: 20px;
border-radius: 0px 999px 999px 0px;
-webkit-border-radius: 0px 999px 999px 0px;
-moz-border-radius: 0px 999px 999px 0px;
}
.loading-animation .side.sp_right > .fill {
right: 0;
border-right: 20px solid #ffffff;
}
.loading-animation .side.sp_left {
left: 0;
border-radius: 999px 0px 0px 999px;
-webkit-border-radius: 999px 0px 0px 999px;
-moz-border-radius: 999px 0px 0px 999px;
}
.loading-animation .side.sp_left > .fill {
left: 0;
border-left: 20px solid #ffffff;
-webkit-animation: cssSpinnerLeft 2s infinite linear;
-moz-animation: cssSpinnerLeft 2s infinite linear;
animation: cssSpinnerLeft 2s infinite linear;
}
@-webkit-keyframes cssSpinnerRight {
0% {
-webkit-transform: rotate(0deg);
}
20% {
-webkit-transform: rotate(90deg);
}
25% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
70% {
-webkit-transform: rotate(270deg);
}
75% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cssSpinnerLeft {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(0deg);
}
35% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
80% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes cssSpinnerRight {
0% {
-moz-transform: rotate(0deg);
}
20% {
-moz-transform: rotate(90deg);
}
25% {
-moz-transform: rotate(180deg);
}
50% {
-moz-transform: rotate(180deg);
}
70% {
-moz-transform: rotate(270deg);
}
75% {
-moz-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-moz-keyframes cssSpinnerLeft {
0% {
-moz-transform: rotate(0deg);
}
25% {
-moz-transform: rotate(0deg);
}
35% {
-moz-transform: rotate(90deg);
}
50% {
-moz-transform: rotate(180deg);
}
75% {
-moz-transform: rotate(180deg);
}
80% {
-moz-transform: rotate(270deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes cssSpinnerRight {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(90deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
70% {
transform: rotate(270deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes cssSpinnerLeft {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
35% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
80% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
/* End Loading animation ↑↑↑ */
</style>
{/literal}
<script type="text/javascript">
var seconds = Math.round(10);
{if $status == "success"}
var redirectUrl = '{$order_url}';
{else}
var redirectUrl = '{$base_uri}/dashboard/orders';
{/if}
if (seconds) {
document.addEventListener('DOMContentLoaded', function () {
var countEl = document.querySelector('.count');
countEl.innerText = seconds;
document.querySelector('.redirect-box .loading-animation').classList.add('show');
var interval = setInterval(function () {
countEl.innerText = Math.max(0, --seconds);
if (seconds === 0) {
window.location = redirectUrl;
clearInterval(interval);
}
}, 1000);
});
} else {
window.location = redirectUrl;
}
</script>
<div id="main">
<div class="redirect-box">
{if $status == "success"}
<h1 class="successful">Payment successful!</h1>
<div class="loading-animation show">
<span class="count">2</span>
<span class="side sp_left">
<span class="fill"></span>
</span>
<span class="side sp_right">
<span class="fill"></span>
</span>
</div>
<div class="redirect-info">
<div class="redirect-info-p">Thank you for using our service.</div>
<div class="redirect-info-p">Redirecting to <a href="{$order_url}">your order page</a>…</div>
</div>
{else}
<h1 class="failed">Payment failed!</h1>
<div class="loading-animation show">
<span class="count">2</span>
<span class="side sp_left">
<span class="fill"></span>
</span>
<span class="side sp_right">
<span class="fill"></span>
</span>
</div>
<div class="redirect-info">
<div class="redirect-info-p">We were not able to process your payment. If you encounter this message more than once please contact support for further assistance.</div>
<div class="redirect-info-p">Redirecting to <a href="{$base_uri}/dashboard/orders">your order page</a>…</div>
</div>
{/if}
</div>
</div>
</body>
</html>