From 0ee886c693992c39546ba0bc9a4ac7ec9c27bc35 Mon Sep 17 00:00:00 2001 From: Petri Hienonen Date: Sun, 18 Jan 2026 11:33:55 +0200 Subject: Add product image --- biome.json | 2 +- image.jpg | Bin 0 -> 189810 bytes index.html | 150 ++++++++++------------------------------------ style.css | 196 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 227 insertions(+), 121 deletions(-) create mode 100644 image.jpg create mode 100644 style.css diff --git a/biome.json b/biome.json index ceb22ef..e0ecc4f 100644 --- a/biome.json +++ b/biome.json @@ -1,6 +1,6 @@ { "files": { - "includes": ["index.html", "biome.json"] + "includes": ["index.html", "biome.json", "style.css"] }, "html": { "experimentalFullSupportEnabled": true, diff --git a/image.jpg b/image.jpg new file mode 100644 index 0000000..4c6f559 Binary files /dev/null and b/image.jpg differ diff --git a/index.html b/index.html index 2693790..e4200b8 100644 --- a/index.html +++ b/index.html @@ -4,126 +4,7 @@ ARFHL Tactical Wi-Fi HaLow Mesh Network - + @@ -192,6 +73,35 @@ in favor of open standards and crypto agility.

+ +
+
+ ARFHL-UM Dual-Band Wi-Fi HaLow MESH Portable Gateway + ARFHL-UM Portable Gateway +
+
+

ARFHL-UM Dual-Band Wi-Fi HaLow MESH Portable Gateway

+
    +
  • + Plug-and-Play, Zero Configuration: No setup required, offering immediate access to wireless internet. +
    • +
  • + Energy Efficiency: Wi-Fi HaLow ensures low power consumption, long-range connectivity, excellent signal penetration, and energy efficiency, all while reducing costs and environmental impact. +
    • +
  • + USB Power Bank Support: A wearable, convenient solution. A standard power bank can keep the ARFHL-UM operational for up to 8 hours. +
    • +
  • + Seamless On-the-Go Connectivity: Lightweight, convenient wearable devices, combined with WiFi HaLow's long-range connectivity, provide wireless networking anytime, anywhere. +
    • +
  • + Long-Range Solution: Offers connectivity over distances exceeding 1 km, surpassing the limitations of traditional Wi-Fi protocols. +
    • +
+
+
+ +

Graceful Degradation

diff --git a/style.css b/style.css new file mode 100644 index 0000000..470b094 --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +body { + font-family: Arial, Helvetica, sans-serif; + margin: 0; + background-color: #0f1419; + color: #e6e6e6; + line-height: 1.6; +} +header { + background: linear-gradient(135deg, #1b2633, #0f1419); + padding: 40px; +} +header h1 { + margin: 0; + font-size: 2.4em; +} +header p { + max-width: 900px; + color: #cfd8dc; +} +.gap-box { + background-color: #1a222b; + border: 1px solid #2e3b4a; + border-left: 4px solid #ff6b6b; + padding: 20px; + margin: 20px 0; + max-width: 900px; +} +section { + padding: 40px; + max-width: 1200px; + margin: auto; +} +h2 { + border-bottom: 2px solid #2e3b4a; + padding-bottom: 8px; +} +h3 { + color: #90caf9; +} +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; +} +th, +td { + border: 1px solid #2e3b4a; + padding: 10px; + text-align: left; + vertical-align: top; +} +th { + background-color: #1b2633; +} +ul { + margin-left: 20px; +} +.badge { + display: inline-block; + background-color: #263238; + padding: 4px 10px; + margin: 4px 0; + border-radius: 4px; + font-size: 0.85em; +} +.procurement-badge { + background-color: #1a5276; + color: #fff; + margin-right: 8px; +} +.footer { + background-color: #0b0f14; + padding: 20px; + text-align: center; + font-size: 0.85em; + color: #9e9e9e; +} +.cta-box { + background-color: #1a222b; + padding: 30px; + margin: 40px 0; + border: 1px solid #2e3b4a; + text-align: center; +} +.diagram { + background-color: #111820; + padding: 20px; + margin: 20px 0; + border: 1px solid #2e3b4a; +} +.note { + background-color: #1a222b; + padding: 15px; + border-left: 4px solid #90caf9; + margin: 20px 0; +} +.warning { + background-color: #2d1b1b; + padding: 15px; + border-left: 4px solid #ff6b6b; + margin: 20px 0; +} +.advantages { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; + margin: 30px 0; +} +.advantage-card { + background-color: #1a222b; + padding: 20px; + border-radius: 4px; + border-top: 3px solid #43a047; +} +abbr { + cursor: help; + text-decoration: underline dotted; +} + +/* Product Showcase Styles */ +.product-showcase { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 30px; + margin: 40px 0; + padding: 25px; + background-color: #1a222b; + border: 1px solid #2e3b4a; + border-radius: 8px; + align-items: start; +} + +.product-image { + text-align: center; +} + +.product-image img { + width: 100%; + max-width: 300px; + height: auto; + border-radius: 6px; + border: 1px solid #2e3b4a; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.product-image caption { + display: block; + margin-top: 10px; + font-size: 0.9em; + color: #90caf9; + font-style: italic; +} + +.product-features h3 { + margin-top: 0; + color: #43a047; + border-bottom: 2px solid #2e3b4a; + padding-bottom: 10px; +} + +.product-features ul { + margin-left: 20px; + list-style-type: none; +} + +.product-features li { + margin-bottom: 15px; + padding-left: 25px; + position: relative; + line-height: 1.5; +} + +.product-features li:before { + content: "✓"; + color: #43a047; + position: absolute; + left: 0; + font-weight: bold; +} + +.product-features strong { + color: #90caf9; + font-weight: 600; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .product-showcase { + grid-template-columns: 1fr; + gap: 20px; + } + + .product-image img { + max-width: 250px; + } +} -- cgit v1.2.3-70-g09d2