Skip to content

Commit 7b5f753

Browse files
mazlsmazls
authored
Add files via upload
1 parent 36b25be commit 7b5f753

1 file changed

Lines changed: 124 additions & 72 deletions

File tree

‎boss-template.html‎

Lines changed: 124 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,137 @@
1+
<main>
2+
<h1 class="text-3xl font-bold text-center text-blue-450 mb-2">Taktik: Bossname</h1>
3+
4+
<div id="size-toggle" class="flex justify-center mb-6 bg-slate-850 p-1 rounded-lg w-max mx-auto">
5+
<button data-size="10" class="size-toggle-btn text-gray-400 py-2 px-6 rounded-md">10-Spieler</button>
6+
<button data-size="25" class="size-toggle-btn text-gray-400 py-2 px-6 rounded-md active-size-btn">25-Spieler</button>
7+
</div>
18

2-
<main class="space-y-6">
3-
<section class="bg-slate-850 p-6 rounded-lg">
4-
<h2 class="text-2xl font-semibold text-center text-blue-450 mb-4">Bossname - Taktik & Einteilungen</h2>
5-
<div class="video-container">
6-
<iframe src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7-
</div>
8-
<p class="text-gray-400 mt-4 text-center">
9-
Hier kann eine kurze Zusammenfassung der wichtigsten Mechaniken oder der allgemeinen Strategie stehen.
9+
<section class="bg-slate-850 p-6 rounded-lg mb-6">
10+
<h2 class="text-2xl font-semibold mb-3 border-b border-slate-650 pb-2">Kampfübersicht & Kernmechaniken</h2>
11+
<p class="mb-4">
12+
Hier kommt die allgemeine Beschreibung des Kampfes hin. Erkläre kurz, worum es geht, wie viele Phasen der Kampf hat und was die wichtigste Kernmechanik ist.
13+
</p>
14+
<p>
15+
Im 10-Spieler-Modus müsst ihr auf <span data-size="10" class="tactic-content"><strong>dies</strong></span><span data-size="25" class="tactic-content" style="display: none;"><strong>das</strong></span> achten.
1016
</p>
1117
</section>
1218

13-
<section class="bg-slate-850 p-6 rounded-lg">
14-
<h3 class="text-xl font-semibold mb-4 text-blue-450">Einteilungen</h3>
19+
<section class="bg-slate-850 p-6 rounded-lg mb-6">
20+
<h2 class="text-2xl font-semibold mb-3 border-b border-slate-650 pb-2">Fähigkeiten im Detail</h2>
21+
22+
<div class="mb-6">
23+
<h3 class="text-xl font-semibold text-blue-450 mb-3">Phase 1 (100% - 66%)</h3>
24+
<ul class="list-disc list-inside space-y-2 text-gray-300">
25+
<li>
26+
<strong>Fähigkeit 1 (z.B. Debuff auf dem Tank):</strong> Beschreibe hier, was die Fähigkeit tut.
27+
<span data-size="10" class="tactic-content">Verursacht X Schaden (10er).</span>
28+
<span data-size="25" class="tactic-content" style="display: none;">Verursacht Y Schaden (25er).</span>
29+
</li>
30+
<li><strong>Fähigkeit 2 (z.B. Raidweiter Schaden):</strong> Beschreibe hier die nächste Fähigkeit.</li>
31+
</ul>
32+
</div>
33+
34+
<div class="mb-6">
35+
<h3 class="text-xl font-semibold text-blue-450 mb-3">Phase 2 (66% - 33%)</h3>
36+
<ul class="list-disc list-inside space-y-2 text-gray-300">
37+
<li><strong>Fähigkeit 3:</strong> Beschreibung für Phase 2.</li>
38+
</ul>
39+
</div>
1540

16-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
41+
<div class="bg-slate-750 p-4 rounded-lg mt-4 border-l-4 border-red-500">
42+
<h4 class="text-lg font-bold text-red-400">Heroische Anpassungen</h4>
43+
<p class="text-gray-300 mt-2">Hier eine kurze Beschreibung der Änderungen im heroischen Modus.</p>
44+
<ul class="list-disc list-inside text-gray-300 mt-2">
45+
<li>Zusätzliche Fähigkeit oder veränderte Mechanik.</li>
46+
</ul>
47+
</div>
48+
</section>
49+
50+
<section class="bg-slate-850 p-6 rounded-lg mb-6">
51+
<h2 class="text-2xl font-semibold mb-3 border-b border-slate-650 pb-2">Einteilungen & Taktische Hilfen</h2>
52+
53+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
1754

18-
<div class="bg-slate-750 p-4 rounded-lg">
19-
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">🛡️ Tank-Zuweisungen</h4>
20-
<ul class="space-y-3">
21-
<li class="flex items-center justify-between">
22-
<span>Haupt-Tank:</span>
23-
<select data-assignment-id="bossname-tank-main" class="assignment-select w-64"></select>
24-
</li>
25-
<li class="flex items-center justify-between">
26-
<span>Off-Tank:</span>
27-
<select data-assignment-id="bossname-tank-off" class="assignment-select w-64"></select>
28-
</li>
29-
</ul>
30-
</div>
55+
<div class="space-y-6">
56+
57+
<div class="bg-slate-750 p-4 rounded-lg">
58+
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">🛡️ Tank-Zuweisungen</h4>
59+
<ul class="space-y-3">
60+
<li class="flex items-center justify-between">
61+
<span>Haupt-Tank:</span>
62+
<select data-assignment-id="bossname-tank-main" class="assignment-select w-64"></select>
63+
</li>
64+
<li class="flex items-center justify-between">
65+
<span>Off-Tank:</span>
66+
<select data-assignment-id="bossname-tank-off" class="assignment-select w-64"></select>
67+
</li>
68+
<li data-size="25" class="tactic-content flex items-center justify-between">
69+
<span>Tank 3 (nur 25er):</span>
70+
<select data-assignment-id="bossname-tank-3" class="assignment-select w-64"></select>
71+
</li>
72+
</ul>
73+
</div>
3174

