Support ! and ? mode in WebUI

- Long press to open mode menu
- Show toast on error log

#7

module/webui/styles/applist.css

@@ -46,7 +46,7 @@
     margin: 0 auto;
     margin-bottom: 10px;
     outline: none;
-    padding: 12px;
+    padding: 10px;
     width: calc(100% - 30px);
     max-width: 900px;
     transition: background-color 0.2s ease;
@@ -58,6 +58,83 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
+}
+
+.mode {
+    display: none;
+    flex-direction: row;
+    gap: 10px;
+    padding: 10px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: fit-content;
+    background-color: #B1B1B1;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid #ccc;
+    border-radius: 12px;
+    opacity: 0;
+    transform: scale(0);
+    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    z-index: 1200;
+}
+
+.mode.show {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.mode-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: none;
+    z-index: 1100;
+}
+
+.mode-switch {
+    position: relative;
+    display: inline-block;
+}
+
+.mode-input {
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.status-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 7px;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease;
+    border: 3px solid transparent;
+}
+
+#normal-indicator {
+    background-color: #007bff;
+}
+
+#hack-indicator {
+    background-color: #FF8400;
+}
+
+#generate-indicator {
+    background-color: #6C00FF;
+}
+
+.mode-input[type="radio"]:checked ~ .mode-icon .status-indicator {
+    border-color: #fff;
 }
 
 .name {
@@ -92,8 +169,8 @@
     height: 100%;
     border: 2px solid #ccc;
     border-radius: 4px;
-    transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     box-sizing: border-box;
+    transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .tick-symbol {
@@ -109,7 +186,21 @@
     border-color: #007bff;
     background-color: #007bff;
     transition: border-color 0.1s ease;
-    animation: border-bounce 0.3s ease-out;
+    animation: checked-bounce 0.3s ease-out;
+}
+
+.checkbox-checked-generate:checked + .custom-checkbox {
+    border-color: #6C00FF;
+    background-color: #6C00FF;
+}
+
+.checkbox-checked-hack:checked + .custom-checkbox {
+    border-color: #FF8400;
+    background-color: #FF8400;
+}
+
+.checkbox:not(:checked) + .custom-checkbox {
+    animation: unchecked-bounce 0.3s ease-out;
 }
 
 .checkbox:checked + .custom-checkbox .tick-symbol {
@@ -117,7 +208,19 @@
     opacity: 1;
 }
 
-@keyframes border-bounce {
+@keyframes checked-bounce {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.8);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes unchecked-bounce {
     0% {
         transform: scale(1);
     }
@@ -137,4 +240,9 @@
     .update-card {
         background-color: #4D4D4D;
     }
+    
+    .mode {
+        background-color: #343434;
+        border: 1px solid #6E6E6E;
+    }
 }