Refactor 100% completion modal UI with tabs and preview
Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
co-authored by
mathieumoran1
mathieumoran1
parent
1e5118cea6
commit
e36c224bfb
+106
-52
@@ -325,64 +325,118 @@
|
||||
</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="mb-3">
|
||||
<label for="completion_modal_title" class="form-label">Titre</label>
|
||||
<input type="text" class="form-control" id="completion_modal_title" maxlength="200" placeholder="Félicitations! ...">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_body_text" class="form-label">Texte (optionnel)</label>
|
||||
<textarea class="form-control" id="completion_modal_body_text" rows="4" placeholder="Texte affiché dans le modal (retours à la ligne conservés)"></textarea>
|
||||
<div class="form-text">Affiché en texte brut (safe). Laisse vide si tu n’en veux pas.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_body_html" class="form-label">HTML (optionnel)</label>
|
||||
<textarea class="form-control font-monospace" id="completion_modal_body_html" rows="6" placeholder="<p>…</p>"></textarea>
|
||||
<div class="form-text">
|
||||
Affiché comme HTML (le serveur retire les <code><script></code> et les handlers <code>on*</code>).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_video_src" class="form-label">Video src (optionnel)</label>
|
||||
<input type="text" class="form-control" id="completion_modal_video_src" maxlength="2048" placeholder="video/reward.mp4">
|
||||
<div class="form-text">Chemin relatif (ex: <code>video/reward.mp4</code>) ou URL complète. Vide = pas de vidéo.</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap justify-content-end gap-2">
|
||||
<button type="button" id="completion_modal_reload" class="btn btn-outline-secondary">Recharger</button>
|
||||
<button type="button" id="completion_modal_save" class="btn btn-warning">Enregistrer</button>
|
||||
</div>
|
||||
<div class="card p-3">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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="border rounded p-3 bg-white">
|
||||
<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>
|
||||
<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>
|
||||
<input type="text" class="form-control" id="completion_modal_title" maxlength="200" placeholder="Félicitations! ...">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_body_text" class="form-label">Texte (optionnel)</label>
|
||||
<textarea class="form-control" id="completion_modal_body_text" rows="4" placeholder="Texte affiché dans le modal (retours à la ligne conservés)"></textarea>
|
||||
<div class="form-text">Affiché en texte brut (safe). Laisse vide si tu n’en veux pas.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_body_html" class="form-label">HTML (optionnel)</label>
|
||||
<textarea class="form-control font-monospace" id="completion_modal_body_html" rows="6" placeholder="<p>…</p>"></textarea>
|
||||
<div class="form-text">
|
||||
Affiché comme HTML (le serveur retire les <code><script></code> et les handlers <code>on*</code>).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="completion_modal_video_src" class="form-label">Video src (optionnel)</label>
|
||||
<input type="text" class="form-control" id="completion_modal_video_src" maxlength="2048" placeholder="video/reward.mp4">
|
||||
<div class="form-text">Chemin relatif (ex: <code>video/reward.mp4</code>) ou URL complète. Vide = pas de vidéo.</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap justify-content-end gap-2">
|
||||
<button type="button" id="completion_modal_reload" class="btn btn-outline-secondary">Recharger</button>
|
||||
<button type="button" id="completion_modal_save" class="btn btn-warning">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="mt-3">
|
||||
<video id="completion_modal_preview_video" width="75%" controls class="d-none">
|
||||
<source id="completion_modal_preview_video_source" src="" type="video/mp4">
|
||||
Votre navigateur ne supporte pas la vidéo.
|
||||
</video>
|
||||
<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-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">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>
|
||||
|
||||
<div class="mt-3">
|
||||
<video id="completion_modal_preview_video" width="75%" controls class="d-none">
|
||||
<source id="completion_modal_preview_video_source" src="" type="video/mp4">
|
||||
Votre navigateur ne supporte pas la vidéo.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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><script></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><p></code>, <code><a></code>, <code><strong></code>) pour éviter des surprises d’affichage.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user