Spaces:

Elysia-Suite
/

elysia-markdown-studio

Running

File size: 20,954 Bytes

0b194e5

<!DOCTYPE html>
<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">&lt;/&gt;</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>