<!-- CaraChat: the connection form, a block of the app (jumphp.net) shown by the partner site at the top of its pages. {{BASE}} = the app on the partner's site (https://caramail.tv/chat). Self-contained: its style is scoped. --><form class="carachat-login" method="get" action="{{BASE}}/" aria-label="Connexion au chat CaraChat"> <style> .carachat-login { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 10px; background: #c0c0c0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; font: 12px Arial, Helvetica, sans-serif; color: #000; } .carachat-login b { color: #00f; font-size: 13px; margin-right: 4px; } .carachat-login label { display: inline-flex; align-items: center; gap: 4px; } .carachat-login input, .carachat-login select { font: 12px Arial, Helvetica, sans-serif; height: 20px; padding: 0 3px; border: 2px inset #fff; background: #fff; color: #000; box-sizing: border-box; } .carachat-login .n { width: 140px; } .carachat-login .a { width: 44px; } .carachat-login .v { width: 110px; } .carachat-login button { font: 12px Arial, Helvetica, sans-serif; height: 23px; padding: 0 12px; background: #c0c0c0; color: #000; border: 2px outset #fff; cursor: pointer; } .carachat-login button:active { border-style: inset; } @media (max-width: 480px) { .carachat-login .n, .carachat-login .v { width: 100%; } .carachat-login label { flex: 1 1 100%; } } </style> <b>CaraChat</b> <label>Pseudo <input class="n" name="nickname" required maxlength="20" autocomplete="nickname"></label> <label>Âge <input class="a" name="age" inputmode="numeric" maxlength="3" pattern="[0-9]*"></label> <label>Sexe <select name="sex"><option value="0">Femme</option><option value="1" selected>Homme</option><option value="2">Je ne sais pas</option></select></label> <label>Ville <input class="v" name="city" maxlength="30"></label> <input type="hidden" name="lang" value="fr"> <button type="submit">Entrer sur le chat</button></form>