Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Responsdown - Markdown Parser</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#818CF8', | |
| dark: '#1E293B', | |
| light: '#F8FAFC' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .markdown-body { | |
| background-color: #0F172A; | |
| color: #E2E8F0; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| overflow: auto; | |
| } | |
| .markdown-body h1, | |
| .markdown-body h2, | |
| .markdown-body h3, | |
| .markdown-body h4, | |
| .markdown-body h5, | |
| .markdown-body h6 { | |
| color: #E2E8F0; | |
| border-bottom: 1px solid #334155; | |
| padding-bottom: 0.3em; | |
| margin-top: 1.5em; | |
| margin-bottom: 0.5em; | |
| } | |
| .markdown-body p { | |
| margin-bottom: 1em; | |
| line-height: 1.6; | |
| } | |
| .markdown-body a { | |
| color: #60AFA; | |
| text-decoration: none; | |
| } | |
| .markdown-body a:hover { | |
| text-decoration: underline; | |
| } | |
| .markdown-body code { | |
| background-color: #1E293B; | |
| color: #F8FAFC; | |
| padding: 0.2em 0.4em; | |
| border-radius: 0.3em; | |
| font-family: monospace; | |
| } | |
| .markdown-body pre { | |
| background-color: #1E293B; | |
| padding: 1em; | |
| border-radius: 0.5em; | |
| overflow: auto; | |
| margin-bottom: 1.5em; | |
| } | |
| .markdown-body pre code { | |
| background: none; | |
| padding: 0; | |
| } | |
| .markdown-body blockquote { | |
| border-left: 4px solid #4F46E5; | |
| padding-left: 1em; | |
| margin-left: 0; | |
| color: #94A3B8; | |
| } | |
| .markdown-body ul, | |
| .markdown-body ol { | |
| padding-left: 2em; | |
| margin-bottom: 1em; | |
| } | |
| .markdown-body li { | |
| margin-bottom: 0.5em; | |
| } | |
| .markdown-container { | |
| height: calc(100vh - 10rem); | |
| } | |
| .editor, .preview { | |
| height: 100%; | |
| } | |
| .editor textarea { | |
| height: 100%; | |
| resize: none; | |
| background-color: #0F172A; | |
| color: #E2E8F0; | |
| border: none; | |
| padding: 1.5rem; | |
| font-family: monospace; | |
| } | |
| .editor textarea:focus { | |
| outline: none; | |
| } | |
| .tab { | |
| transition: all 0.3s ease; | |
| } | |
| .tab.active { | |
| background-color: #4F46E5; | |
| color: white; | |
| } | |
| .tab:not(.active):hover { | |
| background-color: #334155; | |
| } | |
| .grow-wrap { | |
| display: grid; | |
| } | |
| .grow-wrap::after { | |
| content: attr(data-replicated-value) " "; | |
| white-space: pre-wrap; | |
| visibility: hidden; | |
| } | |
| .grow-wrap > textarea { | |
| resize: none; | |
| overflow: hidden; | |
| } | |
| .grow-wrap > textarea, | |
| .grow-wrap::after { | |
| grid-area: 1 / 1 / 2 / 2; | |
| } | |
| .floating-button { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark text-light min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-primary to-secondary py-6 px-2"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-code text-3xl mr-3 text-white"></i> | |
| <h1 class="text-3xl font-bold text-white">Responsdown</h1> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white text-primary px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition"> | |
| <i class="fas fa-download mr-2"></i>Export | |
| </button> | |
| <button class="bg-white text-primary px-4 py-2 rounded-lg font-semibold hover:bg-opacity-90 transition"> | |
| <i class="fas fa-share-alt mr-2"></i>Share | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Editor Panel --> | |
| <div class="w-full lg:w-1/2"> | |
| <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="bg-slate-900 px-6 py-4 flex justify-between"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-edit mr-2 text-secondary"></i>Markdown Editor | |
| </h2> | |
| <div class="flex space-x-1"> | |
| <button class="tab active px-3 py-1 rounded-lg text-sm font-medium">Edit</button> | |
| <button class="tab px-3 py-1 rounded-lg text-sm font-medium">Guide</button> | |
| </div> | |
| </div> | |
| <div class="grow-wrap editor"> | |
| <textarea id="markdown-input" class="w-full rounded-b-xl" placeholder="Start typing your Markdown here..."># Welcome to Responsdown! | |
| ## A modern Markdown parser | |
| **Responsdown** is a responsive Markdown parser that renders your content in real-time. | |
| ### Features | |
| - Real-time preview | |
| - Clean, modern UI | |
| - Responsive design | |
| - Syntax highlighting | |
| - Export options | |
| ### Try it out! | |
| ```javascript | |
| function helloWorld() { | |
| console.log("Hello, Markdown!"); | |
| } | |
| ``` | |
| > "Markdown is a lightweight markup language for creating formatted text using a plain-text editor." - John Gruber | |
| ### Get Started | |
| 1. Type Markdown in the left pane | |
| 2. See the rendered result on the right | |
| 3. Use the toolbar for quick formatting | |
| [Learn more about Markdown](https://www.markdownguide.org/) | |
| </textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Panel --> | |
| <div class="w-full lg:w-1/2"> | |
| <div class="bg-slate-800 rounded-xl shadow-xl overflow-hidden h-full"> | |
| <div class="bg-slate-900 px-6 py-4 flex justify-between"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-eye mr-2 text-secondary"></i>Preview | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-slate-300 hover:text-white"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button class="text-slate-300 hover:text-white"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="markdown-preview" class="markdown-body preview"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Format Toolbar --> | |
| <div class="mt-8 bg-slate-800 rounded-xl p-4"> | |
| <h3 class="text-lg font-semibold mb-3 text-center">Quick Formatting</h3> | |
| <div class="flex flex-wrap justify-center gap-2"> | |
| <button class="format-btn" data-insert="# "><i class="fas fa-heading mr-1"></i> H1</button> | |
| <button class="format-btn" data-insert="## "><i class="fas fa-heading mr-1"></i> H2</button> | |
| <button class="format-btn" data-insert="### "><i class="fas fa-heading mr-1"></i> H3</button> | |
| <button class="format-btn" data-insert="**text**"><i class="fas fa-bold mr-1"></i> Bold</button> | |
| <button class="format-btn" data-insert="_text_"><i class="fas fa-italic mr-1"></i> Italic</button> | |
| <button class="format-btn" data-insert="[text](url)"><i class="fas fa-link mr-1"></i> Link</button> | |
| <button class="format-btn" data-insert=""><i class="fas fa-image mr-1"></i> Image</button> | |
| <button class="format-btn" data-insert="- "><i class="fas fa-list-ul mr-1"></i> List</button> | |
| <button class="format-btn" data-insert="1. "><i class="fas fa-list-ol mr-1"></i> Ordered</button> | |
| <button class="format-btn" data-insert="> "><i class="fas fa-quote-right mr-1"></i> Quote</button> | |
| <button class="format-btn" data-insert="```\ncode\n```"><i class="fas fa-code mr-1"></i> Code</button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <button class="floating-button fixed bottom-6 right-6 bg-primary text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center text-2xl hover:bg-secondary transition"> | |
| <i class="fas fa-magic"></i> | |
| </button> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 py-6 mt-8"> | |
| <div class="container mx-auto px-4 text-center text-slate-400"> | |
| <p>Made with <i class="fas fa-heart text-red-500"></i> using HTML, CSS, and JavaScript</p> | |
| <p class="mt-2">Powered by Marked.js and Tailwind CSS</p> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-slate-300 hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Marked.js | |
| marked.setOptions({ | |
| breaks: true, | |
| gfm: true, | |
| highlight: function(code, lang) { | |
| return code; | |
| } | |
| }); | |
| // Get DOM elements | |
| const markdownInput = document.getElementById('markdown-input'); | |
| const markdownPreview = document.getElementById('markdown-preview'); | |
| const formatButtons = document.querySelectorAll('.format-btn'); | |
| // Initial render | |
| markdownPreview.innerHTML = marked.parse(markdownInput.value); | |
| // Update preview on input changes | |
| markdownInput.addEventListener('input', function() { | |
| markdownPreview.innerHTML = marked.parse(this.value); | |
| }); | |
| // Formatting buttons | |
| formatButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const insert = this.getAttribute('data-insert'); | |
| const start = markdownInput.selectionStart; | |
| const end = markdownInput.selectionEnd; | |
| const selectedText = markdownInput.value.substring(start, end); | |
| const newText = insert.replace('text', selectedText); | |
| markdownInput.value = markdownInput.value.substring(0, start) + | |
| newText + | |
| markdownInput.value.substring(end); | |
| // Trigger input event to update preview | |
| const event = new Event('input'); | |
| markdownInput.dispatchEvent(event); | |
| // Set cursor position | |
| markdownInput.focus(); | |
| markdownInput.setSelectionRange(start + newText.length, start + newText.length); | |
| }); | |
| }); | |
| // Auto-resize textarea | |
| const textarea = document.querySelector('textarea'); | |
| const growWrap = document.querySelector('.grow-wrap'); | |
| textarea.addEventListener('input', function() { | |
| growWrap.dataset.replicatedValue = this.value; | |
| }); | |
| // Initialize with current value | |
| growWrap.dataset.replicatedValue = textarea.value; | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tatht/markdown-parser-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |