Add product image

author: Petri Hienonen <petri.hienonen@gmail.com> 2026-01-18 11:33:55 +0200
committer: Petri Hienonen <petri.hienonen@gmail.com> 2026-01-18 11:33:55 +0200
commit: 0ee886c693992c39546ba0bc9a4ac7ec9c27bc35 (patch)
tree: 062648652d58a8854bb77463fdcb4d7777886376
parent: ad96e0a669ee99359d2a3fbc72793cfde4b60ce5 (diff)
download: radio-0ee886c693992c39546ba0bc9a4ac7ec9c27bc35.tar.zst
4 files changed, 227 insertions, 121 deletions
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
--- /dev/null
+++ b/image.jpg
diff --git a/index.html b/index.html
index 2693790..e4200b8 100644
--- a/index.html
+++ b/index.html
@@ -4,126 +4,7 @@
 		<meta charset="UTF-8">
 		<title>ARFHL Tactical Wi-Fi HaLow Mesh Network</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<style>
-		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;
-		}
-		</style>
+		<link rel="stylesheet" href="style.css">
 	</head>
 
 	<body>
@@ -192,6 +73,35 @@
 						in favor of open standards and crypto agility.
 					</p>
 
+					<!-- NEW PRODUCT PLACEMENT SECTION -->
+					<div class="product-showcase">
+						<div class="product-image">
+							<img src="image.jpg" alt="ARFHL-UM Dual-Band Wi-Fi HaLow MESH Portable Gateway">
+							<caption>ARFHL-UM Portable Gateway</caption>
+						</div>
+						<div class="product-features">
+							<h3>ARFHL-UM Dual-Band Wi-Fi HaLow MESH Portable Gateway</h3>
+							<ul>
+								<li>
+									<strong>Plug-and-Play, Zero Configuration:</strong> No setup required, offering immediate access to wireless internet.
+								</li>
+								<li>
+									<strong>Energy Efficiency:</strong> Wi-Fi HaLow ensures low power consumption, long-range connectivity, excellent signal penetration, and energy efficiency, all while reducing costs and environmental impact.
+								</li>
+								<li>
+									<strong>USB Power Bank Support:</strong> A wearable, convenient solution. A standard power bank can keep the ARFHL-UM operational for up to 8 hours.
+								</li>
+								<li>
+									<strong>Seamless On-the-Go Connectivity:</strong> Lightweight, convenient wearable devices, combined with WiFi HaLow's long-range connectivity, provide wireless networking anytime, anywhere.
+								</li>
+								<li>
+									<strong>Long-Range Solution:</strong> Offers connectivity over distances exceeding 1 km, surpassing the limitations of traditional Wi-Fi protocols.
+								</li>
+							</ul>
+						</div>
+					</div>
+					<!-- END NEW SECTION -->
+
 					<div class="advantages">
 						<div class="advantage-card">
 							<h4>Graceful Degradation</h4>
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;
+  }
+}
author	Petri Hienonen <petri.hienonen@gmail.com>	2026-01-18 11:33:55 +0200
committer	Petri Hienonen <petri.hienonen@gmail.com>	2026-01-18 11:33:55 +0200
commit	0ee886c693992c39546ba0bc9a4ac7ec9c27bc35 (patch)
tree	062648652d58a8854bb77463fdcb4d7777886376
parent	ad96e0a669ee99359d2a3fbc72793cfde4b60ce5 (diff)
download	radio-0ee886c693992c39546ba0bc9a4ac7ec9c27bc35.tar.zst