Add modern firearms cheatsheet HTML guide
· 9 months ago
3c79f54c24dccad42bcef1b751216e9a4999caf5
Parent:
ee133701c
Introduces a comprehensive, interactive HTML guide covering modern firearms, including pistols, rifles, and shotguns. Features a Firearm Finder wizard, practical safety tips, checklists, and mythbusting, with Bootstrap styling and client-side interactivity.
1 file changed +734 −0
- modern-firearms.html +734 −0
Diff
--- /dev/null +++ b/modern-firearms.html @@ -0,0 +1,734 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- Essential SEO Tags --> + <title>Modern Firearms Cheatsheet: A Guide to Pistols, Rifles & Shotguns</title> + <meta name="description" content="An interactive, comprehensive guide to modern firearms. Explore pistols, rifles, shotguns, and their actions. Features a 'Firearm Finder' wizard, practical tips, and safety rules."> + <meta name="keywords" content="modern firearms, firearms guide, pistol, rifle, shotgun, AR-15, Glock, firearm actions, firearm safety, gun types, firearm cheatsheet, firearm basics"> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/modern-firearms.html"> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>"> + + <!-- Open Graph Tags --> + <meta property="og:title" content="Modern Firearms Cheatsheet: A Guide to Pistols, Rifles & Shotguns"> + <meta property="og:description" content="An interactive, comprehensive guide to modern firearms. Explore pistols, rifles, shotguns, and their actions. Features a 'Firearm Finder' wizard, practical tips, and safety rules."> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/modern-firearms.html"> + <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/modern-firearms.png"> + <meta property="og:image:alt" content="A visual overview of the Modern Firearms Cheatsheet, showing different categories like pistols, rifles, and shotguns."> + + <!-- Twitter Card Tags --> + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:title" content="Modern Firearms Cheatsheet: A Guide to Pistols, Rifles & Shotguns"> + <meta name="twitter:description" content="An interactive, comprehensive guide to modern firearms. Explore pistols, rifles, shotguns, and their actions. Features a 'Firearm Finder' wizard, practical tips, and safety rules."> + <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/modern-firearms.png"> + <meta name="twitter:creator" content="@heroiclife"> + + <!-- JSON-LD Structured Data --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "TechArticle", + "headline": "Modern Firearms Cheatsheet: A Comprehensive Guide", + "description": "An interactive guide to the classification, mechanics, and practical considerations of modern firearms including pistols, rifles, and shotguns, designed for educational purposes.", + "author": {"@type": "Person", "name": "David Veksler (AI Generated)"}, + "publisher": {"@type": "Organization", "name": "David Veksler Cheatsheets"}, + "datePublished": "2023-10-27", + "dateModified": "2023-10-27", + "keywords": ["modern firearms", "firearms guide", "pistol", "rifle", "shotgun", "firearm safety", "gun types"] + } + </script> + + <!-- Bootstrap 5.3.3 CSS --> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <!-- Bootstrap Icons --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + + <style> + :root { + --bg-color: #12181f; + --card-bg: #1a222c; + --border-color: #2a3644; + --text-color: #cdd5e0; + --heading-color: #ffffff; + --accent-color: #ffc107; + --primary-color: #0d6efd; + --success-color: #198754; + --danger-color: #dc3545; + --tag-bg-1: #0d6efd; + --tag-bg-2: #6f42c1; + --tag-bg-3: #d63384; + --tag-bg-4: #fd7e14; + --tag-bg-5: #198754; + } + + body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + } + + .page-header { + background: linear-gradient(rgba(18, 24, 31, 0.8), rgba(18, 24, 31, 1)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="1000" height="1000"><defs><pattern id="p" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M50 0 L50 100 M0 50 L100 50" stroke="%232a3644" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23p)"/></svg>'); + border-bottom: 2px solid var(--accent-color); + padding: 3rem 1.5rem; + margin-bottom: 2rem; + color: var(--heading-color); + } + + .display-4 { + font-weight: 700; + } + + .section-title { + color: var(--heading-color); + border-bottom: 2px solid var(--border-color); + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; + font-weight: 600; + } + + .info-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 0.5rem; + margin-bottom: 1.5rem; + transition: all 0.3s ease-in-out; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + } + + .info-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); + border-color: var(--accent-color); + } + + .info-card.highlight { + border: 2px solid var(--accent-color); + box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); + } + + .card-header-custom { + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border-color); + font-weight: 600; + color: var(--heading-color); + display: flex; + justify-content: space-between; + align-items: center; + } + + .card-body-custom { + padding: 1.25rem; + flex-grow: 1; + } + + .details-toggle { + display: flex; + align-items: center; + width: 100%; + text-align: left; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + padding: 0.75rem 1.25rem; + border-radius: 0.25rem; + color: var(--text-color); + margin-top: 1rem; + } + + .details-toggle:hover { + background-color: rgba(255, 255, 255, 0.1); + } + + .details-toggle .bi-chevron-down { + transition: transform 0.3s ease; + margin-left: auto; + } + + .details-toggle[aria-expanded="true"] .bi-chevron-down { + transform: rotate(180deg); + } + + .collapse-content { + background-color: rgba(0,0,0,0.2); + padding: 1.25rem; + margin-top: -1px; + border: 1px solid var(--border-color); + border-radius: 0 0 0.5rem 0.5rem; + } + + .term { + color: var(--accent-color); + font-weight: 600; + cursor: help; + } + + .badge.use-case { font-size: 0.75rem; font-weight: 500; } + .use-case.bg-1 { background-color: var(--tag-bg-1) !important; } + .use-case.bg-2 { background-color: var(--tag-bg-2) !important; } + .use-case.bg-3 { background-color: var(--tag-bg-3) !important; } + .use-case.bg-4 { background-color: var(--tag-bg-4) !important; } + .use-case.bg-5 { background-color: var(--tag-bg-5) !important; } + + .pro-con-list { list-style: none; padding-left: 0; } + .pro-con-list li { display: flex; align-items: flex-start; margin-bottom: 0.5rem; } + .pro-con-list .bi { margin-right: 0.75rem; margin-top: 0.15rem; font-size: 1.2rem; } + .pro-con-list .bi-check-circle-fill { color: var(--success-color); } + .pro-con-list .bi-x-circle-fill { color: var(--danger-color); } + + .firearm-finder { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 0.5rem; + padding: 1.5rem; + } + .firearm-finder label { font-weight: 600; margin-bottom: 0.5rem; display: block; } + + .safety-rules { background-color: rgba(220, 53, 69, 0.1); border-left: 5px solid var(--danger-color); } + .checklist-item { display: flex; align-items: center; } + .checklist-item input { margin-right: 10px; } + .checklist-item label { margin-bottom: 0; user-select: none; } + + footer { + border-top: 1px solid var(--border-color); + padding: 2rem 0; + margin-top: 3rem; + font-size: 0.9rem; + } + + dl dt { + font-weight: bold; + color: var(--accent-color); + } + dl dd { + margin-left: 1.5em; + margin-bottom: 0.5em; + } + + @media print { + :root { + --bg-color: #ffffff; + --card-bg: #ffffff; + --border-color: #dee2e6; + --text-color: #000000; + --heading-color: #000000; + } + body { + background-color: var(--bg-color); + color: var(--text-color); + } + .page-header, .firearm-finder, .details-toggle, footer { + display: none; + } + .info-card, .info-card:hover { + border: 1px solid var(--border-color); + box-shadow: none; + transform: none; + page-break-inside: avoid; + } + .collapse { + display: block !important; + visibility: visible !important; + } + .collapse-content { + background-color: #f8f9fa; + padding: 1rem; + } + a { text-decoration: none; color: var(--text-color); } + } + </style> +</head> +<body> + + <header class="page-header text-center"> + <div class="container"> + <h1 class="display-4"><i class="bi bi-bullseye me-3"></i>Modern Firearms Cheatsheet</h1> + <p class="lead">An interactive guide to the classification, mechanics, and practical considerations of modern firearms. Designed for educational purposes and to promote safe, responsible understanding.</p> + <p class="text-muted small">Last updated: October 2023</p> + </div> + </header> + + <main class="container"> + + <!-- Firearm Finder Wizard --> + <section id="finder" class="mb-5"> + <div class="firearm-finder"> + <h3 class="text-center mb-4"><i class="bi bi-search me-2"></i>Firearm Finder Wizard</h3> + <p class="text-center text-muted">Select your primary interest to highlight relevant firearms below.</p> + <div class="row g-3 align-items-center"> + <div class="col-md-5"> + <label for="primaryUse">Primary Use Case:</label> + <select class="form-select" id="primaryUse"> + <option value="all" selected>Show All</option> + <option value="home-defense">Home Defense</option> + <option value="concealed-carry">Concealed Carry</option> + <option value="sport-competition">Sport / Competition</option> + <option value="hunting">Hunting</option> + <option value="long-range">Long-Range Precision</option> + </select> + </div> + <div class="col-md-5"> + <label for="keyFactor">Key Factor:</label> + <select class="form-select" id="keyFactor"> + <option value="all" selected>Any</option> + <option value="simplicity">Simplicity / Reliability</option> + <option value="capacity">High Capacity</option> + <option value="modularity">Modularity</option> + <option value="power">Power / Range</option> + <option value="concealability">Concealability</option> + </select> + </div> + <div class="col-md-2 d-grid"> + <label> </label> + <button class="btn btn-outline-warning" id="resetFinder">Reset</button> + </div> + </div> + </div> + </section> + + <!-- Core Concepts --> + <section id="core-concepts" data-tags="all"> + <h2 class="section-title"><i class="bi bi-diagram-3-fill me-2"></i>Core Concepts & Terminology</h2> + <div class="row"> + <!-- Action Types --> + <div class="col-lg-6"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-gear-wide-connected me-2"></i>Action Types</h5></div> + <div class="card-body-custom"> + <p class="summary">The mechanism that loads, fires, and ejects cartridges. It's the "engine" of the firearm.</p> + <dl> + <dt>Semi-Automatic</dt> + <dd>One trigger pull = one shot. Uses firing energy to automatically load the next round. The most common modern action.</dd> + <dt>Manual</dt> + <dd>User performs a physical action (pump, bolt, lever) for each shot. Slower but often very reliable.</dd> + <dt>Revolving</dt> + <dd>Cartridges are held in a rotating cylinder. Simple, reliable action specific to revolvers.</dd> + <dt>Automatic</dt> + <dd>Fires continuously while the trigger is held. Heavily restricted and primarily for military/LE use.</dd> + </dl> + </div> + </div> + </div> + <!-- Ammunition --> + <div class="col-lg-6"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-box-seam me-2"></i>Ammunition Explained</h5></div> + <div class="card-body-custom"> + <p class="summary">A self-contained cartridge is the hallmark of modern firearms. It consists of four key components.</p> + <dl> + <dt>Caliber (Rifles/Handguns)</dt> + <dd>Bore diameter measured in inches (.308) or millimeters (9mm).</dd> + <dt>Gauge (Shotguns)</dt> + <dd>Bore diameter based on the number of lead spheres that equal one pound. <span class="term" data-bs-toggle="tooltip" title="A 12-gauge barrel means 12 lead balls of that diameter weigh one pound.">Smaller gauge number = larger bore.</span></dd> + <dt>Cartridge Components</dt> + <dd><b>Case</b> (holds components), <b>Primer</b> (ignites), <b>Propellant</b> (creates gas), <b>Projectile</b> (bullet/shot).</dd> + </dl> + </div> + </div> + </div> + </div> + </section> + + <!-- Handguns --> + <section id="handguns" data-tags="all home-defense concealed-carry sport-competition simplicity capacity concealability"> + <h2 class="section-title"><i class="bi bi-hand-thumbs-up-fill me-2"></i>Handguns: Sidearms</h2> + <div class="row"> + <!-- Semi-Automatic Pistols --> + <div class="col-lg-6" data-tags="home-defense concealed-carry sport-competition capacity modularity"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-files me-2"></i>Semi-Automatic Pistols</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-1">Home Defense</span> + <span class="badge use-case bg-2">Concealed Carry</span> + <span class="badge use-case bg-3">Competition</span> + </div> + <p class="summary">The dominant modern handgun, fed by a detachable magazine. One trigger pull fires one round and automatically chambers the next.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#pistol-details" aria-expanded="false" aria-controls="pistol-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="pistol-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Firing Mechanism</dt> + <dd><span class="term" data-bs-toggle="tooltip" title="An internal striker is cocked and released by the trigger. Common in Glock, S&W M&P.">Striker-Fired</span> or <span class="term" data-bs-toggle="tooltip" title="An external hammer strikes the firing pin. Common in 1911s, Beretta 92.">Hammer-Fired</span></dd> + <dt>Frame Size</dt> + <dd>Full-Size, Compact, Subcompact, Micro-Compact</dd> + <dt>Common Calibers</dt> + <dd>9mm, .45 ACP, .40 S&W, 5.7x28mm</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>High capacity (10-20+ rounds) & fast reloads</li> + <li><i class="bi bi-check-circle-fill"></i>Lighter trigger pulls & large aftermarket support</li> + <li><i class="bi bi-x-circle-fill"></i>More complex operation than revolvers</li> + <li><i class="bi bi-x-circle-fill"></i>Can be susceptible to user-induced malfunctions (limp-wristing)</li> + </ul> + <h6>In Pop Culture</h6> + <p class="small text-muted">The Glock and Beretta 92 are staples in action films, while the 1911 is a classic icon seen in everything from noir films to modern video games.</p> + </div> + </div> + </div> + </div> + <!-- Revolvers --> + <div class="col-lg-6" data-tags="home-defense concealed-carry hunting simplicity power concealability"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-arrow-repeat me-2"></i>Revolvers</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-1">Home Defense</span> + <span class="badge use-case bg-2">Concealed Carry</span> + <span class="badge use-case bg-4">Backcountry</span> + </div> + <p class="summary">Features a revolving cylinder with multiple chambers. Prized for its absolute simplicity and reliability.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#revolver-details" aria-expanded="false" aria-controls="revolver-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="revolver-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Action Type</dt> + <dd><span class="term" data-bs-toggle="tooltip" title="Trigger pull cocks and releases the hammer.">Double-Action</span> or <span class="term" data-bs-toggle="tooltip" title="Hammer must be manually cocked before each shot.">Single-Action</span></dd> + <dt>Firing Mechanism</dt> + <dd>Exposed or Shrouded/Internal Hammer</dd> + <dt>Common Calibers</dt> + <dd>.38 Special, .357 Magnum, .44 Magnum</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>Extremely simple and reliable operation</li> + <li><i class="bi bi-check-circle-fill"></i>Not sensitive to ammunition power levels</li> + <li><i class="bi bi-x-circle-fill"></i>Low capacity (typically 5-8 rounds)</li> + <li><i class="bi bi-x-circle-fill"></i>Slow to reload compared to semi-automatics</li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Rifles --> + <section id="rifles" data-tags="all home-defense sport-competition hunting long-range capacity modularity power"> + <h2 class="section-title"><i class="bi bi-front me-2"></i>Rifles: Shoulder-Fired</h2> + <div class="row"> + <!-- MSRs --> + <div class="col-lg-6" data-tags="home-defense sport-competition modularity capacity"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-puzzle-fill me-2"></i>Modern Sporting Rifles (MSRs)</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-1">Home Defense</span> + <span class="badge use-case bg-3">Competition</span> + <span class="badge use-case bg-5">General Purpose</span> + </div> + <p class="summary">A category of modular, semi-automatic rifles, typified by the AR-15 platform. Highly adaptable for many uses.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#msr-details" aria-expanded="false" aria-controls="msr-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="msr-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Action</dt> + <dd>Semi-Automatic (<span class="term" data-bs-toggle="tooltip" title="Hot gas is vented back to cycle the action.">Gas-Operated</span>)</dd> + <dt>Caliber</dt> + <dd>Intermediate cartridges (e.g., 5.56x45mm, .300 Blackout)</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>Highly modular and customizable</li> + <li><i class="bi bi-check-circle-fill"></i>Low recoil, high capacity, and accurate</li> + <li><i class="bi bi-x-circle-fill"></i>Often subject to complex legal restrictions</li> + <li><i class="bi bi-x-circle-fill"></i>Intermediate cartridge not suitable for large game hunting</li> + </ul> + <h6>In Pop Culture</h6> + <p class="small text-muted">The AR-15 platform is ubiquitous in modern military films and video games like *Call of Duty*, representing the standard for a modern rifle.</p> + </div> + </div> + </div> + </div> + <!-- Precision Rifles --> + <div class="col-lg-6" data-tags="sport-competition long-range power simplicity"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-geo-alt-fill me-2"></i>Precision / Sniper Rifles</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-3">Competition</span> + <span class="badge use-case bg-4">Long-Range</span> + </div> + <p class="summary">Rifles engineered for extreme accuracy at long distances, typically using a bolt-action for maximum consistency.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#sniper-details" aria-expanded="false" aria-controls="sniper-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="sniper-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Action</dt> + <dd>Primarily <span class="term" data-bs-toggle="tooltip" title="Each round is manually cycled with a bolt handle. Maximizes potential accuracy.">Bolt-Action</span></dd> + <dt>Caliber</dt> + <dd>High-performance cartridges (6.5 Creedmoor, .300 Win Mag, .338 Lapua)</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>Supreme accuracy and long effective range</li> + <li><i class="bi bi-check-circle-fill"></i>Purpose-built for hitting very distant targets</li> + <li><i class="bi bi-x-circle-fill"></i>Very heavy, slow rate of fire, and expensive</li> + <li><i class="bi bi-x-circle-fill"></i>Requires significant skill and practice to use effectively</li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Shotguns --> + <section id="shotguns" data-tags="all home-defense sport-competition hunting simplicity power"> + <h2 class="section-title"><i class="bi bi-grid-1x2-fill me-2"></i>Shotguns: Smoothbore</h2> + <div class="row"> + <!-- Pump-Action Shotguns --> + <div class="col-lg-6" data-tags="home-defense hunting sport-competition simplicity power"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-forward-fill me-2"></i>Pump-Action Shotguns</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-1">Home Defense</span> + <span class="badge use-case bg-4">Hunting</span> + <span class="badge use-case bg-5">Tactical</span> + </div> + <p class="summary">The user manually slides a forend ("pump") to cycle the action. Known for its rugged reliability and versatility.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#pump-shotgun-details" aria-expanded="false" aria-controls="pump-shotgun-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="pump-shotgun-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Action</dt> + <dd>Manual Pump-Action</dd> + <dt>Gauge</dt> + <dd>12 Gauge (most common), 20 Gauge</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>Extremely reliable, durable, and affordable</li> + <li><i class="bi bi-check-circle-fill"></i>Cycles a wide variety of shell types reliably</li> + <li><i class="bi bi-x-circle-fill"></i>Slower rate of fire than a semi-auto</li> + <li><i class="bi bi-x-circle-fill"></i>User can cause a jam by "short-stroking" under stress</li> + </ul> + </div> + </div> + </div> + </div> + <!-- Semi-Auto Shotguns --> + <div class="col-lg-6" data-tags="hunting sport-competition capacity"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-skip-forward-fill me-2"></i>Semi-Automatic Shotguns</h5></div> + <div class="card-body-custom"> + <div class="mb-2"> + <span class="badge use-case bg-3">Competition</span> + <span class="badge use-case bg-4">Hunting</span> + </div> + <p class="summary">Uses firing energy to automatically cycle the action. Offers faster follow-up shots and reduced felt recoil.</p> + <button class="btn details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#semi-shotgun-details" aria-expanded="false" aria-controls="semi-shotgun-details"> + Details <i class="bi bi-chevron-down"></i> + </button> + <div class="collapse collapse-content" id="semi-shotgun-details"> + <h6>Defining Attributes</h6> + <dl> + <dt>Action</dt> + <dd>Semi-Automatic (Gas- or <span class="term" data-bs-toggle="tooltip" title="Uses recoil forces, rather than gas, to cycle the action.">Inertia</span>-operated)</dd> + <dt>Gauge</dt> + <dd>12 Gauge, 20 Gauge</dd> + </dl> + <h6>Practical Considerations</h6> + <ul class="pro-con-list"> + <li><i class="bi bi-check-circle-fill"></i>Fast rate of fire and reduced felt recoil</li> + <li><i class="bi bi-check-circle-fill"></i>Excellent for shooting sports and waterfowl hunting</li> + <li><i class="bi bi-x-circle-fill"></i>More expensive and complex than pump-actions</li> + <li><i class="bi bi-x-circle-fill"></i>Can be sensitive to light ammunition loads</li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + + <!-- Practical Knowledge --> + <section id="practical-knowledge" data-tags="all"> + <h2 class="section-title"><i class="bi bi-shield-check me-2"></i>Practical Knowledge & Safety</h2> + <div class="row"> + <!-- Safety Rules --> + <div class="col-lg-6"> + <div class="info-card safety-rules"> + <div class="card-header-custom"><h5><i class="bi bi-exclamation-triangle-fill me-2"></i>The 4 Universal Rules of Firearm Safety</h5></div> + <div class="card-body-custom"> + <ol class="fw-bold"> + <li class="mb-2">Treat all guns as if they are always loaded.</li> + <li class="mb-2">Never let the muzzle cover anything you are not willing to destroy.</li> + <li class="mb-2">Keep your finger off the trigger until your sights are on the target and you have made the decision to shoot.</li> + <li>Be sure of your target and what is beyond it.</li> + </ol> + </div> + </div> + </div> + <!-- MythBusting --> + <div class="col-lg-6"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-patch-question-fill me-2"></i>Hollywood MythBusting</h5></div> + <div class="card-body-custom"> + <dl> + <dt>Myth: "Silencers" make guns silent.</dt> + <dd><b>Truth:</b> Suppressors reduce the sound to hearing-safe levels (like a jackhammer), but they are far from silent.</dd> + <dt>Myth: Racking a shotgun is the ultimate intimidation tactic.</dt> + <dd><b>Truth:</b> It also gives away your position and ejects a perfectly good, unfired shell from the weapon.</dd> + <dt>Myth: Pistols are often fired sideways ("gangster style").</dt> + <dd><b>Truth:</b> This makes aiming nearly impossible and can cause the firearm to malfunction as the empty casing may fail to eject properly.</dd> + </dl> + </div> + </div> + </div> + <!-- Checklists --> + <div class="col-lg-12"> + <div class="info-card"> + <div class="card-header-custom"><h5><i class="bi bi-list-check me-2"></i>Practical Checklists</h5></div> + <div class="card-body-custom"> + <div class="row"> + <div class="col-md-6"> + <h6>First Time Range Trip</h6> + <ul id="rangeChecklist" class="list-unstyled"> + <li class="checklist-item"><input type="checkbox" id="item1"><label for="item1">Firearm (unloaded, in a case)</label></li> + <li class="checklist-item"><input type="checkbox" id="item2"><label for="item2">Ammunition</label></li> + <li class="checklist-item"><input type="checkbox" id="item3"><label for="item3">Eye Protection</label></li> + <li class="checklist-item"><input type="checkbox" id="item4"><label for="item4">Ear Protection (plugs and/or muffs)</label></li> + <li class="checklist-item"><input type="checkbox" id="item5"><label for="item5">Targets</label></li> + </ul> + </div> + <div class="col-md-6"> + <h6>Basic Cleaning Kit</h6> + <ul id="cleaningChecklist" class="list-unstyled"> + <li class="checklist-item"><input type="checkbox" id="item6"><label for="item6">Cleaning Rod or Bore Snake</label></li> + <li class="checklist-item"><input type="checkbox" id="item7"><label for="item7">Bore Brushes (for caliber/gauge)</label></li> + <li class="checklist-item"><input type="checkbox" id="item8"><label for="item8">Firearm Solvent/Cleaner</label></li> + <li class="checklist-item"><input type="checkbox" id="item9"><label for="item9">Firearm Lubricant/Oil</label></li> + <li class="checklist-item"><input type="checkbox" id="item10"><label for="item10">Cleaning Patches & Utility Brushes</label></li> + </ul> + </div> + </div> + </div> + </div> + </div> + </div> + </section> + + </main> + + <footer class="text-center text-muted"> + <div class="container"> + <p>© 2023 David Veksler. All Rights Reserved. Content is AI-assisted and for informational purposes only.</p> + <p>Always seek professional training and adhere to all local, state, and federal laws regarding firearms.</p> + </div> + </footer> + + <!-- Bootstrap 5.3.3 JS Bundle --> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + + <script> + document.addEventListener('DOMContentLoaded', function () { + // Initialize Bootstrap Tooltips + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + + // --- Checklist Functionality with localStorage --- + const checklists = ['rangeChecklist', 'cleaningChecklist']; + + function saveChecklistState(checklistId) { + const checklist = document.getElementById(checklistId); + const checkboxes = checklist.querySelectorAll('input[type="checkbox"]'); + const state = {}; + checkboxes.forEach(box => { + state[box.id] = box.checked; + }); + localStorage.setItem(checklistId, JSON.stringify(state)); + } + + function loadChecklistState(checklistId) { + const savedState = localStorage.getItem(checklistId); + if (savedState) { + const state = JSON.parse(savedState); + for (const id in state) { + const checkbox = document.getElementById(id); + if (checkbox) { + checkbox.checked = state[id]; + } + } + } + } + + checklists.forEach(id => { + const checklist = document.getElementById(id); + if(checklist) { + loadChecklistState(id); + checklist.addEventListener('change', (e) => { + if (e.target.type === 'checkbox') { + saveChecklistState(id); + } + }); + } + }); + + + // --- Firearm Finder Wizard --- + const primaryUseSelect = document.getElementById('primaryUse'); + const keyFactorSelect = document.getElementById('keyFactor'); + const resetButton = document.getElementById('resetFinder'); + const allCards = document.querySelectorAll('.info-card[data-tags], .col-lg-6[data-tags]'); + + function filterFirearms() { + const useValue = primaryUseSelect.value; + const factorValue = keyFactorSelect.value; + + allCards.forEach(card => { + const tags = card.dataset.tags.split(' '); + + const useMatch = useValue === 'all' || tags.includes(useValue); + const factorMatch = factorValue === 'all' || tags.includes(factorValue); + + if (useMatch && factorMatch) { + card.classList.remove('d-none'); + card.classList.add('highlight'); + } else { + card.classList.add('d-none'); + card.classList.remove('highlight'); + } + }); + + if (useValue === 'all' && factorValue === 'all') { + allCards.forEach(card => card.classList.remove('highlight')); + } + } + + function resetFinder() { + primaryUseSelect.value = 'all'; + keyFactorSelect.value = 'all'; + allCards.forEach(card => { + card.classList.remove('d-none'); + card.classList.remove('highlight'); + }); + } + + primaryUseSelect.addEventListener('change', filterFirearms); + keyFactorSelect.addEventListener('change', filterFirearms); + resetButton.addEventListener('click', resetFinder); + }); + </script> + +</body> +</html> \ No newline at end of file