<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="<?=url('/static/style/fonts.css')?>"> <title>WillyChat</title> </head> <body> <style> html, body { height: 100%; } body { margin: 0; display: flex; flex-flow: column; color: white; } body .messages { flex: 1 1 auto; display: flex; } .messages { border: 0; } iframe { width: 100%; height: 100%; } input { color: #fff; width: 100%; background: rgba(0, 0, 0, 0.75); padding: .75rem; padding-left: 0; padding-right: 0; border: 0; text-indent: .5rem; } table { border-collapse: collapse; margin-bottom: .75rem;; width: 100%; } td { border: 1px solid silver; } </style> <form method="post"> <table> <tr> <td style="width: 15%;"> <input type="text" name="nick" id="nick" placeholder="Nickname" value="<?=htmlspecialchars($nick)?>" autocomplete="off"> </td> <td style="width: 75%"> <input type="textarea" name="text" id="text" placeholder="Message" autocomplete="off"> </td> </tr> </table> <input style="display: none;" type="submit" value="Send"> </form> <?php if ($errmsg): ?> <p style="color: red">Error: <?=$errmsg?></p> <?php endif; ?> <div class="messages"> <iframe src="<?=url('./messages')?>" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe> </div> <script> if (<?=$just_sent_message ? 'true' : 'false'?>) { text.focus(); } </script> </body> </html>