91 lines
3.4 KiB
Plaintext
91 lines
3.4 KiB
Plaintext
---
|
|
import DmLayout from "@/layouts/DmLayout.astro";
|
|
import DmCard from "@/components/dm/DmCard.astro";
|
|
import DiceRoller from "@/components/dm/DiceRoller.astro";
|
|
import InitiativeTracker from "@/components/dm/InitiativeTracker.astro";
|
|
import Open5eReference from "@/components/dm/Open5eReference.astro";
|
|
import NotesPanel from "@/components/dm/NotesPanel.astro";
|
|
import { dmTranslations as T } from "@/i18n/dm-translations";
|
|
---
|
|
|
|
<DmLayout>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Subtitle -->
|
|
<p class="text-[var(--text-secondary)] text-base mb-4">
|
|
{T.subtitle}
|
|
</p>
|
|
|
|
<!-- Anchor Navigation -->
|
|
<nav aria-label="Инструменты" class="mb-8">
|
|
<ul class="flex flex-wrap gap-2">
|
|
{[
|
|
{ id: "dice", label: T.anchorDice },
|
|
{ id: "initiative", label: T.anchorInitiative },
|
|
{ id: "reference", label: T.anchorReference },
|
|
{ id: "notes", label: T.anchorNotes },
|
|
].map((item) => (
|
|
<li>
|
|
<a
|
|
href={`#${item.id}`}
|
|
class="inline-flex items-center px-3 py-1.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] text-[var(--text-secondary)] text-sm font-medium hover:bg-[var(--accent)]/10 hover:text-[var(--accent)] hover:border-[var(--accent)]/30 active:bg-[var(--accent)]/20 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)]"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Dashboard Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Dice Roller -->
|
|
<section id="dice" aria-labelledby="dice-heading">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
|
|
<h2 id="dice-heading" class="text-lg font-bold text-[var(--text-primary)]">
|
|
{T.dice}
|
|
</h2>
|
|
</div>
|
|
<DiceRoller />
|
|
</section>
|
|
|
|
<!-- Initiative Tracker -->
|
|
<section id="initiative" aria-labelledby="initiative-heading">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
|
|
<h2 id="initiative-heading" class="text-lg font-bold text-[var(--text-primary)]">
|
|
{T.initiative}
|
|
</h2>
|
|
</div>
|
|
<InitiativeTracker />
|
|
</section>
|
|
|
|
<!-- Open5e Reference -->
|
|
<section id="reference" aria-labelledby="reference-heading">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
|
|
<h2 id="reference-heading" class="text-lg font-bold text-[var(--text-primary)]">
|
|
{T.reference}
|
|
</h2>
|
|
</div>
|
|
<DmCard>
|
|
<Open5eReference />
|
|
</DmCard>
|
|
</section>
|
|
|
|
<!-- Notes Panel -->
|
|
<section id="notes" aria-labelledby="notes-heading">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
|
|
<h2 id="notes-heading" class="text-lg font-bold text-[var(--text-primary)]">
|
|
{T.notes}
|
|
</h2>
|
|
</div>
|
|
<DmCard>
|
|
<NotesPanel />
|
|
</DmCard>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</DmLayout>
|