DECK Frontend v4.3 - Portable with trivial extraction
- 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:
@@ -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>
|
||||
52
deck-frontend/extract.sh
Executable file
52
deck-frontend/extract.sh
Executable 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"
|
||||
Reference in New Issue
Block a user