Create the main index.html page for StorySketch
This commit is contained in:
github-actions[bot] authored and GitHub committed
1 parent
768f576247
commit
182c52b886
1 file changed
+465
@@ -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>
|
||||
Reference in new issue
Block a user