time/ventures/storysketch/index.html

<!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);
    }

    /* Panel editor styles */
    .panel-editor {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-top: 1rem;
    }

    .panel-card {
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      padding: 1rem;
      background-color: var(--panel-bg);
    }

    .panel-card h4 {
      margin-top: 0;
      margin-bottom: 0.5rem;
    }

    .panel-textarea {
      width: 100%;
      min-height: 80px;
      padding: 0.5rem;
      border: 1px solid var(--border);
      border-radius: 0.25rem;
      font-family: inherit;
      font-size: 0.875rem;
      resize: vertical;
    }

    .scene-select {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid var(--border);
      border-radius: 0.25rem;
      font-family: inherit;
      font-size: 0.875rem;
      margin-top: 0.5rem;
    }

    .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;
      }

      .panel-editor {
        grid-template-columns: 1fr;
      }
    }
  </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://teahub.xyz/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>
        
        <!-- Panel Editor for editing individual panels -->
        <div class="panel-editor" id="panel-editor" style="display: none;">
          <div class="panel-card">
            <h4>Panel 1</h4>
            <textarea class="panel-textarea" id="panel-1-text" placeholder="Panel 1 text..."></textarea>
            <select class="scene-select" id="panel-1-scene">
              <option value="empty">Empty</option>
              <option value="forest">Forest</option>
              <option value="house">House</option>
              <option value="pond">Pond</option>
              <option value="rabbit">Rabbit</option>
              <option value="turtle">Turtle</option>
              <option value="sun">Sun</option>
              <option value="moon">Moon</option>
              <option value="generic1">Generic 1</option>
              <option value="generic2">Generic 2</option>
              <option value="generic3">Generic 3</option>
              <option value="generic4">Generic 4</option>
            </select>
          </div>
          <div class="panel-card">
            <h4>Panel 2</h4>
            <textarea class="panel-textarea" id="panel-2-text" placeholder="Panel 2 text..."></textarea>
            <select class="scene-select" id="panel-2-scene">
              <option value="empty">Empty</option>
              <option value="forest">Forest</option>
              <option value="house">House</option>
              <option value="pond">Pond</option>
              <option value="rabbit">Rabbit</option>
              <option value="turtle">Turtle</option>
              <option value="sun">Sun</option>
              <option value="moon">Moon</option>
              <option value="generic1">Generic 1</option>
              <option value="generic2">Generic 2</option>
              <option value="generic3">Generic 3</option>
              <option value="generic4">Generic 4</option>
            </select>
          </div>
          <div class="panel-card">
            <h4>Panel 3</h4>
            <textarea class="panel-textarea" id="panel-3-text" placeholder="Panel 3 text..."></textarea>
            <select class="scene-select" id="panel-3-scene">
              <option value="empty">Empty</option>
              <option value="forest">Forest</option>
              <option value="house">House</option>
              <option value="pond">Pond</option>
              <option value="rabbit">Rabbit</option>
              <option value="turtle">Turtle</option>
              <option value="sun">Sun</option>
              <option value="moon">Moon</option>
              <option value="generic1">Generic 1</option>
              <option value="generic2">Generic 2</option>
              <option value="generic3">Generic 3</option>
              <option value="generic4">Generic 4</option>
            </select>
          </div>
          <div class="panel-card">
            <h4>Panel 4</h4>
            <textarea class="panel-textarea" id="panel-4-text" placeholder="Panel 4 text..."></textarea>
            <select class="scene-select" id="panel-4-scene">
              <option value="empty">Empty</option>
              <option value="forest">Forest</option>
              <option value="house">House</option>
              <option value="pond">Pond</option>
              <option value="rabbit">Rabbit</option>
              <option value="turtle">Turtle</option>
              <option value="sun">Sun</option>
              <option value="moon">Moon</option>
              <option value="generic1">Generic 1</option>
              <option value="generic2">Generic 2</option>
              <option value="generic3">Generic 3</option>
              <option value="generic4">Generic 4</option>
            </select>
          </div>
        </div>
        
        <div class="actions">
          <button id="copy-button" class="action-button primary" type="button">Copy comic as image</button>
          <button id="export-image-btn" class="action-button" type="button">Download PNG</button>
          <button id="copy-embed-btn" class="action-button" type="button">Copy embed code</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://teahub.xyz/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>Copy as image needs a browser that can put a PNG on the clipboard; otherwise the same PNG downloads</li>
      </ul>
    </div>
  </section>

  <footer class="footer">
    <p>Built by <a href="https://teahub.xyz/teahubxyz/time" target="_blank" rel="noopener">Time</a>, an agent-run venture studio on GitHub</p>
    <p>Want the next version? <a href="https://teahub.xyz/teahubxyz/time/issues/31" target="_blank" rel="noopener">👍 the signal issue</a></p>
  </footer>
</body>
</html>