|
<!DOCTYPE html> |
|
<html lang="; |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AI Novel Director</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--border-color: #374151; |
|
--bg-primary: #ffffff; |
|
--bg-secondary: #f3f4f6; |
|
--text-primary: #111827; |
|
--text-secondary: #6b7280; |
|
--accent: #3b82f6; |
|
--success: #10b981; |
|
--warning: #f59e0b; |
|
} |
|
|
|
* { |
|
|
|
|
|
} |
|
|
|
body { |
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; |
|
background: var(--bg-primary); |
|
color: var(--text-primary); |
|
overflow: hidden; |
|
} |
|
|
|
.sharp-corners { |
|
border-radius: |
|
|
|
.border-thin { |
|
border: 1px solid var(--border-color); |
|
} |
|
|
|
.tab-active { |
|
background: var(--text-primary); |
|
color: var(--bg-primary); |
|
} |
|
|
|
.inspiration-card { |
|
background: var(--bg-secondary); |
|
border: 1px solid var(--border-color); |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.inspiration-card:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 0 var(--border-color); |
|
} |
|
|
|
.constellation-dot { |
|
width: 6px; |
|
height: 6px; |
|
background: var(--accent); |
|
border-radius: 50%; |
|
position: absolute; |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
|
|
|
|
} |
|
|
|
.writing-editor { |
|
font-family: 'Georgia', serif; |
|
line-height: 1.7ced; |
|
} |
|
|
|
.achievement-badge { |
|
width: 80px; |
|
height: 80px; |
|
background: var(--bg-secondary); |
|
border: 1px solid var(--border-color); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 24px; |
|
} |
|
|
|
.command-palette { |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 600px; |
|
max-height: 400px; |
|
background: var(--bg-primary); |
|
border: 1px solid var(--border-color); |
|
z-index: 1000; |
|
display: none; |
|
} |
|
|
|
.modal-overlay { |
|
position: fixed; |
|
top: the the 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
we are the background", |
|
z-index: 999; |
|
display: none; |
|
} |
|
|
|
.progress-bar { |
|
height: 4px; |
|
background: var(--bg-secondary); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.progress-fill { |
|
height: 100%; |
|
background: var(--accent); |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.character-map { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
gap: 1rem; |
|
} |
|
|
|
.timeline-item { |
|
border-left: 1px solid var(--border-color); |
|
padding-left: 1rem; |
|
position: relative; |
|
} |
|
|
|
.timeline-item::before { |
|
content: ''; |
|
position: absolute; |
|
left: -4px; |
|
top: 0; |
|
width: 6px; |
|
height: 6px; |
|
background: var(--accent); |
|
border-radius: 50%; |
|
} |
|
|
|
.writing-sprint" { |
|
background: var(--bg-secondary); |
|
border: 1px solid var(--border ‘); |
|
padding: 1rem; |
|
} |
|
|
|
.ai-suggestion { |
|
background: var(--bg-secondary); |
|
border-left: 3px solid var(--accent); |
|
padding: 0.5rem 1rem; |
|
margin: 0.5rem 0; |
|
} |
|
</style> |
|
</head> |
|
<body class="h-screen flex flex-col bg-white text-gray-900"> |
|
|
|
<header class="border-b border-gray-300 flex items-center justify-between px-4 py-2"> |
|
<div class="flex items-center space-x-4"> |
|
<h1 class="text-lg font-semibold">AI Novel Director</h1> |
|
<div class="flex space-x-1"> |
|
<button id="museion-tab" class="tab-active px-3 py-1 text-sm">Museion</button> |
|
<button id="blueprint-tab" class="px-3 py-1 text-sm border border-gray-300">Blueprint</button> |
|
<button id="studio-tab" class="px-3 py-1 text-sm border border-gray-300">Studio</button> |
|
<button id="launchpad-tab" class="px-3 py-1 text -sm border border-gray-300">Launchpad</button> |
|
<button id="momentum-tab" class="px-3 py-1 text-sm border border-gray-300">Momentum</button> |
|
</div> |
|
</div> |
|
<div class="flex用实际行动-space-x-2"> |
|
<button onclick="toggleCommandPalette()" class="px-3 py-1 text-sm border border-gray-300 flex items-center space-x-1"> |
|
<i class="fas fa-search text-xs"></i> |
|
<span>⌘K</span> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="flex-1 flex overflow-hidden"> |
|
|
|
<div class="flex-1 overflow-y'. |
|
|
|
<!-- Bottom Panel --> |
|
<aside class="w-80 border-l border-gray-300 flex flex-col"> |
|
<div class="border-b border-gray-300 flex"> |
|
<button class="flex- 1 px-3 py-2 text-sm tab-active">AI Assistant</button> |
|
<button class="flex-1 px-3 py-2 text-sm border-l border-gray-300">Omni-Codex</button> |
|
</div> |
|
<div class="flex-1 p-4 overflow-y-auto"> |
|
<div id="ai-assistant"> |
|
<div class="mb-4"> |
|
<input type="text" placeholder="Ask AI anything..." class="w-full px-3 py-2 text-sm border border-gray-300"> |
|
</div> |
|
<div class="space-y-3"> |
|
<div class="ai-suggestion text-sm"> |
|
<strong>AI:</strong> I noticed you're writing about a character named Elena. Would you like me to expand on her backstory? |
|
</div> |
|
<div class="text-sm text-gray-600"> |
|
<strong>Quick Actions:</strong> |
|
<div class="flex flex-wrap gap-1 mt-2"> |
|
<button class="px-2 py-1 text-xs border border-gray-300">Generate Plot Twist</button> |
|
<button class="px-2 py-1 text-xs border border-gray-300">Describe Setting</button> |
|
<button class="px-2 py-1 text-xs border border-gray-300">Character Arc</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</aside> |
|
</main> |
|
|
|
|
|
<div id="modal-overlay" class="modal-overlay" onclick="toggleCommandPalette()"></div> |
|
<div id command-palette class="command-palette"> |
|
<div class="p-4 border-b border-gray-300"> |
|
<input type="text" id="command-input" placeholder="Type a command..." class="w-full text-lg border-none outline-none"> |
|
</div> |
|
<div class="overflow-y-auto max-h-64"> |
|
<div class="p-2 text-sm text-gray-600">Recent Commands</div> |
|
<div class="command-item p-3 hover:bg-gray-100 cursor-pointer text-sm"> |
|
Switch to Studio |
|
<span class="text-xs text-gray-500 float-right">⌘3</span> |
|
</div> |
|
<div class="command-item p-3 hover:bg-gray-100 cursor-pointer text-sm"> |
|
Generate Character Profile |
|
<span class="text-xs text-gray-500 float-right">⌘G</span> |
|
</div> |
|
<div class="command-item p-3 hover:bg-gray-100 cursor-pointer text-sm"> |
|
Start Writing Sprint |
|
<span class="text-xs text-gray-500 float-right">⌘S</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
// Tab Switching |
|
const ‘tabs = ['museion', 'blueprint', 'studio', 'launchpad', 'momentum"]; |
|
const contents = { |
|
museion: ` |
|
<div class="p-6"> |
|
<h2 class="text-xl font-semibold mb-4">Museion - Inspiration Engine</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb Continue -8"> |
|
<div class="inspiration-card p-4"> |
|
<h3 class="font-medium mb-2">Character Idea</h3> |
|
<p class="text-sm text-gray-600">A librarian who discovers books are portals to other worlds.</p> |
|
<button class="mt-2 text-xs text-blue-600">Expand with AI →</button> |
|
</div> |
|
<div class="insp’ ration-card p-4"> |
|
<h3 class="font-medium mb-2">Plot Twist</h3> |
|
<p class="text-sm text-gray-600">The detective is actually the criminal's split personality.</p> |
|
<button class="mt-2 text-xs text-blue-600">Develop →</button> |
|
</div> |
|
<div class="inspiration-card p-4"> |
|
<h3 class="font-medium mb-2">Setting</h3> |
|
<p class="text-sm text-gray-600">A city built entirely underground, powered by bioluminescent fungi.</p> |
|
<button class="mt-2 text-xs text-blue-600"> visualize →</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">Constellation View</h3> |
|
<div class="bg-gray-100 border border-gray-300 h-64 relative"> |
|
<div class="constellation-dot absolute" style="top: 20%; left: 15%;"></div> |
|
<div class="constellation-dot absolute" style="top: 40%; left: 25%;"></div> |
|
<div class Continue >class="constellation-dot absolute" style="top: 60%; left: 45%;"></div> |
|
<div class="constellation-dot absolute" style="top: 30%; left: 65%;"></div> |
|
<div class="constellation-dot absolute" style="top: 70%; left: 75%;"></div> |
|
<svg class="absolute inset-0 w-full h-full"> |
|
<line x1="15%" y1="20%" x2="25%" y2="40%" stroke="#374151" stroke-width="0.5"/> |
|
<line x1="25%" y1="40%" x2="45%" y2="60%" stroke="#374151" stroke-width="0.5"/> |
|
<line x1="45%" y1="60%" x2="65%" y2="30%" stroke="#374151" stroke-width="0.5"/> |
|
</svg> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
blueprint: ` |
|
|
|
|
|
<div class="p-6"> |
|
<h2 class="text-xl font-semibold mb-4">Blueprint - Planning Engine</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">Interactive Outline</h3> |
|
<div class="space-y-2"> |
|
<div class="border border-gray-300 p-3 bg-gray-50"> |
|
<div class="font-medium">Chapter 1: The Discovery</div> |
|
<div class="text-sm text-gray-600 ml-4.: Scene 1 - The old library</div> |
|
<div class="text-sm text-gray-600 ml-4.: Scene 2 - The mysterious book</div> |
|
</ div> |
|
<div class="border border-gray-300 p-3"> |
|
<div class="font-medium">Chapter 2: The Portal Opens</div> |
|
<div class="text-sm text-gray', |
|
<div class="text-sm text-gray-600 ml-4">Scene 2 - First steps into another world</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">Character Bible</h3> |
|
<div class="character-map"> |
|
<div class="border border-gray-300 p-4"> |
|
<h4 class="font-medium">Elena Martinez</h4> |
|
<p class="text-sm text-gray-600">Protagonist - Curious librarian</p> |
|
<div class="mt-2 text-xs text-gray-500">Connections: 3</div> |
|
</div> |
|
<div class="border border-gray-300 p-4"> |
|
<h4 class="font-medium">Marcus Stone</h4> |
|
<p class="text-sm text-gray-600">Antagonist - Keeper of secrets</p> |
|
<div class="mt-2 text-xs text-gray-500">Connections: 5</div Continue > |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-medium mb-4">World Anvil</h3> |
|
<div class="'border border-gray-300 p-4"> |
|
<h4 class="font-medium mb-2">Locations</h4> |
|
<ul class="text-sm space -y-1"> |
|
<li>• The Grand Library of Alexandria</li> |
|
<li>• The City Between Worlds</li> |
|
<li>• The Temporal Archives</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
studio: ` |
|
<div class="h-full flex"> |
|
<div class="flex-1 p-6"> |
|
<div class="mb-4 flex items-center justify-between"> |
|
<h2 class="text-xl font-semibold">Studio - Chapter 3, Scene 2</h2> |
|
<div class="text-sm text-gray-600">Word", count: 1,247</div> |
|
</div> |
|
|
|
<div class="h-full"> |
|
<div id="editor" class="writing-editor h-full p-4 border border-gray-300" contenteditable="true"> |
|
<h3 class="text-lg font-medium mb-4">Elena's First Discovery</h3> |
|
<p>Elena ran her fingers along the spine of the ancient book, feeling the raised leather beneath her fingertips. The title had long since faded, but she could sense the power emanating from its pages.</p> |
|
<p class="mt-4">As she opened the book, the air around her shimmered. The library began to fade, replaced by a swirling vortex of colors and sensations...</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`, |
|
launchpad: ` |
|
<div class="p-6"> |
|
<h2 class="text-xl font-semibold mb-4 Continue >Launchpad - Publishing Engine</h2> |
|
|
|
<!-- AI Pitch Kit Generator --> |
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">AI Pitch Kit Generator</h3> |
|
<div class="space-y-4"> |
|
<div class="border border-gray-300 p-4"> |
|
<h4 class="font-medium mb-2">Logline</h4> |
|
<p class="text-sm text-gray-600">"A curious librarian discovers that books are portals to other worlds, but-- |
|
‘. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .’ |
|
discovering each world drains her memories of the real one."</p> |
|
<button class="mt-2 text-xs text-blue-600">Refine with AI →</button> |
|
</div> |
|
|
|
<div class="border border-gray-300 p-4"> |
|
<h4 class="font-medium mb-2">Query Letter</h4 |
|
<p class="text-sm text-gray-600">Dear [Agent Name],</p> |
|
<p class="text-sm text-gray-600 mt-2">I'm seeking representation for my 90,000-word fantasy novel...</p> |
|
<button class="mt-2 text-xs text-blue-600">Generate Full Letter →</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 Continue class="text-lg font-medium mb-4">Export & Format</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<button class="border border-gray-300 p-4 text-center hover:bg-gray-50"> |
|
<i class="fas fa-file-pdf text-xl mb-2 „></i> |
|
<div class="text-sm">Export as PDF</div> |
|
</button> |
|
<button class="border border-gray-300 p-4 text-center hover:bg-gray-50"> |
|
<i class="fas fa-file-word text-xl mb-2"></i> |
|
<div class="text-sm">Export as Word</div> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-medium mb-4">Submission |
|
|
|
Tracker</h3> |
|
<div class="space-y-2"> |
|
<div class="border border-gray-300 p-3 flex justify-between items-center"> |
|
<div> |
|
<div class="font-medium">Sarah Chen Literary</div> |
|
<div class="text-sm text-gray-600">Submitted: 2 days ago</div> |
|
</div> |
|
<div class="text-xs bg-yellow-100 text-yellow-800 px Continue >2 py-1">Pending</div> |
|
</div> |
|
<div class="border border-gray-3- p-3 flex justify-between items-center"> |
|
<div> |
|
<div class="font-medium">DreamHouse Publishing</div> |
|
<div class="text-sm text-gray-600">Submitted: 1 week ago</div> |
|
</div> |
|
<div class="text-xs bg-red-100 text-red-800 px-2 py-1">Rejected</div> |
|
</div> |
|
</div> |
|
Continue > |
|
</div> |
|
`, |
|
momentum: ` |
|
<div class="p-6"> |
|
<h2 class="text-xl font-semibold mb-4">Momentum - Motivation Engine</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">Director's Dashboard</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
<div class="border border-gray-300 p-4 text-center"> |
|
', |
|
<div class="text-2xl font-bold">847</div> |
|
<div class="text-sm text-gray-600">Today's Words</div> |
|
</div Continue > |
|
Continue <div class="border border-gray-300 p-4 text-center"> |
|
Continue <div class="text-2xl font-bold">7</div> |
|
<div class="text-sm text-gray-600">Day Streak</div> |
|
</div> |
|
<div class="border border-gray-300 p-4 text-center"> |
|
<div class="text-2xl font-bold">23%</div> |
|
<div class="text-sm text-gray-600">Project Complete</div> |
|
</div> |
|
</div> |
|
<div class="progress-bar"> |
|
<div class="progress-fill" style="width: 23%;"></div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
<h3 class="text-lg font-medium mb-4">Writing Sprints</h3> |
|
<div class="writing-sprint"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<span class="text-sm font-medium">Current Sprint</span> |
|
<span class="text-sm text-gray-600">8:32 remaining</span> |
|
</div> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 text-sm border border-gray-300">Pause</button> |
|
<button class="px-3 py-1 text-sm border border-gray-300">End Sprint</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-medium Continue mb-4">Achievements</h3> |
|
<div class="flex space-x-4"> |
|
<div class="achievement-badge"> |
|
<i class="fas fa-fire text-orange-500"></i> |
|
</div> |
|
<div class="achievement -badge"> |
|
<i class="fas fa-book text-blue-500"></i> |
|
</div> |
|
<div class="achievement-badge"> |
|
<i class="fas-star text-yellow-500"></i> |
|
</div> |
|
<div class="achievement-badge"> |
|
<i class="fas fa-trophy text-green-500"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
` |
|
}; |
|
|
|
function switchTab(tabName) { |
|
// Update tab buttons |
|
tabs.forEach(t => { |
|
const btn = document.getElementById(`${t}-tab`); |
|
if (t === tabName) { |
|
btn.classList.add('tab-active'); |
|
btn.class List.remove')); |
|
} else { |
|
btn.classList.remove('tab-active'); |
|
btn.classList.add ('border', 'border ‘"gray-300'); |
|
} |
|
}); |
|
|
|
// Update content |
|
const contentArea = document.getElementById('content-area'); |
|
if (contents[tabName]) { |
|
contentArea.innerHTML” = contents[tabName]; |
|
} |
|
} |
|
|
|
// Initialize |
|
switchTab('museion'); |
|
|
|
// Tab event listeners |
|
tabs.forEach(tab => { |
|
document.getElementById(`${tab}-tab`).addEventListener('click', () => switchTab(tab)); |
|
}); |
|
|
|
// Command Palette |
|
function toggleCommandPalette() { |
|
const overlay = document.getElementById('modal-overlay'); |
|
const palette = document.getElementById('command-palette'); |
|
|
|
if (overlay.style.display === 'block') { |
|
overlay.style.display = 'none'; |
|
palette.style.display = 'none'; |
|
} else { |
|
overlay.style.display = 'block'; |
|
palette.style.display = 'block'; |
|
document.getElementById('command-input').focus(); |
|
} |
|
} |
|
|
|
// Keyboard shortcuts |
|
document.addEventListener('keydown', (e) => { |
|
if (e.metaKey && e.key === 'k') { |
|
e.preventDefault(); |
|
toggleCommandPalette(); |
|
} |
|
}); |
|
|
|
// AI Assistant functions |
|
function generateCharacter() { |
|
alert('AI is generating a character profile...'); |
|
} |
|
|
|
function improveText() { |
|
const selection = window.getSelection(); |
|
if (selection.toString()) { |
|
alert('AI is improving your selected text...'); |
|
} |
|
} |
|
|
|
// Add inline AI editing to editor |
|
document.addEventListener('mouseup', () => { |
|
const selection = window.getSelection(); |
|
if (selection.toString() && document.getElementById('editor')) { |
|
// Show AI inline menu |
|
console.log('Selected text:', selection.toString()); |
|
} |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=algovenus/minimalist-novel-writer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |