147 lines
9.1 KiB
HTML
147 lines
9.1 KiB
HTML
{% extends "sidebar.html" %}
|
|
|
|
{% block title %}AstraOS — Altersüberprüfung{% endblock %}
|
|
|
|
{% block head %}
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<header class="flex justify-between items-center mb-6">
|
|
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Altersüberprüfung</h2>
|
|
</header>
|
|
|
|
<!-- FLASH MESSAGES -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="toast-container">
|
|
{% for category, message in messages %}
|
|
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
|
|
x-transition:enter="toast transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-x-8"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="toast transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="max-w-sm w-full bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else ('blue' if category == 'info' else 'gray')) }}-500/40">
|
|
<div class="p-4">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0">
|
|
{% if category == 'success' %}
|
|
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
{% elif category == 'danger' %}
|
|
<svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
{% else %}
|
|
<svg class="h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
{% endif %}
|
|
</div>
|
|
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
<p class="text-sm font-medium text-gray-100">{{ message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Verification Form -->
|
|
<div class="bg-black/40 p-6 rounded-xl backdrop-blur border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %}">
|
|
<h3 class="text-2xl font-semibold mb-4">Neue Überprüfung</h3>
|
|
<form method="POST" class="space-y-4">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<div>
|
|
<label for="birthdate" class="block text-sm font-medium text-gray-300">Geburtsdatum</label>
|
|
<input type="date" name="birthdate" id="birthdate" required
|
|
class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
|
|
</div>
|
|
<div>
|
|
<label for="steam_id" class="block text-sm font-medium text-gray-300">SteamID</label>
|
|
<input type="text" name="steam_id" id="steam_id" placeholder="z.B. 76561199045670704" required
|
|
class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
|
|
</div>
|
|
<div>
|
|
<label for="ingame_name" class="block text-sm font-medium text-gray-300">Ingame Name</label>
|
|
<input type="text" name="ingame_name" id="ingame_name" placeholder="z.B. Max Mustermann" required
|
|
class="mt-1 w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
|
|
Überprüfen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if result %}
|
|
<div class="mt-6 border-t {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %} pt-4">
|
|
<h4 class="text-xl font-semibold mb-2">Ergebnis</h4>
|
|
<p class="text-lg">Die Person ist <span class="font-bold {% if result.age < 13 %}text-red-400{% else %}text-green-400{% endif %}">{{ result.age }}</span> Jahre alt.</p>
|
|
{% if result.age < 13 %}
|
|
<p class="text-lg mt-2">Diese Person muss für <span class="font-bold text-yellow-400">{{ result.ban_duration_days }}</span> Tage gebannt werden.</p>
|
|
<div class="mt-4">
|
|
<label for="ban-command" class="block text-sm font-medium text-gray-300">Bann-Befehl</label>
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<input type="text" id="ban-command" readonly value="{{ result.ban_command }}"
|
|
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
|
|
<button onclick="copyToClipboard('ban-command')" class="flex-shrink-0 font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
|
|
Kopieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-lg mt-2 text-green-400">Keine Sperre erforderlich.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- User Search -->
|
|
<div class="bg-black/40 p-6 rounded-xl backdrop-blur border {% if maintenance_active %}border-yellow-500/30{% else %}border-purple-500/20{% endif %}">
|
|
<h3 class="text-2xl font-semibold mb-4">Benutzer suchen</h3>
|
|
<form method="GET" class="flex gap-2 mb-4">
|
|
<input type="text" name="search" placeholder="Suche nach Name oder SteamID..." value="{{ search_query }}"
|
|
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 {% if maintenance_active %}focus:ring-yellow-500{% else %}focus:ring-purple-500{% endif %}">
|
|
<button type="submit" class="font-bold py-2 px-4 rounded-lg transition text-white {% if maintenance_active %}bg-yellow-600 hover:bg-yellow-700{% else %}bg-purple-600 hover:bg-purple-700{% endif %}">
|
|
Suchen
|
|
</button>
|
|
</form>
|
|
|
|
<div class="space-y-2 max-h-96 overflow-y-auto">
|
|
{% for user in users %}
|
|
<a href="{{ url_for('view_user_age_details', user_id=user._id) }}" class="block p-3 rounded-lg transition {% if maintenance_active %}hover:bg-yellow-500/10{% else %}hover:bg-purple-500/10{% endif %}">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<p class="font-semibold {% if user.age < 13 %}text-red-400{% else %}text-white{% endif %}">{{ user.ingame_name }}</p>
|
|
<p class="text-sm text-gray-400">{{ user.steam_id }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-lg font-bold">{{ user.age }} Jahre</p>
|
|
<p class="text-xs text-gray-500">{{ user.timestamp.strftime('%d.%m.%Y') }}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% else %}
|
|
<p class="text-gray-400">Keine Benutzer gefunden.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(elementId) {
|
|
const input = document.getElementById(elementId);
|
|
input.select();
|
|
input.setSelectionRange(0, 99999); // For mobile devices
|
|
document.execCommand('copy');
|
|
// Optional: Visuelles Feedback geben
|
|
const originalButtonText = event.target.innerText;
|
|
event.target.innerText = 'Kopiert!';
|
|
setTimeout(() => {
|
|
event.target.innerText = originalButtonText;
|
|
}, 1500);
|
|
}
|
|
</script>
|
|
{% endblock %}
|