From 0bd1d6fbff4ae3f3de6abbd4bb625d6838cfe31f Mon Sep 17 00:00:00 2001
From: ARCHITECT <architect@tzzr.local>
Date: Fri, 16 Jan 2026 18:37:31 +0000
Subject: [PATCH] DECK Frontend v4.3 - Portable with trivial extraction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Simplified header (removed tag examples that interfered with extraction)
- Added extract.sh script for 3-file separation
- Structure: <style>, <body>, <script> cleanly separable
- Run: ./extract.sh deck.html → styles.css, app.js, index.html

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../{deck-v4.2.html => deck-v4.3.html}        | 35 ++-----------
 deck-frontend/extract.sh                      | 52 +++++++++++++++++++
 2 files changed, 57 insertions(+), 30 deletions(-)
 rename deck-frontend/{deck-v4.2.html => deck-v4.3.html} (94%)
 create mode 100755 deck-frontend/extract.sh
diff --git a/deck-frontend/deck-v4.2.html b/deck-frontend/deck-v4.3.html
similarity index 94%
rename from deck-frontend/deck-v4.2.html
rename to deck-frontend/deck-v4.3.html
index 017cb2e..b0d55fc 100644
--- a/deck-frontend/deck-v4.2.html
+++ b/deck-frontend/deck-v4.3.html
@@ -7,28 +7,13 @@
   <meta name="description" content="DECK Tag Management System">
 
 <!--
-╔══════════════════════════════════════════════════════════════════════════════╗
-║  DECK FRONTEND v4.2 - Minor Accessibility Polish                             ║
-╠══════════════════════════════════════════════════════════════════════════════╣
-║                                                                              ║
-║  CHANGES v4.2:                                                               ║
-║    - Toast: aria-live="assertive" for immediate announcements                ║
-║    - CSS: prefers-reduced-motion support                                     ║
-║    - All v4.1 fixes included                                                 ║
-║                                                                              ║
-║  EXTRACTION (buscar marcadores en comentarios HTML):                         ║
-║    sed -n '/<!-- .* CSS_START/,/CSS_END .* -->/p' deck.html | ...            ║
-║    Ver README para comandos completos de extracción                          ║
-║                                                                              ║
-╚══════════════════════════════════════════════════════════════════════════════╝
+  DECK FRONTEND v4.3 - Portable single-file
+  Extract: ./extract.sh deck.html [output_dir]
 -->
 
-<!-- ══════════════════════════════════════════════════════════════════════════
-     CSS_START
-     ══════════════════════════════════════════════════════════════════════════ -->
 <style>
 /* =============================================================================
- * DECK STYLES v4.2
+ * DECK STYLES v4.3
  * ============================================================================= */
 
 /* -----------------------------------------------------------------------------
@@ -643,9 +628,6 @@ body {
   }
 }
 </style>
-<!-- ══════════════════════════════════════════════════════════════════════════
-     CSS_END
-     ══════════════════════════════════════════════════════════════════════════ -->
 </head>
 
 <body>
@@ -746,13 +728,10 @@ body {
 <!-- TOAST -->
 <div class="toast" id="toast" role="alert" aria-live="assertive"></div>
 
-<!-- ══════════════════════════════════════════════════════════════════════════
-     JS_START
-     ══════════════════════════════════════════════════════════════════════════ -->
 <script>
 /**
- * DECK Frontend v4.2
- * Security & Accessibility Update
+ * DECK Frontend v4.3
+ * Portable single-file with trivial extraction
  */
 
 // =============================================================================
@@ -1587,9 +1566,5 @@ const App = {
 
 document.addEventListener("DOMContentLoaded", () => App.init());
 </script>
-<!-- ══════════════════════════════════════════════════════════════════════════
-     JS_END
-     ══════════════════════════════════════════════════════════════════════════ -->
-
 </body>
 </html>
diff --git a/deck-frontend/extract.sh b/deck-frontend/extract.sh
new file mode 100755
index 0000000..a80dbd6
--- /dev/null
+++ b/deck-frontend/extract.sh
@@ -0,0 +1,52 @@
+#!/bin/bash
+# DECK Extract - Separates monolithic HTML into 3 files
+# Usage: ./extract.sh deck.html [output_dir]
+
+set -e
+
+INPUT="${1:-deck.html}"
+OUTDIR="${2:-.}"
+
+if [ ! -f "$INPUT" ]; then
+    echo "Error: $INPUT not found"
+    exit 1
+fi
+
+mkdir -p "$OUTDIR"
+
+# Extract CSS (between <style> and </style>, excluding the tags themselves)
+awk '/<style>/,/<\/style>/' "$INPUT" | tail -n +2 | head -n -1 > "$OUTDIR/styles.css"
+
+# Extract JS (between <script> and </script>, excluding the tags themselves)
+awk '/<script>/,/<\/script>/' "$INPUT" | tail -n +2 | head -n -1 > "$OUTDIR/app.js"
+
+# Create index.html with external references
+cat > "$OUTDIR/index.html" << 'HTMLEOF'
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DECK - TZZR</title>
+  <meta name="description" content="DECK Tag Management System">
+  <link rel="stylesheet" href="styles.css">
+</head>
+HTMLEOF
+
+# Extract body content (excluding </body> and inline script)
+awk '/<body>/,/<\/body>/' "$INPUT" | head -n -1 | awk '/<script>/,/<\/script>/{next}1' >> "$OUTDIR/index.html"
+
+# Close with script reference
+cat >> "$OUTDIR/index.html" << 'HTMLEOF'
+<script src="app.js"></script>
+</body>
+</html>
+HTMLEOF
+
+CSS_LINES=$(wc -l < "$OUTDIR/styles.css")
+JS_LINES=$(wc -l < "$OUTDIR/app.js")
+
+echo "Extracted to $OUTDIR/"
+echo "  - styles.css ($CSS_LINES lines)"
+echo "  - app.js     ($JS_LINES lines)"
+echo "  - index.html"
