@mar7th/firework 1.0.0

package/src/pages.css

@@ -0,0 +1,388 @@
+:root {
+  color-scheme: dark;
+  --bg: #170d17;
+  --panel: rgba(54, 24, 31, 0.84);
+  --panel-strong: rgba(67, 27, 31, 0.94);
+  --line: rgba(255, 216, 138, 0.22);
+  --text: #fff9e8;
+  --muted: #f2cfa4;
+  --accent: #ffbf4d;
+  --accent-2: #ff5a3c;
+  --accent-3: #63d6d1;
+  --danger: #ff6d7a;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Microsoft YaHei", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--bg);
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(255, 191, 77, 0.2), transparent 28rem),
+    radial-gradient(circle at 86% 18%, rgba(255, 90, 60, 0.18), transparent 24rem),
+    radial-gradient(circle at 58% 76%, rgba(99, 214, 209, 0.11), transparent 24rem),
+    linear-gradient(180deg, #171025 0%, #321622 50%, #160c16 100%);
+  color: var(--text);
+}
+
+body::before {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle, rgba(255, 244, 190, 0.16) 0 1px, transparent 1.5px),
+    linear-gradient(120deg, transparent 0 46%, rgba(255, 191, 77, 0.07) 47% 49%, transparent 50%),
+    linear-gradient(60deg, transparent 0 48%, rgba(255, 90, 60, 0.055) 49% 51%, transparent 52%);
+  background-position: 0 0, 0 0, 24px 12px;
+  background-size: 38px 38px, 140px 140px, 140px 140px;
+  content: "";
+  mix-blend-mode: screen;
+}
+
+a {
+  color: inherit;
+}
+
+.site-shell {
+  position: relative;
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 22px 0 56px;
+}
+
+.home-shell {
+  width: 100%;
+  height: 100vh;
+  height: 100svh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 22px 16px;
+}
+
+.site-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 12px 0;
+}
+
+.brand {
+  font-size: 18px;
+  font-weight: 800;
+  text-decoration: none;
+  color: #fff4c7;
+  text-shadow: 0 0 18px rgba(255, 191, 77, 0.25);
+}
+
+.nav-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nav-links a,
+.button-link {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0 12px;
+  background:
+    linear-gradient(180deg, rgba(255, 242, 208, 0.12), rgba(255, 139, 69, 0.08)),
+    rgba(67, 27, 31, 0.74);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.nav-links a:hover,
+.button-link:hover {
+  border-color: rgba(255, 191, 77, 0.78);
+  background:
+    linear-gradient(180deg, rgba(255, 191, 77, 0.2), rgba(255, 90, 60, 0.14)),
+    rgba(84, 30, 28, 0.84);
+}
+
+.button-link.primary {
+  border-color: rgba(255, 214, 102, 0.9);
+  background: linear-gradient(180deg, rgba(255, 194, 77, 0.34), rgba(255, 90, 60, 0.24));
+}
+
+.hero {
+  min-height: calc(100vh - 120px);
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  gap: 32px;
+  align-items: center;
+  padding: 28px 0 64px;
+}
+
+.home-hero {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  width: min(760px, calc(100% - 32px));
+  margin-left: clamp(0px, 7vw, 96px);
+  padding: 28px;
+  border: 1px solid rgba(255, 216, 138, 0.18);
+  border-radius: 8px;
+  background:
+    linear-gradient(90deg, rgba(32, 14, 24, 0.86), rgba(44, 17, 25, 0.58)),
+    rgba(24, 12, 20, 0.62);
+  box-shadow: 0 24px 70px rgba(26, 8, 15, 0.42);
+  backdrop-filter: blur(10px);
+}
+
+.hero h1,
+.page-title h1 {
+  margin: 0;
+  font-size: clamp(42px, 7vw, 86px);
+  line-height: 0.98;
+  letter-spacing: 0;
+  color: #fff4c7;
+  text-shadow:
+    0 0 20px rgba(255, 191, 77, 0.24),
+    0 0 42px rgba(255, 90, 60, 0.16);
+}
+
+.hero p,
+.page-title p {
+  max-width: 720px;
+  margin: 18px 0 0;
+  color: var(--muted);
+  font-size: 17px;
+  line-height: 1.7;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 26px;
+}
+
+.yoimiya-note {
+  position: relative;
+  margin-top: 22px;
+  padding: 16px 18px;
+  border: 1px dashed rgba(150, 70, 38, 0.42);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 36%),
+    repeating-linear-gradient(0deg, transparent 0 27px, rgba(150, 70, 38, 0.07) 28px),
+    #fff0c6;
+  color: #4a1f1d;
+  box-shadow:
+    0 16px 38px rgba(37, 13, 15, 0.28),
+    inset 0 0 0 3px rgba(255, 180, 84, 0.12);
+  transform: rotate(-0.6deg);
+}
+
+.yoimiya-note::before {
+  position: absolute;
+  top: -11px;
+  right: 18px;
+  width: 74px;
+  height: 22px;
+  border-radius: 3px;
+  background: rgba(255, 90, 60, 0.66);
+  box-shadow: 0 4px 12px rgba(70, 18, 18, 0.22);
+  content: "";
+  transform: rotate(3deg);
+}
+
+.yoimiya-note h2 {
+  margin: 0 0 8px;
+  color: #b53424;
+  font-size: 16px;
+}
+
+.yoimiya-note p {
+  margin: 8px 0 0;
+  color: #5d2a1f;
+  font-size: 14px;
+  line-height: 1.72;
+}
+
+.hero-preview {
+  min-height: 440px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20% 10%, rgba(255, 191, 77, 0.16), transparent 18rem),
+    #130e22;
+  box-shadow:
+    0 22px 60px rgba(46, 14, 20, 0.36),
+    inset 0 1px 0 rgba(255, 242, 208, 0.08);
+}
+
+.home-hero .hero-preview {
+  position: absolute;
+  inset: 0;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.hero-preview iframe {
+  width: 100%;
+  height: 440px;
+  display: block;
+  border: 0;
+}
+
+.home-hero .hero-preview iframe {
+  height: 100%;
+}
+
+.home-hero::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(20, 9, 18, 0.88) 0%, rgba(30, 12, 20, 0.45) 45%, rgba(20, 9, 18, 0.16) 100%),
+    radial-gradient(circle at 26% 42%, rgba(255, 191, 77, 0.12), transparent 28rem);
+  content: "";
+}
+
+.page-title {
+  padding: 52px 0 24px;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 24px;
+}
+
+.card,
+.doc-section {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 242, 208, 0.07), rgba(255, 139, 69, 0.045)),
+    var(--panel);
+  box-shadow: inset 0 1px 0 rgba(255, 242, 208, 0.07);
+}
+
+.card {
+  padding: 18px;
+}
+
+.card h2,
+.doc-section h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #fff0bf;
+}
+
+.card p,
+.doc-section p,
+.doc-section li {
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.doc-section {
+  margin-top: 14px;
+  padding: 22px;
+}
+
+.doc-section h3 {
+  margin: 18px 0 8px;
+  font-size: 16px;
+}
+
+.doc-section ul,
+.doc-section ol {
+  padding-left: 22px;
+}
+
+.download-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  border-top: 1px solid var(--line);
+  padding: 14px 0;
+}
+
+.download-row:first-of-type {
+  border-top: 0;
+}
+
+pre {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px;
+  background: rgba(37, 17, 25, 0.78);
+  color: #fff2d0;
+  line-height: 1.55;
+}
+
+code {
+  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
+  font-size: 0.92em;
+}
+
+.note {
+  border-left: 3px solid var(--accent-2);
+  padding-left: 12px;
+  color: #ffe8bd;
+}
+
+@media (max-width: 820px) {
+  .site-nav,
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .site-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .hero {
+    min-height: auto;
+  }
+
+  .hero-content {
+    width: 100%;
+    margin: 0;
+    padding: 22px;
+  }
+
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .download-row {
+    grid-template-columns: 1fr;
+  }
+}

package/src/pages.js

@@ -0,0 +1 @@
+import "./pages.css";

package/src/plugin.js

@@ -0,0 +1,9 @@
+export {
+  FireworksSimulator,
+  builtInPresets,
+  create as createFireworks,
+  default,
+  defaultConfig,
+  init,
+  sanitizeConfig
+} from "./app.js";