From c2fc54adfce172b0093fbcfa6d9367bde0a76df5 Mon Sep 17 00:00:00 2001
From: MrPokeYT <mrpokeyt@noreply.localhost>
Date: Sun, 1 Feb 2026 14:53:47 +0000
Subject: [PATCH] Upload Files

---
 README.md  |  84 ++++++
 index.html | 747 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 831 insertions(+)
 create mode 100644 README.md
 create mode 100644 index.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b4770c2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,84 @@
+# 🚀 MarkDawnMaker: Visor y Editor Markdown Futurista
+
+Bienvenido a **MarkDawnMaker**, una aplicación web moderna y visualmente atractiva para editar, visualizar y gestionar archivos Markdown (`.md`). Este proyecto está diseñado para ofrecer una experiencia intuitiva, rápida y elegante, ideal para cualquier persona que trabaje con Markdown.
+
+## ✨ Características principales
+
+- **Editor Markdown en tiempo real**: Escribe tu contenido en Markdown y observa la vista previa instantáneamente.
+- **Vista previa instantánea**: El panel de vista previa muestra el resultado renderizado de tu Markdown al momento.
+- **Carga de archivos `.md`**: Sube archivos Markdown desde tu dispositivo y edítalos directamente en el navegador.
+- **Descarga de archivos**: Guarda tu trabajo como archivo `.md` con un solo clic.
+- **Modo de visualización dual**: Alterna entre modo dividido (editor + vista previa) y solo vista previa.
+- **Limpieza rápida**: Borra todo el contenido del editor fácilmente.
+- **Diseño futurista y oscuro**: Interfaz moderna con fondo animado de estrellas y efectos visuales atractivos.
+- **Soporte para dispositivos móviles**: Diseño responsivo que se adapta a cualquier pantalla.
+
+## 🖥️ ¿Cómo usarlo?
+
+1. **Escribe Markdown**: Utiliza el área de texto para escribir o pegar tu contenido Markdown.
+2. **Carga un archivo**: Haz clic en "📁 Cargar archivo .md" para importar un archivo Markdown desde tu dispositivo.
+3. **Descarga tu trabajo**: Haz clic en "💾 Descargar .md" para guardar el contenido actual como archivo Markdown.
+4. **Limpia el editor**: Usa el botón "🗑️ Limpiar" para borrar todo el contenido del editor.
+5. **Cambia el modo de visualización**:
+	- "✂️ Dividido": Muestra editor y vista previa lado a lado.
+	- "👁️ Vista previa": Muestra solo la vista previa renderizada.
+
+## 🎨 Interfaz y experiencia visual
+
+- **Fondo animado**: Un canvas con partículas de estrellas en movimiento para una experiencia inmersiva.
+- **Colores y sombras**: Paleta de colores oscuros y neón, con gradientes y efectos de sombra.
+- **Paneles diferenciados**: Editor y vista previa claramente separados para facilitar el trabajo.
+
+## 📦 Tecnologías utilizadas
+
+- **HTML5, CSS3**: Estructura y estilos modernos y responsivos.
+- **JavaScript**: Lógica de la aplicación y manejo de eventos.
+- **[marked.js](https://github.com/markedjs/marked)**: Librería para parsear y renderizar Markdown en el navegador.
+
+## 📝 Ejemplo de uso
+
+```markdown
+# Título principal
+
+Puedes usar **negrita**, *cursiva*, y más.
+
+- Listas
+- [Enlaces](https://example.com)
+- Código:
+
+```javascript
+console.log('¡Hola Mundo!');
+```
+
+> Citas inspiradoras
+```
+
+## 🚦 Estado de las funciones
+
+| Característica | Estado |
+|---------------|--------|
+| Editor        | ✅ Activo |
+| Preview       | ✅ Activo |
+| Descarga      | ✅ Activo |
+| Carga         | ✅ Activo |
+| Limpieza      | ✅ Activo |
+| Modo vista    | ✅ Activo |
+
+## ❓ Preguntas frecuentes
+
+**¿Se guarda mi trabajo automáticamente?**
+> No, debes descargar el archivo manualmente para guardarlo en tu dispositivo.
+
+**¿Puedo cargar archivos grandes?**
+> Sí, pero el rendimiento puede variar según el tamaño y tu navegador.
+
+**¿Funciona en móviles?**
+> Sí, la interfaz es responsiva y se adapta a pantallas pequeñas.
+
+## 🛡️ Licencia
+
+Este proyecto es de código abierto y puedes modificarlo o adaptarlo según tus necesidades.
+
+---
+
+¡Disfruta creando y visualizando Markdown con estilo futurista! ✨
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..154a645
--- /dev/null
+++ b/index.html
@@ -0,0 +1,747 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visor y Editor Markdown - Futurista</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #0a0e27;
+            min-height: 100vh;
+            padding: 20px;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Fondo de estrellas animadas */
+        #stars-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            pointer-events: none;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: rgba(15, 23, 42, 0.85);
+            border-radius: 20px;
+            box-shadow: 0 0 60px rgba(59, 130, 246, 0.3), 0 0 100px rgba(139, 92, 246, 0.2);
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            position: relative;
+            z-index: 1;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #db2777 100%);
+            color: white;
+            padding: 40px 30px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
+            background-size: 50px 50px;
+            animation: moveGrid 20s linear infinite;
+        }
+
+        @keyframes moveGrid {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(50px, 50px); }
+        }
+
+        .header h1 {
+            font-size: 2.8em;
+            margin-bottom: 10px;
+            font-weight: 700;
+            position: relative;
+            z-index: 1;
+            text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+        }
+
+        .header p {
+            opacity: 0.95;
+            font-size: 1.2em;
+            position: relative;
+            z-index: 1;
+        }
+
+        .controls {
+            display: flex;
+            gap: 12px;
+            padding: 25px;
+            background: rgba(15, 23, 42, 0.95);
+            border-bottom: 2px solid rgba(59, 130, 246, 0.3);
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: 2px solid transparent;
+            border-radius: 10px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+
+        .btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+
+        .btn span {
+            position: relative;
+            z-index: 1;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6);
+            border-color: rgba(59, 130, 246, 0.5);
+        }
+
+        .btn-secondary {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+        }
+
+        .btn-secondary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
+            border-color: rgba(99, 102, 241, 0.5);
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+        }
+
+        .btn-success:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 25px rgba(16, 185, 129, 0.6);
+            border-color: rgba(16, 185, 129, 0.5);
+        }
+
+        .file-input-wrapper {
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+        }
+
+        .file-input-wrapper input[type=file] {
+            position: absolute;
+            left: -9999px;
+        }
+
+        .mode-toggle {
+            margin-left: auto;
+            display: flex;
+            gap: 8px;
+            background: rgba(30, 41, 59, 0.8);
+            padding: 6px;
+            border-radius: 12px;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+        }
+
+        .mode-btn {
+            padding: 10px 20px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            border-radius: 8px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            color: #94a3b8;
+        }
+
+        .mode-btn.active {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+        }
+
+        .workspace {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0;
+            min-height: 600px;
+        }
+
+        .workspace.preview-only {
+            grid-template-columns: 1fr;
+        }
+
+        .editor-panel, .preview-panel {
+            padding: 30px;
+            overflow-y: auto;
+            max-height: 700px;
+        }
+
+        .editor-panel {
+            background: rgba(15, 23, 42, 0.95);
+            border-right: 2px solid rgba(59, 130, 246, 0.3);
+        }
+
+        .workspace.preview-only .editor-panel {
+            display: none;
+        }
+
+        .editor-panel h3, .preview-panel h3 {
+            margin-bottom: 20px;
+            color: #60a5fa;
+            font-size: 1.3em;
+            text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .editor-panel h3::before {
+            content: '⚡';
+            font-size: 1.2em;
+        }
+
+        .preview-panel h3::before {
+            content: '👁️';
+            font-size: 1.2em;
+        }
+
+        textarea {
+            width: 100%;
+            min-height: 550px;
+            padding: 20px;
+            border: 2px solid rgba(59, 130, 246, 0.3);
+            border-radius: 12px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.8;
+            resize: vertical;
+            transition: all 0.3s ease;
+            background: rgba(30, 41, 59, 0.8);
+            color: #e2e8f0;
+        }
+
+        textarea:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+        }
+
+        textarea::placeholder {
+            color: #64748b;
+        }
+
+        .preview-panel {
+            background: rgba(15, 23, 42, 0.95);
+        }
+
+        #content {
+            line-height: 1.8;
+            color: #e2e8f0;
+        }
+
+        #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
+            color: #60a5fa;
+            text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
+        }
+
+        #content h1 {
+            font-size: 2.2em;
+            border-bottom: 2px solid rgba(59, 130, 246, 0.4);
+            padding-bottom: 12px;
+            background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        #content h2 {
+            font-size: 1.7em;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.3);
+            padding-bottom: 10px;
+        }
+
+        #content h3 { font-size: 1.4em; }
+        #content h4 { font-size: 1.1em; }
+
+        #content p {
+            margin-bottom: 16px;
+            color: #cbd5e1;
+        }
+
+        #content a {
+            color: #60a5fa;
+            text-decoration: none;
+            font-weight: 500;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        #content a:hover {
+            color: #93c5fd;
+            text-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
+        }
+
+        #content img {
+            max-width: 100%;
+            border-radius: 12px;
+            margin: 20px 0;
+            box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+        }
+
+        #content pre {
+            background: rgba(15, 23, 42, 0.95);
+            color: #e2e8f0;
+            padding: 20px;
+            border-radius: 12px;
+            overflow-x: auto;
+            margin: 20px 0;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+        }
+
+        #content code {
+            background: rgba(30, 41, 59, 0.8);
+            padding: 3px 8px;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+            color: #fbbf24;
+            border: 1px solid rgba(251, 191, 36, 0.3);
+        }
+
+        #content pre code {
+            background: transparent;
+            padding: 0;
+            color: #a5f3fc;
+            border: none;
+        }
+
+        #content blockquote {
+            border-left: 4px solid #3b82f6;
+            padding-left: 20px;
+            margin: 20px 0;
+            color: #94a3b8;
+            font-style: italic;
+            background: rgba(59, 130, 246, 0.1);
+            padding: 15px 20px;
+            border-radius: 0 8px 8px 0;
+        }
+
+        #content ul, #content ol {
+            margin: 16px 0;
+            padding-left: 30px;
+            color: #cbd5e1;
+        }
+
+        #content li {
+            margin: 10px 0;
+        }
+
+        #content table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 20px 0;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+            border-radius: 12px;
+            overflow: hidden;
+        }
+
+        #content table th, #content table td {
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            padding: 14px;
+            text-align: left;
+        }
+
+        #content table th {
+            background: rgba(59, 130, 246, 0.2);
+            font-weight: 600;
+            color: #60a5fa;
+        }
+
+        #content table td {
+            background: rgba(30, 41, 59, 0.5);
+            color: #cbd5e1;
+        }
+
+        #content table tr:hover td {
+            background: rgba(59, 130, 246, 0.15);
+        }
+
+        #content hr {
+            border: none;
+            border-top: 2px solid rgba(59, 130, 246, 0.3);
+            margin: 30px 0;
+            box-shadow: 0 1px 10px rgba(59, 130, 246, 0.3);
+        }
+
+        .placeholder {
+            color: #64748b;
+            font-style: italic;
+            text-align: center;
+            padding: 80px 20px;
+            font-size: 1.1em;
+        }
+
+        /* Scrollbar personalizado */
+        ::-webkit-scrollbar {
+            width: 10px;
+            height: 10px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(15, 23, 42, 0.5);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+        }
+
+        @media (max-width: 768px) {
+            .workspace {
+                grid-template-columns: 1fr;
+            }
+
+            .editor-panel {
+                border-right: none;
+                border-bottom: 2px solid rgba(59, 130, 246, 0.3);
+            }
+
+            .controls {
+                flex-direction: column;
+            }
+
+            .mode-toggle {
+                margin-left: 0;
+                width: 100%;
+            }
+
+            .header h1 {
+                font-size: 2em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <canvas id="stars-canvas"></canvas>
+
+    <div class="container">
+        <div class="header">
+            <h1>🚀 Visor y Editor Markdown</h1>
+            <p>Editor futurista con vista previa en tiempo real</p>
+        </div>
+
+        <div class="controls">
+            <div class="file-input-wrapper">
+                <label for="file-upload" class="btn btn-primary">
+                    <span>📁 Cargar archivo .md</span>
+                </label>
+                <input type="file" id="file-upload" accept=".md,.markdown,.txt">
+            </div>
+            
+            <button id="clear-btn" class="btn btn-secondary">
+                <span>🗑️ Limpiar</span>
+            </button>
+            <button id="download-btn" class="btn btn-success">
+                <span>💾 Descargar .md</span>
+            </button>
+            
+            <div class="mode-toggle">
+                <button class="mode-btn active" data-mode="split">✂️ Dividido</button>
+                <button class="mode-btn" data-mode="preview">👁️ Vista previa</button>
+            </div>
+        </div>
+
+        <div class="workspace" id="workspace">
+            <div class="editor-panel">
+                <h3>Editor Markdown</h3>
+                <textarea id="markdown-input" placeholder="# Escribe tu Markdown aquí...
+
+## Ejemplo de uso
+
+Puedes usar **negrita**, *cursiva*, y más.
+
+### Lista de características:
+- Editor en tiempo real
+- Vista previa instantánea
+- Descarga como archivo .md
+- Diseño futurista oscuro
+- Fondo con partículas de estrellas
+
+```javascript
+console.log('¡Hola Mundo!');
+```
+
+> Esto es una cita inspiradora
+
+[Enlace de ejemplo](https://example.com)
+
+---
+
+| Característica | Estado |
+|---------------|---------|
+| Editor | ✅ Activo |
+| Preview | ✅ Activo |
+| Descarga | ✅ Activo |"></textarea>
+            </div>
+
+            <div class="preview-panel">
+                <h3>Vista Previa</h3>
+                <div id="content" class="placeholder">
+                    <p>✨ Carga un archivo .md o escribe en el editor para ver la vista previa aquí ✨</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Configuración de partículas de estrellas
+        const canvas = document.getElementById('stars-canvas');
+        const ctx = canvas.getContext('2d');
+        
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        let stars = [];
+        const numStars = 200;
+
+        class Star {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 2;
+                this.speedX = (Math.random() - 0.5) * 0.5;
+                this.speedY = (Math.random() - 0.5) * 0.5;
+                this.opacity = Math.random();
+                this.fadeSpeed = (Math.random() - 0.5) * 0.02;
+            }
+
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                this.opacity += this.fadeSpeed;
+
+                if (this.opacity <= 0 || this.opacity >= 1) {
+                    this.fadeSpeed *= -1;
+                }
+
+                if (this.x < 0) this.x = canvas.width;
+                if (this.x > canvas.width) this.x = 0;
+                if (this.y < 0) this.y = canvas.height;
+                if (this.y > canvas.height) this.y = 0;
+            }
+
+            draw() {
+                ctx.fillStyle = `rgba(96, 165, 250, ${this.opacity})`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+
+                // Efecto de brillo
+                const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3);
+                gradient.addColorStop(0, `rgba(139, 92, 246, ${this.opacity * 0.5})`);
+                gradient.addColorStop(1, 'rgba(139, 92, 246, 0)');
+                ctx.fillStyle = gradient;
+                ctx.fill();
+            }
+        }
+
+        function initStars() {
+            stars = [];
+            for (let i = 0; i < numStars; i++) {
+                stars.push(new Star());
+            }
+        }
+
+        function animateStars() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Fondo con gradiente
+            const gradient = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width);
+            gradient.addColorStop(0, '#0a0e27');
+            gradient.addColorStop(1, '#050810');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            stars.forEach(star => {
+                star.update();
+                star.draw();
+            });
+
+            requestAnimationFrame(animateStars);
+        }
+
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            initStars();
+        });
+
+        initStars();
+        animateStars();
+
+        // Funcionalidad del editor
+        const markdownInput = document.getElementById('markdown-input');
+        const contentDiv = document.getElementById('content');
+        const fileUpload = document.getElementById('file-upload');
+        const clearBtn = document.getElementById('clear-btn');
+        const downloadBtn = document.getElementById('download-btn');
+        const workspace = document.getElementById('workspace');
+        const modeBtns = document.querySelectorAll('.mode-btn');
+
+        // Configurar marked
+        marked.setOptions({
+            breaks: true,
+            gfm: true
+        });
+
+        // Actualizar vista previa en tiempo real
+        function updatePreview() {
+            const markdown = markdownInput.value;
+            if (markdown.trim() === '') {
+                contentDiv.innerHTML = '<p class="placeholder">✨ Carga un archivo .md o escribe en el editor para ver la vista previa aquí ✨</p>';
+            } else {
+                contentDiv.innerHTML = marked.parse(markdown);
+            }
+        }
+
+        markdownInput.addEventListener('input', updatePreview);
+
+        // Cargar archivo
+        fileUpload.addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    markdownInput.value = e.target.result;
+                    updatePreview();
+                };
+                reader.readAsText(file);
+            }
+        });
+
+        // Limpiar editor
+        clearBtn.addEventListener('click', function() {
+            if (confirm('¿Estás seguro de que quieres limpiar el contenido?')) {
+                markdownInput.value = '';
+                updatePreview();
+            }
+        });
+
+        // Descargar como archivo .md
+        downloadBtn.addEventListener('click', function() {
+            const markdownContent = markdownInput.value;
+            
+            if (markdownContent.trim() === '') {
+                alert('No hay contenido para descargar. Escribe algo primero.');
+                return;
+            }
+
+            const blob = new Blob([markdownContent], { type: 'text/markdown' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'documento.md';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        });
+
+        // Cambiar modo de visualización
+        modeBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                modeBtns.forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                
+                const mode = this.dataset.mode;
+                if (mode === 'preview') {
+                    workspace.classList.add('preview-only');
+                } else {
+                    workspace.classList.remove('preview-only');
+                }
+            });
+        });
+
+        // Compatibilidad con URL (versión anterior)
+        const urlParams = new URLSearchParams(window.location.search);
+        const file = urlParams.get('file');
+        if (file) {
+            fetch(file)
+                .then(response => {
+                    if (!response.ok) throw new Error("No se encontró el archivo.");
+                    return response.text();
+                })
+                .then(text => {
+                    markdownInput.value = text;
+                    updatePreview();
+                })
+                .catch(err => {
+                    contentDiv.innerHTML = `<p style="color: #ef4444;">❌ Error: ${err.message}</p>`;
+                });
+        }
+
+        // Inicializar
+        updatePreview();
+    </script>
+</body>
+</html>
\ No newline at end of file