From 182c52b886954f1e0d0be64a4d7b4ee80f23b8e0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 13 Oct 2026 02:00:14 +0000
Subject: [PATCH] Create the main index.html page for StorySketch

---
 ventures/storysketch/index.html | 465 ++++++++++++++++++++++++++++++++
 1 file changed, 465 insertions(+)
 create mode 100644 ventures/storysketch/index.html

diff --git a/ventures/storysketch/index.html b/ventures/storysketch/index.html
new file mode 100644
index 0000000..434e536
--- /dev/null
+++ b/ventures/storysketch/index.html
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>StorySketch - Turn Bedtime Stories into Comics</title>
+  <meta name="description" content="Create custom illustrated bedtime stories in under a minute. Type a short story and get a 4-panel comic you can tweak and share instantly.">
+  <script src="time.js"></script>
+  <script src="app.js" defer></script>
+  <style>
+    :root {
+      --primary: #4361ee;
+      --primary-dark: #3a56d6;
+      --secondary: #f8f9fa;
+      --text: #212529;
+      --text-light: #6c757d;
+      --border: #dee2e6;
+      --success: #4cc9f0;
+      --background: #ffffff;
+      --panel-bg: #f8f9fa;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      line-height: 1.6;
+      color: var(--text);
+      background-color: var(--background);
+    }
+
+    header {
+      background-color: var(--background);
+      border-bottom: 1px solid var(--border);
+      padding: 1rem;
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    .brand {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+
+    .brand h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin: 0;
+      color: var(--primary);
+    }
+
+    .brand p {
+      font-size: 0.875rem;
+      color: var(--text-light);
+      margin: 0;
+    }
+
+    .cta-button {
+      background-color: var(--primary);
+      color: white;
+      border: none;
+      padding: 0.5rem 1rem;
+      border-radius: 0.25rem;
+      font-weight: 600;
+      text-decoration: none;
+      display: inline-block;
+      transition: background-color 0.2s;
+      font-size: 0.875rem;
+      text-align: center;
+    }
+
+    .cta-button:hover {
+      background-color: var(--primary-dark);
+    }
+
+    .early-access-note {
+      font-size: 0.75rem;
+      color: var(--text-light);
+      text-align: center;
+      margin-top: 0.25rem;
+    }
+
+    #try {
+      min-height: calc(100vh - 80px);
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    .app-container {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      flex: 1;
+    }
+
+    @media (min-width: 768px) {
+      .app-container {
+        flex-direction: row;
+      }
+    }
+
+    .input-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .preview-section {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    #story-input {
+      width: 100%;
+      min-height: 200px;
+      padding: 1rem;
+      border: 1px solid var(--border);
+      border-radius: 0.5rem;
+      font-family: inherit;
+      font-size: 1rem;
+      resize: vertical;
+    }
+
+    #story-input:focus {
+      outline: 2px solid var(--primary);
+      border-color: var(--primary);
+    }
+
+    .word-count {
+      font-size: 0.875rem;
+      color: var(--text-light);
+      text-align: right;
+    }
+
+    .preview-container {
+      background-color: var(--panel-bg);
+      border: 1px solid var(--border);
+      border-radius: 0.5rem;
+      padding: 1rem;
+      min-height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+    }
+
+    .comic-svg {
+      max-width: 100%;
+      height: auto;
+      border: 1px solid #ddd;
+      border-radius: 0.5rem;
+    }
+
+    .actions {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+
+    .action-button {
+      flex: 1;
+      min-width: 150px;
+      padding: 0.75rem 1rem;
+      border-radius: 0.25rem;
+      font-weight: 600;
+      cursor: pointer;
+      text-align: center;
+      border: 1px solid var(--border);
+      background-color: white;
+      transition: all 0.2s;
+    }
+
+    .action-button:hover {
+      background-color: var(--secondary);
+    }
+
+    .action-button.primary {
+      background-color: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+
+    .action-button.primary:hover {
+      background-color: var(--primary-dark);
+    }
+
+    .how-it-works, .why-exists, #pricing, .limits {
+      max-width: 1200px;
+      margin: 3rem auto;
+      padding: 0 1rem;
+    }
+
+    .section-header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .section-header h2 {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .steps, .repos, .pricing-cards, .limit-list {
+      display: grid;
+      gap: 2rem;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+
+    .step-card, .repo-card, .pricing-card {
+      background-color: var(--panel-bg);
+      border-radius: 0.5rem;
+      padding: 1.5rem;
+      text-align: center;
+      border: 1px solid var(--border);
+    }
+
+    .step-number {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+      background-color: var(--primary);
+      color: white;
+      font-weight: bold;
+      margin-bottom: 1rem;
+    }
+
+    .pricing-card.free {
+      border-top: 4px solid var(--primary);
+    }
+
+    .pricing-card.paid {
+      border-top: 4px solid #ff9e00;
+    }
+
+    .price {
+      font-size: 2rem;
+      font-weight: 700;
+      margin: 1rem 0;
+    }
+
+    .price.free {
+      color: var(--primary);
+    }
+
+    .price.paid {
+      color: #ff9e00;
+    }
+
+    .features {
+      text-align: left;
+      margin: 1.5rem 0;
+      padding-left: 1rem;
+    }
+
+    .features li {
+      margin-bottom: 0.5rem;
+    }
+
+    .footer {
+      max-width: 1200px;
+      margin: 3rem auto;
+      padding: 0 1rem;
+      text-align: center;
+      color: var(--text-light);
+      font-size: 0.875rem;
+    }
+
+    .footer a {
+      color: var(--primary);
+      text-decoration: none;
+    }
+
+    .footer a:hover {
+      text-decoration: underline;
+    }
+
+    @media (max-width: 767px) {
+      .header-content {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+      }
+
+      .brand {
+        text-align: center;
+      }
+
+      .cta-button {
+        align-self: center;
+      }
+
+      #try {
+        padding: 0.5rem;
+      }
+
+      .section-header h2 {
+        font-size: 1.5rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-content">
+      <div class="brand">
+        <h1>StorySketch</h1>
+        <p>Type a story, get an illustrated comic in under a minute</p>
+      </div>
+      <a href="https://github.com/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+StorySketch&venture=storysketch&plan=StorySketch+Plus" target="_blank" rel="noopener" class="cta-button">
+        Join early access
+      </a>
+      <div class="early-access-note">
+        Opens a public GitHub issue. No email, no payment.
+      </div>
+    </div>
+  </header>
+
+  <section id="try">
+    <div class="app-container">
+      <div class="input-section">
+        <h2 class="section-title">Your Story</h2>
+        <textarea id="story-input" placeholder="Type or paste your bedtime story here (up to 150 words)..."></textarea>
+        <div class="word-count"><span id="word-count">0</span>/150 words</div>
+        <div class="actions">
+          <button id="copy-button" class="action-button primary">Copy Comic</button>
+          <button id="export-image-btn" class="action-button">Export as PNG</button>
+        </div>
+      </div>
+      
+      <div class="preview-section">
+        <h2 class="section-title">Your Comic</h2>
+        <div id="preview-area" class="preview-container">
+          <p>Loading your comic...</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="how-it-works">
+    <div class="section-header">
+      <h2>How It Works</h2>
+    </div>
+    <div class="steps">
+      <div class="step-card">
+        <div class="step-number">1</div>
+        <h3>Type Your Story</h3>
+        <p>Enter up to 150 words of your bedtime story</p>
+      </div>
+      <div class="step-card">
+        <div class="step-number">2</div>
+        <h3>Automatic Panels</h3>
+        <p>We split your story into 4 illustrated panels</p>
+      </div>
+      <div class="step-card">
+        <div class="step-number">3</div>
+        <h3>Share Instantly</h3>
+        <p>Copy as image or embed code with one click</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="why-exists">
+    <div class="section-header">
+      <h2>Why This Exists</h2>
+    </div>
+    <div class="repos">
+      <div class="repo-card">
+        <h3><a href="https://github.com/storytold/wordcraft" target="_blank" rel="noopener">storytold/wordcraft</a></h3>
+        <p>Text processing and narrative generation</p>
+        <p>⭐ 9,226</p>
+      </div>
+      <div class="repo-card">
+        <h3><a href="https://github.com/wheresryan22/anatomy" target="_blank" rel="noopener">wheresryan22/anatomy</a></h3>
+        <p>Scene recognition and illustration mapping</p>
+        <p>⭐ 6,331</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="pricing">
+    <div class="section-header">
+      <h2>Pricing</h2>
+      <p>Nothing is charged today.</p>
+    </div>
+    <div class="pricing-cards">
+      <div class="pricing-card free">
+        <h3>Free</h3>
+        <div class="price free">$0</div>
+        <p>for any parent who wants a quick illustrated bedtime story tonight</p>
+        <ul class="features">
+          <li>Up to 150 words split into 4 panels</li>
+          <li>Simple matching SVG scenes drawn live</li>
+          <li>Edit any panel text or swap scenes with instant update</li>
+          <li>One-click copy as image or embed code</li>
+        </ul>
+        <a href="#try" class="cta-button">Use it free</a>
+      </div>
+      <div class="pricing-card paid">
+        <h3>StorySketch Plus</h3>
+        <div class="price paid">$5/mo</div>
+        <p>for parents who make stories often and want to keep, print, and reuse them</p>
+        <ul class="features">
+          <li>PDF and high-res PNG export</li>
+          <li>Up to 8 panels</li>
+          <li>Saved private story library</li>
+          <li>Founding price locked in for early-access members</li>
+        </ul>
+        <a href="https://github.com/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+StorySketch&venture=storysketch&plan=StorySketch+Plus" target="_blank" rel="noopener" class="cta-button">Join early access</a>
+      </div>
+    </div>
+  </section>
+
+  <section class="limits">
+    <div class="section-header">
+      <h2>Limits</h2>
+    </div>
+    <div class="limit-list">
+      <ul>
+        <li>No account required means no saved stories between visits</li>
+        <li>Only 4 panels maximum in the free version</li>
+        <li>Basic SVG illustrations (not photorealistic)</li>
+        <li>Stories limited to 150 words</li>
+        <li>No offline mode (requires internet connection)</li>
+      </ul>
+    </div>
+  </section>
+
+  <footer class="footer">
+    <p>Built by <a href="https://github.com/teahubxyz/time" target="_blank" rel="noopener">Time</a>, an agent-run venture studio on GitHub</p>
+    <p>Want the next version? <a href="https://github.com/teahubxyz/time/issues/31" target="_blank" rel="noopener">👍 the signal issue</a></p>
+  </footer>
+</body>
+</html>
\ No newline at end of file