index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Editor de Capturas - ScreenShot</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="editor.css">
</head>
<body>
  <!-- Barra de Herramientas Principal (Superior) -->
  <div class="topbar">
    <div class="logo-area" id="logo-about" style="cursor: pointer; display: flex; align-items: center; gap: 8px;" title="Acerca de ScreenShot: Ver información de la aplicación">
      <img src="icon128.png" style="width:20px;height:20px;object-fit:contain;display:block;" alt="ScreenShot">
      <span class="logo-text">ScreenShot</span>
    </div>

    <div class="group" aria-label="Recorte y Selección">
      <button id="tool-select" class="icon-btn" title="Herramienta de Recorte: Haz clic y arrastra sobre la imagen para definir un área de recorte" aria-label="Seleccionar área"><svg viewBox="0 0 24 24"><path d="M3 3h7v2H5v5H3zm11 0h7v7h-2V5h-5zM3 14h2v5h5v2H3zm16 0h2v7h-7v-2h5zM8 8h8v8H8z"/></svg></button>
      <button id="clear-selection" class="icon-btn" title="Quitar Selección: Elimina el cuadro de recorte activo de la imagen" aria-label="Quitar selección"><svg viewBox="0 0 24 24"><path d="M3 3h7v2H5v5H3zm11 0h7v7h-2V5h-5zM3 14h2v5h5v2H3zm16 0h2v7h-7v-2h5zM8 8l8 8m0-8-8 8"/></svg></button>
    </div>

    <div class="group" aria-label="Dibujo de Formas">
      <button id="tool-rect" class="icon-btn active" title="Cuadro Contorno: Arrastra para trazar un rectángulo sin fondo" aria-label="Cuadro sin fondo"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/></svg></button>
      <button id="tool-rect-fill" class="icon-btn" title="Cuadro Relleno: Arrastra para trazar un rectángulo con fondo sólido" aria-label="Cuadro con fondo"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" fill="currentColor" stroke="none"/></svg></button>
      <button id="tool-circle" class="icon-btn" title="Dibujar Círculo: Arrastra en la imagen para trazar una elipse o círculo" aria-label="Círculo"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/></svg></button>
      <button id="tool-line" class="icon-btn" title="Línea Recta: Arrastra en la imagen para trazar una línea recta" aria-label="Línea recta"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
      <button id="tool-arrow" class="icon-btn" title="Dibujar Flecha: Arrastra para trazar una flecha señalando un elemento" aria-label="Flecha"><svg viewBox="0 0 24 24"><path d="M4 20l16-16v6h2V2h-8v2h6L4 18z" fill="currentColor"/></svg></button>
    </div>

    <div class="group" aria-label="Trazo Libre y Borrado">
      <button id="tool-pencil" class="icon-btn" title="Lápiz: Dibuja trazos libres a mano alzada con el ratón" aria-label="Lápiz"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>
      <button id="tool-curve" class="icon-btn" title="Dibujar Curva: Arrastra para crear un trazo suavizado y curvo" aria-label="Curva"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17c4-10 12-10 16 0"/></svg></button>
      <button id="tool-eraser" class="icon-btn" title="Borrador: Pasa sobre los dibujos agregados para eliminarlos" aria-label="Borrador"><svg viewBox="0 0 24 24"><path d="M16.24 7.56l4.24 4.24c.78.78.78 2.05 0 2.83L14.4 20.7c-.39.39-.9.59-1.41.59H7.8c-.51 0-1.02-.2-1.41-.59L2.14 16.44c-.78-.78-.78-2.05 0-2.83l6.08-6.08c.78-.78 2.05-.78 2.83 0l5.19 5.19 2.34-2.34c.39-.39 1.02-.39 1.41 0z"/></svg></button>
    </div>

    <div class="group" aria-label="Anotaciones">
      <button id="tool-text" class="icon-btn" title="Agregar Texto: Haz clic en la imagen para ingresar un texto de anotación" aria-label="Texto"><svg viewBox="0 0 24 24"><path d="M4 4h16v3h-6v13h-4V7H4z"/></svg></button>
      <button id="tool-highlight" class="icon-btn" title="Resaltar Área: Dibuja un rectángulo semi-transparente para destacar información" aria-label="Resaltar"><svg viewBox="0 0 24 24"><path d="M3 17h18v4H3zm2.2-2.8l8.9-8.9 3.6 3.6-8.9 8.9H5.2z"/></svg></button>
      <button id="tool-blur" class="icon-btn" title="Difuminar Datos: Oculta o borronea información confidencial en la captura" aria-label="Difuminar"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5z" opacity=".22"/><path d="M7 7h3v3H7zm4 0h2v2h-2zm3 0h3v3h-3zM7 11h2v2H7zm3 0h3v3h-3zm4 0h2v2h-2zM7 14h3v3H7zm4 0h2v2h-2zm3 0h3v3h-3z"/></svg></button>
      <button id="tool-number" class="icon-btn" title="Numerar Pasos: Haz clic para colocar círculos con números consecutivos (1, 2, 3...)" aria-label="Numerar"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v10h-2zM9 9h2v2H9zm4 4h2v2h-2z"/></svg><span id="num-badge" class="num-badge">1</span></button>
    </div>

    <div class="group" aria-label="Propiedades de trazo">
      <div class="color-picker-wrapper" title="Color de Trazo: Selecciona el color para dibujos, contornos y textos">
        <input id="color" type="color" value="#ff2d55" aria-label="Color de trazo" title="Seleccionar color">
      </div>
      <div class="slider-wrap" title="Grosor de Trazo: Cambia el grosor de las líneas y bordes" aria-label="Grosor">
        <svg viewBox="0 0 24 24" class="slider-icon"><circle cx="12" cy="12" r="6"/></svg>
        <input id="width" type="range" min="1" max="12" value="3" title="Grosor de línea">
      </div>
      <div class="slider-wrap" title="Tamaño de Texto y Pasos: Ajusta el tamaño de letra de textos y números" aria-label="Tamaño de texto">
        <svg viewBox="0 0 24 24" class="slider-icon" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; height:16px;"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
        <input id="text-size" type="range" min="12" max="80" value="24" title="Tamaño de texto">
      </div>
    </div>

    <div class="group actions-group" aria-label="Acciones de archivo">
      <button id="new-screenshot" class="icon-btn" title="Nueva Captura (F9): Activa el ratón para seleccionar un nuevo área de pantalla" aria-label="Nueva captura">
        <svg viewBox="0 0 24 24"><path d="M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>
      </button>
      <button id="open-file" class="icon-btn" title="Abrir Imagen: Selecciona una imagen desde tu equipo para editarla" aria-label="Abrir imagen">
        <svg viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg>
      </button>
      <button id="undo" class="icon-btn" title="Deshacer (Ctrl+Z): Elimina la última anotación o trazo realizado" aria-label="Deshacer"><svg viewBox="0 0 24 24"><path d="M12 5V2L7 7l5 5V9c3.3 0 6 2.7 6 6 0 .7-.1 1.4-.4 2h2.1c.2-.6.3-1.3.3-2 0-4.4-3.6-8-8-8z"/></svg></button>
      <button id="redo" class="icon-btn" title="Rehacer (Ctrl+Y / Ctrl+Shift+Z): Restaura la última anotación deshecha" aria-label="Rehacer"><svg viewBox="0 0 24 24"><path d="M12 5V2l5 5-5 5V9c-3.3 0-6 2.7-6 6 0 .7.1 1.4.4 2h-2.1c-.2-.6-.3-1.3-.3-2 0-4.4 3.6-8 8-8z"/></svg></button>
      <button id="clear" class="icon-btn danger-hover" title="Limpiar Todo: Elimina todas las anotaciones y resetea la imagen" aria-label="Limpiar todo"><svg viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7L6 7zm3-4h6l1 2h4v2H4V5h4z"/></svg></button>
      <button id="copy" class="icon-btn" title="Copiar al Portapapeles: Copia la captura resultante al portapapeles y cierra el editor" aria-label="Copiar"><svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg></button>
      <button id="save" class="icon-btn primary-btn" title="Guardar en Disco: Guarda la imagen procesada como archivo PNG" aria-label="Guardar">
        <svg viewBox="0 0 24 24" class="btn-icon"><path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zM8 5h7v4H8zm4 13-4-4h2.5V10h3v4H16z"/></svg>
      </button>
    </div>

    <div class="group window-controls-group" aria-label="Controles de ventana">
      <button id="minimize-window" class="icon-btn" title="Minimizar ventana: Oculta la ventana del editor en la barra de tareas" aria-label="Minimizar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
      </button>
      <button id="maximize-window" class="icon-btn" title="Maximizar / Restaurar: Alterna el tamaño de la ventana entre maximizada y normal" aria-label="Maximizar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
      </button>
      <button id="cancel" class="icon-btn danger-btn" title="Cerrar Editor: Sale de la aplicación/editor sin realizar cambios" aria-label="Cancelar">
        <svg viewBox="0 0 24 24" class="btn-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </button>
    </div>
  </div>

  <!-- Contenedor del Lienzo -->
  <div class="canvas-wrap" id="canvas-wrap">
    <canvas id="canvas"></canvas>
    <textarea id="inline-text-editor" class="inline-text-editor" style="display: none;" placeholder="Escribe tu texto..."></textarea>
  </div>

  <!-- Barra de Estado e Interacción Inferior -->
  <div class="status-bar">
    <div id="status" class="status-text">Listo para anotar. Usa la herramienta de selección para recortar un área del escritorio.</div>

    <div class="bottom-controls" style="display: flex; align-items: center; gap: 8px; margin-left: auto;">
      <div class="group" aria-label="Escala de visualización">
        <div class="slider-wrap" title="Zoom de Visualización: Acerca o aleja la vista de la captura en el lienzo" aria-label="Zoom">
          <svg viewBox="0 0 24 24" class="slider-icon" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; height:16px;">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="11" y1="8" x2="11" y2="14"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
          <input id="zoom-range" type="range" min="10" max="200" value="80" step="5" title="Nivel de zoom">
          <span id="zoom-value" style="font-size:12px; font-weight:600; color:var(--muted); min-width:36px; text-align:right;" title="Porcentaje de zoom actual">80%</span>
        </div>
      </div>

      <div class="group" aria-label="Marca de agua">
        <label class="switch-wrap" title="Marca de Agua: Muestra u oculta el logo en la esquina de la captura">
          <input type="checkbox" id="toggle-logo" checked title="Mostrar logo">
          <span style="font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px;">Logo</span>
        </label>
      </div>

      <div class="group" aria-label="Configuración" style="border-right: none;">
        <button id="btn-settings" class="icon-btn" title="Configuración: Tema claro/oscuro y carpeta de guardado" aria-label="Configuración">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Contenedor para Notificaciones Sticky (Toasts) -->
  <div id="toast-container" class="toast-container"></div>

  <!-- Modal Personalizado para Configuración -->
  <dialog id="settings-dialog" class="custom-dialog">
    <div class="dialog-content" style="max-width: 440px;">
      <div class="dialog-header">
        <svg class="dialog-icon text-tool" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
        <h3>Configuración de ScreenShot</h3>
      </div>
      
      <div style="display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; text-align: left;">
        <div>
          <label style="font-size: 12px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px;">Tema de Interfaz:</label>
          <div style="display: flex; gap: 10px;">
            <button id="theme-dark" class="dialog-btn secondary active-theme" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;">🌙 Oscuro</button>
            <button id="theme-light" class="dialog-btn secondary" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;">☀️ Claro</button>
          </div>
        </div>

        <div>
          <label style="font-size: 12px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px;">Ruta por defecto para Guardar:</label>
          <div style="display: flex; gap: 8px;">
            <input type="text" id="save-path-input" placeholder="Carpeta por defecto..." readonly style="margin-bottom:0; flex:1;">
            <button id="btn-browse-folder" class="dialog-btn secondary" style="white-space: nowrap;">Examinar...</button>
          </div>
        </div>
      </div>

      <div class="dialog-actions">
        <button id="btn-settings-cancel" class="dialog-btn secondary">Cancelar</button>
        <button id="btn-settings-save" class="dialog-btn primary">Guardar Cambios</button>
      </div>
    </div>
  </dialog>

  <!-- Modal Personalizado para Confirmaciones de Borrado (En lugar de confirm) -->
  <dialog id="confirm-dialog" class="custom-dialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <svg class="dialog-icon warning" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
        <h3>¿Limpiar todas las anotaciones?</h3>
      </div>
      <p>Esta acción eliminará de forma permanente todos los dibujos y textos agregados a la captura de pantalla actual. No se puede deshacer.</p>
      <div class="dialog-actions">
        <button id="btn-confirm-cancel" class="dialog-btn secondary">Cancelar</button>
        <button id="btn-confirm-accept" class="dialog-btn danger">Limpiar todo</button>
      </div>
    </div>
  </dialog>

  <!-- Modal Personalizado para Introducir Texto (En lugar de window.prompt) -->
  <dialog id="text-dialog" class="custom-dialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <svg class="dialog-icon text-tool" viewBox="0 0 24 24"><path d="M4 4h16v3h-6v13h-4V7H4z"/></svg>
        <h3>Ingresar texto de anotación</h3>
      </div>
      <input type="text" id="text-input" placeholder="Escribe tu anotación aquí..." autocomplete="off">
      <div class="dialog-actions">
        <button id="btn-text-cancel" class="dialog-btn secondary">Cancelar</button>
        <button id="btn-text-submit" class="dialog-btn primary">Aceptar</button>
      </div>
    </div>
  </dialog>

  <!-- Modal Personalizado "Acerca de" -->
  <div id="about-dialog" style="display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.6);backdrop-filter:blur(5px);align-items:center;justify-content:center;flex-direction:column;">
    <div style="background:#1a1a2e;border:1px solid rgba(255,255,255,0.12);border-radius:14px;width:340px;padding:24px 22px 20px;box-shadow:0 16px 48px rgba(0,0,0,0.6);position:relative;box-sizing:border-box;">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08);">
        <img src="icon128.png" style="width:34px;height:34px;object-fit:contain;" alt="ScreenShot">
        <div style="text-align:left;">
          <div style="font-size:14px;font-weight:700;color:#fff;">Mk ScreenShot Desktop</div>
          <div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:1px;">Aplicación de Escritorio &nbsp;·&nbsp; v1.4 (Linux GNOME)</div>
        </div>
        <button id="btn-about-close" style="position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:22px;line-height:1;padding:2px 6px;">&#215;</button>
      </div>
      <p style="font-size:12px;color:rgba(255,255,255,0.65);line-height:1.65;margin:0 0 14px;text-align:left;">Aplicación de escritorio para capturar el escritorio completo y realizar anotaciones rápidas. Reside en el Systray de Linux GNOME.</p>
      <div style="border-top:1px solid rgba(255,255,255,0.07);padding-top:12px;text-align:center;">
        <div style="font-size:10px;color:rgba(255,255,255,0.3);margin-bottom:8px;letter-spacing:0.6px;text-transform:uppercase;">Desarrollado por Merke</div>
      </div>
    </div>
  </div>

  <script src="editor.js"></script>
</body>
</html>