Spaces:

Felguk
/

Markview

Running

File size: 24,198 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MarkView - Markdown Preview</title>
    <style>
        /* Vercel-like font */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #000; /* Dark theme background */
            color: #eaeaea; /* Light text for dark theme */
        }

        /* Container for the editor and preview */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Header with logo */
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            margin-right: 10px;
        }

        .logo span {
            color: #0070f3; /* Vercel-like blue accent */
        }

        /* Command dropdown */
        .command-dropdown {
            margin-bottom: 20px;
        }

        .command-dropdown select {
            width: 100%;
            padding: 10px;
            border: 1px solid #333;
            border-radius: 4px;
            background-color: #000;
            color: #eaeaea;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            outline: none;
            cursor: pointer;
        }

        .command-dropdown select:focus {
            border-color: #0070f3;
            box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1);
        }

        /* Playground modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: #111;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
        }

        .modal-content h2 {
            margin-top: 0;
            color: #fff;
        }

        .modal-content label {
            display: block;
            margin-bottom: 10px;
            color: #eaeaea;
        }

        .modal-content input,
        .modal-content select,
        .modal-content textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #333;
            border-radius: 4px;
            background-color: #000;
            color: #eaeaea;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            outline: none;
            margin-bottom: 20px;
        }

        .modal-content button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #0070f3;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            cursor: pointer;
        }

        .modal-content button:hover {
            background-color: #005bb5;
        }

        /* Editor and Preview sections */
        .editor, .preview {
            background-color: #111; /* Darker background for sections */
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #333;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace; /* Monospace font for code */
            font-size: 14px;
            background-color: #000;
            color: #eaeaea;
            resize: vertical;
            outline: none;
        }

        textarea:focus {
            border-color: #0070f3;
            box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.1);
        }

        /* Preview styling */
        .preview {
            color: #eaeaea;
        }

        .preview h1, .preview h2, .preview h3 {
            margin-top: 0;
            color: #fff;
        }

        .preview code {
            background-color: #333;
            padding: 2px 4px;
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            color: #eaeaea;
        }

        .preview pre {
            background-color: #333;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }

        .preview blockquote {
            border-left: 4px solid #0070f3;
            padding-left: 10px;
            color: #999;
            margin: 0;
        }

        .preview a {
            color: #0070f3;
            text-decoration: none;
        }

        .preview a:hover {
            text-decoration: underline;
        }

        /* Badge styling */
        .preview img {
            margin: 5px;
        }
    </style>
    <!-- Load Inter font from Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Load JetBrains Mono font for code -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>

    <div class="container">
        <!-- Header with logo -->
        <div class="header">
            <div class="logo">
                Mark<span>View</span>
            </div>
        </div>

        <!-- Command dropdown -->
        <div class="command-dropdown">
            <select id="command-select">
                <option value="">Select a command...</option>
                <option value="/badge">Create a Badge</option>
                <option value="/links">Links and Media</option>
                <option value="/blocks">Blocks</option>
                <option value="/lists">Lists</option>
                <option value="/headings">Headings</option>
                <option value="/text">Text Formatting</option>
                <option value="/tables">Tables</option>
                <option value="/tasks">Task Lists</option>
                <option value="/hr">Horizontal Rule</option>
                <option value="/emoji">Emojis</option>
                <option value="/mention">Mentions</option>
            </select>
        </div>

        <!-- Editor section -->
        <div class="editor">
            <textarea id="markdown-input" placeholder="Write your Markdown here..."># Welcome to MarkView
**Markdown Preview** with a *dark theme*.

- List item 1
- List item 2

`Inline code`

```javascript
function hello() {
    console.log('Hello, MarkView!');
}
```</textarea>
        </div>

        <!-- Preview section -->
        <div class="preview" id="markdown-preview">
            <!-- Preview will be rendered here -->
        </div>
    </div>

    <!-- Playground modals -->
    <!-- Badge Modal -->
<div class="modal" id="badge-modal">
    <div class="modal-content">
        <h2>Create a Badge</h2>
        <label for="badge-label">Label:</label>
        <input type="text" id="badge-label" placeholder="e.g., version">
        <label for="badge-message">Message:</label>
        <input type="text" id="badge-message" placeholder="e.g., v1.0">
        <label for="badge-color">Color:</label>
        <input type="text" id="badge-color" placeholder="e.g., blue">
        <label for="badge-icon">Icon:</label>
        <select id="badge-icon">
            <option value="">No Icon</option>
            <option value="github">GitHub</option>
            <option value="npm">npm</option>
            <option value="docker">Docker</option>
            <option value="python">Python</option>
            <option value="javascript">JavaScript</option>
            <option value="react">React</option>
            <option value="vue">Vue</option>
            <option value="angular">Angular</option>
            <option value="apple">Apple</option>
            <option value="windows">Windows</option>
            <option value="v0">v0</option>
            <option value="huggingface">huggingface</option>
            <option value="replicate">replicate</option>
            <option value="vercel">vercel</option>
            <option value="fal">fal</option>
            <option value="google">google</option>
            <option value="claude">claude</option>
            <option value="gemini">gemini</option>
            <option value="qwen">qwen</option>
            <option value="deepseek">deepseek</option>
        </select>
        <!-- Add URL input field -->
        <label for="badge-url">Link URL (optional):</label>
        <input type="text" id="badge-url" placeholder="e.g., https://example.com">
        <button id="insert-badge">Insert Badge</button>
    </div>
</div>

    <!-- Links and Media Modal -->
    <div class="modal" id="links-modal">
        <div class="modal-content">
            <h2>Links and Media</h2>
            <label for="link-text">Link Text:</label>
            <input type="text" id="link-text" placeholder="e.g., Google">
            <label for="link-url">URL:</label>
            <input type="text" id="link-url" placeholder="e.g., https://google.com">
            <label for="image-url">Image URL:</label>
            <input type="text" id="image-url" placeholder="e.g., https://example.com/image.png">
            <button id="insert-link">Insert Link</button>
            <button id="insert-image">Insert Image</button>
        </div>
    </div>

    <!-- Blocks Modal -->
    <div class="modal" id="blocks-modal">
        <div class="modal-content">
            <h2>Blocks</h2>
            <label for="block-type">Block Type:</label>
            <select id="block-type">
                <option value="code">Code Block</option>
                <option value="quote">Blockquote</option>
            </select>
            <label for="block-content">Content:</label>
            <textarea id="block-content" placeholder="Enter your content..."></textarea>
            <button id="insert-block">Insert Block</button>
        </div>
    </div>

    <!-- Lists Modal -->
    <div class="modal" id="lists-modal">
        <div class="modal-content">
            <h2>Lists</h2>
            <label for="list-type">List Type:</label>
            <select id="list-type">
                <option value="unordered">Unordered List</option>
                <option value="ordered">Ordered List</option>
            </select>
            <label for="list-items">Items (one per line):</label>
            <textarea id="list-items" placeholder="Enter items..."></textarea>
            <button id="insert-list">Insert List</button>
        </div>
    </div>

    <!-- Headings Modal -->
    <div class="modal" id="headings-modal">
        <div class="modal-content">
            <h2>Headings</h2>
            <label for="heading-level">Heading Level:</label>
            <select id="heading-level">
                <option value="1">Heading 1 (#)</option>
                <option value="2">Heading 2 (##)</option>
                <option value="3">Heading 3 (###)</option>
                <option value="4">Heading 4 (####)</option>
                <option value="5">Heading 5 (#####)</option>
                <option value="6">Heading 6 (######)</option>
            </select>
            <label for="heading-text">Text:</label>
            <input type="text" id="heading-text" placeholder="e.g., My Heading">
            <button id="insert-heading">Insert Heading</button>
        </div>
    </div>

    <!-- Text Formatting Modal -->
    <div class="modal" id="text-modal">
        <div class="modal-content">
            <h2>Text Formatting</h2>
            <label for="text-content">Text:</label>
            <input type="text" id="text-content" placeholder="e.g., Hello, World!">
            <label for="text-format">Format:</label>
            <select id="text-format">
                <option value="bold">Bold (**)</option>
                <option value="italic">Italic (*)</option>
                <option value="strikethrough">Strikethrough (~~)</option>
                <option value="inline-code">Inline Code (`)</option>
            </select>
            <button id="insert-text">Insert Text</button>
        </div>
    </div>

    <!-- Tables Modal -->
    <div class="modal" id="tables-modal">
        <div class="modal-content">
            <h2>Tables</h2>
            <label for="table-headers">Headers (comma-separated):</label>
            <input type="text" id="table-headers" placeholder="e.g., Name, Age, City">
            <label for="table-rows">Rows (one per line, comma-separated):</label>
            <textarea id="table-rows" placeholder="e.g., John, 25, New York"></textarea>
            <button id="insert-table">Insert Table</button>
        </div>
    </div>

    <!-- Task Lists Modal -->
    <div class="modal" id="tasks-modal">
        <div class="modal-content">
            <h2>Task Lists</h2>
            <label for="task-items">Tasks (one per line):</label>
            <textarea id="task-items" placeholder="e.g., [x] Task 1"></textarea>
            <button id="insert-tasks">Insert Tasks</button>
        </div>
    </div>

    <!-- Horizontal Rule Modal -->
    <div class="modal" id="hr-modal">
        <div class="modal-content">
            <h2>Horizontal Rule</h2>
            <p>Insert a horizontal rule:</p>
            <button id="insert-hr">Insert Horizontal Rule</button>
        </div>
    </div>

    <!-- Emojis Modal -->
    <div class="modal" id="emoji-modal">
        <div class="modal-content">
            <h2>Emojis</h2>
            <label for="emoji">Select an Emoji:</label>
            <select id="emoji">
                <option value="😀">😀 Grinning Face</option>
                <option value="🚀">🚀 Rocket</option>
                <option value="❤️">❤️ Heart</option>
                <option value="🌟">🌟 Star</option>
                <option value="🔥">🔥 Fire</option>
            </select>
            <button id="insert-emoji">Insert Emoji</button>
        </div>
    </div>

    <!-- Mentions Modal -->
    <div class="modal" id="mention-modal">
        <div class="modal-content">
            <h2>Mentions</h2>
            <label for="mention-username">Username:</label>
            <input type="text" id="mention-username" placeholder="e.g., octocat">
            <button id="insert-mention">Insert Mention</button>
        </div>
    </div>

    <!-- Marked.js for Markdown parsing -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        const input = document.getElementById('markdown-input');
        const preview = document.getElementById('markdown-preview');
        const commandSelect = document.getElementById('command-select');

        // Function to update the Markdown preview
        function updatePreview() {
            const markdownText = input.value;
            preview.innerHTML = marked.parse(markdownText);
        }

        // Function to show a modal
        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.style.display = 'flex';
        }

        // Function to hide a modal
        function hideModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.style.display = 'none';
        }

        // Function to insert a badge
function insertBadge() {
    const label = document.getElementById('badge-label').value || 'label';
    const message = document.getElementById('badge-message').value || 'message';
    const color = document.getElementById('badge-color').value || 'blue';
    const icon = document.getElementById('badge-icon').value;
    const url = document.getElementById('badge-url').value; // Get the URL

    let badgeUrl = `https://img.shields.io/badge/${encodeURIComponent(label)}-${encodeURIComponent(message)}-${color}`;
    if (icon) {
        badgeUrl += `?logo=${icon}`;
    }

    // Create the badge Markdown
    let badgeMarkdown = `![${label}](${badgeUrl})`;

    // If a URL is provided, wrap the badge in a link
    if (url) {
        badgeMarkdown = `[${badgeMarkdown}](${url})`;
    }

    // Insert the badge into the editor
    input.value += `\n${badgeMarkdown}`;
    updatePreview();
    hideModal('badge-modal');
}

        // Function to insert a link
        function insertLink() {
            const text = document.getElementById('link-text').value || 'Link';
            const url = document.getElementById('link-url').value || '#';
            const linkMarkdown = `[${text}](${url})`;

            input.value += `\n${linkMarkdown}`;
            updatePreview();
            hideModal('links-modal');
        }

        // Function to insert an image
        function insertImage() {
            const url = document.getElementById('image-url').value || '#';
            const imageMarkdown = `![](${url})`;

            input.value += `\n${imageMarkdown}`;
            updatePreview();
            hideModal('links-modal');
        }

        // Function to insert a block
        function insertBlock() {
            const type = document.getElementById('block-type').value;
            const content = document.getElementById('block-content').value;

            let blockMarkdown = '';
            if (type === 'code') {
                blockMarkdown = `\`\`\`\n${content}\n\`\`\``;
            } else if (type === 'quote') {
                blockMarkdown = `> ${content}`;
            }

            input.value += `\n${blockMarkdown}`;
            updatePreview();
            hideModal('blocks-modal');
        }

        // Function to insert a list
        function insertList() {
            const type = document.getElementById('list-type').value;
            const items = document.getElementById('list-items').value.split('\n').filter(item => item.trim() !== '');

            let listMarkdown = '';
            if (type === 'unordered') {
                listMarkdown = items.map(item => `- ${item}`).join('\n');
            } else if (type === 'ordered') {
                listMarkdown = items.map((item, index) => `${index + 1}. ${item}`).join('\n');
            }

            input.value += `\n${listMarkdown}`;
            updatePreview();
            hideModal('lists-modal');
        }

        // Function to insert a heading
        function insertHeading() {
            const level = document.getElementById('heading-level').value;
            const text = document.getElementById('heading-text').value || 'Heading';

            const headingMarkdown = `${'#'.repeat(level)} ${text}`;

            input.value += `\n${headingMarkdown}`;
            updatePreview();
            hideModal('headings-modal');
        }

        // Function to insert formatted text
        function insertText() {
            const content = document.getElementById('text-content').value || 'Text';
            const format = document.getElementById('text-format').value;

            let formattedText = '';
            if (format === 'bold') {
                formattedText = `**${content}**`;
            } else if (format === 'italic') {
                formattedText = `*${content}*`;
            } else if (format === 'strikethrough') {
                formattedText = `~~${content}~~`;
            } else if (format === 'inline-code') {
                formattedText = `\`${content}\``;
            }

            input.value += `\n${formattedText}`;
            updatePreview();
            hideModal('text-modal');
        }

        // Function to insert a table
        function insertTable() {
            const headers = document.getElementById('table-headers').value.split(',').map(header => header.trim());
            const rows = document.getElementById('table-rows').value.split('\n').map(row => row.split(',').map(cell => cell.trim()));

            let tableMarkdown = `| ${headers.join(' | ')} |\n`;
            tableMarkdown += `| ${headers.map(() => '---').join(' | ')} |\n`;
            rows.forEach(row => {
                tableMarkdown += `| ${row.join(' | ')} |\n`;
            });

            input.value += `\n${tableMarkdown}`;
            updatePreview();
            hideModal('tables-modal');
        }

        // Function to insert task lists
        function insertTasks() {
            const tasks = document.getElementById('task-items').value.split('\n').filter(task => task.trim() !== '');

            const tasksMarkdown = tasks.map(task => `- ${task}`).join('\n');

            input.value += `\n${tasksMarkdown}`;
            updatePreview();
            hideModal('tasks-modal');
        }

        // Function to insert a horizontal rule
        function insertHR() {
            input.value += `\n---\n`;
            updatePreview();
            hideModal('hr-modal');
        }

        // Function to insert an emoji
        function insertEmoji() {
            const emoji = document.getElementById('emoji').value;
            input.value += `\n${emoji}`;
            updatePreview();
            hideModal('emoji-modal');
        }

        // Function to insert a mention
        function insertMention() {
            const username = document.getElementById('mention-username').value || 'username';
            input.value += `\n@${username}`;
            updatePreview();
            hideModal('mention-modal');
        }

        // Event listeners
        input.addEventListener('input', updatePreview);
        commandSelect.addEventListener('change', (e) => {
            const command = e.target.value;
            if (command === '/badge') {
                showModal('badge-modal');
            } else if (command === '/links') {
                showModal('links-modal');
            } else if (command === '/blocks') {
                showModal('blocks-modal');
            } else if (command === '/lists') {
                showModal('lists-modal');
            } else if (command === '/headings') {
                showModal('headings-modal');
            } else if (command === '/text') {
                showModal('text-modal');
            } else if (command === '/tables') {
                showModal('tables-modal');
            } else if (command === '/tasks') {
                showModal('tasks-modal');
            } else if (command === '/hr') {
                showModal('hr-modal');
            } else if (command === '/emoji') {
                showModal('emoji-modal');
            } else if (command === '/mention') {
                showModal('mention-modal');
            }
        });

        // Insert buttons
        document.getElementById('insert-badge').addEventListener('click', insertBadge);
        document.getElementById('insert-link').addEventListener('click', insertLink);
        document.getElementById('insert-image').addEventListener('click', insertImage);
        document.getElementById('insert-block').addEventListener('click', insertBlock);
        document.getElementById('insert-list').addEventListener('click', insertList);
        document.getElementById('insert-heading').addEventListener('click', insertHeading);
        document.getElementById('insert-text').addEventListener('click', insertText);
        document.getElementById('insert-table').addEventListener('click', insertTable);
        document.getElementById('insert-tasks').addEventListener('click', insertTasks);
        document.getElementById('insert-hr').addEventListener('click', insertHR);
        document.getElementById('insert-emoji').addEventListener('click', insertEmoji);
        document.getElementById('insert-mention').addEventListener('click', insertMention);

        // Close modals when clicking outside
        window.addEventListener('click', (e) => {
            if (e.target.classList.contains('modal')) {
                e.target.style.display = 'none';
            }
        });

        // Initial render
        updatePreview();
    </script>

</body>
</html>