5E/5e-drs
1
0
Fork 0
mirror of https://github.com/em-squared/5e-drs.git synced 2025-10-30 13:14:20 +00:00
Code Issues Projects Releases Wiki Activity

meilleure adaptation mobile

Browse source
This commit is contained in:
Maxime Moraine 2020-04-22 14:23:59 +02:00
parent 8fde413b48
commit 6caa69cc11
10 changed files with 162 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="create-magic-item">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
<v-btn color="primary" depressed link to="/liste-objets-magiques/">Liste des objets magiques</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/liste-objets-magiques/">Liste des objets magiques</v-btn>
</div>
</div>
<h1 class="d-print-none">Création de sort</h1>
@ -21,16 +23,16 @@
</div>
<v-row>
<v-col class="d-print-none" :col="6">
<v-col class="d-print-none" :cols="12" :md="6">
<v-row>
<v-col>
<v-col :cols="12" :sm="4">
<v-text-field label="Nom" outlined dense v-model="magicItem.title"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="4">
<v-select :items="types" label="Type" outlined dense v-model="magicItem.frontmatter.type"></v-select>
</v-col>
<v-col>
<v-col :cols="12" :sm="4">
<v-select :items="rarities" label="Rareté" outlined dense v-model="magicItem.frontmatter.rarity"></v-select>
</v-col>
</v-row>

