From 6edb00b8b3f479e2efa078a758e5d864f33220a5 Mon Sep 17 00:00:00 2001
From: DoktorShift <keleeweb@tutanota.com>
Date: Mon, 2 Feb 2026 01:44:13 +0100
Subject: [PATCH 1/2] mobile screens

---
 templates/devicetimer/index.html | 77 +++++++++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 12 deletions(-)

diff --git a/templates/devicetimer/index.html b/templates/devicetimer/index.html
index edf73a4..37d398a 100644
--- a/templates/devicetimer/index.html
+++ b/templates/devicetimer/index.html
@@ -212,6 +212,59 @@
         background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
         pointer-events: none;
     }
+
+    /* Responsive Styles */
+    @media (max-width: 599px) {
+        .stat-item {
+            padding: 10px 12px;
+        }
+
+        .stat-label {
+            font-size: 0.65rem;
+        }
+
+        .stat-value {
+            font-size: 1.2rem;
+        }
+
+        .qr-wrapper {
+            padding: 12px;
+        }
+
+        .qr-image {
+            width: 200px;
+            height: 200px;
+        }
+
+        .switch-card {
+            padding: 10px;
+        }
+
+        /* Hide Currency, Timezone, Hours columns on mobile */
+        .q-table th:nth-child(3),
+        .q-table td:nth-child(3),
+        .q-table th:nth-child(4),
+        .q-table td:nth-child(4),
+        .q-table th:nth-child(5),
+        .q-table td:nth-child(5) {
+            display: none !important;
+        }
+
+        .info-banner-wrapper {
+            height: 100px;
+        }
+    }
+
+    @media (max-width: 400px) {
+        .stat-value {
+            font-size: 1rem;
+        }
+
+        .qr-image {
+            width: 160px;
+            height: 160px;
+        }
+    }
 </style>
 {% endblock %}
 
@@ -235,7 +288,7 @@
                     borderless
                     dense
                     filled
-                    style="min-width: 200px;"
+                    style="min-width: 180px;"
                     @update:model-value="onWalletChange"
                 >
                     <template v-slot:prepend>
@@ -277,7 +330,7 @@
 
         <!-- Stats Cards -->
         <div class="row q-col-gutter-sm q-mb-md">
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -297,7 +350,7 @@
                     </div>
                 </q-card>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -317,7 +370,7 @@
                     </div>
                 </q-card>
             </div>
-            <div class="col-4">
+            <div class="col-12 col-sm-4">
                 <q-card class="stat-card custom_border" flat>
                     <div class="row items-center stat-item">
                         <div class="col">
@@ -359,7 +412,7 @@
             <div class="row items-center q-px-md q-pt-md q-pb-sm">
                 <div class="col">
                     <div class="text-subtitle1 text-weight-medium">Timed Devices</div>
-                    <div class="text-caption text-grey">Manage your bitcoinSwitch devices</div>
+                    <div class="text-caption text-grey gt-xs">Manage your bitcoinSwitch devices</div>
                 </div>
                 <div class="col-auto row items-center q-gutter-x-sm">
                     <q-input
@@ -369,13 +422,13 @@
                         debounce="300"
                         placeholder="Search..."
                         class="search-input"
-                        style="width: 160px;"
+                        style="width: 140px;"
                     >
                         <template v-slot:prepend>
                             <q-icon name="search" size="16px" color="grey-6"></q-icon>
                         </template>
                     </q-input>
-                    <q-btn flat round size="sm" @click="exportCSV">
+                    <q-btn flat round size="sm" @click="exportCSV" class="gt-xs">
                         <q-icon size="18px">
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -385,8 +438,8 @@
                         <q-tooltip>Export CSV</q-tooltip>
                     </q-btn>
                     <q-btn unelevated color="primary" size="sm" class="avatar_style" @click="openDeviceDialog()" no-caps>
-                        <q-icon name="add" size="18px" class="q-mr-xs"></q-icon>
-                        New Device
+                        <q-icon name="add" size="18px"></q-icon>
+                        <span class="q-ml-xs gt-xs">New Device</span>
                     </q-btn>
                 </div>
             </div>
@@ -455,7 +508,7 @@
                 hide-bottom
             >
                 <template v-slot:body-cell-id="props">
-                    <q-td :props="props">
+                    <q-td :props="props" class="hide-on-mobile">
                         <div class="row items-center no-wrap">
                             <code class="text-caption text-grey-7" style="font-size: 0.7rem;">{% raw %}{{ props.row.id.substring(0, 8) }}...{% endraw %}</code>
                             <q-btn flat dense round size="xs" color="grey-6" class="q-ml-xs" @click="copyText(props.row.id, 'Device ID copied!')">
@@ -774,7 +827,7 @@
                         ></q-select>
 
                         <div class="row q-col-gutter-sm">
-                            <div class="col-6">
+                            <div class="col-12 col-sm-6">
                                 <q-select
                                     v-model="deviceDialog.data.currency"
                                     :options="currencies"
@@ -783,7 +836,7 @@
                                     label="Currency"
                                 ></q-select>
                             </div>
-                            <div class="col-6">
+                            <div class="col-12 col-sm-6">
                                 <q-select
                                     v-model="deviceDialog.data.timezone"
                                     :options="timezones"

From 2c14eeddd808feb28ee32c3e65a3e00a48e9c04f Mon Sep 17 00:00:00 2001
From: DoktorShift <keleeweb@tutanota.com>
Date: Mon, 2 Feb 2026 01:51:02 +0100
Subject: [PATCH 2/2] web flasher button

---
 templates/devicetimer/index.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/templates/devicetimer/index.html b/templates/devicetimer/index.html
index 37d398a..b09a1be 100644
--- a/templates/devicetimer/index.html
+++ b/templates/devicetimer/index.html
@@ -650,11 +650,33 @@
                     <p class="text-body2 text-grey-7 q-mb-sm" style="line-height: 1.5;">
                         Bring your physical devices to life with Bitcoin Lightning payments.
                     </p>
-                    <p class="text-caption text-grey-6 q-mb-none" style="line-height: 1.5;">
+                    <p class="text-caption text-grey-6" style="line-height: 1.5;">
                         DeviceTimer extends the bitcoinSwitch ecosystem with powerful time-based controls.
                         Set operating hours, enforce cooldown periods, and limit daily usage.
                         Perfect for animal feeders, arcade machines, vending machines, and any IoT device.
                     </p>
+                    <q-btn
+                        unelevated
+                        color="orange-8"
+                        text-color="white"
+                        size="sm"
+                        class="full-width avatar_style q-mt-md"
+                        no-caps
+                        href="https://bitcoinswitch.lnbits.com"
+                        target="_blank"
+                    >
+                        <q-icon size="16px" class="q-mr-sm">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5M12 4v12"/>
+                                </g>
+                            </svg>
+                        </q-icon>
+                        Flash Firmware (Web Flasher)
+                    </q-btn>
+                    <div class="text-center text-caption text-grey-5 q-mt-xs" style="font-size: 0.6rem;">
+                        Requires Chrome or Edge browser
+                    </div>
                 </q-card-section>
 
                 <!-- Features -->