[rbdr/fyr] / index.html

<!DOCTYPE HTML>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Rubén Beltrán del Río">
    <meta name="description" content="Tranquil Systems is a product engineering shop that builds apps and helps team develop sustainable, pragmatic engineering practices.">

    <title>Tranquil Systems.</title>

    <link rel="stylesheet" href="/css/application.css">

    <link rel="icon" type="image/png" sizes="32x32" href="/images/icon32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/images/icon96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/icon16.png">

    <script type="module" src="/js/fyr.js"></script>
  </head>
  <body>
    <div class="content-wrapper">
      <main>
        <h1><img alt="" src="/images/logo.png" />Fyr.</h1>
        <p>Communicate through light.</p>
        <h2>Update Status</h2>
        <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>
        <div class="timeline"></div>
        <div class="color-editor">
          <div class="color"></div>
          <div class="light"></div>
          <p class="x-label">Hue →</p>
          <p class="z-label">Lightness ⇈</p>
          <p class="y-label">Saturation →</p>
        </div>
        <button class="post">Post</button>
        <button class="clear">Clear</button>
      </main>
    </div>
  </body>
</html>
Commit	Line	Data
a6a71e44 RBR	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
3ec245a0	18	<script type="module" src="/js/fyr.js"></script>
a6a71e44 RBR	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>
3ec245a0 RBR	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>
a6a71e44 RBR	37	</main>
	38	</div>
	39	</body>
	40	</html>