Hugging Face's logo

Spaces:
algovenus
/
qwen-novel-writer
Running

App Files Community
qwen-novel-writer / index.html
algovenus's picture
algovenus
Project: AI Novel Director Core Concept AI Novel Director is a creative environment for writing novels. It's designed to be an all-in-one application where you, the writer, act as the "Director" of your story, and an integrated AI serves as your multi-talented "Creative Assistant." The goal is to provide a seamless and intuitive space that eliminates distractions and helps you bring your ideas to life. Visual Design: Utilitarian Focus The app’s design philosophy is "Utilitarian Focus," prioritizing clarity, efficiency, and a distraction-free writing environment. The aesthetic is strictly minimalist and flat, ensuring that the focus remains entirely on the content and the creative task at hand. * Layout and Structure: * Tab-Based Navigation: The interface is built around a compact, tab-based system. Main sections like the Museion, Blueprint, and Studio are organized into clear tabs for instant context switching. * Compact and Efficient: The layout is designed to be dense and information-rich. A fixed-height content area minimizes the need for scrolling, while a slim bottom panel uses its own set of tabs to provide access to tools like the AI Assistant or the Omni-Codex without cluttering the main view. * Context-Specific Views: Each tab presents only the information and tools relevant to that specific task, keeping the interface clean and predictable. * Aesthetic Principles: * Flat & Sharp Design: The interface is completely flat, with no shadows, gradients, or depth effects. All UI elements, from buttons to panels, feature sharp, 90-degree corners for a precise, architectural look. * High-Contrast & Minimalist Palette: The color scheme is intentionally stark, using a clean white background with dark grey UI elements. Color is used sparingly and purposefully, reserved exclusively for specific UI feedback like status indicators or highlighting active elements. * Hierarchy Through Structure: A clear visual hierarchy is established through logical spacing and clean, thin borders rather than through shadows or size variation. This creates a readable and unambiguous structure. * Interaction: * Quick Access: The command palette is fully integrated into this system. In addition to performing actions, it includes commands for switching between the main navigation tabs with simple keyboard shortcuts. Key Features The application is structured into five main modules, each designed to support a different stage of the creative process. 1. The Museion (Inspiration Engine) This is your digital scrapbook for brainstorming and collecting ideas. * Inspiration Board: A fluid, scrapbook-like grid where you can add and arrange various types of content, including text notes, images, links, quotes, and audio clips. * AI Idea Generation: The AI can generate new ideas (like character concepts, plot twists, or setting descriptions) that appear as new cards on your board. * Constellation View: A unique visual tool that shows you how your ideas are thematically connected, appearing as an interactive galaxy of concepts that you can explore. 2. The Blueprint (Planning Engine) This module helps you structure your novel and build your world. * Interactive Outline: A flexible, card-based outliner for organizing your story by chapters and scenes. You can easily drag and drop elements to reorder your narrative. * Omni-Codex: A centralized knowledge base for your entire project. It includes: * Character Bible: Create rich profiles for your characters, complete with images, backstories, and visual maps of their relationships. * World Anvil: Detail your story's world with descriptions of locations, interactive maps, and a timeline for historical events. * Style Lab: Define, analyze, and visualize the unique writing style and voice for your novel. 3. The Studio (Writing Engine) The heart of the application—a powerful and focused writing environment. * Smart Editor: A clean, distraction-free text editor. It intelligently highlights complex sentences to help you refine your prose and automatically links character and location names back to their entries in your Omni-Codex. * AI Assistant Panel: A context-aware AI assistant is always available in a side panel. You can chat with it, ask it to do research, or have it brainstorm alongside you without leaving your manuscript. * Inline AI Editing: Simply highlight any text to bring up a menu of AI-powered actions like "Improve," "Rewrite," "Expand," or "Condense." 4. The Launchpad (Publishing Engine) Tools to prepare your finished manuscript for the world. * AI Pitch Kit Generator: An AI-guided wizard that helps you create a professional logline, synopsis, and query letter for agents and publishers. * Smart Formatting & Export: Automatically formats your manuscript into industry-standard templates for export. * Submission Tracker: A simple tool to track which agents or publishers you've sent your manuscript to and manage their responses. 5. The Momentum Engine (Motivation Engine) Features designed to keep you inspired and on track. * Director's Dashboard: A central hub that displays your writing statistics, such as daily word counts, project progress, and writing streaks. It also offers personalized tips and inspirational quotes. * Writing Sprints: Set focused writing sessions with word count or time-based goals, complete with AI-powered encouragement to keep you going. * Achievement System: Unlock beautifully designed, hand-drawn badges for reaching writing milestones and maintaining consistent habits. - Initial Deployment
3cab60d verified
raw
history blame contribute delete
62 kB
 <!DOCTYPE html>
