Add emergency radio instruction card HTML
· 5 months ago
a1dd911ea353661c8f1ac8ceed4bfa5f473cbbd1
Parent:
0c1cc4bee
Introduces a printable HTML guide for emergency radio usage, including step-by-step instructions, a call script, troubleshooting tips, and operator setup notes. The design is optimized for both screen and print, using Bootstrap for layout and styling.
1 file changed +202 −0
- emergency-radio-card.html +202 −0
Diff
--- /dev/null +++ b/emergency-radio-card.html @@ -0,0 +1,202 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>EMERGENCY RADIO INSTRUCTIONS</title> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + + <style> + body { + font-family: 'Arial', sans-serif; + -webkit-print-color-adjust: exact !important; + print-color-adjust: exact !important; + background-color: white; + } + + /* Visual Button Styles */ + .btn-radio { + display: inline-block; + background: #e9ecef; + border: 1px solid #555; + border-radius: 3px; + padding: 0px 6px; + font-weight: bold; + color: #000; + box-shadow: 1px 1px 0 #999; + } + + .btn-side { + background: #222; + color: white; + border-radius: 6px 0 0 6px; + padding: 8px 10px; + writing-mode: vertical-rl; + text-orientation: mixed; + font-size: 0.8rem; + font-weight: bold; + letter-spacing: 1px; + } + + /* Step Circle */ + .step-number { + background-color: #0d6efd; + color: #fff; + width: 28px; + height: 28px; + border-radius: 50%; + text-align: center; + line-height: 28px; + font-weight: bold; + display: inline-block; + margin-right: 8px; + flex-shrink: 0; + } + + /* Script Box */ + .script-box { + background-color: #fff3cd; + border: 2px solid #ffecb5; + padding: 10px; + border-radius: 6px; + font-family: 'Courier New', monospace; + font-weight: bold; + line-height: 1.4; + } + + /* Card Styles */ + .card { border: 2px solid #dee2e6; margin-bottom: 0.8rem; } + .card-header { font-weight: bold; padding: 0.5rem 1rem; } + .warning-box { border: 3px solid #dc3545; } + + /* Print Layout Optimization */ + @media print { + @page { margin: 0.5cm; size: portrait; } + body { zoom: 95%; } /* Slight shrink to ensure fit */ + .no-print { display: none !important; } + .container { max-width: 100% !important; width: 100% !important; padding: 0; } + .card { break-inside: avoid; page-break-inside: avoid; } + h1 { font-size: 2rem !important; margin-bottom: 0.5rem !important; } + .lead { font-size: 1rem !important; margin-bottom: 1rem !important; } + .bg-primary { background-color: #0d6efd !important; color: white !important; } + .bg-danger { background-color: #dc3545 !important; color: white !important; } + .bg-dark { background-color: #212529 !important; color: white !important; } + .bg-light { background-color: #f8f9fa !important; } + .script-box { background-color: #fff3cd !important; border: 2px solid #000; } + } + </style> +</head> +<body> + +<div class="container"> + + <!-- Header --> + <div class="text-center border-bottom border-3 border-dark mb-3"> + <h1 class="fw-bold text-danger m-0">EMERGENCY RADIO GUIDE</h1> + <p class="lead fw-bold m-0">IF PHONES ARE DOWN, USE THIS TO CALL FOR HELP.</p> + </div> + + <!-- Top Row: Steps 1 & 2 Side-by-Side --> + <div class="row g-3"> + <div class="col-6"> + <div class="card bg-light h-100"> + <div class="card-body p-2 d-flex align-items-center"> + <div class="step-number">1</div> + <div> + <h5 class="fw-bold mb-1">Turn On / Volume</h5> + <small>Twist top knob clockwise. Turn volume up halfway.</small> + </div> + </div> + </div> + </div> + <div class="col-6"> + <div class="card bg-light h-100"> + <div class="card-body p-2 d-flex align-items-center"> + <div class="step-number">2</div> + <div> + <h5 class="fw-bold mb-1">Select Channel</h5> + <small>Use <span class="btn-radio">â–²</span> <span class="btn-radio">â–¼</span> arrows to find Channel <span class="badge bg-dark">001</span>.</small> + </div> + </div> + </div> + </div> + </div> + + <!-- Step 3: THE CALL (Full Width) --> + <div class="card warning-box mt-3"> + <div class="card-header bg-danger text-white text-center fs-5"> + <i class="bi bi-mic-fill"></i> HOW TO CALL FOR HELP + </div> + <div class="card-body p-3"> + <div class="d-flex align-items-center mb-3"> + <div class="me-3 text-center"> + <div class="btn-side">PTT BUTTON</div> + <div style="font-size: 0.7rem; font-weight: bold;">(LEFT SIDE)</div> + </div> + <div> + <ol class="mb-0 fw-bold ps-3"> + <li>HOLD DOWN the side button. Wait 1 second.</li> + <li>SPEAK SLOWLY into the front hole.</li> + <li>RELEASE button to listen.</li> + </ol> + </div> + </div> + + <!-- THE SCRIPT --> + <div class="script-box"> + <div class="text-center text-decoration-underline mb-2">READ THIS EXACTLY:</div> + "MAYDAY, MAYDAY, MAYDAY."<br> + "MY NAME IS <u> [YOUR NAME] </u>."<br> + "I AM LOCATED AT <u> [YOUR ADDRESS] </u>."<br> + "WE HAVE AN EMERGENCY: <u> [FIRE / INJURY] </u>."<br> + "PLEASE SEND HELP."<br> + <div class="text-center fst-italic mt-1 small">(Now release button and listen)</div> + </div> + </div> + </div> + + <!-- Step 4: Weather & News (Side-by-Side) --> + <div class="card border-primary mt-3"> + <div class="card-header bg-primary text-white py-1"> + <i class="bi bi-info-circle"></i> INFORMATION SOURCES + </div> + <div class="card-body p-2"> + <div class="row"> + <div class="col-6 border-end"> + <h6 class="fw-bold mb-1"><i class="bi bi-cloud-rain"></i> WEATHER ALERT</h6> + <small>Use arrows <span class="btn-radio">â–²</span> to go to Channel <span class="badge bg-dark">002</span>.</small> + <div class="text-muted" style="font-size: 0.75rem;">(Robot voice. You cannot talk here.)</div> + </div> + <div class="col-6"> + <h6 class="fw-bold mb-1"><i class="bi bi-broadcast"></i> FM NEWS (94.1)</h6> + <small>1. Press orange side button <strong>(TOP LEFT)</strong>.</small><br> + <small>2. Use arrows to find <strong>94.1</strong>.</small> + </div> + </div> + </div> + </div> + + <!-- Troubleshooting Footer --> + <div class="alert alert-secondary mt-3 p-2 small text-center mb-0"> + <strong>TROUBLESHOOTING:</strong> + If keys don't work, hold <span class="btn-radio">#</span> for 2 seconds to UNLOCK. + If screen is dark, tap any key. + </div> + + <!-- OPERATOR NOTES (Hidden on Print) --> + <div class="mt-4 p-3 bg-light border border-dashed no-print"> + <h6 class="fw-bold text-danger"><i class="bi bi-gear-fill"></i> OPERATOR SETUP REQUIRED:</h6> + <ul class="small mb-2"> + <li><strong>Ch 001:</strong> Program local repeater (SkyHub Link 449.450 T:103.5 -5.0).</li> + <li><strong>Ch 002:</strong> Program NOAA Weather (162.550).</li> + <li><strong>Lock:</strong> Put radio in Channel Mode, then hold <code>#</code> to lock keypad.</li> + <li><strong>Print:</strong> Use Browser Print (Ctrl+P). Set Margins to "Minimum" or "None".</li> + </ul> + <button class="btn btn-dark btn-sm" onclick="window.print()">Print Card</button> + </div> + +</div> + +</body> +</html> \ No newline at end of file