save

src/www/css/app.css

@@ -887,6 +887,10 @@ video {
   width: 2rem;
 }
 
+.w-\[70\%\] {
+  width: 70%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -919,6 +923,10 @@ video {
   flex-grow: 0;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1064,6 +1072,11 @@ video {
   border-width: 2px;
 }
 
+.border-x-2 {
+  border-left-width: 2px;
+  border-right-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1094,6 +1107,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-red-800 {
   --tw-border-opacity: 1;
   border-color: rgb(153 27 27 / var(--tw-border-opacity));
@@ -1143,6 +1161,10 @@ video {
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1545,6 +1567,10 @@ video {
 }
 
 @media not all and (min-width: 768px) {
+  .max-md\:flex {
+    display: flex;
+  }
+
   .max-md\:hidden {
     display: none;
   }
@@ -1694,10 +1720,6 @@ video {
     margin-right: 0.5rem;
   }
 
-  .md\:block {
-    display: block;
-  }
-
   .md\:inline-block {
     display: inline-block;
   }
@@ -1738,6 +1760,11 @@ video {
   }
 }
 
+.dark\:border-neutral-200:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 229 229 / var(--tw-border-opacity));
+}
+
 .dark\:border-neutral-500:where(.dark, .dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
@@ -1763,6 +1790,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-gray-600:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-neutral-400:where(.dark, .dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(163 163 163 / var(--tw-bg-opacity));

src/www/index.html

@@ -383,6 +383,86 @@
           </div>
         </div>
 
+        <!-- Firewall -->
+        <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
+          <div
+            class="flex flex-row flex-auto items-center mb-4 p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600">
+            <div class="flex-grow">
+              <p class="text-2xl font-medium dark:text-neutral-200">Firewall</p>
+            </div>
+          </div>
+
+          <table class="table-auto w-[70%] dark:text-neutral-200 mb-4">
+            <thead>
+              <tr>
+                <th>Interface</th>
+                <th>IPv4 address</th>
+                <th>IPv6 address</th>
+              </tr>
+            </thead>
+            <tbody class="text-center">
+              <tr>
+                <td>eth0</td>
+                <td>192.168.1.1</td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>wg0</td>
+                <td>10.8.0.1</td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <table class="table-auto border-t-2 dark:border-neutral-200 w-full dark:text-neutral-200">
+            <thead class="bg-gray-200 dark:bg-gray-600">
+              <tr>
+                <th></th>
+                <th class="border-x-2 dark:border-neutral-200">Source</th>
+                <th class="border-x-2 dark:border-neutral-200">Destination</th>
+                <th class="border-x-2 dark:border-neutral-200">Protocol</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody class="text-center">
+              <tr>
+                <td class="border border-gray-600 p-1">delete</td>
+                <td class="border border-gray-600 p-1">192.168.11.3</td>
+                <td class="border border-gray-600 p-1">10.9.8.1</td>
+                <td class="border border-gray-600 p-1">udp</td>
+                <td class="border border-gray-600 p-1"></td>
+              </tr>
+              <tr>
+                <td class="border border-gray-600 p-1">
+                  <form id="fw">
+                    <input form="fw" type="submit" value="send"
+                      class="w-full outline-none bg-transparent text-center"/>
+                  </form>
+                </td>
+                <td class="border border-gray-600">
+                  <input form="fw" type="text" name="source" class="w-full outline-none bg-transparent text-center"/>
+                </td>
+                <td class="border border-gray-600">
+                  <input form="fw" type="text" name="destination"
+                    class="w-full outline-none bg-transparent text-center"/>
+                </td>
+                <td class="border border-gray-600">
+                  <select form="fw" name="protocol" class="bg-transparent">
+                    <option value="tcp">tcp</option>
+                    <option value="udp">udp</option>
+                  </select>
+                </td>
+                <td class="border border-gray-600 p-1">
+                  <select form="fw" name="action" class="bg-transparent">
+                    <option value="allow">allow</option>
+                    <option value="block">block</option>
+                  </select>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
         <!-- QR Code-->
         <div v-if="qrcode">
           <div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">