72 lines
7.3 KiB
Text
72 lines
7.3 KiB
Text
extends layout
|
||
block header
|
||
div#create-card.post-it-actions
|
||
a.add-post-it.mini-card.white(href="#", data-color="white", title='Ajouter une note blanche')
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z")
|
||
a.add-post-it.mini-card.yellow(href="#", data-color="yellow", title='Ajouter une note jaune')
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z")
|
||
a.add-post-it.mini-card.green(href="#", data-color="green", title='Ajouter une note verte')
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z")
|
||
a.add-post-it.mini-card.blue(href="#", data-color="blue", title='Ajouter une note bleu')
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z")
|
||
a.add-post-it.mini-card.pink(href="#", data-color="pink", title='Ajouter une note rose')
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z")
|
||
div.stickers(style="display:none")
|
||
div.sticker#sticker-red(title='Glisser-déposer la pastille rouge')
|
||
div.sticker#sticker-blue(title='Glisser-déposer la pastille bleue')
|
||
div.sticker#sticker-yellow(title='Glisser-déposer la pastille jaune')
|
||
div.sticker#sticker-green(title='Glisser-déposer la pastille verte')
|
||
div.sticker#sticker-pink(title='Glisser-déposer la pastille rose')
|
||
div.sticker#sticker-lightblue(title='Glisser-déposer la pastille bleu clair')
|
||
div.sticker#sticker-orange(title='Glisser-déposer la pastille orange')
|
||
div.sticker#sticker-purple(title='Glisser-déposer la pastille violette')
|
||
br
|
||
div.sticker#sticker-gold(title='Glisser-déposer une étoile dorée')
|
||
div.sticker#sticker-bluestar(title='Glisser-déposer une étoile bleue')
|
||
div.sticker#sticker-silverstar(title='Glisser-déposer une étoile argentée')
|
||
div.sticker#sticker-redstar(title='Glisser-déposer une étoile rouge')
|
||
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
|
||
div.actions
|
||
a#smallify(href="#size", title="Changer la taille des post-it")
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z")
|
||
path(d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z")
|
||
path(fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z")
|
||
a#full-page(href="#fullscreen", aria-hidden="true", title="Plein écran")
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16")
|
||
path(fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z")
|
||
a.toggle-nav(href="#share",aria-hidden="true", title="Partager le tableau")
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16")
|
||
path(d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z")
|
||
a.toggle-nav(href="#settings", aria-hidden="true", title="Options")
|
||
svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16")
|
||
path(d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z")
|
||
|
||
block body
|
||
div(style="margin: 1em;")
|
||
label(for="opacity-range") Transparence du tableau :
|
||
input#opacity-range(type="range", min="0", max="1", step="0.01", value="1")
|
||
div.container
|
||
div.board-container
|
||
div.board-outline
|
||
div#board
|
||
table#board-table.board-table
|
||
tr
|
||
td#icon-col(width='1%')
|
||
div#add-col.col-icon(title="Ajouter une colonne", style="width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #000; cursor:pointer;")
|
||
span(style="font-weight:bold; font-size:16px;") +
|
||
div#delete-col.col-icon(title="Supprimer une colonne", style="width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #000; cursor:pointer; margin-top:4px;")
|
||
span(style="font-weight:bold; font-size:16px;") −
|
||
|
||
script.
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const slider = document.getElementById('opacity-range');
|
||
slider.addEventListener('input', function () {
|
||
document.documentElement.style.setProperty('--board-opacity', slider.value);
|
||
});
|
||
});
|