Spaces:

Felguk
/

Markview

Running

App Files Files Community

Felguk commited on Feb 1

Commit

a498d7a

verified ·

1 Parent(s): 517a07f

Update index.html

Browse files

Files changed (1) hide show

index.html +578 -19

index.html CHANGED Viewed

@@ -1,19 +1,578 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+            </select>
+            <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;
+            let badgeUrl = `https://img.shields.io/badge/${encodeURIComponent(label)}-${encodeURIComponent(message)}-${color}`;
+            if (icon) {
+                badgeUrl += `?logo=${icon}`;
+            }
+            const badgeMarkdown = `![${label}](${badgeUrl})`;
+            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 +