mirror of
https://github.com/IliesAllali/parenthese.git
synced 2026-11-06 23:32:08 +00:00
IliesAllaliandClaude Opus 5.5
5b5636e1be
- Landing refaite : nouvelle palette claire, Newsreader et DM Sans, logo validé, sections (garanties, trois gestes, démo, pour qui, engagements, guides, bloc final). Illustration du hero conservée et recolorée, portraits alignés sur les âges. - App : couleurs et typographie passées à la nouvelle DA, structure et fonctionnalités inchangées. Composants communs dans src/styles/pz.css. - Refaits de zéro : fiche d'une personne (souvenirs, infos, liens, panneau mobile), connexion, création de compte, liste des arbres, accès par mot de passe, recherche, barre d'actions, menu du compte, zoom, et toutes les fenêtres (compte, création d'arbre, contributions, envoi, sortie d'édition, brouillon, ajout de personne, souvenirs, visionneuse, paramètres de l'arbre). - Arbre : chaque personne garde sa forme de cadre tirée au hasard, cadre vertical pour une photo carrée. - Démo : photos d'époque libres de droits hébergées dans public/demo (sources et licences dans sources.json et CREDITS.md), famille Dupont crédible, Isabelle née à Fort-de-France. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
173 lines
3.4 KiB
CSS
173 lines
3.4 KiB
CSS
/* ============================================================
|
|
Add Person Button - FAB draggable pour ajouter personne
|
|
============================================================ */
|
|
|
|
.add-person-button {
|
|
position: fixed;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
|
|
background: rgba(242, 239, 234, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 2px solid rgba(147, 64, 42, 0.3);
|
|
|
|
box-shadow:
|
|
0 8px 32px rgba(42, 38, 34, 0.25),
|
|
0 2px 8px rgba(42, 38, 34, 0.12);
|
|
|
|
cursor: grab;
|
|
user-select: none;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
|
|
z-index: 900;
|
|
|
|
/* Position initiale : bas-gauche */
|
|
bottom: 24px;
|
|
left: 24px;
|
|
}
|
|
|
|
.add-person-button:hover {
|
|
transform: scale(1.12);
|
|
box-shadow:
|
|
0 12px 40px rgba(147, 64, 42, 0.35),
|
|
0 4px 12px rgba(42, 38, 34, 0.18);
|
|
border-color: rgba(147, 64, 42, 0.5);
|
|
}
|
|
|
|
.add-person-button.dragging {
|
|
cursor: grabbing;
|
|
transform: scale(1.2) rotate(5deg);
|
|
box-shadow:
|
|
0 16px 48px rgba(147, 64, 42, 0.45),
|
|
0 6px 16px rgba(42, 38, 34, 0.25);
|
|
border-color: rgba(147, 64, 42, 0.7);
|
|
z-index: 1100;
|
|
}
|
|
|
|
/* Icône + */
|
|
.add-person-button-icon {
|
|
font-size: 32px;
|
|
font-weight: 300;
|
|
color: #93402A;
|
|
line-height: 1;
|
|
filter: drop-shadow(0 1px 3px rgba(42, 38, 34, 0.15));
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.add-person-button:hover .add-person-button-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.add-person-button.dragging .add-person-button-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Pulse animation sur apparition */
|
|
@keyframes addPersonPulse {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.7);
|
|
}
|
|
50% {
|
|
transform: scale(1.15);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.add-person-button.entering {
|
|
animation: addPersonPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Tooltip */
|
|
.add-person-button-tooltip {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(100% + 12px);
|
|
transform: translateY(-50%);
|
|
|
|
padding: 8px 14px;
|
|
background: rgba(42, 38, 34, 0.95);
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
white-space: nowrap;
|
|
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
|
|
box-shadow: 0 4px 12px rgba(42, 38, 34, 0.2);
|
|
}
|
|
|
|
.add-person-button:hover .add-person-button-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.add-person-button.dragging .add-person-button-tooltip {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Instructions drag (affichées pendant drag) */
|
|
.add-person-drag-hint {
|
|
position: fixed;
|
|
top: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1050;
|
|
|
|
padding: 10px 18px;
|
|
background: rgba(242, 239, 234, 0.98);
|
|
backdrop-filter: blur(24px);
|
|
border-radius: 50px;
|
|
border: 1px solid rgba(147, 64, 42, 0.2);
|
|
|
|
font-size: 14px;
|
|
font-weight: 450;
|
|
color: #2A2622;
|
|
|
|
box-shadow:
|
|
0 6px 24px rgba(42, 38, 34, 0.18),
|
|
0 2px 8px rgba(42, 38, 34, 0.08);
|
|
|
|
animation: hintSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
@keyframes hintSlideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive mobile */
|
|
@media (max-width: 768px) {
|
|
.add-person-button {
|
|
width: 56px;
|
|
height: 56px;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
}
|
|
|
|
.add-person-button-icon {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.add-person-button-tooltip {
|
|
display: none;
|
|
}
|
|
}
|