Hugging Face's logo

Spaces:
Felguk
/
Markview
Running

App Files Community
Markview / index.html
Felguk's picture
Felguk
Update index.html
63af477 verified
raw
history blame contribute delete
24.2 kB
<!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>