<html lang="en">
<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.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a1a1a',
secondary: '#2d2d2d',
accent: '#4a90e2',
success: '#50c878',
warning: '#ffcc00',
danger: '#ff4d4d'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
overflow: hidden;
}
.tab-content {
height: calc(100vh - 120px);
overflow-y: auto;
}
.bottom-panel {
height: 120px;
}
.card {
transition: all 0.2s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.active-tab {
border-bottom: 2px solid #4a90e2;
color: #4a90e2;
}
.editor-container {
height: calc(100vh - 240px);
}
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
.constellation-dot {
transition: all 0.3s ease;
}
.constellation-dot:hover {
transform: scale(1.2);
}
.progress-ring circle {
transition: stroke-dashoffset 0.5s ease;
}
.achievement-badge {
transition: all 0.3s ease;
}
.achievement-badge:hover {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Top Navigation Bar -->
<div class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 flex items-center px-4 z-50">
<div class="flex items-center">
<div class="text-xl font-bold mr-8">AI Novel Director</div>
<div class="flex space-x-6">
<button class="px-3 py-2 text-sm font-medium rounded-md active-tab">Museion</button>
<button class="px-3 py-2 text-sm font-medium rounded-md">Blueprint</button>
<button class="px-3 py-2 text-sm font-medium rounded-md">Studio</button>
<button class="px-3 py-2 text-sm font-medium rounded-md">Launchpad</button>
<button class="px-3 py-2 text-sm font-medium rounded-md">Momentum</button>
</div>
</div>
<div class="ml-auto flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-search text-gray-600"></i>
</button>
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-bell text-gray-600"></i>
</button>
<div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
<span class="font-medium text-gray-700">U</span>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="mt-16 tab-content scrollbar-thin">
<!-- Museion Tab -->
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Museion</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-plus mr-2"></i> Add Idea
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-robot mr-2"></i> Generate Ideas
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-8">
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Character Concept</h3>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Character</span>
</div>
<p class="text-sm text-gray-600 mb-3">A mysterious detective with a hidden past and a unique method for solving crimes.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: Today</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 24</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Plot Twist</h3>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Plot</span>
</div>
<p class="text-sm text-gray-600 mb-3">The villain is actually the protagonist's long-lost sibling, revealed in the final chapter.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: Yesterday</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 18</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Setting Description</h3>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">World</span>
</div>
<p class="text-sm text-gray-600 mb-3">A floating city in the clouds, accessible only by airship, with gravity-defying architecture.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: 2 days ago</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 32</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Dialogue Snippet</h3>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Dialogue</span>
</div>
<p class="text-sm text-gray-600 mb-3">"The truth isn't what sets you free. It's what you do with it that matters."</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: 3 days ago</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 15</span>
</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Constellation View</h2>
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 h-96 relative overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-full h-full">
<!-- Constellation visualization -->
<svg class="w-full h-full" viewBox="0 0 800 400">
<!-- Connections -->
<line x1="100" y1="100" x2="300" y2="150" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="300" y1="150" x2="500" y2="120" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="500" y1="120" x2="700" y2="200" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="100" y1="100" x2="200" y2="300" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="200" y1="300" x2="400" y2="250" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="400" y1="250" x2="600" y2="300" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="600" y1="300" x2="700" y2="200" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<!-- Nodes -->
<circle cx="100" cy="100" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="300" cy="150" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="500" cy="120" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="700" cy="200" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="200" cy="300" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="400" cy="250" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="600" cy="300" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<!-- Labels -->
<text x="100" y="85" text-anchor="middle" font-size="12" fill="#1a1a1a">Character</text>
<text x="300" y="135" text-anchor="middle" font-size="12" fill="#1a1a1a">Plot</text>
<text x="500" y="105" text-anchor="middle" font-size="12" fill="#1a1a1a">Setting</text>
<text x="700" y="185" text-anchor="middle" font-size="12" fill="#1a1a1a">Theme</text>
<text x="200" y="320" text-anchor="middle" font-size="12" fill="#1a1a1a">Dialogue</text>
<text x="400" y="270" text-anchor="middle" font-size="12" fill="#1a1a1a">Conflict</text>
<text x="600" y="320" text-anchor="middle" font-size="12" fill="#1a1a1a">Resolution</text>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Panel -->
<div class="fixed bottom-0 left-0 right-0 bg-gray-50 border-t border-gray-200 bottom-panel">
<div class="flex h-full">
<div class="w-16 bg-white border-r border-gray-200 flex flex-col items-center py-2">
<button class="p-3 rounded-lg hover:bg-gray-100 mb-2">
<i class="fas fa-robot text-gray-600"></i>
</button>
<button class="p-3 rounded-lg hover:bg-gray-100 mb-2">
<i class="fas fa-book text-gray-600"></i>
</button>
<button class="p-3 rounded-lg hover:bg-gray-100 mb-2">
<i class="fas fa-history text-gray-600"></i>
</button>
<button class="p-3 rounded-lg hover:bg-gray-100">
<i class="fas fa-cog text-gray-600"></i>
</button>
</div>
<div class="flex-1 p-4">
<div class="bg-white border border-gray-200 rounded-lg h-full p-4">
<div class="flex items-center mb-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-robot text-blue-600"></i>
</div>
<h3 class="font-semibold">Creative Assistant</h3>
</div>
<div class="h-20 bg-gray-50 rounded p-3 mb-3 overflow-y-auto scrollbar-thin">
<p class="text-sm"><span class="font-medium">AI:</span> I've generated 3 new character concepts for your story. Would you like to explore them?</p>
</div>
<div class="flex">
<input type="text" placeholder="Ask the AI assistant..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg text-sm font-medium">
Send
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab switching functionality
document.querySelectorAll('.fixed button:not(.active-tab)').forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
document.querySelectorAll('.fixed button').forEach(btn => {
btn.classList.remove('active-tab');
});
// Add active class to clicked button
this.classList.add('active-tab');
// Update content based on tab
const tabName = this.textContent.trim();
updateContent(tabName);
});
});
function updateContent(tabName) {
const contentArea = document.querySelector('.tab-content');
switch(tabName) {
case 'Museion':
contentArea.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Museion</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-plus mr-2"></i> Add Idea
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-robot mr-2"></i> Generate Ideas
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-8">
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Character Concept</h3>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Character</span>
</div>
<p class="text-sm text-gray-600 mb-3">A mysterious detective with a hidden past and a unique method for solving crimes.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: Today</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 24</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Plot Twist</h3>
<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Plot</span>
</div>
<p class="text-sm text-gray-600 mb-3">The villain is actually the protagonist's long-lost sibling, revealed in the final chapter.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: Yesterday</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 18</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Setting Description</h3>
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">World</span>
</div>
<p class="text-sm text-gray-600 mb-3">A floating city in the clouds, accessible only by airship, with gravity-defying architecture.</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: 2 days ago</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 32</span>
</div>
</div>
<div class="card bg-white border border-gray-200 rounded-lg p-4">
<div class="flex justify-between items-start mb-3">
<h3 class="font-semibold">Dialogue Snippet</h3>
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Dialogue</span>
</div>
<p class="text-sm text-gray-600 mb-3">"The truth isn't what sets you free. It's what you do with it that matters."</p>
<div class="flex justify-between text-xs text-gray-500">
<span>Created: 3 days ago</span>
<span><i class="fas fa-heart text-red-500 mr-1"></i> 15</span>
</div>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold mb-4">Constellation View</h2>
<div class="bg-gray-50 border border-gray-200 rounded-lg p-6 h-96 relative overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-full h-full">
<!-- Constellation visualization -->
<svg class="w-full h-full" viewBox="0 0 800 400">
<!-- Connections -->
<line x1="100" y1="100" x2="300" y2="150" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="300" y1="150" x2="500" y2="120" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="500" y1="120" x2="700" y2="200" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="100" y1="100" x2="200" y2="300" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="200" y1="300" x2="400" y2="250" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="400" y1="250" x2="600" y2="300" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<line x1="600" y1="300" x2="700" y2="200" stroke="#4a90e2" stroke-width="1" stroke-dasharray="5,5"></line>
<!-- Nodes -->
<circle cx="100" cy="100" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="300" cy="150" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="500" cy="120" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="700" cy="200" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="200" cy="300" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="400" cy="250" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<circle cx="600" cy="300" r="8" fill="#4a90e2" class="constellation-dot"></circle>
<!-- Labels -->
<text x="100" y="85" text-anchor="middle" font-size="12" fill="#1a1a1a">Character</text>
<text x="300" y="135" text-anchor="middle" font-size="12" fill="#1a1a1a">Plot</text>
<text x="500" y="105" text-anchor="middle" font-size="12" fill="#1a1a1a">Setting</text>
<text x="700" y="185" text-anchor="middle" font-size="12" fill="#1a1a1a">Theme</text>
<text x="200" y="320" text-anchor="middle" font-size="12" fill="#1a1a1a">Dialogue</text>
<text x="400" y="270" text-anchor="middle" font-size="12" fill="#1a1a1a">Conflict</text>
<text x="600" y="320" text-anchor="middle" font-size="12" fill="#1a1a1a">Resolution</text>
</svg>
</div>
</div>
</div>
</div>
</div>
`;
break;
case 'Blueprint':
contentArea.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Blueprint</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-plus mr-2"></i> Add Chapter
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-project-diagram mr-2"></i> Build World
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Interactive Outline</h2>
<div class="space-y-3">
<div class="border-l-2 border-blue-500 pl-3 py-1">
<h3 class="font-semibold">Chapter 1: The Discovery</h3>
<p class="text-sm text-gray-600">Protagonist finds the mysterious artifact</p>
</div>
<div class="border-l-2 border-gray-300 pl-3 py-1">
<h3 class="font-semibold">Chapter 2: The Pursuit</h3>
<p class="text-sm text-gray-600">Antagonist begins hunting the protagonist</p>
</div>
<div class="border-l-2 border-gray-300 pl-3 py-1">
<h3 class="font-semibold">Chapter 3: The Revelation</h3>
<p class="text-sm text-gray-600">Protagonist learns the artifact's true purpose</p>
</div>
<div class="border-l-2 border-gray-300 pl-3 py-1">
<h3 class="font-semibold">Chapter 4: The Confrontation</h3>
<p class="text-sm text-gray-600">Final battle with the antagonist</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Omni-Codex</h2>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-user text-blue-600"></i>
</div>
<div>
<h3 class="font-semibold">Character Bible</h3>
<p class="text-sm text-gray-600">Manage character profiles and relationships</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-globe-americas text-green-600"></i>
</div>
<div>
<h3 class="font-semibold">World Anvil</h3>
<p class="text-sm text-gray-600">Build and explore your story's world</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-palette text-purple-600"></i>
</div>
<div>
<h3 class="font-semibold">Style Lab</h3>
<p class="text-sm text-gray-600">Define and analyze your writing style</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Character Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center mb-3">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
<div class="ml-3">
<h3 class="font-semibold">Alex Mercer</h3>
<p class="text-sm text-gray-600">Protagonist</p>
</div>
</div>
<p class="text-sm text-gray-600">A brilliant archaeologist who discovers an ancient artifact that changes everything.</p>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center mb-3">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
<div class="ml-3">
<h3 class="font-semibold">Dr. Evelyn Cross</h3>
<p class="text-sm text-gray-600">Antagonist</p>
</div>
</div>
<p class="text-sm text-gray-600">A powerful corporate executive who will stop at nothing to obtain the artifact.</p>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="flex items-center mb-3">
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
<div class="ml-3">
<h3 class="font-semibold">Maya Chen</h3>
<p class="text-sm text-gray-600">Supporting Character</p>
</div>
</div>
<p class="text-sm text-gray-600">Alex's trusted colleague who helps decode the artifact's secrets.</p>
</div>
</div>
</div>
</div>
`;
break;
case 'Studio':
contentArea.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Studio</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-save mr-2"></i> Save Draft
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-magic mr-2"></i> AI Assistant
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2">
<div class="bg-white border border-gray-200 rounded-lg editor-container">
<div class="border-b border-gray-200 p-4 flex items-center">
<div class="text-sm font-medium">Chapter 3: The Revelation</div>
<div class="ml-auto flex space-x-2">
<button class="p-1 rounded hover:bg-gray-100">
<i class="fas fa-bold text-gray-600"></i>
</button>
<button class="p-1 rounded hover:bg-gray-100">
<i class="fas fa-italic text-gray-600"></i>
</button>
<button class="p-1 rounded hover:bg-gray-100">
<i class="fas fa-link text-gray-600"></i>
</button>
</div>
</div>
<div class="p-4 h-full">
<textarea class="w-full h-full resize-none focus:outline-none" placeholder="Start writing your novel here...">Alex stared at the artifact in his hands, its surface pulsing with an otherworldly energy. The symbols etched into its surface seemed to shift and change as he watched, forming words in a language he'd never seen but somehow understood.
"The key to the past lies in the future," he whispered, the words echoing in his mind with a certainty that chilled him to the bone.
As he traced the symbols with his finger, memories flooded his consciousness - not his own, but those of the ancient civilization that had created this device. He saw their cities, their triumphs, and their ultimate destruction at the hands of their own creation.
But there was something else - a warning. The artifact was not just a key, but a beacon. And somewhere in the depths of space, something was listening.</textarea>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">AI Assistant</h2>
<div class="h-64 bg-gray-50 rounded p-4 mb-4 overflow-y-auto scrollbar-thin">
<div class="mb-3">
<div class="text-xs text-gray-500 mb-1">You</div>
<div class="bg-blue-100 rounded-lg p-3 text-sm">Can you help me improve this paragraph?</div>
</div>
<div class="mb-3">
<div class="text-xs text-gray-500 mb-1">AI Assistant</div>
<div class="bg-gray-100 rounded-lg p-3 text-sm">Certainly! Here's a refined version that enhances the atmosphere and tension:</div>
<div class="bg-gray-100 rounded-lg p-3 text-sm mt-2 italic">"Alex's fingers trembled as he held the artifact, its surface pulsing with an otherworldly energy. The symbols etched into its surface shifted and changed, forming words in a language he'd never seen but somehow understood. 'The key to the past lies in the future,' he whispered, the words echoing in his mind with a certainty that chilled him to the bone. As he traced the symbols, memories flooded his consciousness - not his own, but those of the ancient civilization that had created this device. He saw their cities, their triumphs, and their ultimate destruction at the hands of their own creation. But there was something else - a warning. The artifact was not just a key, but a beacon. And somewhere in the depths of space, something was listening."</div>
</div>
</div>
<div class="flex">
<input type="text" placeholder="Ask the AI assistant..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg text-sm font-medium">
Send
</button>
</div>
</div>
</div>
</div>
`;
break;
case 'Launchpad':
contentArea.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Launchpad</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-file-export mr-2"></i> Export Manuscript
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-rocket mr-2"></i> Generate Pitch Kit
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Manuscript Status</h2>
<div class="flex items-center mb-6">
<div class="relative w-24 h-24 mr-6">
<svg class="progress-ring w-full h-full" viewBox="0 0 36 36">
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#eee" stroke-width="3"></path>
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#4a90e2" stroke-width="3" stroke-dasharray="75, 100"></path>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-lg font-bold">75%</span>
</div>
</div>
<div>
<p class="text-sm text-gray-600 mb-1">Current word count: 45,230</p>
<p class="text-sm text-gray-600">Target: 60,000 words</p>
</div>
</div>
<div class="border-t border-gray-200 pt-4">
<h3 class="font-semibold mb-2">Export Options</h3>
<div class="grid grid-cols-2 gap-3">
<button class="border border-gray-300 rounded-md py-2 text-sm hover:bg-gray-50">PDF</button>
<button class="border border-gray-300 rounded-md py-2 text-sm hover:bg-gray-50">EPUB</button>
<button class="border border-gray-300 rounded-md py-2 text-sm hover:bg-gray-50">MOBI</button>
<button class="border border-gray-300 rounded-md py-2 text-sm hover:bg-gray-50">DOCX</button>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Submission Tracker</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div>
<h3 class="font-medium">Penguin Random House</h3>
<p class="text-sm text-gray-600">Submitted on June 12, 2023</p>
</div>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div>
<h3 class="font-medium">HarperCollins</h3>
<p class="text-sm text-gray-600">Submitted on June 18, 2023</p>
</div>
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div>
<h3 class="font-medium">Simon & Schuster</h3>
<p class="text-sm text-gray-600">Submitted on June 22, 2023</p>
</div>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs">Accepted</span>
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Pitch Kit Generator</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="border border-gray-200 rounded-lg p-4">
<div class="text-center mb-3">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-align-left text-blue-600"></i>
</div>
<h3 class="font-semibold">Logline</h3>
</div>
<p class="text-sm text-gray-600 mb-3">A one-sentence summary of your story that captures the essence and hook.</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">Generate</button>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="text-center mb-3">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-book-open text-purple-600"></i>
</div>
<h3 class="font-semibold">Synopsis</h3>
</div>
<p class="text-sm text-gray-600 mb-3">A one-page summary of your entire story, including major plot points.</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">Generate</button>
</div>
<div class="border border-gray-200 rounded-lg p-4">
<div class="text-center mb-3">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-envelope text-green-600"></i>
</div>
<h3 class="font-semibold">Query Letter</h3>
</div>
<p class="text-sm text-gray-600 mb-3">A professional letter to agents and publishers introducing your work.</p>
<button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">Generate</button>
</div>
</div>
</div>
</div>
`;
break;
case 'Momentum':
contentArea.innerHTML = `
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">The Momentum Engine</h1>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-chart-line mr-2"></i> View Stats
</button>
<button class="px-4 py-2 bg-accent hover:bg-blue-500 text-white rounded-md text-sm font-medium flex items-center">
<i class="fas fa-trophy mr-2"></i> Achievements
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="lg:col-span-2">
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Director's Dashboard</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="bg-blue-50 rounded-lg p-4 text-center">
<div class="text-2xl font-bold">45,230</div>
<div class="text-sm text-gray-600">Words Written</div>
</div>
<div class="bg-green-50 rounded-lg p-4 text-center">
<div class="text-2xl font-bold">1,240</div>
<div class="text-sm text-gray-600">Today's Goal</div>
</div>
<div class="bg-purple-50 rounded-lg p-4 text-center">
<div class="text-2xl font-bold">7</div>
<div class="text-sm text-gray-600">Day Streak</div>
</div>
<div class="bg-yellow-50 rounded-lg p-4 text-center">
<div class="text-2xl font-bold">82%</div>
<div class="text-sm text-gray-600">Project Complete</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-semibold mb-3">Writing Progress</h3>
<div class="h-32">
<canvas id="progressChart"></canvas>
</div>
</div>
<div>
<h3 class="font-semibold mb-3">Daily Inspiration</h3>
<div class="bg-gray-50 rounded-lg p-4 italic">
"You fail only if you stop writing." - Ray Bradbury
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Writing Sprints</h2>
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium">Current Sprint</span>
<span class="text-sm font-medium">15 min</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between mt-2">
<span class="text-xs text-gray-600">Words: 342</span>
<span class="text-xs text-gray-600">Goal: 500</span>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Set New Sprint</label>
<div class="flex space-x-2">
<select class="border border-gray-300 rounded-md px-3 py-2 text-sm w-full">
<option>15 minutes</option>
<option>30 minutes</option>
<option>45 minutes</option>
<option>60 minutes</option>
</select>
<button class="bg-accent hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
Start
</button>
</div>
</div>
<div>
<h3 class="font-semibold mb-3">AI Encouragement</h3>
<div class="bg-blue-50 rounded-lg p-4">
<p class="text-sm">You're doing great! Keep going - you're 65% through your sprint. Remember, every word counts!</p>
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-5">
<h2 class="text-xl font-bold mb-4">Achievements</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-pen text-yellow-600 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">First Words</h3>
<p class="text-xs text-gray-600">Write your first 100 words</p>
</div>
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-fire text-blue-600 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">Streak Builder</h3>
<p class="text-xs text-gray-600">Write for 5 consecutive days</p>
</div>
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-book text-green-600 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">Chapter Master</h3>
<p class="text-xs text-gray-600">Complete your first chapter</p>
</div>
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-rocket text-purple-600 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">Novel Sprinter</h3>
<p class="text-xs text-gray-600">Write 10,000 words in a week</p>
</div>
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center opacity-50">
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-crown text-gray-400 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">Novel Completer</h3>
<p class="text-xs text-gray-600">Finish your first novel</p>
</div>
<div class="achievement-badge bg-gray-50 border border-gray-200 rounded-lg p-4 text-center opacity-50">
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-trophy text-gray-400 text-xl"></i>
</div>
<h3 class="font-semibold text-sm">Best Seller</h3>
<p class="text-xs text-gray-600">Get published traditionally</p>
</div>
</div>
</div>
</div>
`;
// Initialize chart for momentum tab
setTimeout(() => {
const canvas = document.getElementById('progressChart');
if (canvas) {
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// Draw a simple chart
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(50, 80);
ctx.lineTo(100, 60);
ctx.lineTo(150, 70);
ctx.lineTo(200, 50);
ctx.lineTo(250, 40);
ctx.lineTo(300, 30);
ctx.strokeStyle = '#4a90e2';
ctx.lineWidth = 2;
ctx.stroke();
// Draw points
const points = [
{x: 0, y: 100},
{x: 50, y: 80},
{x: 100, y: 60},
{x: 150, y: 70},
{x: 200, y: 50},
{x: 250, y: 40},
{x: 300, y: 30}
];
points.forEach(point => {
ctx.beginPath();
ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
ctx.fillStyle = '#4a90e2';
ctx.fill();
});
}
}, 100);
break;
}
}
// Initialize with Museion tab
updateContent('Museion');
</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/qwen-novel-writer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>