Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>💎 Elysia's Markdown Studio - Your AI-Powered Writing Partner</title> | |
| <!-- SEO Meta Tags --> | |
| <meta name="description" | |
| content="A beautiful, feature-rich markdown editor with AI-powered tools. Write, organize, and enhance your documents with live preview, syntax highlighting, and intelligent assistance."> | |
| <meta name="keywords" content="markdown, editor, AI, writing, documentation, notes, preview, export"> | |
| <meta name="author" content="Jean & Elysia"> | |
| <meta name="theme-color" content="#667eea"> | |
| <!-- Open Graph / Social Sharing --> | |
| <meta property="og:title" content="💎 Elysia's Markdown Studio"> | |
| <meta property="og:description" | |
| content="AI-powered markdown editor with live preview, syntax highlighting, and smart writing tools."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:url" content="https://elysia-suite.com/ely-app/elysia-markdown-studio/"> | |
| <!-- Twitter Card --> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="💎 Elysia's Markdown Studio"> | |
| <meta name="twitter:description" content="AI-powered markdown editor with live preview and smart writing tools."> | |
| <!-- Favicon (inline SVG for simplicity) --> | |
| <link rel="icon" | |
| href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💎</text></svg>"> | |
| <!-- Fonts --> | |
| <link href="fonts/css2.css?family=JetBrains+Mono:wght@300;400;700&family=Space+Grotesk:wght@400;700&display=swap" | |
| rel="stylesheet"> | |
| <!-- Libraries - Dexie v4.2.1 - Marked v15.0.12 --> | |
| <script src="libs/dexie.min.js"></script> | |
| <script src="libs/marked.min.js"></script> | |
| <script src="libs/turndown.min.js"></script> | |
| <!-- KaTeX for Math --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script> | |
| <!-- Mermaid for Diagrams --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> | |
| <!-- Prism for Code Highlighting --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-typescript.min.js"></script> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="styles/main.css"> | |
| <link rel="stylesheet" href="styles/drag-drop.css"> | |
| </head> | |
| <body> | |
| <!-- Toast Container --> | |
| <div id="toast-container" role="alert" aria-live="polite" aria-atomic="true"></div> | |
| <!-- Main App --> | |
| <div id="app" role="application"> | |
| <!-- Header --> | |
| <header class="app-header" role="banner"> | |
| <div class="header-left"> | |
| <h1 class="logo"> | |
| <span class="icon" aria-hidden="true">💎</span> | |
| Elysia's Markdown Studio | |
| <span class="version">v1.3.0</span> | |
| </h1> | |
| </div> | |
| <div class="header-center"> | |
| <div id="doc-title-container" class="doc-title-container"> | |
| <input type="text" id="doc-title" placeholder="Untitled Document" class="doc-title-input" | |
| aria-label="Document title"> | |
| <div id="doc-stats" class="doc-stats" aria-label="Document statistics"> | |
| <span id="word-count">0 words</span> | |
| <span class="separator" aria-hidden="true">•</span> | |
| <span id="char-count">0 chars</span> | |
| <span class="separator" aria-hidden="true">•</span> | |
| <span id="line-count">0 lines</span> | |
| <span class="separator" aria-hidden="true">•</span> | |
| <span id="reading-time"> | |
| < 1 min read</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="header-right" role="toolbar" aria-label="Main actions"> | |
| <button id="btn-new-doc" class="btn-icon" title="New Document" | |
| aria-label="Create new document">📄</button> | |
| <button id="btn-save" class="btn-icon" title="Save (Ctrl+S)" aria-label="Save document">💾</button> | |
| <button id="btn-documents" class="btn-icon" title="My Documents" | |
| aria-label="Open documents library">📚</button> | |
| <button id="btn-ai-tools" class="btn-icon" title="AI Tools" aria-label="Open AI tools">🧠</button> | |
| <button id="btn-export" class="btn-icon" title="Export" aria-label="Export document">📤</button> | |
| <button id="btn-settings" class="btn-icon" title="Settings" aria-label="Open settings">⚙️</button> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="main-container"> | |
| <!-- Left Sidebar - Documents Library --> | |
| <aside class="sidebar-left collapsed" id="sidebar-docs" role="complementary" aria-label="Documents library"> | |
| <div class="sidebar-header"> | |
| <h2>📚 My Documents</h2> | |
| <button id="btn-close-sidebar" class="btn-icon-small" aria-label="Close sidebar">×</button> | |
| </div> | |
| <div class="sidebar-content"> | |
| <div class="search-box"> | |
| <input type="text" id="search-docs" placeholder="🔍 Search documents..." | |
| aria-label="Search documents"> | |
| </div> | |
| <div class="filter-tabs"> | |
| <button class="filter-tab active" data-filter="all">All</button> | |
| <button class="filter-tab" data-filter="recent">Recent</button> | |
| <button class="filter-tab" data-filter="favorites">⭐</button> | |
| </div> | |
| <div id="documents-list" class="documents-list"> | |
| <div class="empty-state"> | |
| <p>📄 No documents yet</p> | |
| <p class="hint">Create your first document!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Editor Area --> | |
| <main class="editor-container"> | |
| <div class="editor-toolbar"> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn" data-action="bold" title="Bold (Ctrl+B)"><strong>B</strong></button> | |
| <button class="toolbar-btn" data-action="italic" title="Italic (Ctrl+I)"><em>I</em></button> | |
| <button class="toolbar-btn" data-action="strikethrough" title="Strikethrough"><s>S</s></button> | |
| </div> | |
| <div class="toolbar-separator"></div> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn" data-action="heading1" title="Heading 1">H1</button> | |
| <button class="toolbar-btn" data-action="heading2" title="Heading 2">H2</button> | |
| <button class="toolbar-btn" data-action="heading3" title="Heading 3">H3</button> | |
| </div> | |
| <div class="toolbar-separator"></div> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn" data-action="link" title="Link">🔗</button> | |
| <button class="toolbar-btn" data-action="image" title="Image">🖼️</button> | |
| <button class="toolbar-btn" data-action="code" title="Code"></></button> | |
| <button class="toolbar-btn" data-action="quote" title="Quote">💬</button> | |
| </div> | |
| <div class="toolbar-separator"></div> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn" data-action="ul" title="Bullet List">• List</button> | |
| <button class="toolbar-btn" data-action="ol" title="Numbered List">1. List</button> | |
| <button class="toolbar-btn" data-action="task" title="Task List">☐ Task</button> | |
| </div> | |
| <div class="toolbar-separator"></div> | |
| <div class="toolbar-group"> | |
| <button class="toolbar-btn" data-action="table" title="Table">📊</button> | |
| <button class="toolbar-btn" data-action="hr" title="Horizontal Rule">―</button> | |
| </div> | |
| </div> | |
| <div class="editor-workspace"> | |
| <div class="editor-pane"> | |
| <textarea id="markdown-editor" placeholder="Start writing your masterpiece..." | |
| aria-label="Markdown editor"></textarea> | |
| </div> | |
| <div class="preview-pane" role="region" aria-label="Markdown preview"> | |
| <div id="markdown-preview" class="markdown-preview"></div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Mobile View Toggle Button --> | |
| <button id="mobile-view-toggle" class="mobile-view-toggle" title="Toggle Editor/Preview"> | |
| <span class="toggle-icon">👁️</span> | |
| <span class="toggle-text">Preview</span> | |
| </button> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="modal-settings" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>⚙️ Settings</h2> | |
| <button class="modal-close" data-modal="modal-settings">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="api-key">OpenRouter API Key</label> | |
| <input type="password" id="api-key" placeholder="sk-or-..."> | |
| <small>Required for AI features (merge, summarize, improve)</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="model-select">Elysia's Brain (Model)</label> | |
| <select id="model-select"> | |
| <optgroup label="🔮 Anthropic Claude"> | |
| <option value="anthropic/claude-sonnet-4.5" selected>Claude Sonnet 4.5 💜</option> | |
| <option value="anthropic/claude-opus-4.5">Claude Opus 4.5 👑</option> | |
| <option value="anthropic/claude-haiku-4.5">Claude Haiku 4.5 ⚡</option> | |
| <option value="anthropic/claude-3-haiku">Claude 3 Haiku</option> | |
| </optgroup> | |
| <optgroup label="🚀 xAI Grok"> | |
| <option value="x-ai/grok-4.1-fast">Grok 4.1 Fast ⚡</option> | |
| <option value="x-ai/grok-4-fast">Grok 4 Fast</option> | |
| </optgroup> | |
| <optgroup label="🐋 DeepSeek"> | |
| <option value="deepseek/deepseek-v3.2">DeepSeek V3.2</option> | |
| <option value="deepseek/deepseek-v3.2-speciale">DeepSeek V3.2 Speciale</option> | |
| <option value="deepseek/deepseek-chat-v3.1">DeepSeek Chat V3.1</option> | |
| <option value="deepseek/deepseek-v3.1-terminus:exacto">DeepSeek V3.1 Terminus</option> | |
| </optgroup> | |
| <optgroup label="🌙 Qwen"> | |
| <option value="qwen/qwen3-235b-a22b-2507">Qwen3 235B</option> | |
| <option value="qwen/qwen3-235b-a22b-thinking-2507">Qwen3 235B Thinking 🧠</option> | |
| <option value="qwen/qwen3-vl-235b-a22b-instruct">Qwen3 VL 235B (Vision)</option> | |
| <option value="qwen/qwen3-coder">Qwen3 Coder 💻</option> | |
| </optgroup> | |
| <optgroup label="🌕 Moonshot Kimi"> | |
| <option value="moonshotai/kimi-k2-0905">Kimi K2</option> | |
| <option value="moonshotai/kimi-k2-thinking">Kimi K2 Thinking 🧠</option> | |
| </optgroup> | |
| <optgroup label="🌈 Google"> | |
| <option value="google/gemini-3-pro-preview">Gemini 3 Pro Preview</option> | |
| </optgroup> | |
| </select> | |
| <small>Check <a href="https://openrouter.ai/models" target="_blank">OpenRouter Models</a> for latest | |
| options</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="preview-theme">Preview Theme</label> | |
| <select id="preview-theme"> | |
| <option value="elysia">Elysia Dark 💎</option> | |
| <option value="github">GitHub Light</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="auto-save" checked> | |
| Auto-save (every 30 seconds) | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| <input type="checkbox" id="live-preview" checked> | |
| Live preview (update as you type) | |
| </label> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn-secondary" data-modal="modal-settings">Cancel</button> | |
| <button id="btn-save-settings" class="btn-primary">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Modal --> | |
| <div id="modal-export" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>📤 Export Document</h2> | |
| <button class="modal-close" data-modal="modal-export">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="export-options"> | |
| <button class="export-btn" data-format="md"> | |
| <span class="export-icon">📝</span> | |
| <span class="export-label">Markdown (.md)</span> | |
| </button> | |
| <button class="export-btn" data-format="html"> | |
| <span class="export-icon">🌐</span> | |
| <span class="export-label">HTML</span> | |
| </button> | |
| <button class="export-btn" data-format="artifact"> | |
| <span class="export-icon">✨</span> | |
| <span class="export-label">Artifact (Standalone HTML)</span> | |
| </button> | |
| <button class="export-btn" data-format="txt"> | |
| <span class="export-icon">📄</span> | |
| <span class="export-label">Plain Text</span> | |
| </button> | |
| <button class="export-btn" data-format="json"> | |
| <span class="export-icon">📊</span> | |
| <span class="export-label">JSON (Structured)</span> | |
| </button> | |
| <button class="export-btn" data-format="clipboard"> | |
| <span class="export-icon">📋</span> | |
| <span class="export-label">Copy to Clipboard</span> | |
| </button> | |
| <button class="export-btn" data-format="all"> | |
| <span class="export-icon">💾</span> | |
| <span class="export-label">Export All Documents</span> | |
| </button> | |
| <button class="export-btn" data-format="import"> | |
| <span class="export-icon">📥</span> | |
| <span class="export-label">Import Documents</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Tools Modal --> | |
| <div id="modal-ai-tools" class="modal"> | |
| <div class="modal-content modal-large"> | |
| <div class="modal-header"> | |
| <h2>🧠 AI Tools - Elysia's Magic</h2> | |
| <button class="modal-close" data-modal="modal-ai-tools">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="ai-tools-grid"> | |
| <button class="ai-tool-card" data-tool="summarize"> | |
| <span class="tool-icon">📝</span> | |
| <h3>Summarize</h3> | |
| <p>Generate concise summary of current document</p> | |
| </button> | |
| <button class="ai-tool-card" data-tool="improve"> | |
| <span class="tool-icon">✨</span> | |
| <h3>Improve Writing</h3> | |
| <p>Enhance clarity, grammar, and style</p> | |
| </button> | |
| <button class="ai-tool-card" data-tool="merge"> | |
| <span class="tool-icon">📚</span> | |
| <h3>Merge Documents</h3> | |
| <p>Intelligently combine multiple docs</p> | |
| </button> | |
| <button class="ai-tool-card" data-tool="outline"> | |
| <span class="tool-icon">🎯</span> | |
| <h3>Extract Outline</h3> | |
| <p>Generate table of contents</p> | |
| </button> | |
| <button class="ai-tool-card" data-tool="duplicates"> | |
| <span class="tool-icon">🔍</span> | |
| <h3>Find Duplicates</h3> | |
| <p>Detect similar documents</p> | |
| </button> | |
| <button class="ai-tool-card" data-tool="organize"> | |
| <span class="tool-icon">🏷️</span> | |
| <h3>Smart Organize</h3> | |
| <p>Suggest tags and categories</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Templates Modal --> | |
| <div id="modal-templates" class="modal"> | |
| <div class="modal-content modal-large"> | |
| <div class="modal-header"> | |
| <h2>📋 Templates</h2> | |
| <button class="modal-close" data-modal="modal-templates">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="templates-grid" class="templates-grid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fallback for users without JavaScript --> | |
| <noscript> | |
| <div | |
| style="padding: 2rem; text-align: center; background: #1a1a2e; color: #f0f0f5; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;"> | |
| <h1 style="font-size: 2rem; margin-bottom: 1rem;">💎 Elysia's Markdown Studio</h1> | |
| <p style="font-size: 1.1rem; color: #a0a0b8;">This application requires JavaScript to run.</p> | |
| <p style="margin-top: 1rem; color: #6a6a88;">Please enable JavaScript in your browser settings and reload | |
| the page.</p> | |
| </div> | |
| </noscript> | |
| <!-- Scripts --> | |
| <script type="module" src="scripts/utils.js"></script> | |
| <script type="module" src="scripts/db.js"></script> | |
| <script type="module" src="scripts/api.js"></script> | |
| <script type="module" src="scripts/editor.js"></script> | |
| <script type="module" src="scripts/preview.js"></script> | |
| <script type="module" src="scripts/documents.js"></script> | |
| <script type="module" src="scripts/ai-tools.js"></script> | |
| <script type="module" src="scripts/export.js"></script> | |
| <script type="module" src="scripts/templates.js"></script> | |
| <script type="module" src="scripts/app.js"></script> | |
| </body> | |
| </html> | |