<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script> <style> html, body{ padding: 0px; margin: 0px; overflow: hidden; box-sizing: border-box; } textarea{ position: absolute; top: 5vh; left: 0px; border: 0px; padding-top: 15px; width: 100%; height: 95vh; max-width: 100%; max-height: 100vh; font-size: 30px; background-color: #073642; color: #839496; overflow-x: hidden; /* disallow textarea resizes */ resize: none; } textarea[disabled] { background-color: #275662; color: #637476; } #panel { position: fixed; top: 0px; right: 0px; width: 100%; height: 5vh; z-index: 95; background-color: #777; /* min-height: 75px; */ } #run { display: block; float: right; height: 100%; width: 10vw; z-index: 100; line-height: 5vw; font-size: 1.5em; background-color: #222; color: #CCC; text-align: center; border-radius: 5%; border: 0px; } </style> </head> <body> <textarea></textarea> <div id="panel"> <!-- TODO update this element when new users join --> <span id="users"></span> <!-- what else should go in the panel? --> <a href="#" id="run">RUN</a> </div> </body> </html>