Spaces:
Running
Running
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: The "Ethereal Scrapbook" The app’s design is guided by an "Ethereal Scrapbook" aesthetic, creating a beautiful, calming, and highly personal workspace that is both modern and inspiring. * Layout and Feel: The overall layout is clean and spacious. Your projects and ideas are presented on a dashboard as floating cards with soft shadows and 90-degree corners, creating an organized yet visually rich hub. The background has a subtle grainy texture with soft, blurry elements to create a sense of depth. * Intelligent Writing Interface: Inside the editor, the design provides direct visual feedback on your text. Complex sentences are softly highlighted in one color, and difficult passages in another, giving you at-a-glance insights into your prose without being distracting. * Seamless AI and Command Tools: When you need to perform an action quickly, a minimal command palette appears with a translucent "frosted glass" effect, allowing you to see your work behind it. The AI Assistant lives in a clean side panel with a conversational interface and elegant, pill-shaped menus for its suggestions. * Elegant Themes and Colors: The app features beautiful light and dark modes. The aesthetic adapts smoothly, using a palette of soft pastels, creamy whites, and muted earth tones. The design makes use of gentle gradients and transparent surfaces to create a layered, polished, and comfortable experience in either theme. 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
1ab9902
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Novel Director - Your Creative Assistant</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap'); | |
| :root { | |
| --primary-50: #fdfcfa; | |
| --primary-100: #f9f7f4; | |
| --primary-200: #f3f0eb; | |
| --primary-300: #ebe6df; | |
| --primary-400: #e1dad0; | |
| --primary-500: #d4ccc2; | |
| --primary-600: #c5b9ab; | |
| --primary-700: #b3a390; | |
| --primary-800: #9d8b73; | |
| --primary-900: #7a6b56; | |
| --accent-50: #fef7f0; | |
| --accent-100: #fdeadd; | |
| --accent-200: #fad4ba; | |
| --accent-300: #f6b691; | |
| --accent-400: #f09360; | |
| --accent-500: #e8753a; | |
| --accent-600: #d45c2a; | |
| --accent-700: #b14521; | |
| --accent-800: #8f3722; | |
| --accent-900: #742f21; | |
| --text-primary: #2c2a29; | |
| --text-secondary: #6b6866; | |
| --text-muted: #a19c99; | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--primary-50); | |
| color: var(--text-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .serif { | |
| font-family: 'Crimson Text', serif; | |
| } | |
| .grain-texture { | |
| background-image: | |
| radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(255, 177, 153, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.05) 0%, transparent 50%); | |
| } | |
| .frosted-glass { | |
| backdrop-filter: blur(20px); | |
| background: rgba(255, 255, 255, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .dark .frosted-glass { | |
| background: rgba(30, 30, 30, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .floating-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| box-shadow: var(--shadow-lg); | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .floating-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .dark .floating-card { | |
| background: rgba(45, 45, 45, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--accent-500), var(--accent-700)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .command-palette { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 90%; | |
| max-width: 600px; | |
| max-height: 400px; | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .command-palette.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .project-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .inspiration-item { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .inspiration-item:hover { | |
| transform: scale(1.02); | |
| } | |
| .constellation-dot { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background: var(--accent-500); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .constellation-dot:hover { | |
| transform: scale(1.5); | |
| box-shadow: 0 0 20px var(--accent-500); | |
| } | |
| .constellation-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--accent-500), transparent); | |
| transform-origin: left center; | |
| opacity: 0.5; | |
| } | |
| .writing-stats { | |
| background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| } | |
| .achievement-badge { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 2rem; | |
| box-shadow: var(--shadow-lg); | |
| transition: all 0.3s ease; | |
| } | |
| .achievement-badge:hover { | |
| transform: rotate(10deg) scale(1.1); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| stroke: var(--accent-500); | |
| stroke-width: 4; | |
| fill: transparent; | |
| } | |
| .editor-container { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 1rem; | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| } | |
| .dark .editor-container { | |
| background: rgba(30, 30, 30, 0.95); | |
| } | |
| .ai-assistant-panel { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-left: 1px solid rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .dark .ai-assistant-panel { | |
| background: rgba(45, 45, 45, 0.9); | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| width: 50px; | |
| height: 20px; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: var(--accent-500); | |
| margin-right: 3px; | |
| animation: typing 1.4s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } | |
| .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes typing { | |
| 0%, 80%, 100% { | |
| transform: scale(0.8); | |
| opacity: 0.5; | |
| } | |
| 40% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(-100%); } | |
| to { transform: translateX(0); } | |
| } | |
| .constellation-container { | |
| position: relative; | |
| width: 100%; | |
| height: 400px; | |
| background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 2rem; | |
| border-left: 2px solid var(--accent-500); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -6px; | |
| top: 0; | |
| width: 10px; | |
| height: 10px; | |
| background: var(--accent-500); | |
| border-radius: 50%; | |
| } | |
| .outline-item { | |
| background: rgba(255, 255, 255, 0.7); | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| margin: 0.5rem 0; | |
| cursor: move; | |
| transition: all 0.3s ease; | |
| } | |
| .outline-item:hover { | |
| background: rgba(255, 255, 255, 0.9); | |
| transform: translateX(5px); | |
| } | |
| .character-card { | |
| background: linear-gradient(135deg, var(--primary-100), var(--primary-200)); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .character-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100px; | |
| height: 100px; | |
| background: radial-gradient(circle, var(--accent-200), transparent); | |
| border-radius: 50%; | |
| transform: translate(30px, -30px); | |
| } | |
| .writing-sprint { | |
| background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); | |
| color: white; | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| z-index: 999; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-backdrop.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body class="grain-texture"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 frosted-glass border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-xl font-bold gradient-text">AI Novel Director</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <i data-lucide="moon" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| </button> | |
| <button id="openCommandPalette" class="p-2 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <i data-lucide="command" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Dashboard Header --> | |
| <div class="mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome back, Director</h2> | |
| <p class="text-gray-600">Your creative workspace awaits. Let's craft something extraordinary.</p> | |
| </div> | |
| <!-- Writing Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <div class="writing-stats"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-600">Today's Words</p> | |
| <p class="text-2xl font-bold">1,247</p> | |
| </div> | |
| <i data-lucide="pen-tool" class="w-8 h-8 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="writing-stats"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-600">Writing Streak</p> | |
| <p class="text-2xl font-bold">12 days</p> | |
| </div> | |
| <i data-lucide="flame" class="w-8 h-8 text-orange-500"></i> | |
| </div> | |
| </div> | |
| <div class="writing-stats"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-600">Project Progress</p> | |
| <p class="text-2xl font-bold">68%</p> | |
| </div> | |
| <svg class="w-8 h-8"> | |
| <circle class="progress-ring__circle" stroke-dasharray="126" stroke-dashoffset="40"></circle> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="writing-stats"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-600">AI Suggestions</p> | |
| <p class="text-2xl font-bold">42</p> | |
| </div> | |
| <i data-lucide="sparkles" class="w-8 h-8 text-purple-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Grid --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl font-semibold">Your Projects</h3> | |
| <button id="newProjectBtn" class="px-4 py-2 bg-gradient-to-r from-orange-400 to-orange-600 text-white rounded-lg hover:from-orange-500 hover:to-orange-700 transition-all"> | |
| <i data-lucide="plus" class="w-4 h-4 inline mr-2"></i> | |
| New Project | |
| </button> | |
| </div> | |
| <div class="project-grid"> | |
| <div class="floating-card rounded-xl p-6"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-2">The Last Ember</h4> | |
| <p class="text-gray-600 text-sm">Fantasy • 45,678 words</p> | |
| </div> | |
| <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-400 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="book" class="w-6 h-6 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-400 to-pink-400 h-2 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Last edited: 2 hours ago</span> | |
| <button class="text-purple-600 hover:text-purple-700">Continue →</button> | |
| </div> | |
| </div> | |
| <div class="floating-card rounded-xl p-6"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-2">Neon Dreams</h4> | |
| <p class="text-gray-600 text-sm">Sci-Fi • 23,445 words</p> | |
| </div> | |
| <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="rocket" class="w-6 h-6 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-cyan-400 h-2 rounded-full" style="width: 34%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Last edited: 1 day ago</span> | |
| <button class="text-blue-600 hover:text-blue-700">Continue →</button> | |
| </div> | |
| </div> | |
| <div class="floating-card rounded-xl p-6"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-2">Whispers in the Fog</h4> | |
| <p class="text-gray-600 text-sm">Mystery • 12,890 words</p> | |
| </div> | |
| <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-teal-400 rounded-lg flex items-center justify-center"> | |
| <i data-lucide="search" class="w-6 h-6 text-white"></i> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-green-400 to-teal-400 h-2 rounded-full" style="width: 19%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Last edited: 3 days ago</span> | |
| <button class="text-green-600 hover:text-green-700">Continue →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Inspiration Engine --> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-semibold mb-4">The Museion - Inspiration Board</h3> | |
| <div class="floating-card rounded-xl p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-3">Recent Ideas</h4> | |
| <div class="space-y-3"> | |
| <div class="inspiration-item floating-card rounded-lg p-4"> | |
| <p class="text-sm text-gray-600">Character concept</p> | |
| <p class="font-medium">A librarian who can read memories from books</p> | |
| </div> | |
| <div class="inspiration-item floating-card rounded-lg p-4"> | |
| <p class="text-sm text-gray-600">Plot twist</p> | |
| <p class="font-medium">The mentor was actually the villain's twin brother</p> | |
| </div> | |
| <div class="inspiration-item floating-card rounded-lg p-4"> | |
| <p class="text-sm text-gray-600">Setting description</p> | |
| <p class="font-medium">A city where shadows have their own consciousness</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-3">Constellation View</h4> | |
| <div class="constellation-container"> | |
| <!-- Constellation dots will be dynamically added --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Writing Sprint --> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-semibold mb-4">Writing Sprint</h3> | |
| <div class="writing-sprint"> | |
| <h4 class="text-2xl font-bold mb-2">Ready for a sprint?</h4> | |
| <p class="mb-4 opacity-90">Set your goal and let's write together!</p> | |
| <div class="flex items-center justify-center space-x-4"> | |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all"> | |
| 15 min | |
| </button> | |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all"> | |
| 500 words | |
| </button> | |
| <button class="px-6 py-3 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all"> | |
| 1000 words | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Achievements --> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-semibold mb-4">Recent Achievements</h3> | |
| <div class="flex space-x-4"> | |
| <div class="text-center"> | |
| <div class="achievement-badge"> | |
| <i data-lucide="award" class="w-8 h-8"></i> | |
| </div> | |
| <p class="text-sm mt-2">First Chapter</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="achievement-badge"> | |
| <i data-lucide="zap" class="w-8 h-8"></i> | |
| </div> | |
| <p class="text-sm mt-2">Writing Streak</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="achievement-badge"> | |
| <i data-lucide="star" class="w-8 h-8"></i> | |
| </div> | |
| <p class="text-sm mt-2">AI Master</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Command Palette --> | |
| <div class="command-palette frosted-glass rounded-xl shadow-2xl"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <input type="text" placeholder="Type a command or search..." class="w-full bg-transparent text-lg outline-none" autofocus> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-2"> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i data-lucide="file-plus" class="w-5 h-5"></i> | |
| <span>New Project</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i data-lucide="edit-3" class="w-5 h-5"></i> | |
| <span>Open Last Project</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i data-lucide="sparkles" class="w-5 h-5"></i> | |
| <span>Generate Idea</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal Backdrop --> | |
| <div class="modal-backdrop"></div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| if (html.classList.contains('dark')) { | |
| themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>'; | |
| } else { | |
| themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>'; | |
| } | |
| lucide.createIcons(); | |
| }); | |
| // Command Palette | |
| const openCommandBtn = document.getElementById('openCommandPalette'); | |
| const commandPalette = document.querySelector('.command-palette'); | |
| const modalBackdrop = document.querySelector('.modal-backdrop'); | |
| openCommandBtn.addEventListener('click', () => { | |
| commandPalette.classList.add('active'); | |
| modalBackdrop.classList.add('active'); | |
| }); | |
| modalBackdrop.addEventListener('click', () => { | |
| commandPalette.classList.remove('active'); | |
| modalBackdrop.classList.remove('active'); | |
| }); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.ctrlKey && e.key === 'k') { | |
| e.preventDefault(); | |
| commandPalette.classList.add('active'); | |
| modalBackdrop.classList.add('active'); | |
| } | |
| if (e.key === 'Escape') { | |
| commandPalette.classList.remove('active'); | |
| modalBackdrop.classList.remove('active'); | |
| } | |
| }); | |
| // Generate Constellation | |
| function generateConstellation() { | |
| const container = document.querySelector('.constellation-container'); | |
| const dots = []; | |
| // Generate random dots | |
| for (let i = 0; i < 15; i++) { | |
| const dot = document.createElement('div'); | |
| dot.className = 'constellation-dot'; | |
| dot.style.left = Math.random() * 90 + '%'; | |
| dot.style.top = Math.random() * 90 + '%'; | |
| container.appendChild(dot); | |
| dots.push(dot); | |
| } | |
| // Connect nearby dots | |
| dots.forEach((dot1, i) => { | |
| dots.forEach((dot2, j) => { | |
| if (i < j) { | |
| const rect1 = dot1.getBoundingClientRect(); | |
| const rect2 = dot2.getBoundingClientRect(); | |
| const distance = Math.sqrt( | |
| Math.pow(rect2.left - rect1.left, 2) + | |
| Math.pow(rect2.top - rect1.top, 2) | |
| ); | |
| if (distance < 100) { | |
| const line = document.createElement('div'); | |
| line.className = 'constellation-line'; | |
| const angle = Math.atan2(rect2.top - rect1.top, rect2.left - rect1.left); | |
| line.style.width = distance + 'px'; | |
| line.style.left = rect1.left - container.getBoundingClientRect().left + 'px'; | |
| line.style.top = rect1.top - container.getBoundingClientRect().top + 'px'; | |
| line.style.transform = `rotate(${angle}rad)`; | |
| container.appendChild(line); | |
| } | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize constellation | |
| generateConstellation(); | |
| // Add hover effects to cards | |
| document.querySelectorAll('.floating-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-2px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // Simulate AI typing | |
| function simulateAITyping() { | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'typing-indicator'; | |
| typingIndicator.innerHTML = '<span></span><span></span><span></span>'; | |
| // This would be appended to chat messages | |
| } | |
| // New Project Modal | |
| const newProjectBtn = document.getElementById('newProjectBtn'); | |
| newProjectBtn.addEventListener('click', () => { | |
| // Create and show modal for new project | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="floating-card rounded-xl p-8 max-w-md w-full mx-4"> | |
| <h3 class="text-2xl font-bold mb-4">Create New Project</h3> | |
| <input type="text" placeholder="Project title..." class="w-full p-3 border rounded-lg mb-4"> | |
| <select class="w-full p-3 border rounded-lg mb-4"> | |
| <option>Choose genre...</option> | |
| <option>Fantasy</option> | |
| <option>Science Fiction</option> | |
| <option>Mystery</option> | |
| <option>Romance</option> | |
| <option>Thriller</option> | |
| </select> | |
| <textarea placeholder="Brief description..." class="w-full p-3 border rounded-lg mb-4 h-24"></textarea> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</button> | |
| <button class="px-6 py-2 bg-gradient-to-r from-orange-400 to-orange-600 text-white rounded-lg"> | |
| Create Project | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) modal.remove(); | |
| }); | |
| }); | |
| </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/kimi-novel-writer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |