Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Message Anonyme</title> | |
| <link rel="stylesheet" href="message.css"> | |
| </head> | |
| <body> | |
| <header><h1>📨 <span id="slugDisplay"></span></h1></header> | |
| <main> | |
| <!-- Send Form --> | |
| <section class="card" aria-labelledby="sendTitle"> | |
| <h2 id="sendTitle">✍️ Envoyer un message anonyme</h2> | |
| <form id="msgForm" novalidate> | |
| <div class="form-group"> | |
| <label for="content">Message (optionnel si image)</label> | |
| <textarea id="content" maxlength="1000" placeholder="Écrivez votre message ici... (max 1000 caractères)"></textarea> | |
| <div class="char-count"><span id="charCount">0</span>/1000</div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Images (max 3, 15Mo chacune, JPG/PNG/WebP/GIF)</label> | |
| <!-- capture="environment" ouvre la caméra direct sur mobile --> | |
| <div class="drop-zone" id="dropZone" tabindex="0" role="button" aria-label="Zone de dépôt images"> | |
| <input type="file" id="fileInput" accept="image/jpeg,image/png,image/webp,image/gif" multiple> | |
| <p id="dropText">📁 Cliquez ou glissez-déposez vos images ici</p> | |
| </div> | |
| <div class="previews" id="previews" aria-live="polite"></div> | |
| </div> | |
| <!-- CASE À COCHER LÉGALE OBLIGATOIRE --> | |
| <div class="legal-group"> | |
| <input type="checkbox" id="legalCheck" name="legal_accepted" required> | |
| <label for="legalCheck"> | |
| <strong>J'accepte que :</strong> Ce contenu est légal, ne contient pas de CSAM, terrorisme, haine, doxxing, ni rien d'illégal. | |
| Je comprends que mon IP est hashée et que tout abus mènera à un signalement aux autorités. | |
| Je suis responsable de tout probleme juridique de ce message. | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-primary" id="btnSend" disabled>✅ Valider et Envoyer</button> | |
| </form> | |
| </section> | |
| <!-- Received Messages --> | |
| <section class="card" aria-labelledby="recvTitle"> | |
| <h2 id="recvTitle">📬 Derniers messages reçus</h2> | |
| <div class="messages-list" id="messagesList"> | |
| <div class="empty-msg">Chargement...</div> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="toast"></div> | |
| <div class="img-modal" id="imgModal" role="dialog" aria-modal="true" aria-label="Aperçu image"> | |
| <button class="close-btn" aria-label="Fermer">×</button> | |
| <img src="" alt="Aperçu en plein écran"> | |
| </div> | |
| <!-- Chargement du module JS externe --> | |
| <script type="module" src="message.js"></script> | |
| </body> | |
| </html> |