98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<div class="card shadow-lg">
|
|
<div class="row g-0">
|
|
{% if game.steam_appid %}
|
|
<div class="col-md-4">
|
|
<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg"
|
|
class="img-fluid rounded-start" alt="Game Cover">
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-md-8">
|
|
<div class="card-body">
|
|
<h1 class="card-title mb-4">{{ game.name }}</h1>
|
|
<div class="alert alert-success">
|
|
<h4>{{ _('Your Key:') }}</h4>
|
|
<code class="fs-3">{{ game.steam_key }}</code>
|
|
</div>
|
|
{% if platform_link %}
|
|
<a href="{{ platform_link }}{{ game.steam_key }}"
|
|
class="btn btn-primary btn-lg mb-3"
|
|
target="_blank">
|
|
{{ _('Redeem now on') }} {{ platform_name }}
|
|
</a>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
{{ _('Your key:') }} <code class="fs-3">{{ game.steam_key }}</code>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mt-4 text-muted">
|
|
<small>
|
|
{{ _('This page will expire in') }}
|
|
<span id="expiry-countdown" class="fw-bold"></span>
|
|
</small>
|
|
<div class="progress mt-2" style="height: 8px;">
|
|
<div id="expiry-bar"
|
|
class="progress-bar bg-danger"
|
|
role="progressbar"
|
|
style="width: 100%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const totalDuration = {{ redeem_token.total_hours * 3600 * 1000 }}; // Gesamtdauer in Millisekunden
|
|
const expires = {{ expires_timestamp }};
|
|
const countdownEl = document.getElementById('expiry-countdown');
|
|
const progressBar = document.getElementById('expiry-bar');
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
|
|
function formatTime(unit) {
|
|
return unit < 10 ? `0${unit}` : unit;
|
|
}
|
|
|
|
function updateProgressBar(percentage) {
|
|
// Alle Farbklassen entfernen
|
|
progressBar.classList.remove('bg-success', 'bg-warning', 'bg-danger');
|
|
|
|
if (percentage > 75) {
|
|
progressBar.classList.add('bg-success');
|
|
} else if (percentage > 25) {
|
|
progressBar.classList.add('bg-warning');
|
|
} else {
|
|
progressBar.classList.add('bg-danger');
|
|
}
|
|
}
|
|
|
|
function updateCountdown() {
|
|
const now = Date.now();
|
|
const remaining = expires - now;
|
|
const percent = (remaining / totalDuration) * 100;
|
|
|
|
if (remaining < 0) {
|
|
countdownEl.innerHTML = "EXPIRED";
|
|
progressBar.style.width = "0%";
|
|
clearInterval(timer);
|
|
setTimeout(() => window.location.reload(), 5000);
|
|
return;
|
|
}
|
|
|
|
const hours = Math.floor(remaining / (1000 * 60 * 60));
|
|
const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
|
|
|
|
countdownEl.innerHTML = `${formatTime(hours)}h ${formatTime(minutes)}m ${formatTime(seconds)}s`;
|
|
progressBar.style.width = `${percent}%`;
|
|
updateProgressBar(percent);
|
|
}
|
|
|
|
// run countdown
|
|
updateCountdown();
|
|
const timer = setInterval(updateCountdown, 1000);
|
|
</script>
|
|
{% endblock %}
|