paniksheet/loot.html at main · mazls/paniksheet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<main class="space-y-6">
    <h1 class="text-3xl font-bold text-center text-blue-450 mb-6">Loot-Verlauf</h1>

    <section id="loot-import-section" class="bg-slate-850 p-6 rounded-lg" style="display: none;">
        <h3 class="text-xl font-semibold mb-3 text-blue-450">Loot-Daten Importieren</h3>
        <p class="text-gray-400 mb-4">Nur Gildenräte können neue Loot-Daten importieren. Füge den JSON-String aus dem Addon hier ein.</p>
        <textarea id="loot-json-input" class="w-full h-32 bg-slate-900 text-gray-300 p-3 rounded-md border border-slate-650 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="[{...},{...}]"></textarea>
        <div class="flex flex-wrap gap-4 mt-4">
            <button id="import-loot-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition-colors duration-200">
                Loot importieren
            </button>
        </div>
    </section>

    <div class="flex flex-col md:flex-row gap-6">
        <aside class="w-full md:w-1/4 bg-slate-850 p-4 rounded-lg">
            <h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">Raid-Datum</h4>
            <div id="loot-dates-list" class="space-y-2">
                <p class="text-gray-500">Keine Loot-Daten gefunden.</p>
            </div>
        </aside>

        <section id="loot-details-container" class="w-full md:w-3/4 bg-slate-850 p-6 rounded-lg">
            <div class="flex justify-between items-center mb-4">
                <h3 id="loot-view-title" class="text-xl font-semibold text-blue-450">Loot-Details</h3>
                <button id="show-player-summary-btn" class="bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200">
                    Spieler-Zusammenfassung
                </button>
            </div>
            <div id="loot-details-display">
                <p class="text-gray-400">Bitte wähle links ein Datum aus, um die Loot-Verteilung anzuzeigen.</p>
            </div>
        </section>
    </div>
</main>