index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8" />
   5     <title>Ed on the Web</title>
   6     <link rel="stylesheet" href="stylesheet.css" />
   7     <style>
   8       html,
   9       body {
  10         margin: 0px;
  11         background: #2d2b55;
  12       }
  13       .response-data {
  14         font-family: 'Triplicate T4c';
  15         color: #ac88ce;
  16         margin: 8px;
  17         margin-top: 4px;
  18         margin-bottom: 4px;
  19         font-size: 16px;
  20       }
  21       .command-data {
  22         font-family: 'Triplicate T4c';
  23         margin: 8px;
  24         margin-top: 4px;
  25         margin-bottom: 4px;
  26         font-size: 16px;
  27         color: #f8a623;
  28       }
  29       .command-data:before {
  30         content: 'λ ';
  31         color: #e95c85;
  32       }
  33       .response-data:before {
  34         content: 'ζ ';
  35         color: #f8a623;
  36       }
  37       input {
  38         background: transparent;
  39         font-family: 'Triplicate T4c';
  40         border: none;
  41         padding: 8px;
  42         margin: 0px;
  43         outline: none;
  44         font-size: 16px;
  45         width: calc(100vw - 16px);
  46       }
  47       #short-input {
  48         color: #fff;
  49       }
  50       .insert {
  51         color: #c9feff;
  52         padding-top: 2px;
  53         padding-bottom: 2px;
  54       }
  55       .error {
  56         position: fixed;
  57         width: 100vw;
  58         height: 100vh;
  59         background-color: #e95c8555;
  60         top: 0px;
  61         left: 0px;
  62       }
  63       .error h1 {
  64         font-family: 'Triplicate T4c';
  65         font-size: 44px;
  66         color: white;
  67         max-width: 700px;
  68         margin: auto;
  69         margin-top: auto;
  70         padding: 20px;
  71         margin-top: 60px;
  72         text-align: center;
  73       }
  74       .error + * {
  75         filter: blur(2px);
  76       }
  77     </style>
  78   </head>
  79   <body>
  80     <div id="history"></div>
  81     <input
  82       type="text"
  83       id="full-input"
  84       class="insert"
  85       disabled
  86       style="display: none;"
  87     />
  88     <input type="text" id="short-input" />
  89     <script src="client.js"></script>
  90   </body>
  91 </html>