nocci/GameKeyManager
nocci
/
GameKeyManager
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases 2 Wiki Activity

more accessibility

This commit is contained in:
nocci 2025-05-02 14:49:43 +02:00
parent 6649cd6e23
commit 3313fb0a89
1 changed files with 217 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

360
setup.sh
View File

@ -1032,15 +1032,24 @@ cat <<HTML_END > templates/base.html
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="description" content="Manage your Steam and GOG keys efficiently. Track redemption dates, share games, and export lists."> <meta name="description" content="Manage your Steam and GOG keys efficiently. Track redemption dates, share games, and export lists.">
<meta name="theme-color" content="#212529"> <meta name="theme-color" content="#212529">
<title>{{ _('Game Key Manager') }}</title>
<!-- PWA Manifest -->
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}"> <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
<title>{{ _('Game Key Manager') }}</title>
<!-- Preload Bootstrap CSS for better LCP --> <!-- Preload Bootstrap CSS for better LCP -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></noscript> <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></noscript>
<!-- Critical CSS (Above-the-Fold) kann hier inline ergänzt werden --> <!-- Eigene Styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
{# LCP-Optimierung: Preload für das erste Cover-Bild, falls vorhanden #}
{% if games and games[0].steam_appid %}
<link rel="preload"
as="image"
href="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ games[0].steam_appid }}/header.jpg"
imagesrcset="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ games[0].steam_appid }}/header.jpg 368w"
fetchpriority="high"
type="image/jpeg">
{% endif %}
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container"> <div class="container">
@ -1049,15 +1058,15 @@ cat <<HTML_END > templates/base.html
<span>Game Key Manager</span> <span>Game Key Manager</span>
</a> </a>
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3">
<form class="d-flex" action="{{ url_for('index') }}" method="GET"> <form class="d-flex" action="{{ url_for('index') }}" method="GET" role="search" aria-label="{{ _('Search games') }}">
<label for="searchInput" class="visually-hidden">{{ _('Search') }}</label> <label for="searchInput" class="visually-hidden">{{ _('Search') }}</label>
<input class="form-control me-2" <input class="form-control me-2"
type="search" type="search"
name="q" name="q"
id="searchInput" id="searchInput"
placeholder="{{ _('Search') }}" placeholder="{{ _('Search') }}"
value="{{ search_query }}"> value="{{ search_query }}">
<button class="btn btn-outline-success" type="submit">🔍</button> <button class="btn btn-outline-success" type="submit" aria-label="{{ _('Search') }}">🔍</button>
</form> </form>
<div class="form-check form-switch"> <div class="form-check form-switch">
<input class="form-check-input" <input class="form-check-input"
@ -1115,16 +1124,17 @@ cat <<HTML_END > templates/base.html
} }
// Dark Mode Switch // Dark Mode Switch
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('darkModeSwitch') const toggle = document.getElementById('darkModeSwitch');
const html = document.documentElement const html = document.documentElement;
if (toggle) { if (toggle) {
toggle.addEventListener('change', function() { toggle.addEventListener('change', function() {
const theme = this.checked ? 'dark' : 'light' const theme = this.checked ? 'dark' : 'light';
fetch('/set-theme/' + theme) fetch('/set-theme/' + theme)
.then(() => html.setAttribute('data-bs-theme', theme)) .then(() => html.setAttribute('data-bs-theme', theme));
}); });
} }
}); });
</script> </script>
{% include "footer.html" %} {% include "footer.html" %}
</body> </body>
@ -1170,13 +1180,15 @@ cat <<HTML_END > templates/index.html
class="game-cover" class="game-cover"
{% if loop.first %}fetchpriority="high"{% endif %} {% if loop.first %}fetchpriority="high"{% endif %}
width="368" width="368"
height="172"> height="172"
loading="lazy">
{% elif game.url and 'gog.com' in game.url %} {% elif game.url and 'gog.com' in game.url %}
<img src="{{ url_for('static', filename='gog_logo.webp') }}" <img src="{{ url_for('static', filename='gog_logo.webp') }}"
alt="GOG Logo" alt="GOG Logo"
class="game-cover" class="game-cover"
width="368" width="368"
height="172"> height="172"
loading="lazy">
{% endif %} {% endif %}
</td> </td>
<td>{{ game.name }}</td> <td>{{ game.name }}</td>
@ -1257,87 +1269,134 @@ HTML_END
cat <<HTML_END > templates/login.html cat <<HTML_END > templates/login.html
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="row justify-content-center mt-5"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6 col-lg-4">
<div class="card shadow-sm"> <h1 class="mb-4">{{ _('Login') }}</h1>
<div class="card-body text-center"> <form method="POST" aria-label="{{ _('Login form') }}" autocomplete="on">
<img src="{{ url_for('static', filename='logo.webp') }}" alt="Logo" width="266" height="206" class="mb-4" style="object-fit:contain;"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<h2 class="card-title mb-4">{{ _('Login') }}</h2> <div class="mb-3">
<form method="POST"> <label for="username" class="form-label">{{ _('Username') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="text"
<div class="mb-3"> id="username"
<label class="form-label">{{ _('Username') }}</label> name="username"
<input type="text" name="username" class="form-control" required> class="form-control"
</div> required
<div class="mb-3"> autocomplete="username"
<label class="form-label">{{ _('Password') }}</label> aria-required="true"
<input type="password" name="password" class="form-control" required> autofocus>
</div> </div>
<button type="submit" class="btn btn-primary w-100">{{ _('Login') }}</button> <div class="mb-3">
</form> <label for="password" class="form-label">{{ _('Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
<div class="mt-3 text-center"> <input type="password"
<a href="{{ url_for('register') }}">{{ _('No account yet? Register') }}</a> id="password"
</div> name="password"
</div> class="form-control"
</div> required
autocomplete="current-password"
aria-required="true">
</div>
{% if error %}
<div class="alert alert-danger" role="alert">
{{ error }}
</div>
{% endif %}
<button type="submit" class="btn btn-primary w-100">{{ _('Login') }}</button>
</form>
<div class="mt-3 text-center">
<a href="{{ url_for('register') }}">{{ _('No account? Register here!') }}</a>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}
HTML_END HTML_END
# Register Template # Register Template
cat <<HTML_END > templates/register.html cat <<HTML_END > templates/register.html
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="row justify-content-center mt-5"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6 col-lg-4">
<div class="card shadow-sm"> <h1 class="mb-4">{{ _('Register') }}</h1>
<div class="card-body"> <form method="POST" aria-label="{{ _('Registration form') }}" autocomplete="on">
<h2 class="card-title mb-4">{{ _('Register') }}</h2> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<form method="POST"> <div class="mb-3">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <label for="reg-username" class="form-label">{{ _('Username') }} <span aria-hidden="true" class="text-danger">*</span></label>
<div class="mb-3"> <input type="text"
<label class="form-label">{{ _('Username') }}</label> id="reg-username"
<input type="text" name="username" class="form-control" required> name="username"
</div> class="form-control"
<div class="mb-3"> required
<label class="form-label">{{ _('Password') }}</label> autocomplete="username"
<input type="password" name="password" class="form-control" required> aria-required="true">
</div> </div>
<button type="submit" class="btn btn-primary w-100">{{ _('Register') }}</button> <div class="mb-3">
</form> <label for="reg-password" class="form-label">{{ _('Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
</div> <input type="password"
</div> id="reg-password"
name="password"
class="form-control"
required
autocomplete="new-password"
aria-required="true">
</div>
<div class="mb-3">
<label for="reg-password2" class="form-label">{{ _('Confirm Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="password"
id="reg-password2"
name="password2"
class="form-control"
required
autocomplete="new-password"
aria-required="true">
</div>
{% if error %}
<div class="alert alert-danger" role="alert">
{{ error }}
</div>
{% endif %}
<button type="submit" class="btn btn-primary w-100">{{ _('Register') }}</button>
</form>
<div class="mt-3 text-center">
<a href="{{ url_for('login') }}">{{ _('Already have an account? Login!') }}</a>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}
HTML_END HTML_END
# Change Password Template # Change Password Template
cat <<HTML_END > templates/change_password.html cat <<HTML_END > templates/change_password.html
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="card p-4 shadow-sm"> <div class="row justify-content-center">
<h2 class="mb-4">{{ _('Change Password') }}</h2> <div class="col-md-6 col-lg-5">
<form method="POST"> <div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Change Password') }}</h2>
<form method="POST" aria-label="{{ _('Change password form') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">{{ _('Current Password') }}</label> <label for="current_password" class="form-label">{{ _('Current Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="password" name="current_password" class="form-control" required> <input type="password" id="current_password" name="current_password" class="form-control" required autocomplete="current-password" aria-required="true">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">{{ _('New Password') }}</label> <label for="new_password" class="form-label">{{ _('New Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="password" name="new_password" class="form-control" required> <input type="password" id="new_password" name="new_password" class="form-control" required autocomplete="new-password" aria-required="true">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">{{ _('Confirm New Password') }}</label> <label for="confirm_password" class="form-label">{{ _('Confirm New Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="password" name="confirm_password" class="form-control" required> <input type="password" id="confirm_password" name="confirm_password" class="form-control" required autocomplete="new-password" aria-required="true">
</div> </div>
<button type="submit" class="btn btn-primary">{{ _('Change Password') }}</button> <button type="submit" class="btn btn-primary">{{ _('Change Password') }}</button>
</form> <a href="{{ url_for('index') }}" class="btn btn-outline-secondary ms-2">{{ _('Cancel') }}</a>
</form>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}
HTML_END HTML_END
@ -1346,67 +1405,68 @@ cat <<HTML_END > templates/edit_game.html
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="card p-4 shadow-sm"> <div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Edit Game') }}</h2> <h2 class="mb-4">{{ _('Edit Game') }}</h2>
<form method="POST"> <form method="POST" aria-label="{{ _('Edit Game') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">{{ _('Name') }} *</label> <label for="game_name" class="form-label">{{ _('Name') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="text" name="name" class="form-control" value="{{ game.name }}" required> <input type="text" id="game_name" name="name" class="form-control" value="{{ game.name }}" required aria-required="true">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">{{ _('Game Key') }} *</label> <label for="game_key" class="form-label">{{ _('Game Key') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="text" name="steam_key" class="form-control" value="{{ game.steam_key }}" required> <input type="text" id="game_key" name="steam_key" class="form-control" value="{{ game.steam_key }}" required aria-required="true">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">{{ _('Steam AppID (optional)') }}</label> <label for="game_appid" class="form-label">{{ _('Steam AppID (optional)') }}</label>
<input type="text" name="steam_appid" class="form-control" value="{{ game.steam_appid or '' }}"> <input type="text" id="game_appid" name="steam_appid" class="form-control" value="{{ game.steam_appid or '' }}">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Status') }} *</label> <label for="game_status" class="form-label">{{ _('Status') }} <span aria-hidden="true" class="text-danger">*</span></label>
<select name="status" class="form-select" required> <select id="game_status" name="status" class="form-select" required aria-required="true">
<option value="nicht eingelöst" {% if game.status == 'nicht eingelöst' %}selected{% endif %}>{{ _('Not redeemed') }}</option> <option value="nicht eingelöst" {% if game.status == 'nicht eingelöst' %}selected{% endif %}>{{ _('Not redeemed') }}</option>
<option value="verschenkt" {% if game.status == 'verschenkt' %}selected{% endif %}>{{ _('Gifted') }}</option> <option value="verschenkt" {% if game.status == 'verschenkt' %}selected{% endif %}>{{ _('Gifted') }}</option>
<option value="eingelöst" {% if game.status == 'eingelöst' %}selected{% endif %}>{{ _('Redeemed') }}</option> <option value="eingelöst" {% if game.status == 'eingelöst' %}selected{% endif %}>{{ _('Redeemed') }}</option>
</select> </select>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Redeem by') }}</label> <label for="game_redeem_date" class="form-label">{{ _('Redeem by') }}</label>
<input type="date" name="redeem_date" class="form-control" value="{{ redeem_date }}"> <input type="date" id="game_redeem_date" name="redeem_date" class="form-control" value="{{ redeem_date }}">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Recipient') }}</label> <label for="game_recipient" class="form-label">{{ _('Recipient') }}</label>
<input type="text" name="recipient" class="form-control" value="{{ game.recipient }}"> <input type="text" id="game_recipient" name="recipient" class="form-control" value="{{ game.recipient }}">
</div> </div>
<div class="col-12"> <div class="col-12">
<label class="form-label">{{ _('Shop URL') }}</label> <label for="game_url" class="form-label">{{ _('Shop URL') }}</label>
<input type="url" name="url" class="form-control" value="{{ game.url }}"> <input type="url" id="game_url" name="url" class="form-control" value="{{ game.url }}">
</div> </div>
<div class="col-12"> <div class="col-12">
<label class="form-label">{{ _('Notes') }}</label> <label for="game_notes" class="form-label">{{ _('Notes') }}</label>
<textarea name="notes" class="form-control" rows="3">{{ game.notes }}</textarea> <textarea id="game_notes" name="notes" class="form-control" rows="3">{{ game.notes }}</textarea>
</div> </div>
<div class="col-12"> <div class="col-12">
{% if redeem_url and active_redeem %} {% if redeem_url and active_redeem %}
<div class="mb-3"> <div class="mb-3">
<label class="form-label">{{ _('Active Redeem Link') }}</label> <label for="active_redeem_link" class="form-label">{{ _('Active Redeem Link') }}</label>
<input type="text" <input type="text"
class="form-control" id="active_redeem_link"
value="{{ redeem_url }}" class="form-control"
readonly value="{{ redeem_url }}"
onclick="this.select()"> readonly
<small class="text-muted"> onclick="this.select()">
{{ _('Expires at') }}: {{ active_redeem.expires.strftime('%d.%m.%Y %H:%M') }} <small class="text-muted">
</small> {{ _('Expires at') }}: {{ active_redeem.expires.strftime('%d.%m.%Y %H:%M') }}
</div> </small>
{% 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>
</div>
</div> </div>
</form> {% 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 ms-2">{{ _('Cancel') }}</a>
</div>
</div>
</form>
</div> </div>
{% endblock %} {% endblock %}
HTML_END HTML_END
@ -1416,40 +1476,44 @@ cat <<HTML_END > templates/add_game.html
{% block content %} {% block content %}
<div class="card p-4 shadow-sm"> <div class="card p-4 shadow-sm">
<h2 class="mb-4">{{ _('Add New Game') }}</h2> <h2 class="mb-4">{{ _('Add New Game') }}</h2>
<form method="POST"> <form method="POST" aria-label="{{ _('Add New Game') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">{{ _('Name') }} *</label> <label for="game_name" class="form-label">{{ _('Name') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="text" name="name" class="form-control" required> <input type="text" id="game_name" name="name" class="form-control" required aria-required="true">
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">{{ _('Game Key') }} *</label> <label for="game_key" class="form-label">{{ _('Game Key') }} <span aria-hidden="true" class="text-danger">*</span></label>
<input type="text" name="steam_key" class="form-control" required> <input type="text" id="game_key" name="steam_key" class="form-control" required aria-required="true">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Status') }} *</label> <label for="game_status" class="form-label">{{ _('Status') }} <span aria-hidden="true" class="text-danger">*</span></label>
<select name="status" class="form-select" required> <select id="game_status" name="status" class="form-select" required aria-required="true">
<option value="nicht eingelöst">{{ _('Not redeemed') }}</option> <option value="nicht eingelöst">{{ _('Not redeemed') }}</option>
<option value="verschenkt">{{ _('Gifted') }}</option> <option value="verschenkt">{{ _('Gifted') }}</option>
<option value="eingelöst">{{ _('Redeemed') }}</option> <option value="eingelöst">{{ _('Redeemed') }}</option>
</select> </select>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Redeem by') }}</label> <label for="game_redeem_date" class="form-label">{{ _('Redeem by') }}</label>
<input type="date" name="redeem_date" class="form-control"> <input type="date" id="game_redeem_date" name="redeem_date" class="form-control">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label class="form-label">{{ _('Recipient') }}</label> <label for="game_recipient" class="form-label">{{ _('Recipient') }}</label>
<input type="text" name="recipient" class="form-control"> <input type="text" id="game_recipient" name="recipient" class="form-control">
</div>
<div class="col-md-6">
<label for="game_appid" class="form-label">{{ _('Steam AppID (optional)') }}</label>
<input type="text" id="game_appid" name="steam_appid" class="form-control">
</div>
<div class="col-md-6">
<label for="game_url" class="form-label">{{ _('Shop URL') }}</label>
<input type="url" id="game_url" name="url" class="form-control">
</div> </div>
<div class="col-12"> <div class="col-12">
<label class="form-label">{{ _('Shop URL') }}</label> <label for="game_notes" class="form-label">{{ _('Notes') }}</label>
<input type="url" name="url" class="form-control"> <textarea id="game_notes" name="notes" class="form-control" rows="3"></textarea>
</div>
<div class="col-12">
<label class="form-label">{{ _('Notes') }}</label>
<textarea name="notes" class="form-control" rows="3"></textarea>
</div> </div>
<div class="col-12"> <div class="col-12">
<button type="submit" class="btn btn-success">{{ _('Save') }}</button> <button type="submit" class="btn btn-success">{{ _('Save') }}</button>
@ -1663,6 +1727,16 @@ body {
padding: 4px 8px; padding: 4px 8px;
} }
.badge.bg-warning {
background-color: #ffcc00 !important;
color: #222 !important;
}
.badge.bg-success {
background-color: #198754 !important;
color: #fff !important;
}
.game-cover { .game-cover {
width: 368px; width: 368px;
height: 172px; height: 172px;