New assets

app.vue

@@ -64,7 +64,7 @@ onMounted(() => {
 
       <div class="card bg-base-100 shadow-xl ">
         <div class="card-body">
-          <h2 class="card-title">Connection Status</h2>
+          <h2 class="card-title">Control</h2>
 
           <FlashProgress :progress="flashProgress" />
 

components/DeviceSelector.vue

@@ -15,56 +15,40 @@ watch(selectedDevice, (newValue) => {
     <div class="card-body">
       <div class="">
 
-      <h2 class="card-title">Device Selection</h2>
-      <div class="form-control">
-        <label class="label cursor-pointer">
-          <span class="label-text">Rev. A (2.13 inch)</span>
-          <input
-            type="radio"
-            name="device-type"
-            class="radio"
-            value="lolin_s3_mini-213epd"
-            v-model="selectedDevice"
-          />
-        </label>
-      </div>
-      <div class="form-control">
-        <label class="label cursor-pointer">
-          <span class="label-text">Rev. A (2.9 inch) <small>unsupported</small></span>
-          <input
-            type="radio"
-            name="device-type"
-            class="radio"
-            value="lolin_s3_mini-29epd"
-            v-model="selectedDevice"
-          />
-        </label>
-      </div>
-      <div class="form-control">
-        <label class="label cursor-pointer">
-          <span class="label-text">Rev. B (2.13 inch)</span>
-          <input
-            type="radio"
-            name="device-type"
-            class="radio"
-            value="btclock_rev_b-213epd"
-            v-model="selectedDevice"
-          />
-        </label>
-      </div>
-      <div class="w-full md:flex hidden">
-        <div class="  grid  flex-grow place-items-center">
-          <img src="/rev_b.png" class="max-w-none"> 
-
+        <h2 class="card-title">Device Selection</h2>
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <span class="label-text">Rev. A (2.13 inch)</span>
+            <input type="radio" name="device-type" class="radio" value="lolin_s3_mini-213epd"
+              v-model="selectedDevice" />
+          </label>
+        </div>
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <span class="label-text">Rev. A (2.9 inch) <small>unsupported</small></span>
+            <input type="radio" name="device-type" class="radio" value="lolin_s3_mini-29epd" v-model="selectedDevice" />
+          </label>
+        </div>
+        <div class="form-control">
+          <label class="label cursor-pointer">
+            <span class="label-text">Rev. B (2.13 inch)</span>
+            <input type="radio" name="device-type" class="radio" value="btclock_rev_b-213epd"
+              v-model="selectedDevice" />
+          </label>
+        </div>
+        <div class="w-full md:flex items-center hidden md:flex-col lg:flex-row">
+          <div class="lg:w-1/2 md:w-full ">
+            <img src="/rev_b.jpeg"
+              class="transition-transform duration-300 lg:hover:scale-[1.4]  md:hover:scale-[1.7] h-auto z-50 ">
           </div>
-          <div class="grid flex-grow p-5 text-sm">
+          <div class="lg:w-1/2 md:w-full lg:p-5 text-sm">
             <p>If you are unsure about which version you have, check the back of the BTClock.</p>
             <p>The Rev. B has "Rev. B" written on the backside and two buttons on the back (Reset and Boot).</p>
-            <small>All versions before block #841273 (2024-04-28) are rev. A.<br>The 2.9 inch version is offered as a courtesy, you most likely have the 2.13 inch version.</small>
+            <small>All versions before block #841273 (2024-04-28) are rev. A.<br>The 2.9 inch version is offered as a
+              courtesy, you most likely have the 2.13 inch version.</small>
           </div>
-      </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
-