Version 1.0

This commit is contained in:
nocci 2025-04-26 14:32:07 +02:00
parent 4bebbb27e4
commit eaa508a8df
33 changed files with 2822 additions and 994 deletions

View file

@ -3,13 +3,14 @@
<div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Add New Game') }}</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">{{ _('Name') }} *</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">{{ _('Steam Key') }} *</label>
<label class="form-label">{{ _('Game Key') }} *</label>
<input type="text" name="steam_key" class="form-control" required>
</div>
<div class="col-md-4">

View file

@ -3,14 +3,18 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ _('Steam Manager') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ _('Game Key Manager') }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="/">{{ _('Steam Manager') }}</a>
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
<img src="{{ url_for('static', filename='logo_small.png') }}" alt="Logo" width="150" height="116" style="object-fit:contain; border-radius:8px;">
<span>Game Key Manager</span>
</a>
<div class="d-flex align-items-center gap-3">
<form class="d-flex" action="{{ url_for('index') }}" method="GET">
<input class="form-control me-2"
@ -26,28 +30,22 @@
id="darkModeSwitch" {% if theme == 'dark' %}checked{% endif %}>
<label class="form-check-label" for="darkModeSwitch">{{ _('Dark Mode') }}</label>
</div>
<!-- Sprachumschalter -->
<div class="dropdown ms-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{% if get_locale() == 'de' %} Deutsch {% elif get_locale() == 'en' %} English {% else %} Sprache {% endif %}
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item {% if get_locale() == 'de' %}active{% endif %}" href="{{ url_for('set_lang', lang='de') }}">
Deutsch
</a>
</li>
<li>
<a class="dropdown-item {% if get_locale() == 'en' %}active{% endif %}" href="{{ url_for('set_lang', lang='en') }}">
English
</a>
</li>
</ul>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{% if get_locale() == 'de' %} Deutsch {% elif get_locale() == 'en' %} English {% else %} Sprache {% endif %}
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item {% if get_locale() == 'de' %}active{% endif %}" href="{{ url_for('set_lang', lang='de') }}">Deutsch</a></li>
<li><a class="dropdown-item {% if get_locale() == 'en' %}active{% endif %}" href="{{ url_for('set_lang', lang='en') }}">English</a></li>
</ul>
</div>
{% if current_user.is_authenticated %}
<a href="{{ url_for('export_games') }}" class="btn btn-outline-secondary">⬇️ {{ _('Export') }}</a>
<a href="{{ url_for('import_games') }}" class="btn btn-outline-secondary">⬆️ {{ _('Import') }}</a>
<a href="{{ url_for('logout') }}" class="btn btn-danger ms-3">{{ _('Logout') }}</a>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('change_password') }}">🔒 {{ _('Passwort') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logout') }}">🚪 {{ _('Logout') }}</a>
</li>
{% endif %}
</div>
</div>
@ -68,16 +66,16 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('darkModeSwitch');
const html = document.documentElement;
const toggle = document.getElementById('darkModeSwitch')
const html = document.documentElement
toggle.addEventListener('change', function() {
const theme = this.checked ? 'dark' : 'light';
const theme = this.checked ? 'dark' : 'light'
fetch('/set-theme/' + theme)
.then(() => {
html.setAttribute('data-bs-theme', theme);
});
});
});
.then(() => html.setAttribute('data-bs-theme', theme))
})
})
</script>
{% include "footer.html" %}
</body>
</html>

View file

@ -0,0 +1,22 @@
{% extends "base.html" %}
{% block content %}
<div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Change Password') }}</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label class="form-label">{{ _('Current Password') }}</label>
<input type="password" name="current_password" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">{{ _('New Password') }}</label>
<input type="password" name="new_password" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">{{ _('Confirm New Password') }}</label>
<input type="password" name="confirm_password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary">{{ _('Change Password') }}</button>
</form>
</div>
{% endblock %}

View file

@ -3,19 +3,20 @@
<div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Edit Game') }}</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">{{ _('Name') }} *</label>
<input type="text" name="name" class="form-control" value="{{ game.name }}" required>
</div>
<div class="col-md-6">
<label class="form-label">{{ _('Steam Key') }} *</label>
<label class="form-label">{{ _('Game Key') }} *</label>
<input type="text" name="steam_key" class="form-control" value="{{ game.steam_key }}" required>
</div>
<div class="col-md-6">
<label class="form-label">{{ _('Steam AppID (optional)') }}</label>
<div class="col-md-6">
<label class="form-label">{{ _('Steam AppID (optional)') }}</label>
<input type="text" name="steam_appid" class="form-control" value="{{ game.steam_appid or '' }}">
</div>
</div>
<div class="col-md-4">
<label class="form-label">{{ _('Status') }} *</label>
<select name="status" class="form-select" required>
@ -40,6 +41,21 @@
<label class="form-label">{{ _('Notes') }}</label>
<textarea name="notes" class="form-control" rows="3">{{ game.notes }}</textarea>
</div>
<div class="col-12">
{% if redeem_url and active_redeem %}
<div class="mb-3">
<label class="form-label">{{ _('Active Redeem Link') }}</label>
<input type="text"
class="form-control"
value="{{ redeem_url }}"
readonly
onclick="this.select()">
<small class="text-muted">
{{ _('Expires at') }}: {{ active_redeem.expires.strftime('%d.%m.%Y %H:%M') }}
</small>
</div>
{% endif %}
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">{{ _('Save') }}</button>
<a href="{{ url_for('index') }}" class="btn btn-outline-secondary">{{ _('Cancel') }}</a>

