|
|
<!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>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
<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/">
|
|
|
|
|
|
|
|
|
<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.">
|
|
|
|
|
|
|
|
|
<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>">
|
|
|
|
|
|
|
|
|
<link href="fonts/css2.css?family=JetBrains+Mono:wght@300;400;700&family=Space+Grotesk:wght@400;700&display=swap"
|
|
|
rel="stylesheet">
|
|
|
|
|
|
|
|
|
<script src="libs/dexie.min.js"></script>
|
|
|
<script src="libs/marked.min.js"></script>
|
|
|
<script src="libs/turndown.min.js"></script>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
|
<link rel="stylesheet" href="styles/drag-drop.css">
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="toast-container" role="alert" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
|
|
|
|
|
<div id="app" role="application">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div class="main-container">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