115
docs/.vuepress/theme/layouts/CreateMonsterLayout.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="create-monster">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
<v-btn color="primary" depressed link to="/bestiaire/">Bestiaire</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/bestiaire/">Bestiaire</v-btn>
</div>
</div>
<h1 class="d-print-none">Création de monstre/PNJ</h1>
@ -21,16 +23,16 @@
</div>
<v-row>
<v-col class="d-print-none" :col="6">
<v-col class="d-print-none" :cols="12" :md="6">
<v-row>
<v-col>
<v-col :cols="12" :sm="4">
<v-text-field label="Nom" placeholder="Elfe noir" outlined dense v-model="monster.title"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="4">
<v-select :items="sizes" item-text="label" item-value="abbr" label="Taille" outlined dense v-model="monster.frontmatter.size" @change="selectMonsterSize"></v-select>
</v-col>
<v-col>
<v-col :cols="12" :sm="4">
<v-select :items="challenges" item-text="label" item-value="value" label="Dangerosité" persistent-hint :hint="challengeHint" outlined dense v-model="monster.frontmatter.challenge"></v-select>
</v-col>
</v-row>
@ -55,17 +57,33 @@
</v-row>
<v-row>
<v-col class="d-flex align-center">
<v-text-field class="mr-1" label="Force" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.for"></v-text-field>
<v-text-field class="mr-1" label="Dextérité" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.dex"></v-text-field>
<v-text-field class="mr-1" label="Constitution" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.con"></v-text-field>
<v-text-field class="mr-1" label="Intelligence" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.int"></v-text-field>
<v-text-field class="mr-1" label="Sagesse" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.sag"></v-text-field>
<v-text-field class="mr-0" label="Charisme" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.cha"></v-text-field>
<v-col class="subtitle-2" :cols="12">
Caractéristiques
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Force" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.for"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Dextérité" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.dex"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Constitution" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.con"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Intelligence" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.int"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Sagesse" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.sag"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="4" :sm="2">
<v-text-field label="Charisme" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.cha"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col class="subtitle-2" :cols="12">
Défenses
</v-col>
<v-col class="d-flex align-center">
<v-text-field label="Dés de vie" type="number" min="1" outlined dense v-model="monster.frontmatter.hitDiceCount"></v-text-field>
<v-switch class="my-0 mx-1" v-model="customHitDieSize" label="Dé de vie personnalisé" dense @change="switchCustomHitDizeSize"></v-switch>
@ -83,50 +101,99 @@
</v-row>
<v-row>
<v-col class="d-flex align-center">
<v-select class="mr-1" multiple clearable :items="abilities" item-text="label" item-value="value" label="Jets de sauvegarde" outlined dense v-model="monster.frontmatter.savingThrows"></v-select>
<v-select class="mr-1" multiple clearable return-object :items="skills" item-text="label" item-value="value" label="Compétences" outlined dense v-model="selectedSkillsProficient" @change="selectSkill"></v-select>
<v-select class="mr-1" multiple clearable :items="selectedSkillsProficient" item-text="label" item-value="value" label="Compétences expert" outlined dense v-model="selectedSkillsExpert" @change="selectSkillExpert"></v-select>
<v-col class="subtitle-2" :cols="12">
Maîtrises
</v-col>
<v-col class="d-flex align-center" :cols="12" :sm="4">
<v-select multiple clearable :items="abilities" item-text="label" item-value="value" label="Jets de sauvegarde" outlined dense v-model="monster.frontmatter.savingThrows"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :sm="4">
<v-select multiple clearable return-object :items="skills" item-text="label" item-value="value" label="Compétences" outlined dense v-model="selectedSkillsProficient" @change="selectSkill"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :sm="4">
<v-select multiple clearable :items="selectedSkillsProficient" item-text="label" item-value="value" label="Compétences expert" outlined dense v-model="selectedSkillsExpert" @change="selectSkillExpert"></v-select>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex align-center flex-wrap">
<v-col class="subtitle-2" :cols="12">
Résistances et vulnérabilités
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="3">
<v-select class="mr-1" multiple clearable :items="conditions" label="Immunité états spéciaux" outlined dense v-model="monster.frontmatter.conditionImmunities"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="3">
<v-select class="mr-1" multiple clearable :items="damageTypes" label="Vulnérabilité au dégâts" outlined dense v-model="monster.frontmatter.damageTypeVulnerabilities"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="3">
<v-select class="mr-1" multiple clearable :items="damageTypes" label="Résistance au dégâts" outlined dense v-model="monster.frontmatter.damageTypeResistances"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="3">
<v-select class="mr-1" multiple clearable :items="damageTypes" label="Immunité au dégâts" outlined dense v-model="monster.frontmatter.damageTypeImmunities"></v-select>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex align-center">
<v-col class="subtitle-2" :cols="12">
Déplacements
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-text-field class="mr-1" label="Au sol" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.walk"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-text-field class="mr-1" label="Escalade" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.climb"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-text-field class="mr-1" label="Fouissement" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.burrow"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-text-field class="mr-1" label="Nage" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.swim"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-text-field class="mr-1" label="Vol" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.fly"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
<v-switch class="my-0" v-model="monster.frontmatter.movement.hover" label="Vol stationnaire" dense></v-switch>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex align-center">
<v-col class="subtitle-2" :cols="12">
Sens
</v-col>
<v-col class="d-flex align-center" :cols="6" :lg="3">
<v-text-field class="mr-1" label="Perception des vibrations" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.tremorsense"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :lg="3">
<v-text-field class="mr-1" label="Vision aveugle" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.blindsight"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :lg="3">
<v-text-field class="mr-1" label="Vision dans le noir" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.darkvision"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="6" :lg="3">
<v-text-field class="mr-0" label="Vision parfaite" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.truesight"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col class="d-flex align-center">
<v-col class="subtitle-2" :cols="12">
Langues et communication
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="4">
<v-select class="mr-1" multiple clearable :items="languages" label="Langues" outlined dense v-model="monster.frontmatter.languages"></v-select>
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="4">
<v-text-field class="mr-1" label="Langue personnalisée" outlined dense v-model="monster.frontmatter.customLanguage"></v-text-field>
</v-col>
<v-col class="d-flex align-center" :cols="12" :md="4">
<v-text-field label="Télépathie" type="number" min="0" outlined dense v-model="monster.frontmatter.telepathy"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col class="subtitle-2" :cols="12">
Capacités, Actions, Réactions et Actions légendaires
</v-col>
<v-col>
<v-textarea outlined label="Capacités, Actions, Réactions, Actions légendaires" v-model="monster.content"></v-textarea>
</v-col>
@ -134,7 +201,7 @@
</v-col>
<v-col :col="6">
<v-col :cols="12" :md="6">
<Monster :monster="monster" />
</v-col>
</v-row>

