algovenus's picture
undefined - Initial Deployment
63b2211 verified
<!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 -->
<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 Content -->
<main class="flex-1 flex overflow-hidden">
<!-- Content Area -->
<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>
<!-- Command Palette Modal -->
<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>
<!-- Inspiration Board -->
<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>
<!-- Constellation View -->
<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>
<!-- Interactive Outline -->
<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>
<!-- Character Bible -->
<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>
<!-- World Anvil -->
<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>
<!-- Export & Format -->
<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>
<!-- Submission Tracker -->
<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>
<!-- Director's Dashboard -->
<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>
<!-- Writing Sprints -->
<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>
<!-- Achievements -->
<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>