Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin - Gestion Messages</title> | |
| <style> | |
| :root { --bg:#0d1117; --card:#161b22; --border:#30363d; --text:#e6edf3; --muted:#8b949e; --primary:#58a6ff; --danger:#f85149; --success:#3fb950; --font: system-ui, -apple-system, sans-serif; } | |
| * { box-sizing:border-box; margin:0; padding:0; } | |
| body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; } | |
| header { background:var(--card); border-bottom:1px solid var(--border); padding:1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } | |
| header h1 { font-size:1.1rem; } | |
| main { flex:1; padding:1rem; max-width:1000px; width:100%; margin:0 auto; } | |
| .card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin-bottom:1rem; } | |
| .msg-row { display:grid; grid-template-columns: 1fr auto auto; gap:1rem; padding:1rem; border-bottom:1px solid var(--border); align-items:start; } | |
| .msg-row:last-child { border-bottom:none; } | |
| .msg-content { white-space:pre-wrap; word-break:break-word; font-size:0.9rem; } | |
| .msg-meta { font-size:0.75rem; color:var(--muted); display:flex; flex-direction:column; gap:0.25rem; min-width:150px; } | |
| .msg-actions { display:flex; flex-direction:column; gap:0.25rem; } | |
| .btn { padding:0.35rem 0.75rem; border-radius:6px; font-size:0.75rem; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; } | |
| .btn-danger { background:transparent; color:var(--danger); border-color:var(--danger); } | |
| .btn-danger:hover { background:var(--danger); color:#fff; } | |
| .btn-danger.banned { background:var(--success); border-color:var(--success); color:#fff; } | |
| .btn-secondary { background:transparent; color:var(--text); border-color:var(--border); } | |
| .msg-images { display:flex; gap:0.25rem; margin-top:0.5rem; flex-wrap:wrap; } | |
| .msg-images img { width:60px; height:60px; object-fit:cover; border-radius:4px; border:1px solid var(--border); } | |
| .empty { text-align:center; color:var(--muted); padding:2rem; } | |
| .toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(100px); opacity:0; padding:1rem 1.5rem; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:100; transition:all 0.3s; } | |
| .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } | |
| .toast.success { border-left:4px solid var(--success); } | |
| .toast.error { border-left:4px solid var(--danger); } | |
| @media (max-width: 700px) { .msg-row { grid-template-columns: 1fr; } .msg-meta, .msg-actions { flex-direction:row; flex-wrap:wrap; align-items:center; } } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>🛡️ Admin : <span id="slugTitle"></span></h1> | |
| <a href="/" class="btn btn-secondary">← Tableau de bord</a> | |
| </header> | |
| <main> | |
| <div class="card"> | |
| <div id="messagesContainer"> | |
| <div class="empty">Chargement...</div> | |
| </div> | |
| </div> | |
| </main> | |
| <div id="toast"></div> | |
| <script type="module" src="admin.js"></script> | |
| </body> | |
| </html> |