git.r.bdr.sh - rbdr/fyr/blob - index.html

   1 <!DOCTYPE HTML>
   2
   3 <html lang="en">
   4   <head>
   5     <meta charset="utf-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1">
   7     <meta name="author" content="Rubén Beltrán del Río">
   8     <meta name="description" content="Tranquil Systems is a product engineering shop that builds apps and helps team develop sustainable, pragmatic engineering practices.">
   9
  10     <title>Tranquil Systems.</title>
  11
  12     <link rel="stylesheet" href="/css/application.css">
  13
  14     <link rel="icon" type="image/png" sizes="32x32" href="/images/icon32.png">
  15     <link rel="icon" type="image/png" sizes="96x96" href="/images/icon96.png">
  16     <link rel="icon" type="image/png" sizes="16x16" href="/images/icon16.png">
  17
  18     <script type="module" src="/js/fyr.js"></script>
  19   </head>
  20   <body>
  21     <div class="content-wrapper">
  22       <main>
  23         <h1><img alt="" src="/images/logo.png" />Fyr.</h1>
  24         <p>Communicate through light.</p>
  25         <h2>Update Status</h2>
  26         <p>Move your mouse around the color box to change hue and saturation. Scroll inside the box to adjust lightness. Press to start recording the color in the timeline, release to stop.</p>
  27         <div class="timeline"></div>
  28         <div class="color-editor">
  29           <div class="color"></div>
  30           <div class="light"></div>
  31           <p class="x-label">Hue →</p>
  32           <p class="z-label">Lightness ⇈</p>
  33           <p class="y-label">Saturation →</p>
  34         </div>
  35         <button class="post">Post</button>
  36         <button class="clear">Clear</button>
  37       </main>
  38     </div>
  39   </body>
  40 </html>