View file

@ -0,0 +1,19 @@
<footer class="mt-5 py-4 bg-body-tertiary border-top">
<div class="container text-center small text-muted">
<div class="mb-2">
<strong>Game Key Manager</strong> &mdash; is done by nocci
</div>
<div class="mb-2">
<a href="https://git.nocci.it/nocci/GiftGamesDB" target="_blank" rel="noopener">
<img src="{{ url_for('static', filename='forgejo.svg') }}" alt="forgejo" width="20" style="vertical-align:middle;margin-right:4px;">
find the source code on my Forgejo
</a>
</div>
<div>
<span>feel free to donate - if you can affort it:</span>
<a href="https://www.paypal.me/badbramstedt" target="_blank" rel="noopener">PayPal</a> &middot;
<a href="https://ko-fi.com/nocci" target="_blank" rel="noopener">Ko-fi</a> &middot;
<a href="https://liberapay.com/nocci" target="_blank" rel="noopener">Liberapay</a>
</div>
</div>
</footer>

View file

@ -3,6 +3,7 @@
<div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Import Games') }}</h2>
<form method="POST" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label class="form-label">{{ _('CSV-Datei auswählen') }}</label>
<input type="file" name="file" class="form-control" accept=".csv" required>

View file

@ -2,9 +2,12 @@
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
<h1>{{ _('My Games') }}</h1>
<a href="{{ url_for('add_game') }}" class="btn btn-primary">
+ {{ _('Add New Game') }}
</a>
<div>
<a href="{{ url_for('export_games') }}" class="btn btn-outline-secondary">⬇️ {{ _('Export CSV') }}</a>
<a href="{{ url_for('export_pdf') }}" class="btn btn-outline-secondary">⬇️ Export PDF (for sharing)</a>
<a href="{{ url_for('import_games') }}" class="btn btn-outline-secondary">⬆️ {{ _('Import CSV') }}</a>
<a href="{{ url_for('add_game') }}" class="btn btn-primary">+ {{ _('Add New Game') }}</a>
</div>
</div>
{% if games %}
@ -54,8 +57,16 @@
{% endif %}
</td>
<td class="text-nowrap">
{% if game.status == 'verschenkt' %}
<button class="btn btn-sm btn-success generate-redeem"
data-game-id="{{ game.id }}"
title="{{ _('Generate redeem link') }}">
🔗
</button>
{% endif %}
<a href="{{ url_for('edit_game', game_id=game.id) }}" class="btn btn-sm btn-warning">✏️</a>
<form method="POST" action="{{ url_for('delete_game', game_id=game.id) }}" class="d-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('{{ _('Really delete?') }}')">🗑️</button>
</form>
</td>
@ -64,6 +75,33 @@
</tbody>
</table>
</div>
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
document.querySelectorAll('.generate-redeem').forEach(btn => {
btn.addEventListener('click', async function() {
const gameId = this.dataset.gameId;
try {
const response = await fetch('/generate_redeem/' + gameId, {
method: 'POST',
headers: {
'X-CSRFToken': csrfToken
}
});
if (!response.ok) throw new Error('Network error');
const data = await response.json();
if(data.url) {
await navigator.clipboard.writeText(data.url);
alert('{{ _("Redeem link copied to clipboard!") }}');
}
} catch (error) {
console.error('Error:', error);
alert('{{ _("Error generating link") }}');
}
});
});
</script>
{% else %}
<div class="alert alert-info">{{ _('No games yet') }}</div>
{% endif %}

View file

@ -3,9 +3,11 @@
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-body">
<div class="card-body text-center">
<img src="{{ url_for('static', filename='logo.png') }}" alt="Logo" width="311" height="240" class="mb-4" style="object-fit:contain;">
<h2 class="card-title mb-4">{{ _('Login') }}</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label class="form-label">{{ _('Username') }}</label>
<input type="text" name="username" class="form-control" required>
@ -24,3 +26,4 @@
</div>
</div>
{% endblock %}

View file

@ -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 %}

View file

@ -6,6 +6,7 @@
<div class="card-body">
<h2 class="card-title mb-4">{{ _('Register') }}</h2>
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3">
<label class="form-label">{{ _('Username') }}</label>
<input type="text" name="username" class="form-control" required>