quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor 100% completion modal UI with tabs and preview

Browse Source 
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-22 22:12:06 +00:00
co-authored by mathieumoran1
parent 1e5118cea6
commit e36c224bfb
1 changed files with 106 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/control.html
+66 -12
View File
@@ -325,13 +325,37 @@
</div>
<div class="tab-pane fade" id="admin-modal-100" role="tabpanel" aria-labelledby="admin-modal-100-tab">
<div class="row g-3">
<div class="col-12 col-xxl-6">
<div class="card p-3">
<h4 class="mb-1">Contenu “Modal 100%”</h4>
<p class="text-muted mb-3">
Contenu affiché quand un utilisateur a vu 100% des films dans la checklist.
</p>
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2">
<div>
<h4 class="mb-1">Modal 100%</h4>
<div class="text-muted">Contenu affiché quand un utilisateur a vu 100% des films.</div>
</div>
</div>
<ul class="nav nav-pills admin-subtabs mt-3" id="adminCompletionModalSubTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="admin-modal-100-subtab-edit" data-bs-toggle="tab" data-bs-target="#admin-modal-100-pane-edit" type="button" role="tab" aria-controls="admin-modal-100-pane-edit" aria-selected="true">
Éditer
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="admin-modal-100-subtab-help" data-bs-toggle="tab" data-bs-target="#admin-modal-100-pane-help" type="button" role="tab" aria-controls="admin-modal-100-pane-help" aria-selected="false">
Aide
</button>
</li>
</ul>
<div class="tab-content pt-3">
<!-- Edit + Live preview side-by-side -->
<div class="tab-pane fade show active" id="admin-modal-100-pane-edit" role="tabpanel" aria-labelledby="admin-modal-100-subtab-edit" tabindex="0">
<div class="row g-3">
<div class="col-12 col-xxl-7">
<div class="border rounded p-3 bg-light h-100">
<div class="fw-semibold mb-1">Contenu</div>
<div class="text-muted small mb-3">
Modifie le contenu puis enregistre. L’aperçu est live (non sauvegardé tant que tu n’enregistres pas).
</div>
<div class="mb-3">
<label for="completion_modal_title" class="form-label">Titre</label>
@@ -365,15 +389,18 @@
</div>
</div>
<div class="col-12 col-xxl-6">
<div class="card p-3">
<h4 class="mb-1">Aperçu</h4>
<div class="text-muted mb-3">Aperçu live (non sauvegardé tant que tu n’enregistres pas).</div>
<div class="col-12 col-xxl-5">
<div class="border rounded p-3 bg-white h-100">
<div class="d-flex align-items-center justify-content-between gap-2 mb-2">
<div class="fw-semibold">Aperçu</div>
<span class="badge bg-secondary">Preview</span>
</div>
<div class="text-muted small mb-3">Aperçu live (non sauvegardé).</div>
<div class="border rounded p-3 bg-white">
<div class="border rounded p-3 bg-light">
<div class="d-flex align-items-center justify-content-between gap-2 mb-2">
<div class="fw-semibold" id="completion_modal_preview_title">—</div>
<span class="badge bg-secondary">Preview</span>
<span class="badge bg-secondary">Modal</span>
</div>
<div id="completion_modal_preview_custom" class="text-start d-none"></div>
<div id="completion_modal_preview_text" class="text-start" style="white-space: pre-wrap;"></div>
@@ -390,6 +417,33 @@
</div>
</div>
<!-- Help -->
<div class="tab-pane fade" id="admin-modal-100-pane-help" role="tabpanel" aria-labelledby="admin-modal-100-subtab-help" tabindex="0">
<div class="row g-3">
<div class="col-12 col-xxl-8">
<div class="border rounded p-3 bg-white">
<div class="fw-semibold mb-2">Règles</div>
<ul class="mb-0 text-muted">
<li><strong>Texte</strong>: affiché tel quel (safe), retours à la ligne conservés.</li>
<li><strong>HTML</strong>: le serveur retire les <code>&lt;script&gt;</code> et les attributs <code>on*</code>.</li>
<li><strong>Vidéo</strong>: accepte un chemin relatif (ex: <code>video/reward.mp4</code>) ou une URL complète.</li>
</ul>
</div>
</div>
<div class="col-12 col-xxl-4">
<div class="border rounded p-3 bg-light">
<div class="fw-semibold mb-2">Astuce</div>
<div class="text-muted">
Si tu utilises du HTML, préfère des tags simples (<code>&lt;p&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;strong&gt;</code>) pour éviter des surprises d’affichage.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
<div class="row g-3">
<div class="col-12">