tzzr/captain-claude
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

DECK Frontend v4.3 - Portable with trivial extraction

Browse Source 
- 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>
This commit is contained in:
ARCHITECT
2026-01-16 18:37:31 +00:00
parent 9b244138b5
commit 0bd1d6fbff
2 changed files with 57 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
deck-frontend/deck-v4.2.html → deck-frontend/deck-v4.3.html
View File

@@ -7,28 +7,13 @@
<meta name="description" content="DECK Tag Management System"> <meta name="description" content="DECK Tag Management System">
<!-- <!--
╔══════════════════════════════════════════════════════════════════════════════╗ DECK FRONTEND v4.3 - Portable single-file
║ DECK FRONTEND v4.2 - Minor Accessibility Polish ║ Extract: ./extract.sh deck.html [output_dir]
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ 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 ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
--> -->
<!-- ══════════════════════════════════════════════════════════════════════════
CSS_START
══════════════════════════════════════════════════════════════════════════ -->
<style> <style>
/* ============================================================================= /* =============================================================================
* DECK STYLES v4.2 * DECK STYLES v4.3
* ============================================================================= */ * ============================================================================= */
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
@@ -643,9 +628,6 @@ body {
} }
} }
</style> </style>
<!-- ══════════════════════════════════════════════════════════════════════════
CSS_END
══════════════════════════════════════════════════════════════════════════ -->
</head> </head>
<body> <body>
@@ -746,13 +728,10 @@ body {
<!-- TOAST --> <!-- TOAST -->
<div class="toast" id="toast" role="alert" aria-live="assertive"></div> <div class="toast" id="toast" role="alert" aria-live="assertive"></div>
<!-- ══════════════════════════════════════════════════════════════════════════
JS_START
══════════════════════════════════════════════════════════════════════════ -->
<script> <script>
/** /**
* DECK Frontend v4.2 * DECK Frontend v4.3
* Security & Accessibility Update * Portable single-file with trivial extraction
*/ */
// ============================================================================= // =============================================================================
@@ -1587,9 +1566,5 @@ const App = {
document.addEventListener("DOMContentLoaded", () => App.init()); document.addEventListener("DOMContentLoaded", () => App.init());
</script> </script>
<!-- ══════════════════════════════════════════════════════════════════════════
JS_END
══════════════════════════════════════════════════════════════════════════ -->
</body> </body>
</html> </html>

52
deck-frontend/extract.sh Executable file
View File

@@ -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"