diff --git a/assets/styles/app.css b/assets/styles/app.css index 073d0f9..d76d27c 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -631,6 +631,78 @@ body { background: #fef2f2; } +.abandon-wrapper { + position: relative; +} + +.abandon-popover { + display: none; + position: absolute; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 14px 16px; + box-shadow: 0 4px 16px var(--shadow-warm); + z-index: 100; + white-space: nowrap; +} + +.abandon-popover.open { + display: block; +} + +.abandon-popover-text { + margin: 0 0 10px; + font-size: 13px; + font-weight: 500; + color: var(--text); + text-align: center; +} + +.abandon-popover-actions { + display: flex; + gap: 8px; + justify-content: center; +} + +.btn-abandon-confirm { + padding: 6px 14px; + background: #dc2626; + color: #fff; + border: none; + border-radius: 100px; + font-family: 'Inter', sans-serif; + font-size: 12px; + font-weight: 600; + cursor: pointer; + transition: background 0.15s; +} + +.btn-abandon-confirm:hover { + background: #b91c1c; +} + +.btn-abandon-cancel { + padding: 6px 14px; + background: none; + color: var(--text); + border: 1.5px solid var(--border); + border-radius: 100px; + font-family: 'Inter', sans-serif; + font-size: 12px; + font-weight: 600; + cursor: pointer; + transition: border-color 0.15s, background 0.15s; +} + +.btn-abandon-cancel:hover { + background: var(--surface-hover, #f5f5f5); + border-color: var(--text); +} + .game-start-container { display: flex; flex-direction: column; diff --git a/templates/homepage/index.html.twig b/templates/homepage/index.html.twig index bcbe3fb..6cbc65c 100644 --- a/templates/homepage/index.html.twig +++ b/templates/homepage/index.html.twig @@ -4,10 +4,37 @@ {% if game %}
Êtes-vous sûr de vouloir abandonner ?
+