sacred-geometry-generator 1.0.0

package/sg.css

@@ -0,0 +1,295 @@
+:root {
+  --bg: #12122a;
+  --bg2: #1c1b3a;
+  --ink: #ece7dc;
+  --muted: #9d97be;
+  --accent: #d4af37;
+  --accent2: #ffd77a;
+  --line: #ffffff1f;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  color: var(--ink);
+  background: var(--bg)
+    radial-gradient(circle at 50% 0%, #2a2456 0%, #12122a 55%, #0b0b18 100%)
+    fixed;
+  scroll-behavior: smooth;
+  min-height: 100%;
+}
+html,
+button,
+select,
+input {
+  font-family: "Marcellus", Georgia, serif;
+  font-size: 16px;
+}
+body {
+  margin: 0;
+  padding: 0 0 40px;
+}
+h1,
+h2,
+h3 {
+  font-weight: normal;
+  margin: 0;
+}
+a {
+  color: var(--muted);
+  transition: color 0.4s;
+}
+a:hover {
+  color: var(--accent2);
+}
+
+#header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 12px 20px 8px;
+  background: #12122ae6;
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+#header h1 {
+  display: inline-block;
+  font-size: 22px;
+  letter-spacing: 0.04em;
+  margin-right: 20px;
+}
+#header h1 > span {
+  color: var(--accent);
+}
+#header .links {
+  float: right;
+  padding-top: 6px;
+  font-size: 14px;
+}
+#header .links > a {
+  margin-left: 16px;
+  text-decoration: none;
+}
+.nav {
+  margin-top: 8px;
+  white-space: nowrap;
+  overflow-x: auto;
+}
+.nav > a {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 4px 12px;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  color: var(--muted);
+  text-decoration: none;
+  transition:
+    color 0.3s,
+    border-color 0.3s,
+    background 0.3s;
+}
+.nav > a:hover {
+  color: var(--accent2);
+  border-color: #ffd77a66;
+}
+.nav > a.on {
+  color: #12122a;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 24px;
+  max-width: 1180px;
+  margin: 24px auto;
+  padding: 0 20px;
+}
+
+.stage {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #00000026;
+  aspect-ratio: 1;
+  display: flex;
+}
+.stage > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.panel > h2 {
+  font-size: 25px;
+  color: var(--accent2);
+}
+.panel > .tagline {
+  color: var(--muted);
+  font-style: italic;
+  margin: 2px 0 12px;
+}
+.panel > .blurb {
+  color: var(--muted);
+  line-height: 1.55;
+  font-size: 14px;
+  margin: 0 0 22px;
+}
+.panel label {
+  display: block;
+  margin-bottom: 14px;
+  font-size: 14px;
+  color: var(--muted);
+}
+.panel label > span {
+  display: block;
+  margin-bottom: 4px;
+}
+.panel label b {
+  color: var(--accent2);
+  font-weight: normal;
+}
+.panel label.check {
+  cursor: pointer;
+}
+.panel label.check > input {
+  margin-right: 8px;
+  accent-color: var(--accent);
+  vertical-align: -2px;
+}
+input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+select {
+  width: 100%;
+  padding: 6px 8px;
+  color: var(--ink);
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 22px;
+}
+button {
+  flex: 1;
+  min-width: 84px;
+  padding: 9px 10px;
+  color: var(--ink);
+  background: #ffffff0f;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    background 0.3s,
+    color 0.3s,
+    border-color 0.3s;
+}
+button:hover {
+  color: var(--accent2);
+  border-color: #ffd77a66;
+  background: #ffffff1a;
+}
+.hint {
+  margin-top: 14px;
+  font-size: 12px;
+  color: #7d78a0;
+  min-height: 16px;
+}
+
+/* --- gallery --- */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  gap: 20px;
+  max-width: 1180px;
+  margin: 24px auto;
+  padding: 0 20px;
+}
+.card {
+  display: block;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #00000026;
+  color: var(--ink);
+  text-decoration: none;
+  transition:
+    border-color 0.4s,
+    transform 0.4s;
+}
+.card:hover {
+  border-color: #ffd77a66;
+  transform: translateY(-3px);
+  color: var(--ink);
+}
+.card > svg {
+  width: 100%;
+  display: block;
+}
+.card > h2 {
+  font-size: 18px;
+  color: var(--accent2);
+  margin-top: 10px;
+}
+.card > p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+  font-style: italic;
+}
+.intro {
+  max-width: 1180px;
+  margin: 24px auto 0;
+  padding: 0 20px;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+/* --- drawing animation --- */
+.anim [data-len] {
+  stroke-dasharray: var(--len, 100);
+  stroke-dashoffset: var(--len, 100);
+  animation: draw 0.9s ease-out forwards;
+}
+@keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.footer {
+  max-width: 1180px;
+  margin: 40px auto 0;
+  padding: 20px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.7;
+}
+.footer a {
+  color: var(--accent2);
+}
+
+@media only screen and (max-width: 860px) {
+  main {
+    grid-template-columns: 1fr;
+  }
+  #header h1 {
+    font-size: 19px;
+  }
+  #header .links {
+    float: none;
+    display: block;
+    padding: 4px 0 0;
+  }
+  #header .links > a {
+    margin: 0 16px 0 0;
+  }
+}

package/sw.js

@@ -0,0 +1,66 @@
+const CACHE = "sg-v1";
+const ASSETS = [
+  "./",
+  "index.html",
+  "gallery.html",
+  "sg.css",
+  "patterns.js",
+  "js/sg.js",
+  "favicon.png",
+  "icon-192.png",
+  "icon-512.png",
+  "manifest.json",
+];
+
+self.addEventListener("install", (e) => {
+  // "reload" bypasses the HTTP cache, so an update never caches stale files
+  e.waitUntil(
+    caches
+      .open(CACHE)
+      .then((c) =>
+        c.addAll(ASSETS.map((u) => new Request(u, { cache: "reload" }))),
+      ),
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (e) => {
+  e.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)),
+        ),
+      ),
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  const cacheable =
+    url.origin === location.origin ||
+    url.hostname === "fonts.googleapis.com" ||
+    url.hostname === "fonts.gstatic.com";
+  if (e.request.method !== "GET" || !cacheable) return;
+  e.respondWith(
+    caches.match(e.request).then(
+      (cached) =>
+        cached ||
+        fetch(e.request)
+          .then((res) => {
+            if (res.ok) {
+              const copy = res.clone();
+              caches.open(CACHE).then((c) => c.put(e.request, copy));
+            }
+            return res;
+          })
+          .catch(() =>
+            e.request.mode === "navigate"
+              ? caches.match("index.html")
+              : undefined,
+          ),
+    ),
+  );
+});