deploy: 1e10b0a49c

2022-10-24 20:55:59 +00:00
parent 9c9101b864
commit 9f650e2ebd
216 changed files with 172 additions and 4 deletions
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -238,16 +238,15 @@
 }

 .transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
 }

 .hover\:underline:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline
+  text-decoration-line: underline
 }

 .hover\:shadow-md:hover {
--- a/hero-phone-dark/fastImages/Darkphone1_0000.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0000.png
--- a/hero-phone-dark/fastImages/Darkphone1_0001.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0001.png
--- a/hero-phone-dark/fastImages/Darkphone1_0002.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0002.png
--- a/hero-phone-dark/fastImages/Darkphone1_0003.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0003.png
--- a/hero-phone-dark/fastImages/Darkphone1_0004.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0004.png
--- a/hero-phone-dark/fastImages/Darkphone1_0005.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0005.png
--- a/hero-phone-dark/fastImages/Darkphone1_0006.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0006.png
--- a/hero-phone-dark/fastImages/Darkphone1_0007.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0007.png
--- a/hero-phone-dark/fastImages/Darkphone1_0008.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0008.png
--- a/hero-phone-dark/fastImages/Darkphone1_0009.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0009.png
--- a/hero-phone-dark/fastImages/Darkphone1_0010.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0010.png
--- a/hero-phone-dark/fastImages/Darkphone1_0011.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0011.png
--- a/hero-phone-dark/fastImages/Darkphone1_0012.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0012.png
--- a/hero-phone-dark/fastImages/Darkphone1_0013.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0013.png
--- a/hero-phone-dark/fastImages/Darkphone1_0014.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0014.png
--- a/hero-phone-dark/fastImages/Darkphone1_0015.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0015.png
--- a/hero-phone-dark/fastImages/Darkphone1_0016.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0016.png
--- a/hero-phone-dark/fastImages/Darkphone1_0017.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0017.png
--- a/hero-phone-dark/fastImages/Darkphone1_0018.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0018.png
--- a/hero-phone-dark/fastImages/Darkphone1_0019.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0019.png
--- a/hero-phone-dark/fastImages/Darkphone1_0020.png
+++ b/hero-phone-dark/fastImages/Darkphone1_0020.png
--- a/hero-phone-dark/index.html
+++ b/hero-phone-dark/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Page Title</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- <link rel="stylesheet" type="text/css" media="screen" href="./index.css"> -->
+  <script src="./index.js"></script>
+</head>
+<body>
+  <img id="hero-phone" />
+  <div id="hero-phone-preload" style="display: none;"></div>
+</body>
+</html>
--- a/hero-phone-dark/index.js
+++ b/hero-phone-dark/index.js
@@ -0,0 +1,69 @@
+(function () {
+
+const fastImages = mkSequence("./fastImages/Darkphone1_", 0, 20, ".png")
+const slowImages = mkSequence("./slowImages/Darkphone1_", 8, 38, ".png")
+
+
+let complete = false
+run()
+window.onload = run
+
+function mkSequence(prefix, from, to, ext) {
+  const seq = []
+  for (let n = from; n <= to; n++) {
+    let suffix = '' + n
+    suffix = '0'.repeat(4 - suffix.length) + suffix
+    seq.push(prefix + suffix + ext)
+  }
+  return seq
+}
+
+async function run() {
+  const imageEl = document.getElementById("hero-phone");
+  const preloadEl = document.getElementById("hero-phone-preload");
+  if (complete || !imageEl || !preloadEl) return
+  complete = true
+  await preload(fastImages.concat(slowImages))
+  await animate(fastImages, 100)
+  await animate(slowImages, 500)
+
+  async function preload(images) {
+    let imgEls = []
+    let resolved = false
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true
+          resolve()
+        }
+      }, 2000)
+      for (const img of images) {
+        const el = document.createElement("img");
+        el.src = img
+        imgEls.push(el)
+        preloadEl.appendChild(el)
+        const loaded = () => {
+          imgEls = imgEls.filter((e) => e !== el)
+          if (imgEls.length === 0 && !resolved) {
+            resolved = true
+            resolve()
+          }
+        }
+        el.addEventListener('load', loaded)
+        el.addEventListener('error', loaded)
+      }
+    })
+  }
+
+  async function animate(images, ms) {
+    for (const img of images) {
+      imageEl.src = img
+      await delay(ms)
+    }
+  }
+  
+  async function delay(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }  
+}
+})();
--- a/hero-phone-dark/slowImages/Darkphone1_0008.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0008.png
--- a/hero-phone-dark/slowImages/Darkphone1_0009.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0009.png
--- a/hero-phone-dark/slowImages/Darkphone1_0010.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0010.png
--- a/hero-phone-dark/slowImages/Darkphone1_0011.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0011.png
--- a/hero-phone-dark/slowImages/Darkphone1_0012.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0012.png
--- a/hero-phone-dark/slowImages/Darkphone1_0013.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0013.png
--- a/hero-phone-dark/slowImages/Darkphone1_0014.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0014.png
--- a/hero-phone-dark/slowImages/Darkphone1_0015.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0015.png
--- a/hero-phone-dark/slowImages/Darkphone1_0016.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0016.png
--- a/hero-phone-dark/slowImages/Darkphone1_0017.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0017.png
--- a/hero-phone-dark/slowImages/Darkphone1_0018.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0018.png
--- a/hero-phone-dark/slowImages/Darkphone1_0019.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0019.png
--- a/hero-phone-dark/slowImages/Darkphone1_0020.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0020.png
--- a/hero-phone-dark/slowImages/Darkphone1_0021.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0021.png
--- a/hero-phone-dark/slowImages/Darkphone1_0022.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0022.png
--- a/hero-phone-dark/slowImages/Darkphone1_0023.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0023.png
--- a/hero-phone-dark/slowImages/Darkphone1_0024.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0024.png
--- a/hero-phone-dark/slowImages/Darkphone1_0025.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0025.png
--- a/hero-phone-dark/slowImages/Darkphone1_0026.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0026.png
--- a/hero-phone-dark/slowImages/Darkphone1_0027.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0027.png
--- a/hero-phone-dark/slowImages/Darkphone1_0028.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0028.png
--- a/hero-phone-dark/slowImages/Darkphone1_0029.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0029.png
--- a/hero-phone-dark/slowImages/Darkphone1_0030.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0030.png
--- a/hero-phone-dark/slowImages/Darkphone1_0031.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0031.png
--- a/hero-phone-dark/slowImages/Darkphone1_0032.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0032.png
--- a/hero-phone-dark/slowImages/Darkphone1_0033.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0033.png
--- a/hero-phone-dark/slowImages/Darkphone1_0034.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0034.png
--- a/hero-phone-dark/slowImages/Darkphone1_0035.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0035.png
--- a/hero-phone-dark/slowImages/Darkphone1_0036.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0036.png
--- a/hero-phone-dark/slowImages/Darkphone1_0037.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0037.png
--- a/hero-phone-dark/slowImages/Darkphone1_0038.png
+++ b/hero-phone-dark/slowImages/Darkphone1_0038.png
--- a/hero-phone/fastImages/Lightphone1_0000.png
+++ b/hero-phone/fastImages/Lightphone1_0000.png
--- a/hero-phone/fastImages/Lightphone1_0001.png
+++ b/hero-phone/fastImages/Lightphone1_0001.png
--- a/hero-phone/fastImages/Lightphone1_0002.png
+++ b/hero-phone/fastImages/Lightphone1_0002.png
--- a/hero-phone/fastImages/Lightphone1_0003.png
+++ b/hero-phone/fastImages/Lightphone1_0003.png
--- a/hero-phone/fastImages/Lightphone1_0004.png
+++ b/hero-phone/fastImages/Lightphone1_0004.png
--- a/hero-phone/fastImages/Lightphone1_0005.png
+++ b/hero-phone/fastImages/Lightphone1_0005.png
--- a/hero-phone/fastImages/Lightphone1_0006.png
+++ b/hero-phone/fastImages/Lightphone1_0006.png
--- a/hero-phone/fastImages/Lightphone1_0007.png
+++ b/hero-phone/fastImages/Lightphone1_0007.png
--- a/hero-phone/fastImages/Lightphone1_0008.png
+++ b/hero-phone/fastImages/Lightphone1_0008.png
--- a/hero-phone/fastImages/Lightphone1_0009.png
+++ b/hero-phone/fastImages/Lightphone1_0009.png
--- a/hero-phone/fastImages/Lightphone1_0010.png
+++ b/hero-phone/fastImages/Lightphone1_0010.png
--- a/hero-phone/fastImages/Lightphone1_0011.png
+++ b/hero-phone/fastImages/Lightphone1_0011.png
--- a/hero-phone/fastImages/Lightphone1_0012.png
+++ b/hero-phone/fastImages/Lightphone1_0012.png
--- a/hero-phone/fastImages/Lightphone1_0013.png
+++ b/hero-phone/fastImages/Lightphone1_0013.png
--- a/hero-phone/fastImages/Lightphone1_0014.png
+++ b/hero-phone/fastImages/Lightphone1_0014.png
--- a/hero-phone/fastImages/Lightphone1_0015.png
+++ b/hero-phone/fastImages/Lightphone1_0015.png
--- a/hero-phone/fastImages/Lightphone1_0016.png
+++ b/hero-phone/fastImages/Lightphone1_0016.png
--- a/hero-phone/fastImages/Lightphone1_0017.png
+++ b/hero-phone/fastImages/Lightphone1_0017.png
--- a/hero-phone/fastImages/Lightphone1_0018.png
+++ b/hero-phone/fastImages/Lightphone1_0018.png
--- a/hero-phone/fastImages/Lightphone1_0019.png
+++ b/hero-phone/fastImages/Lightphone1_0019.png
--- a/hero-phone/fastImages/Lightphone1_0020.png
+++ b/hero-phone/fastImages/Lightphone1_0020.png
--- a/hero-phone/fastImages/Lightphone1_0021.png
+++ b/hero-phone/fastImages/Lightphone1_0021.png
--- a/hero-phone/fastImages/Lightphone1_0022.png
+++ b/hero-phone/fastImages/Lightphone1_0022.png
--- a/hero-phone/fastImages/Lightphone1_0023.png
+++ b/hero-phone/fastImages/Lightphone1_0023.png
--- a/hero-phone/fastImages/Lightphone1_0024.png
+++ b/hero-phone/fastImages/Lightphone1_0024.png
--- a/hero-phone/fastImages/Lightphone1_0025.png
+++ b/hero-phone/fastImages/Lightphone1_0025.png
--- a/hero-phone/fastImages/Lightphone1_0026.png
+++ b/hero-phone/fastImages/Lightphone1_0026.png
--- a/hero-phone/fastImages/Lightphone1_0027.png
+++ b/hero-phone/fastImages/Lightphone1_0027.png
--- a/hero-phone/fastImages/Lightphone1_0028.png
+++ b/hero-phone/fastImages/Lightphone1_0028.png
--- a/hero-phone/fastImages/Lightphone1_0029.png
+++ b/hero-phone/fastImages/Lightphone1_0029.png
--- a/hero-phone/fastImages/Lightphone1_0030.png
+++ b/hero-phone/fastImages/Lightphone1_0030.png
--- a/hero-phone/index.html
+++ b/hero-phone/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Page Title</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- <link rel="stylesheet" type="text/css" media="screen" href="./index.css"> -->
+  <script src="./index.js"></script>
+</head>
+<body>
+  <img id="hero-phone" />
+  <div id="hero-phone-preload" style="display: none;"></div>
+</body>
+</html>
--- a/hero-phone/index.js
+++ b/hero-phone/index.js
@@ -0,0 +1,70 @@
+(function () {
+
+const fastImages = mkSequence("./fastImages/Lightphone1_", 0, 30, ".png")
+const slowImages = mkSequence("./slowImages1/Lightphone1_", 8, 39, ".png")
+// const slowImages = mkSequence("./slowImages2/Lightphone1_", 8, 39, ".png")
+
+
+let complete = false
+run()
+window.onload = run
+
+function mkSequence(prefix, from, to, ext) {
+  const seq = []
+  for (let n = from; n <= to; n++) {
+    let suffix = '' + n
+    suffix = '0'.repeat(4 - suffix.length) + suffix
+    seq.push(prefix + suffix + ext)
+  }
+  return seq
+}
+
+async function run() {
+  const imageEl = document.getElementById("hero-phone");
+  const preloadEl = document.getElementById("hero-phone-preload");
+  if (complete || !imageEl || !preloadEl) return
+  complete = true
+  await preload(fastImages.concat(slowImages))
+  await animate(fastImages, 100)
+  await animate(slowImages, 500)
+
+  async function preload(images) {
+    let imgEls = []
+    let resolved = false
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true
+          resolve()
+        }
+      }, 2000)
+      for (const img of images) {
+        const el = document.createElement("img");
+        el.src = img
+        imgEls.push(el)
+        preloadEl.appendChild(el)
+        const loaded = () => {
+          imgEls = imgEls.filter((e) => e !== el)
+          if (imgEls.length === 0 && !resolved) {
+            resolved = true
+            resolve()
+          }
+        }
+        el.addEventListener('load', loaded)
+        el.addEventListener('error', loaded)
+      }
+    })
+  }
+
+  async function animate(images, ms) {
+    for (const img of images) {
+      imageEl.src = img
+      await delay(ms)
+    }
+  }
+  
+  async function delay(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }  
+}
+})();
--- a/hero-phone/slowImages1/Lightphone1_0008.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0008.jpg
--- a/hero-phone/slowImages1/Lightphone1_0008.png
+++ b/hero-phone/slowImages1/Lightphone1_0008.png
--- a/hero-phone/slowImages1/Lightphone1_0009.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0009.jpg
--- a/hero-phone/slowImages1/Lightphone1_0009.png
+++ b/hero-phone/slowImages1/Lightphone1_0009.png
--- a/hero-phone/slowImages1/Lightphone1_0010.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0010.jpg
--- a/hero-phone/slowImages1/Lightphone1_0010.png
+++ b/hero-phone/slowImages1/Lightphone1_0010.png
--- a/hero-phone/slowImages1/Lightphone1_0011.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0011.jpg
--- a/hero-phone/slowImages1/Lightphone1_0011.png
+++ b/hero-phone/slowImages1/Lightphone1_0011.png
--- a/hero-phone/slowImages1/Lightphone1_0012.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0012.jpg
--- a/hero-phone/slowImages1/Lightphone1_0012.png
+++ b/hero-phone/slowImages1/Lightphone1_0012.png
--- a/hero-phone/slowImages1/Lightphone1_0013.jpg
+++ b/hero-phone/slowImages1/Lightphone1_0013.jpg
--- a/hero-phone/slowImages1/Lightphone1_0013.png
+++ b/hero-phone/slowImages1/Lightphone1_0013.png
--- a/Show More
+++ b/Show More