32-
<div class="bg-slate-750 p-4 rounded-lg">
33-
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">❤️ Heiler-Cooldowns</h4>
34-
<ul class="space-y-3">
35-
<li class="flex items-center justify-between">
36-
<span>CD 1 (z.B. bei 25%):</span>
37-
<select data-assignment-id="bossname-healer-cd-1" class="assignment-select w-64"></select>
38-
</li>
39-
<li class="flex items-center justify-between">
40-
<span>CD 2 (z.B. bei 50%):</span>
41-
<select data-assignment-id="bossname-healer-cd-2" class="assignment-select w-64"></select>
42-
</li>
43-
<li class="flex items-center justify-between">
44-
<span>CD 3 (z.B. bei 75%):</span>
45-
<select data-assignment-id="bossname-healer-cd-3" class="assignment-select w-64"></select>
46-
</li>
47-
</ul>
48-
</div>
75+
<div class="bg-slate-750 p-4 rounded-lg">
76+
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">❤️ Heiler-Cooldowns</h4>
77+
<ul class="space-y-3">
78+
<li class="flex items-center justify-between">
79+
<span>CD 1 (z.B. bei Fähigkeit X):</span>
80+
<select data-assignment-id="bossname-healer-cd-1" class="assignment-select w-64"></select>
81+
</li>
82+
<li class="flex items-center justify-between">
83+
<span>CD 2 (z.B. bei Fähigkeit Y):</span>
84+
<select data-assignment-id="bossname-healer-cd-2" class="assignment-select w-64"></select>
85+
</li>
86+
<li class="flex items-center justify-between">
87+
<span>CD 3 (z.B. bei 20% HP):</span>
88+
<select data-assignment-id="bossname-healer-cd-3" class="assignment-select w-64"></select>
89+
</li>
90+
</ul>
91+
</div>
4992

50-
<div class="bg-slate-750 p-4 rounded-lg">
51-
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">⚔️ Unterbrechungs-Rotation</h4>
52-
<ul class="space-y-3">
53-
<li class="flex items-center justify-between">
54-
<span>Kick 1:</span>
55-
<select data-assignment-id="bossname-kick-1" class="assignment-select w-64"></select>
56-
</li>
57-
<li class="flex items-center justify-between">
58-
<span>Kick 2:</span>
59-
<select data-assignment-id="bossname-kick-2" class="assignment-select w-64"></select>
60-
</li>
61-
<li class="flex items-center justify-between">
62-
<span>Kick 3 (Backup):</span>
63-
<select data-assignment-id="bossname-kick-3" class="assignment-select w-64"></select>
64-
</li>
65-
</ul>
66-
</div>
93+
<div class="bg-slate-750 p-4 rounded-lg">
94+
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">⚔️ Unterbrechungs-Rotation</h4>
95+
<ul class="space-y-3">
96+
<li class="flex items-center justify-between">
97+
<span>Kick 1:</span>
98+
<select data-assignment-id="bossname-kick-1" class="assignment-select w-64"></select>
99+
</li>
100+
<li class="flex items-center justify-between">
101+
<span>Kick 2:</span>
102+
<select data-assignment-id="bossname-kick-2" class="assignment-select w-64"></select>
103+
</li>
104+
<li class="flex items-center justify-between">
105+
<span>Kick 3 (Backup):</span>
106+
<select data-assignment-id="bossname-kick-3" class="assignment-select w-64"></select>
107+
</li>
108+
</ul>
109+
</div>
67110

68-
<div class="bg-slate-750 p-4 rounded-lg">
69-
<h4 class="text-lg font-bold mb-3 border-b border-slate-650 pb-2">🏃 Spezialaufgabe</h4>
70-
<p class="text-sm text-gray-400 mb-2">Spieler, die für das Kiten der Adds zuständig sind.</p>
71-
<ul class="space-y-3">
72-
<li class="flex items-center justify-between">
73-
<span>Kiter 1:</span>
74-
<select data-assignment-id="bossname-special-kiter-1" class="assignment-select w-64"></select>
75-
</li>
76-
<li class="flex items-center justify-between">
77-
<span>Kiter 2:</span>
78-
<select data-assignment-id="bossname-special-kiter-2" class="assignment-select w-64"></select>
79-
</li>
80-
</ul>
81111
</div>
82112

83-
</div>
113+
<div class="space-y-6">
114+
<div>
115+
<h3 class="text-xl font-semibold text-blue-450 mb-4">Visuelle Hilfen</h3>
116+
<h4 class="text-lg font-semibold">Positionierung für Mechanik X</h4>
117+
<p class="text-gray-400 text-sm mb-2">Eine kurze Erklärung zur Positionierung.</p>
118+
<div class="bg-slate-900 mt-2 rounded-lg h-48 flex items-center justify-center text-gray-500 border border-slate-600">
119+
Platz für ein Positionierungs-Bild
120+
</div>
121+
</div>
122+
<div>
123+
<h4 class="text-xl font-bold text-gold mt-4 mb-2">Video-Guide</h4>
124+
<div class="video-container my-4 rounded-lg shadow-lg">
125+
<iframe
126+
src="https://www.youtube-nocookie.com/embed/VIDEO_ID_HIER_EINFUEGEN"
127+
title="YouTube video player"
128+
frameborder="0"
129+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
130+
allowfullscreen>
131+
</iframe>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
84136
</section>
85137
</main>

0 commit comments

Comments
 (0)