finish quick-start docs and stub out new-model doc

Author: scottfeldman

pkg/device/docs/device-ui.html

@@ -1,4 +1,4 @@
-<h4>DEVICE TO UI</h4>
+<h2>DEVICE TO UI</h2>
 
 <p>The device can route packets up the network tree using Packet.RouteUp().
 Packets are routed to uplinks and sessions.</p>

pkg/device/docs/images/under-construction.svg

@@ -0,0 +1,10 @@
+<h2>NEW MODEL</h2>
+
+<img class="w-32" src="/docs/images/under-construction.svg">
+
+<p>This page is under construction.  If you're looking to create new device
+model, this is where you would look.</p>
+
+<p>In the meantime, find the <button>Show Code</button> button one of the demo
+devices to see how it's constructed.  The devices are written in Go and
+HTMX.</p>

pkg/device/docs/new-model.html

@@ -3,18 +3,19 @@
 	<div class="flex flex-row mx-2.5 my-8 justify-evenly items-center relative"
 		     hx-target="#steps"
 		     hx-swap="outerHTML">
-		<div class="bar absolute h-3 w-80 z-0 bg-text"></div>
+		<div class="bar absolute h-3 w-52 z-0 bg-text"></div>
 		<button class="round-button-selected relative z-10">Install Hub</button>
 		<button class="round-button relative z-10" hx-get="/docs/quick-start-2.html">Create Device</button>
-		<button class="round-button relative z-10" hx-get="/docs/quick-start-3.html">Deploy Device</button>
 	</div>
 
+	<p>The first step is to install your hub.</p>
+
 	<p>Your hub is private which means you have to install and run it somewhere you
 	control, either on a local resource such as laptop, PC, or Raspberry Pi, or on
 	a remote resource in the "cloud".</p>
 
 	<p class="mb-8">There are multiple ways to <a href="/doc/install">install a hub</a>.
-	Here are a few:</p>
+	Here are a few examples:</p>
 
 	<div id="tabs"
 		hx-get="/docs/quick-start-1-docker.html"

pkg/device/docs/quick-start-1.html

@@ -0,0 +1,15 @@
+<div id="tabs">
+
+	<div class="flex flex-row mb-8 tab-list justify-evenly"
+		     hx-target="#tabs"
+		     hx-swap="outerHTML">
+		<button class="tab" hx-get="/docs/quick-start-2-relays.html">Relays (Arduino rp2040)</button>
+		<button class="tab-selected cursor-default">Camera (Raspberry Pi)</button>
+	</div>
+
+	<video controls playsinline muted height="280">
+		<source src="https://media.merliot.io/videos/camera-install.mp4" type="video/mp4">
+		Your browser does not support the MP4 video format.
+	</video>
+
+</div>

pkg/device/docs/quick-start-2-camera.html

@@ -0,0 +1,15 @@
+<div id="tabs">
+
+	<div class="flex flex-row mb-8 tab-list justify-evenly"
+		     hx-target="#tabs"
+		     hx-swap="outerHTML">
+		<button class="tab-selected cursor-default">Relays (Arduino rp2040)</button>
+		<button class="tab" hx-get="/docs/quick-start-2-camera.html">Camera (Raspberry Pi)</button>
+	</div>
+
+	<video controls playsinline muted height="280">
+		<source src="https://media.merliot.io/videos/relays-install.mp4" type="video/mp4">
+		Your browser does not support the MP4 video format.
+	</video>
+
+</div>

pkg/device/docs/quick-start-2-relays.html

@@ -3,11 +3,20 @@
 	<div class="flex flex-row mx-2.5 my-8 justify-evenly items-center relative"
 		     hx-target="#steps"
 		     hx-swap="outerHTML">
-		<div class="bar absolute h-3 w-80 z-0 bg-text"></div>
+		<div class="bar absolute h-3 w-52 z-0 bg-text"></div>
 		<button class="round-button relative z-10" hx-get="/docs/quick-start-1.html">Install Hub</button>
 		<button class="round-button-selected relative z-10">Create Device</button>
-		<button class="round-button relative z-10" hx-get="/docs/quick-start-3.html">Deploy Device</button>
 	</div>
 
-	<p>Create device...adfvasdf sadf asdf asdf asdf asdf asdf asdf sa dfsa fsa fd saf safd asfd asdf sadf </p>
+	<p>Once the hub is installed, the next step is to create and deploy
+	devices on the hub.</p>
+
+	<p>Here are some example videos showing device installs:</p>
+
+	<div id="tabs"
+		hx-get="/docs/quick-start-2-relays.html"
+		hx-trigger="load"
+		hx-target="#tabs"
+		hx-swap="outerHTML">
+	</div>
 </div>