as subtle tspartices effect
· 1 year ago
76e2ce969211be41ebbfacd82f29b8efc866391d
Parent:
6ade46727
1 file changed +241 −104
- anduril-products.html +241 −104
Diff
--- a/anduril-products.html +++ b/anduril-products.html @@ -1,4 +1,3 @@ -<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> @@ -13,8 +12,6 @@ rel="apple-touch-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>" /> - <!-- Consider adding a dedicated apple-touch-icon if you have one --> - <meta name="description" content="Explore Anduril Industries' products: Lattice OS, Altius, Ghost, Anvil, Dive AUVs & more. This cheatsheet details their advanced AI-powered autonomous systems for modern defense." @@ -24,8 +21,6 @@ content="Anduril, Lattice OS, Altius, Ghost, Anvil, Dive AUV, autonomous systems, defense technology, AI, counter UAS, military drones, force protection, cheatsheet" /> <link rel="canonical" href="https://cheatsheets.davidveksler.com/anduril-products.html" /> - - <!-- Open Graph / Facebook --> <meta property="og:type" content="article" /> <meta property="og:url" content="https://cheatsheets.davidveksler.com/anduril-products.html" /> <meta property="og:title" content="Anduril Industries Product Cheatsheet: Autonomous Defense Systems & AI" /> @@ -34,13 +29,8 @@ content="Explore Anduril Industries' products: Lattice OS, Altius, Ghost, Anvil, Dive AUVs & more. This cheatsheet details their advanced AI-powered autonomous systems for modern defense." /> <meta property="og:image" content="https://cheatsheets.davidveksler.com/images/anduril.png" /> - <!-- Recommended: Replace with a URL to a compelling image (e.g., 1200x630px) --> <meta property="og:site_name" content="David Veksler Cheatsheets" /> - <!-- Or your specific site name --> - - <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> - <!-- Use "summary" if you don't have a large image --> <meta name="twitter:url" content="https://cheatsheets.davidveksler.com/anduril-products.html" /> <meta name="twitter:title" content="Anduril Industries Product Cheatsheet: Autonomous Defense Systems & AI" /> <meta @@ -48,49 +38,74 @@ content="Explore Anduril Industries' products: Lattice OS, Altius, Ghost, Anvil, Dive AUVs & more. This cheatsheet details their advanced AI-powered autonomous systems for modern defense." /> <meta name="twitter:image" content="https://cheatsheets.davidveksler.com/images/anduril.png" /> - <!-- Recommended: Replace with a URL to a compelling image (e.g., 1200x675px for summary_large_image) --> - <!-- <meta name="twitter:site" content="@YourTwitterHandle"> --> - <!-- Optional: Your site's Twitter handle --> <meta name="twitter:creator" content="@heroiclife" /> - <!-- Optional: Author's Twitter handle --> - <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> :root { - --anduril-bg-primary: #0a0a0a; /* Very dark grey, near black */ - --anduril-bg-secondary: #141414; /* Slightly lighter for cards/sections */ - --anduril-text-primary: #eaeaea; /* Light grey for primary text */ - --anduril-text-secondary: #a0a0a0; /* Medium grey for secondary text */ - --anduril-border-color: #2a2a2a; /* Dark grey border */ - --anduril-accent-hover: #333333; /* Hover accent for interactive elements */ + --anduril-bg-primary: #0a0a0a; + --anduril-bg-secondary: #141414; + --anduril-text-primary: #eaeaea; + --anduril-text-secondary: #a0a0a0; + --anduril-border-color: #2a2a2a; + --anduril-accent-hover: #333333; --anduril-font-family: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif; + --category-color-platform: #4a90e2; + --category-color-force-protection: #50e3c2; + --category-color-air: #4a90e2; + --category-color-underwater: #277bda; + --category-color-ground: #f5a623; + --category-color-rockets: #d0021b; + --anduril-category-color: var(--anduril-text-secondary); + } - /* Product Category Colors - Used for subtle icon hints or specific borders if needed, otherwise monochrome */ - --category-color-platform: #4a90e2; /* Muted Blue */ - --category-color-force-protection: #50e3c2; /* Muted Teal */ - --category-color-air: #4a90e2; /* Muted Blue */ - --category-color-underwater: #277bda; /* Deeper Muted Blue */ - --category-color-ground: #f5a623; /* Muted Orange */ - --category-color-rockets: #d0021b; /* Muted Red */ - - --anduril-category-color: var(--anduril-text-secondary); /* Default to secondary text color for icons */ + html { + /* Ensures the html element itself also has the dark background if body is transparent */ + background-color: var(--anduril-bg-primary, 0.85); } body { - background-color: var(--anduril-bg-primary); + /* UPDATED: Body background is removed or transparent. The #tsparticles-background will provide the visual base. */ + /* background-color: var(--anduril-bg-primary); */ /* REMOVED or set to transparent */ + background-color: transparent; /* Explicitly transparent */ font-family: var(--anduril-font-family); padding-bottom: 3rem; color: var(--anduril-text-primary); - font-size: 15px; /* Slightly smaller base for a denser feel like Anduril's site */ + font-size: 15px; line-height: 1.6; + overflow-x: hidden; + position: relative; /* Body establishes a stacking context */ + } + + #tsparticles-background { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; /* Behind all normally flowed/positioned content within the body */ + /* The particles themselves will have a background color set via JS if needed, + or they can be transparent drawing over html's background */ } + /* Main content containers that should sit ON TOP of the particle layer */ + .page-header, + .container#main-container, + footer.container { + background-color: rgba(10, 10, 10, 0.85); /* Semi-transparent instead of opaque */ + position: relative; /* Establish stacking context */ + z-index: 0; /* Sit above anything with z-index -1 */ + } + + /* ---- [Existing styles from .page-header down to .col-lg-4, .col-md-6 should be here] ---- */ + /* Ensure the rest of your styles are included here as before */ + /* For brevity, I'm only showing the critical changes around body, html, #tsparticles-background, and main content wrappers */ + .page-header { - background-color: var(--anduril-bg-primary); /* Consistent dark background */ + /* background-color: var(--anduril-bg-primary); -- Handled by the rule above */ padding: 2.5rem 1.5rem; - text-align: left; /* Anduril style */ + text-align: left; border-bottom: 1px solid var(--anduril-border-color); margin-bottom: 2.5rem; display: flex; @@ -98,7 +113,7 @@ } .anduril-logo-container { - width: 180px; /* Adjust as needed */ + width: 180px; height: auto; margin-right: 1.5rem; } @@ -106,13 +121,13 @@ .anduril-logo-container svg { width: 100%; height: auto; - fill: var(--anduril-text-primary); /* White logo */ + fill: var(--anduril-text-primary); } .page-header-text h1 { color: var(--anduril-text-primary); - font-weight: 500; /* Medium weight, Anduril style */ - font-size: 1.8rem; /* Adjusted size */ + font-weight: 500; + font-size: 1.8rem; margin-bottom: 0.25rem; letter-spacing: -0.5px; } @@ -124,11 +139,15 @@ font-weight: 300; } + .container#main-container { + /* background-color: var(--anduril-bg-primary); -- Handled by the rule above */ + } + .schema-container { - background-color: transparent; /* Transparent against body background */ - border: none; /* No border for schema container itself */ + background-color: transparent; + border: none; border-radius: 0; - padding: 0; /* Remove padding, cards will define their space */ + padding: 0; margin-bottom: 3rem; } @@ -137,9 +156,9 @@ background-color: transparent; margin: 0 0 1.8rem 0; font-weight: 500; - text-transform: none; /* Anduril uses sentence case mostly */ + text-transform: none; letter-spacing: -0.2px; - font-size: 1.5rem; /* Larger section titles */ + font-size: 1.5rem; padding: 0; display: block; border-bottom: 1px solid var(--anduril-border-color); @@ -147,49 +166,48 @@ } .info-card { - background: var(--anduril-bg-secondary); + background: rgba(20, 20, 20, 0.9); /* Semi-transparent for cards too */ border: 1px solid var(--anduril-border-color); - border-radius: 6px; /* Subtle rounding */ - box-shadow: none; /* Anduril has minimal shadows */ + border-radius: 6px; + box-shadow: none; transition: background-color 0.2s ease; display: flex; flex-direction: column; - height: 100%; /* Ensure cards in a row are same height */ + height: 100%; } .info-card:hover { - background-color: var(--anduril-accent-hover); - transform: none; /* No lift on hover */ + background-color: rgba(51, 51, 51, 0.9); /* Semi-transparent hover state */ + transform: none; } .info-card .card-body { padding: 0; display: flex; flex-direction: column; - flex-grow: 1; /* Allow card body to grow */ + flex-grow: 1; } .info-card h5 { - /* Card title */ color: var(--anduril-text-primary); background-color: transparent; font-size: 1.1rem; text-align: left; margin: 0; padding: 1.2rem 1.3rem; - font-weight: 500; /* Medium weight */ + font-weight: 500; border-bottom: 1px solid var(--anduril-border-color); - border-radius: 5px 5px 0 0; /* Match card rounding */ + border-radius: 5px 5px 0 0; letter-spacing: -0.2px; } .info-card h5 .bi { font-size: 1.2em; opacity: 0.8; margin-right: 0.6rem; - color: var(--anduril-text-secondary); /* Subtle icon color */ - vertical-align: -0.125em; /* Align custom SVGs better with text */ + color: var(--anduril-text-secondary); + vertical-align: -0.125em; } .card-content-wrapper { padding: 1.3rem; - flex-grow: 1; /* Allow content to grow */ + flex-grow: 1; display: flex; flex-direction: column; } @@ -198,14 +216,14 @@ color: var(--anduril-text-secondary); margin-bottom: 1rem; line-height: 1.55; - flex-grow: 1; /* Allow summary to take available space */ + flex-grow: 1; } .collapse-content { font-size: 0.88rem; border-top: 1px solid var(--anduril-border-color); padding: 1.3rem; - background-color: var(--anduril-bg-secondary); /* Same as card or slightly different */ + background-color: rgba(20, 20, 20, 0.9); /* Semi-transparent */ border-radius: 0 0 5px 5px; color: var(--anduril-text-secondary); } @@ -233,12 +251,12 @@ margin-bottom: 0; } .collapse-content li::before { - content: "\F282"; /* Check icon */ + content: "\F282"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 3px; - color: var(--anduril-text-secondary); /* Subtle icon color */ + color: var(--anduril-text-secondary); font-size: 1em; } .collapse-content li strong { @@ -255,7 +273,7 @@ .details-toggle { font-size: 0.85rem; - margin-top: auto; /* Pushes button to the bottom */ + margin-top: auto; align-self: flex-start; padding: 0.4rem 0.8rem; color: var(--anduril-text-secondary); @@ -263,7 +281,7 @@ background-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; border-radius: 4px; - font-weight: 400; /* Regular weight */ + font-weight: 400; } .details-toggle:hover, .details-toggle:focus { @@ -273,7 +291,6 @@ } .details-toggle .bi-plus-lg, .details-toggle .bi-dash-lg { - /* Specific for these icons */ transition: transform 0.2s ease-in-out; } .details-toggle[aria-expanded="true"] .bi-plus-lg { @@ -283,7 +300,7 @@ display: none; } - footer { + footer.container { padding-top: 2.5rem; padding-bottom: 2rem; font-size: 0.85em; @@ -291,6 +308,7 @@ text-align: center; border-top: 1px solid var(--anduril-border-color); } + footer a { color: var(--anduril-text-secondary); font-weight: 400; @@ -301,7 +319,6 @@ text-decoration: underline; } - /* Category specific icon colors (subtle) */ .card-platform h5 .bi { color: var(--category-color-platform); } @@ -329,12 +346,16 @@ .col-md-6 { display: flex; flex-direction: column; - margin-bottom: 1.5rem; /* Added consistent margin for spacing */ + margin-bottom: 1.5rem; } </style> </head> <body> + <div id="tsparticles-background"></div> + <!-- PARTICLES DIV --> + <header class="page-header"> + <!-- Header content --> <div class="anduril-logo-container"> <svg viewBox="0 0 1135.53 207.8" xmlns="http://www.w3.org/2000/svg"> <path @@ -350,6 +371,8 @@ </header> <div class="container" id="main-container"> + <!-- Main content: Lattice Platform, Force Protection, Air Systems, etc. --> + <!-- All schema-container divs and their info-card children go here as before --> <!-- I. LATTICE PLATFORM --> <div class="schema-container section-platform" data-section-id="section-lattice-platform"> <h2 class="section-title" id="section-lattice-platform-title">Lattice Platform</h2> @@ -699,10 +722,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-force-protection" id="card-counter-intrusion"> <div class="card-body"> - <h5> - <i class="bi bi-building-shield"></i> Counter Intrusion (Land) - <!-- Icon changed from bi-pin-map-fill --> - </h5> + <h5><i class="bi bi-building-shield"></i> Counter Intrusion (Land)</h5> <div class="card-content-wrapper"> <p class="summary"> Automates protection of bases and critical infrastructure by autonomously identifying and surfacing @@ -797,14 +817,33 @@ <div class="info-card card-force-protection" id="card-maritime-intrusion"> <div class="card-body"> <h5> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16"> - <path d="M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.777 11.777 0 0 1-2.517 2.453 7.009 7.009 0 0 1-1.048.605c-.26.132-.52.25-.75.354a.933.933 0 0 1-.524 0c-.23-.104-.49-.222-.75-.354a7.007 7.007 0 0 1-1.048-.605 11.772 11.772 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/> - <path d="M3 7.75c.5 0 1 .25 1.5.75S5.5 9.25 6 9.25s1-.25 1.5-.75S8.5 7.75 9 7.75s1 .25 1.5.75S11.5 9.25 12 9.25s1-.25 1.5-.75" stroke="var(--anduril-bg-secondary)" stroke-width="1.2" fill="none" stroke-linecap="round"/> - <path d="M3 10.25c.5 0 1 .25 1.5.75S5.5 11.75 6 11.75s1-.25 1.5-.75S8.5 10.25 9 10.25s1 .25 1.5.75S11.5 11.75 12 11.75s1-.25 1.5-.75" stroke="var(--anduril-bg-secondary)" stroke-width="1.2" fill="none" stroke-linecap="round"/> + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="currentColor" + class="bi" + viewBox="0 0 16 16" + > + <path + d="M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.777 11.777 0 0 1-2.517 2.453 7.009 7.009 0 0 1-1.048.605c-.26.132-.52.25-.75.354a.933.933 0 0 1-.524 0c-.23-.104-.49-.222-.75-.354a7.007 7.007 0 0 1-1.048-.605 11.772 11.772 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" + /> + <path + d="M3 7.75c.5 0 1 .25 1.5.75S5.5 9.25 6 9.25s1-.25 1.5-.75S8.5 7.75 9 7.75s1 .25 1.5.75S11.5 9.25 12 9.25s1-.25 1.5-.75" + stroke="var(--anduril-bg-secondary)" + stroke-width="1.2" + fill="none" + stroke-linecap="round" + /> + <path + d="M3 10.25c.5 0 1 .25 1.5.75S5.5 11.75 6 11.75s1-.25 1.5-.75S8.5 10.25 9 10.25s1 .25 1.5.75S11.5 11.75 12 11.75s1-.25 1.5-.75" + stroke="var(--anduril-bg-secondary)" + stroke-width="1.2" + fill="none" + stroke-linecap="round" + /> </svg> Maritime Counter Intrusion - <!-- Icon changed from bi-tsunami --> - <!-- TODO: Replace with custom SVG icon: Shielded ship or coastline defense graphic - DONE --> </h5> <div class="card-content-wrapper"> <p class="summary"> @@ -1014,7 +1053,6 @@ <div class="info-card card-air" id="card-anvil"> <div class="card-body"> <h5><i class="bi bi-shield-slash-fill"></i> Anvil / Anvil-M</h5> - <!-- Icon changed from bi-bootstrap-reboot --> <div class="card-content-wrapper"> <p class="summary"> Autonomous kinetic interceptor for precise, low-collateral defeat of Group 1 & 2 UAS threats, cued @@ -1116,11 +1154,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-air" id="card-barracuda"> <div class="card-body"> - <h5> - <i class="bi bi-rocket"></i> Barracuda / Barracuda-M - <!-- Icon changed from bi-fast-forward-fill --> - <!-- TODO: Replace with custom SVG icon: Sleek missile shape - Replaced with bi-rocket --> - </h5> + <h5><i class="bi bi-rocket"></i> Barracuda / Barracuda-M</h5> <div class="card-content-wrapper"> <p class="summary"> Family of air-breathing Autonomous Air Vehicles (AAVs) for hyper-scale production; munition variant @@ -1749,11 +1783,7 @@ <div class="col-lg-4 col-md-6"> <div class="info-card card-air" id="card-roadrunner"> <div class="card-body"> - <h5> - <i class="bi bi-airplane-engines-fill"></i> Roadrunner / Roadrunner-M - <!-- Icon changed from bi-cone-striped --> - <!-- TODO: Replace with custom SVG icon: VTOL jet interceptor --> - </h5> + <h5><i class="bi bi-airplane-engines-fill"></i> Roadrunner / Roadrunner-M</h5> <div class="card-content-wrapper"> <p class="summary"> Reusable VTOL AAV with twin turbojets and modular payloads; Roadrunner-M is a high-explosive @@ -1871,13 +1901,22 @@ <div class="info-card card-underwater" id="card-copperhead"> <div class="card-body"> <h5> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16"> - <path d="M8.523 2.985C5.561 2.985 3 4.884 3 7.5c0 2.617 2.561 4.515 5.523 4.515C11.485 12.015 14 10.117 14 7.5c0-2.616-2.515-4.515-5.477-4.515zM4 7.5c0-1.774 1.783-3.215 4.523-3.215C11.263 4.285 13 5.726 13 7.5s-1.737 3.215-4.477 3.215C5.783 10.715 4 9.274 4 7.5z"/> - <path d="M2 6.5h1.5V6H2v.5zm0 1H1V7h1v.5zm0 1H2v.5h1.5V8H2v-.5zm11-2V6h1.5v.5H13zm.5 1.5H13V7h1.5v.5H13V8h.5v-.5z"/> + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="currentColor" + class="bi" + viewBox="0 0 16 16" + > + <path + d="M8.523 2.985C5.561 2.985 3 4.884 3 7.5c0 2.617 2.561 4.515 5.523 4.515C11.485 12.015 14 10.117 14 7.5c0-2.616-2.515-4.515-5.477-4.515zM4 7.5c0-1.774 1.783-3.215 4.523-3.215C11.263 4.285 13 5.726 13 7.5s-1.737 3.215-4.477 3.215C5.783 10.715 4 9.274 4 7.5z" + /> + <path + d="M2 6.5h1.5V6H2v.5zm0 1H1V7h1v.5zm0 1H2v.5h1.5V8H2v-.5zm11-2V6h1.5v.5H13zm.5 1.5H13V7h1.5v.5H13V8h.5v-.5z" + /> </svg> Copperhead / Copperhead-M - <!-- Icon changed from bi-vinyl-fill --> - <!-- TODO: Replace with custom SVG icon: Torpedo / UUV munition shape - DONE --> </h5> <div class="card-content-wrapper"> <p class="summary"> @@ -1975,13 +2014,20 @@ <div class="info-card card-underwater" id="card-dive-ld"> <div class="card-body"> <h5> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16"> - <path d="M13.5 8c0-1.597-1.163-2.92-2.758-3.341L10.5 4h-5l-.242.659C3.663 5.08 2.5 6.403 2.5 8s1.163 2.92 2.758 3.341L5.5 12h5l.242-.659C12.337 10.92 13.5 9.597 13.5 8zM3.5 8c0-1.115.81-2.071 1.91-.257L5.5 11h5l.09-.257c1.1-.1816 1.91-1.142 1.91-2.243s-.81-2.071-1.91-.257L10.5 5H5.5l-.09.257C4.31 6.071 3.5 6.991 3.5 8z"/> - <path d="M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="currentColor" + class="bi" + viewBox="0 0 16 16" + > + <path + d="M13.5 8c0-1.597-1.163-2.92-2.758-3.341L10.5 4h-5l-.242.659C3.663 5.08 2.5 6.403 2.5 8s1.163 2.92 2.758 3.341L5.5 12h5l.242-.659C12.337 10.92 13.5 9.597 13.5 8zM3.5 8c0-1.115.81-2.071 1.91-.257L5.5 11h5l.09-.257c1.1-.1816 1.91-1.142 1.91-2.243s-.81-2.071-1.91-.257L10.5 5H5.5l-.09.257C4.31 6.071 3.5 6.991 3.5 8z" + /> + <path d="M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" /> </svg> Dive-LD - <!-- Icon changed from bi-aspect-ratio-fill --> - <!-- TODO: Replace with custom SVG icon: AUV/Submarine shape - DONE --> </h5> <div class="card-content-wrapper"> <p class="summary"> @@ -2091,12 +2137,22 @@ <div class="info-card card-underwater" id="card-dive-xl"> <div class="card-body"> <h5> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16"> - <path d="M14.5 7.5C14.5 6.022 13.254 5 11.5 5h-7C2.746 5 1.5 6.022 1.5 7.5v1C1.5 9.978 2.746 11 4.5 11h7c1.754 0 3-1.022 3-2.5v-1zM2.5 7.5c0-.98.879-1.875 2-1.875h7c1.121 0 2 .895 2 1.875v1c0 .98-.879 1.875-2 1.875h-7c-1.121 0-2-.895-2-1.875v-1z"/> - <path d="M7.5 4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5H9V4.5a.5.5 0 0 1-.5-.5h-1a.5.5 0 0 1-.5.5V5h-.5v-.5zM7.5 11v.5h.5V12h1v-.5h.5V11h-2z"/> + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="currentColor" + class="bi" + viewBox="0 0 16 16" + > + <path + d="M14.5 7.5C14.5 6.022 13.254 5 11.5 5h-7C2.746 5 1.5 6.022 1.5 7.5v1C1.5 9.978 2.746 11 4.5 11h7c1.754 0 3-1.022 3-2.5v-1zM2.5 7.5c0-.98.879-1.875 2-1.875h7c1.121 0 2 .895 2 1.875v1c0 .98-.879 1.875-2 1.875h-7c-1.121 0-2-.895-2-1.875v-1z" + /> + <path + d="M7.5 4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5H9V4.5a.5.5 0 0 1-.5-.5h-1a.5.5 0 0 1-.5.5V5h-.5v-.5zM7.5 11v.5h.5V12h1v-.5h.5V11h-2z" + /> </svg> Dive-XL - <!-- TODO: Replace with custom SVG icon: Larger, more robust AUV/Submarine shape - DONE --> </h5> <div class="card-content-wrapper"> <p class="summary"> @@ -2301,7 +2357,6 @@ <div class="info-card card-ground" id="card-menace"> <div class="card-body"> <h5><i class="bi bi-boxes"></i> Menace</h5> - <!-- Icon changed from bi-truck --> <div class="card-content-wrapper"> <p class="summary"> Family of configurable, expeditionary C4 solutions for operators at the edge, extending Lattice Mesh @@ -2920,9 +2975,10 @@ </div> </div> </div> - <!-- /container --> + <!-- /container#main-container --> <footer class="container text-center pb-3"> + <!-- Footer content --> <div> <a href="https://www.linkedin.com/in/davidveksler/" @@ -2943,8 +2999,10 @@ </footer> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { + // Existing Bootstrap collapse/tooltip logic const collapseElements = document.querySelectorAll(".collapse"); collapseElements.forEach((collapseEl) => { const button = document.querySelector(`.details-toggle[data-bs-target="#${collapseEl.id}"]`); @@ -2963,7 +3021,7 @@ button.setAttribute("aria-expanded", "false"); } }; - updateIconAndButton(collapseEl.classList.contains("show")); // Initial state + updateIconAndButton(collapseEl.classList.contains("show")); collapseEl.addEventListener("show.bs.collapse", () => updateIconAndButton(true)); collapseEl.addEventListener("hide.bs.collapse", () => updateIconAndButton(false)); } @@ -2973,6 +3031,85 @@ tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); + + // tsParticles initialization + if (typeof tsParticles !== "undefined") { + tsParticles.load("tsparticles-background", { + fpsLimit: 60, + background: { + color: "transparent", + }, + particles: { + number: { + value: 50, + density: { + enable: true, + value_area: 800, + }, + }, + color: { + value: "#505050", // Made particles a bit more visible + }, + shape: { + type: "circle", + }, + opacity: { + value: 0.3, // Slightly increased opacity + random: true, + anim: { + enable: true, + speed: 0.2, + opacity_min: 0.1, + sync: false, + }, + }, + size: { + value: 2.2, // Slightly increased size + random: true, + }, + links: { + color: "#484848", // Made links a bit more visible + distance: 160, + enable: true, + opacity: 0.2, + width: 1, + }, + move: { + enable: true, + speed: 0.4, + direction: "none", + random: true, + straight: false, + out_mode: "out", + bounce: false, + }, + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "grab", + }, + onclick: { + enable: false, + }, + resize: true, + }, + modes: { + grab: { + distance: 170, + links: { + opacity: 0.25, + }, + }, + }, + }, + detectRetina: true, + }); + } else { + console.error("tsParticles library not loaded. Check CDN link and internet connection."); + } }); </script> </body>