30
docs/.vuepress/theme/layouts/CreateSpellLayout.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="create-spell">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
<v-btn color="primary" depressed link to="/grimoire/">Grimoire</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/grimoire/">Grimoire</v-btn>
</div>
</div>
<h1 class="d-print-none">Création de sort</h1>
@ -21,34 +23,34 @@
</div>
<v-row>
<v-col class="d-print-none" :col="6">
<v-col class="d-print-none" :cols="12" :md="6">
<v-row>
<v-col>
<v-col :cols="12" :lg="3">
<v-text-field label="Nom" placeholder="Projectile magique" outlined dense v-model="spell.title"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="4" :lg="3">
<v-select :items="schools" label="École" outlined dense v-model="spell.frontmatter.school"></v-select>
</v-col>
<v-col>
<v-col :cols="12" :sm="4" :lg="3">
<v-select :items="levels" item-text="label" item-value="value" label="Niveau" outlined dense v-model="spell.frontmatter.level"></v-select>
</v-col>
<v-col>
<v-col v:cols="12" :sm="4" :lg="3">
<v-switch class="my-0" v-model="spell.frontmatter.ritual" label="Rituel" dense></v-switch>
</v-col>
</v-row>
<v-row>
<v-col>
<v-col :cols="12" :sm="6" :lg="3">
<v-text-field label="Temps d'incantation" placeholder="1 action" outlined dense v-model="spell.frontmatter.casting_time"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="6" :lg="3">
<v-text-field label="Portée" placeholder="36 m" outlined dense v-model="spell.frontmatter.range"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="6" :lg="3">
<v-text-field label="Duration" placeholder="instantanée" outlined dense v-model="spell.frontmatter.duration"></v-text-field>
</v-col>
<v-col>
<v-col :cols="12" :sm="6" :lg="3">
<v-switch class="my-0" v-model="spell.frontmatter.concentration" label="Concentration" dense></v-switch>
</v-col>
</v-row>
@ -94,7 +96,7 @@
</v-col>
<v-col :col="6">
<v-col :cols="12" :md="6">
<Spell :spell="spell" />
</v-col>
</v-row>

12
docs/.vuepress/theme/layouts/MagicItemLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="magic-item">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
<v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4 mb-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
</div>
</div>
<MagicItem :magicItem="$page" />
<Edit />

10
docs/.vuepress/theme/layouts/MagicItemsLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="magic-items">
<div class="d-flex align-center mb-4">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn color="primary" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
<div class="d-flex flex-wrap align-center">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
</div>
</div>
<h1>Liste des objets magiques</h1>

12
docs/.vuepress/theme/layouts/MonsterLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="monster">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
<v-btn color="primary" class="mr-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
</div>
</div>
<Monster :monster="$page" />
<Edit />

10
docs/.vuepress/theme/layouts/MonstersLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="monsters">
<div class="d-flex align-center mb-4">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn color="primary" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
<div class="d-flex flex-wrap align-center">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
</div>
</div>
<h1>Bestiaire</h1>

10
docs/.vuepress/theme/layouts/MySpellsLayout.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="my-spells">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn color="primary" depressed link to="/grimoire/">Grimoire</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/grimoire/">Grimoire</v-btn>
</div>
</div>
<h1>Mon grimoire</h1>

12
docs/.vuepress/theme/layouts/SpellLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="spell">
<div class="d-flex align-center mb-4 d-print-none">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
<v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
<div class="d-flex flex-wrap align-center d-print-none">
<Breadcrumb class="mr-auto b-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4 mb-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
</div>
</div>
<Spell :spell="$page" />
<Edit />

10
docs/.vuepress/theme/layouts/SpellsLayout.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="spells">
<div class="d-flex align-center mb-4">
<Breadcrumb class="mr-auto" />
<v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn color="primary" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
<div class="d-flex flex-wrap align-center">
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
</div>
</div>
<h1>Grimoire</h1>