38 lines
2.4 KiB
HTML
38 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<meta name="theme-color" content="#a4dbf5">
|
|
<title>Le chat Scratch · Espace enfant</title>
|
|
<link rel="stylesheet" href="/static/css/dona-enfant-v1.css?v=1">
|
|
</head>
|
|
<body>
|
|
<main class="child-app">
|
|
<header class="child-header">
|
|
<a class="child-back" href="/" aria-label="Retour à l'accueil">⌂ <span>Accueil</span></a>
|
|
<div class="child-header-title"><span class="star">★</span><div><h1>Le chat Scratch</h1><p>On discute, on imagine, on apprend !</p></div></div>
|
|
<button id="child-clear" class="child-clear" type="button">↻ <span>Nouvelle discussion</span></button>
|
|
</header>
|
|
<div class="child-decor" aria-hidden="true"><span class="dcloud one"></span><span class="dcloud two"></span><span class="dsun">☀</span><span class="dstar one">★</span><span class="dstar two">✦</span><span class="dstar three">✿</span></div>
|
|
<section class="chat-scene" aria-label="Conversation écrite avec Scratch">
|
|
<div id="child-messages" class="child-messages" role="log" aria-live="polite" aria-relevant="additions text">
|
|
<article class="chat-turn scratch">
|
|
<img src="/static/img/scratch-cat-user.png" class="chat-avatar scratch-avatar" alt="Le chat Scratch">
|
|
<div class="turn-copy"><span class="speaker">Scratch</span><div class="chat-bubble">Coucou ! 😺 Je suis Scratch, ton compagnon pour imaginer, apprendre et créer ! Tu veux qu'on parle de quoi ?</div></div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<form id="child-form" class="child-compose" autocomplete="off">
|
|
<img src="/static/img/scratch-cat-user.png" class="child-compose-cat" alt="" aria-hidden="true">
|
|
<label class="visually-hidden" for="child-input">Écris ton message</label>
|
|
<textarea id="child-input" rows="1" maxlength="700" placeholder="Écris ton message ici…" required></textarea>
|
|
<button id="child-send" type="submit">Envoyer <span aria-hidden="true">➤</span></button>
|
|
</form>
|
|
<p class="child-notice">Discussion écrite uniquement · Scratch ne commande pas la maison · Si quelque chose te gêne, parles-en à un adulte.</p>
|
|
</main>
|
|
<script id="dona-child-session" type="application/json">{{ session_token | tojson }}</script>
|
|
<script src="/static/js/dona-enfant-v1.js?v=1"></script>
|
|
</body>
|
|
</html>
|