Version 1.0

steam-gift-manager/templates/redeem.html

@@ -0,0 +1,91 @@
+{% 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>
+                    <a href="{{ platform_link }}{{ game.steam_key }}" 
+                       class="btn btn-primary btn-lg mb-3"
+                       target="_blank">
+                        {{ _('Redeem now on') }} {% if game.steam_appid %}Steam{% else %}GOG{% endif %}
+                    </a>
+                    <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 = {{ (redeem_token.expires.timestamp() * 1000) | int }};
+const countdownEl = document.getElementById('expiry-countdown');
+const progressBar = document.getElementById('expiry-bar');
+
+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);
+}
+
+// Initialisierung
+updateCountdown();
+const timer = setInterval(updateCountdown, 1000);
+</script>
+{% endblock %}