Add the pattern selector

[rbdr/fyr] / index.html
diff --git a/index.html b/index.html

index e503143a3b4acb220481b635aa5934a05356d7a4..257cfe47f6bcdaa5c710664d0dc86eb0a6837387 100644 (file)
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
      <link rel="icon" type="image/png" sizes="96x96" href="/images/icon96.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/images/icon16.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/updater.js"></script>
+    <script type="module" src="/js/fyr.js"></script>
    </head>
    <body>
      <div class="content-wrapper">
    </head>
    <body>
      <div class="content-wrapper">
@@ -23,7 +23,17 @@
          <h1><img alt="" src="/images/logo.png" />Fyr.</h1>
          <p>Communicate through light.</p>
          <h2>Update Status</h2>
          <h1><img alt="" src="/images/logo.png" />Fyr.</h1>
          <p>Communicate through light.</p>
          <h2>Update Status</h2>
-        <div class="updater" />
+        <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>
        </main>
      </div>
    </body>