diff --git a/module/install_func.sh b/module/install_func.sh
index 67283b5..bcccc47 100644
--- a/module/install_func.sh
+++ b/module/install_func.sh
@@ -16,7 +16,7 @@ initialize() {
fi
#Set specific path
- sed -i "s|\"set-path\"|\"/data/adb/modules/$NEW_MODID/\"|" "$MODPATH/webui/js/main.js" || abort "! Failed to set path"
+ sed -i "s|\"set-path\"|\"/data/adb/modules/$NEW_MODID/\"|" "$MODPATH/webui/scripts/main.js" || abort "! Failed to set path"
# Set aapt binary
cp "$MODPATH/module.prop" "$COMPATH/update/module.prop"
diff --git a/module/webui/index.html b/module/webui/index.html
index bd2a393..798a681 100644
--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -5,9 +5,14 @@
TrickyAddon
-
+
+
+
+
+
+
-
+
diff --git a/module/webui/js/about.js b/module/webui/scripts/about.js
similarity index 100%
rename from module/webui/js/about.js
rename to module/webui/scripts/about.js
diff --git a/module/webui/js/applist.js b/module/webui/scripts/applist.js
similarity index 100%
rename from module/webui/js/applist.js
rename to module/webui/scripts/applist.js
diff --git a/module/webui/js/help.js b/module/webui/scripts/help.js
similarity index 100%
rename from module/webui/js/help.js
rename to module/webui/scripts/help.js
diff --git a/module/webui/js/language.js b/module/webui/scripts/language.js
similarity index 100%
rename from module/webui/js/language.js
rename to module/webui/scripts/language.js
diff --git a/module/webui/js/main.js b/module/webui/scripts/main.js
similarity index 100%
rename from module/webui/js/main.js
rename to module/webui/scripts/main.js
diff --git a/module/webui/js/menu_option.js b/module/webui/scripts/menu_option.js
similarity index 100%
rename from module/webui/js/menu_option.js
rename to module/webui/scripts/menu_option.js
diff --git a/module/webui/js/search_menu.js b/module/webui/scripts/search_menu.js
similarity index 100%
rename from module/webui/js/search_menu.js
rename to module/webui/scripts/search_menu.js
diff --git a/module/webui/js/vbmeta-digest.js b/module/webui/scripts/vbmeta-digest.js
similarity index 100%
rename from module/webui/js/vbmeta-digest.js
rename to module/webui/scripts/vbmeta-digest.js
diff --git a/module/webui/styles.css b/module/webui/styles.css
deleted file mode 100644
index e06ad20..0000000
--- a/module/webui/styles.css
+++ /dev/null
@@ -1,847 +0,0 @@
-body {
- background-color: #F5F5F5;
- padding-top: var(--window-inset-top);
- padding-bottom: var(--window-inset-bottom);
-}
-
-.no-scroll {
- overflow: hidden;
-}
-
-.header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: fixed;
- top: 0;
- height: 40px;
- width: calc(100% - 10px);
- max-width: 1100px;
- background-color: #F5F5F5;
- transition: transform 0.3s ease;
- z-index: 1100;
- margin-left: auto;
- margin-right: auto;
- left: 0;
- right: 0;
-}
-
-.header-block {
- background-color: #F5F5F5;
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 1100;
- transition: transform 0.3s ease;
- height: var(--window-inset-top);
-}
-
-#title {
- padding-left: 5px;
- font-size: 16.5px;
- font-weight: bold;
-}
-
-.no-connection {
- padding: 0;
- display: none;
- margin-right: 0px;
- background: none;
- border: none;
-}
-
-.language-dropdown {
- position: relative;
- display: inline-block;
-}
-
-.language-button {
- padding-top: 5px;
- background: none;
- border: none;
-}
-
-.language-icon {
- fill: #000;
-}
-
-.language-menu {
- display: flex;
- padding: 3px 10px;
- flex-direction: column;
- position: absolute;
- right: 0;
- background-color: #fff;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- z-index: 1800;
- border: 1px solid #ccc;
- border-radius: 8px;
- opacity: 0;
- visibility: hidden;
- max-height: calc(100vh - 50px);
- overflow-y: auto;
- transform: translateY(-10px);
- transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-}
-
-.language-menu.show {
- display: block;
- opacity: 1;
- visibility: visible;
- transform: translateY(0);
-}
-
-.language-option {
- padding: 8px 5px;
- text-align: left;
- background: none;
- border: none;
- font-size: 16px;
- color: #333;
- width: 100%;
- white-space: nowrap;
- border-bottom: 1px solid #ccc;
- transition: background-color 0.2s ease;
-}
-
-.language-option:last-child {
- border-bottom: none;
-}
-
-.language-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: none;
- z-index: 1100;
- display: none;
-}
-
-.help-button {
- padding-left: 5px;
- margin-right: auto;
- background: none;
- border: none;
-}
-
-.help-overlay {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 2000;
- justify-content: center;
- align-items: center;
- opacity: 0;
- transition: opacity 0.2s ease;
-}
-
-.help-overlay.show {
- display: flex;
- opacity: 1;
-}
-
-.help-overlay.hide {
- opacity: 0;
-}
-
-.help-menu {
- position: relative;
- width: 90vw;
- max-width: 800px;
- background-color: white;
- padding: 10px 0;
- border-radius: 15px;
- text-align: left;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.close-help {
- position: absolute;
- top: 15px;
- right: 12px;
- background: none;
- border: none;
- font-size: 20px;
- color: #ccc;
-}
-
-.help-content {
- max-height: 85vh;
- padding: 0 30px;
- overflow-y: auto;
-}
-
-.help-content p {
- font-size: 26px;
-}
-
-.help-content ul {
- padding-left: 0;
- list-style-type: none;
-}
-
-.help-content ul li {
- font-weight: bold;
- font-size: 18px;
-}
-
-.help-content ul ul li {
- font-weight: normal;
- font-size: 16px;
-}
-
-.help-content ul ul ul li {
- color: #777777;
- font-weight: normal;
- font-size: 14px;
-}
-
-.help-content ul ul ul li a {
- color: inherit;
-}
-
-.boot-hash-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 1200;
- justify-content: center;
- align-items: center;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.2s ease, visibility 0.2s ease;
-}
-
-.boot-hash-card {
- position: fixed;
- top: 30%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 80vw;
- max-width: 600px;
- background-color: #fff;
- border-radius: 18px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
- z-index: 1200;
- padding: 20px;
- display: none;
- flex-direction: column;
- gap: 15px;
- opacity: 0;
- transition: opacity 0.2s ease;
-}
-
-.boot-hash-overlay.show {
- visibility: visible;
- opacity: 1;
-}
-
-.boot-hash-card.show {
- display: flex;
- opacity: 1;
-}
-
-.input-box {
- width: calc(100% - 20px);
- height: 100px;
- resize: none;
- padding: 9px;
- font-size: 16px;
- background-color: #FFF;
- border: 1px solid #ccc;
- border-radius: 10px;
-}
-
-.button-container {
- display: flex;
- justify-content: flex-start;
-}
-
-.boot-hash-save-button {
- padding: 10px 20px;
- border: none;
- border-radius: 38px;
- font-size: 18px;
- font-weight: bold;
- background-color: #007bff;
- color: white;
- margin-left: auto;
- transition: background-color 0.2s ease;
-}
-
-.about-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: rgba(0, 0, 0, 0.5);
- z-index: 1100;
- display: none;
- justify-content: center;
- align-items: center;
- opacity: 0;
- transition: opacity 0.2s ease;
-}
-
-.about-menu {
- position: fixed;
- top: 50%;
- left: 50%;
- width: 90vw;
- max-width: 800px;
- transform: translate(-50%, -50%);
- background: #fff;
- border-radius: 15px;
- padding: 30px 0;
- z-index: 1200;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
- z-index: 1200;
- opacity: 0;
- display: flex;
- flex-direction: column;
- gap: 15px;
- transition: opacity 0.2s ease;
-}
-
-.close-about {
- position: absolute;
- top: 15px;
- right: 12px;
- background: none;
- border: none;
- font-size: 18px;
- color: #ccc;
-}
-
-.link,
-.about-content p {
- margin: 0;
- padding: 0 30px;
- font-size: 16px;
- text-align: left;
-}
-
-#module_name_line1 {
- font-size: 26px;
-}
-
-#module_name_line2 {
- font-size: 22px;
-}
-
-#authored {
- font-size: 14px;
-}
-
-#disclaimer {
- font-style: italic;
-}
-
-#acknowledgment {
- font-weight: bold;
- font-size: 18px;
-}
-
-.link-icon {
- display: inline-block;
- font-style: normal;
- border-radius: 8px;
- box-sizing: border-box;
- margin-bottom: 5px;
- transition: background-color 0.2s ease;
-}
-
-.link-icon svg {
- padding-bottom: 3px;
- vertical-align: bottom;
- height: 17px;
-}
-
-#telegram {
- font-size: 18px;
- padding: 3px 10px;
- background-color: #38A7ED;
- color: #fff;
- fill: #fff;
-}
-
-#github {
- font-size: 18px;
- padding: 3px 10px;
- background-color: #606060;
- color: #fff;
- fill: #fff;
-}
-
-#link-text {
- font-size: 17px;
- font-weight: bold;
-}
-
-.search-menu-container {
- display: flex;
- position: fixed;
- top: 40px;
- height: 50px;
- width: calc(100% - 20px);
- max-width: 1100px;
- z-index: 1000;
- transition: transform 0.3s ease;
- margin-left: auto;
- margin-right: auto;
- left: 0;
- right: 0;
-}
-
-.search-card {
- background-color: white;
- border: 1px solid #ccc;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
- display: flex;
- align-items: center;
- border-radius: 50px;
- left: 0;
- height: calc(100% - 2px);
- width: calc(100% - 60px);
- position: absolute;
-}
-
-.search-icon {
- position: absolute;
- padding-top: 5px;
- left: 15px;
- z-index: 1000;
-}
-
-.search-input {
- position: absolute;
- border: none;
- font-size: 17px;
- outline: none;
- left: 10px;
- padding: 0 30px;
- width: calc(100% - 10);
-}
-
-.clear-btn {
- position: absolute;
- color: #ccc;
- padding-bottom: 3px;
- right: 10px;
- border: none;
- background: none;
- font-size: 18px;
- cursor: pointer;
- display: none;
- z-index: 10;
-}
-
-.menu {
- display: flex;
- right: 0;
- position: absolute;
- height: 100%;
-}
-
-.menu-toggle {
- display: none;
-}
-
-#menu-button {
- background-color: white;
- border: 1px solid #ccc;
- border-radius: 50%;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
- width: 48px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.menu-icon {
- display: inline-block;
- fill: #000;
- transition: transform 0.2s ease;
-}
-
-.menu-icon.menu-open {
- transform: rotate(90deg);
-}
-
-.menu-icon.menu-closed {
- transform: rotate(0deg);
-}
-
-.menu-options {
- background-color: white;
- border: 1px solid #ccc;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
- display: none;
- position: absolute;
- padding: 5px 12px;
- top: 110%;
- right: 0;
- z-index: 1200;
- transform: translateX(120%);
- transition: transform 0.2s ease;
- width: auto;
- max-height: calc(100vh - 120px);
- overflow-y: auto;
- white-space: nowrap;
-}
-
-#select-denylist {
- display: none;
-}
-
-.menu-options.visible {
- display: block;
- transform: translateX(0);
-}
-
-.menu-options.hidden {
- transform: translateX(140%);
-}
-
-.menu-options ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.menu-options li {
- cursor: default;
- padding: 12px 4px;
- text-align: left;
- border-bottom: 1px solid #ccc;
- transition: background-color 0.2s ease;
-}
-
-.menu-options li:last-child {
- border-bottom: none;
-}
-
-.menu-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: none;
- z-index: 1000;
- display: none;
-}
-
-.card-box {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-#apps-list {
- margin-top: 100px;
- flex-direction: column;
-}
-
-.update-card {
- display: none;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- background-color: #DCDCDC;
- border: none;
- border-radius: 10px;
- margin: 0 auto;
- margin-bottom: 10px;
- outline: none;
- padding: 12px;
- width: calc(100% - 30px);
- max-width: 900px;
- transition: background-color 0.2s ease;
-}
-
-#update-available {
- font-size: 20px;
- font-weight: bold;
- margin-top: 15px;
- margin-bottom: 0;
-}
-
-#redirect-to-release {
- margin-top: 5px;
- margin-bottom: 15px;
-}
-
-.card {
- background-color: white;
- border: none;
- border-radius: 12px;
- margin: 0 auto;
- margin-bottom: 10px;
- outline: none;
- padding: 12px;
- width: calc(100% - 30px);
- max-width: 900px;
- transition: background-color 0.2s ease;
-}
-
-.content {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.name {
- display: inline-block;
- margin: 0;
- font-size: 15.5px;
- max-width: calc(100% - 30px);
- overflow-wrap: break-word;
- word-break: break-word;
-}
-
-.checkbox {
- margin-left: auto;
- transform: scale(1.15);
-}
-
-.prompt {
- position: fixed;
- bottom: 0;
- left: 10px;
- background-color: #4CAF50;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
- color: white;
- font-size: 15px;
- padding: 5px 10px;
- z-index: 2000;
- width: auto;
- max-width: calc(100% - 40px);
- transform: translateY(100%);
- transition: transform 0.5s ease;
-}
-
-.prompt.visible {
- animation: YbounceIn 0.4s forwards;
-}
-
-.prompt.hidden {
- animation: YbounceOut 0.4s forwards;
-}
-
-.prompt.error {
- background-color: #f44336;
-}
-
-@keyframes YbounceIn {
- 0% {
- transform: translateY(100%);
- }
-
- 50% {
- transform: translateY(-80%);
- }
-
- 100% {
- transform: translateY(-60%);
- }
-}
-
-@keyframes YbounceOut {
- 0% {
- transform: translateY(-60%);
- }
-
- 50% {
- transform: translateY(-80%);
- }
-
- 100% {
- transform: translateY(100%);
- }
-}
-
-.floating-card {
- display: flex;
- justify-content: center;
- position: fixed;
- bottom: -70px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 3;
-}
-
-.floating-btn {
- flex-shrink: 0;
- background-color: #007bff;
- border: none;
- box-shadow: 0 4px 8px #0003;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px 20px;
- font-size: 20px;
- font-weight: bold;
- transition: transform 0.3s ease-in-out, background-color 0.2s ease;
- border-top-left-radius: 50px;
- border-top-right-radius: 50px;
- border-bottom-left-radius: 50px;
- border-bottom-right-radius: 50px;
-}
-
-.loading {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- color: #6E6E6E;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 24px;
- z-index: 1000;
-}
-
-.footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: calc(100% - 10px);
- max-width: 1100px;
- padding: 25px 0;
- position: relative;
- margin-left: auto;
- margin-right: auto;
-}
-
-.uninstall-container {
- padding: 10px 10px;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- display: flex;
- align-items: center;
- border-radius: 8px;
- background-color: #CE0000;
- white-space: nowrap;
- transition: background-color 0.2s ease;
-}
-
-.uninstall-container i {
- margin-right: 5px;
-}
-
-.uninstall-container span {
- font-size: 16px;
- font-weight: bold;
- color: #fff;
-}
-
-.uninstall-container.hidden-uninstall {
- display: none;
-}
-
-.language-option:active,
-.menu-options li:active,
-.card:active,
-.update-card:active {
- background-color: #C8C8C8;
-}
-
-.boot-hash-save-button:active,
-.floating-btn:active {
- background-color: #003d80;
-}
-
-.uninstall-container:active {
- background-color: #830000;
-}
-
-#telegram:active {
- background-color: #1A78B3;
-}
-
-#github:active {
- background-color: #4D4D4D;
-}
-
-@media (prefers-color-scheme: dark) {
- body {
- background-color: #121212;
- color: #fff;
- }
-
- .header-block,
- .header {
- background-color: #121212;
- }
-
- .language-option,
- .input-box,
- .help-button {
- color: #fff;
- }
-
- .language-icon,
- .menu-icon {
- fill: #eee;
- }
-
- .help-menu,
- .about-menu,
- .boot-hash-card,
- .card,
- .search-input,
- .search-card {
- background-color: #343434;
- }
-
- .update-card {
- background-color: #4D4D4D;
- }
-
- .search-card {
- border: 1px solid #6E6E6E;
- }
-
- .search-input {
- color: white;
- }
-
- .language-menu,
- .input-box,
- .menu-options,
- #menu-button {
- background-color: #343434;
- border: 1px solid #6E6E6E;
- }
-
- .language-option,
- .menu-options li {
- border-bottom: 1px solid #6E6E6E;
- }
-
- .language-option:active,
- .menu-options li:active,
- .card:active,
- .update-card:active {
- background-color: #616161;
- }
-}
\ No newline at end of file
diff --git a/module/webui/styles/about.css b/module/webui/styles/about.css
new file mode 100644
index 0000000..3dc93f8
--- /dev/null
+++ b/module/webui/styles/about.css
@@ -0,0 +1,124 @@
+.about-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1100;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.about-menu {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 90vw;
+ max-width: 800px;
+ transform: translate(-50%, -50%);
+ background: #fff;
+ border-radius: 15px;
+ padding: 30px 0;
+ z-index: 1200;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+ z-index: 1200;
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ transition: opacity 0.2s ease;
+}
+
+.close-about {
+ position: absolute;
+ top: 15px;
+ right: 12px;
+ background: none;
+ border: none;
+ font-size: 18px;
+ color: #ccc;
+}
+
+.link,
+.about-content p {
+ margin: 0;
+ padding: 0 30px;
+ font-size: 16px;
+ text-align: left;
+}
+
+#module_name_line1 {
+ font-size: 26px;
+}
+
+#module_name_line2 {
+ font-size: 22px;
+}
+
+#authored {
+ font-size: 14px;
+}
+
+#disclaimer {
+ font-style: italic;
+}
+
+#acknowledgment {
+ font-weight: bold;
+ font-size: 18px;
+}
+
+.link-icon {
+ display: inline-block;
+ font-style: normal;
+ border-radius: 8px;
+ box-sizing: border-box;
+ margin-bottom: 5px;
+ transition: background-color 0.2s ease;
+}
+
+.link-icon svg {
+ padding-bottom: 3px;
+ vertical-align: bottom;
+ height: 17px;
+}
+
+#telegram {
+ font-size: 18px;
+ padding: 3px 10px;
+ background-color: #38A7ED;
+ color: #fff;
+ fill: #fff;
+}
+
+#telegram:active {
+ background-color: #1A78B3;
+}
+
+#github {
+ font-size: 18px;
+ padding: 3px 10px;
+ background-color: #606060;
+ color: #fff;
+ fill: #fff;
+}
+
+#github:active {
+ background-color: #4D4D4D;
+}
+
+
+#link-text {
+ font-size: 17px;
+ font-weight: bold;
+}
+
+@media (prefers-color-scheme: dark) {
+ .about-menu {
+ background-color: #343434;
+ }
+}
\ No newline at end of file
diff --git a/module/webui/styles/applist.css b/module/webui/styles/applist.css
new file mode 100644
index 0000000..66c2e3c
--- /dev/null
+++ b/module/webui/styles/applist.css
@@ -0,0 +1,92 @@
+.card-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#apps-list {
+ margin-top: 100px;
+ flex-direction: column;
+}
+
+.update-card {
+ display: none;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #DCDCDC;
+ border: none;
+ border-radius: 10px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ outline: none;
+ padding: 12px;
+ width: calc(100% - 30px);
+ max-width: 900px;
+ transition: background-color 0.2s ease;
+}
+
+#update-available {
+ font-size: 20px;
+ font-weight: bold;
+ margin-top: 15px;
+ margin-bottom: 0;
+}
+
+#redirect-to-release {
+ margin-top: 5px;
+ margin-bottom: 15px;
+}
+
+.card {
+ background-color: white;
+ border: none;
+ border-radius: 12px;
+ margin: 0 auto;
+ margin-bottom: 10px;
+ outline: none;
+ padding: 12px;
+ width: calc(100% - 30px);
+ max-width: 900px;
+ transition: background-color 0.2s ease;
+}
+
+.card:active,
+.update-card:active {
+ background-color: #C8C8C8;
+}
+
+.content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.name {
+ display: inline-block;
+ margin: 0;
+ font-size: 15.5px;
+ max-width: calc(100% - 30px);
+ overflow-wrap: break-word;
+ word-break: break-word;
+}
+
+.checkbox {
+ margin-left: auto;
+ transform: scale(1.15);
+}
+
+@media (prefers-color-scheme: dark) {
+ .card {
+ background-color: #343434;
+ }
+
+ .update-card {
+ background-color: #4D4D4D;
+ }
+
+ .card:active,
+ .update-card:active {
+ background-color: #616161;
+ }
+}
\ No newline at end of file
diff --git a/module/webui/styles/boot-hash.css b/module/webui/styles/boot-hash.css
new file mode 100644
index 0000000..3cbaac9
--- /dev/null
+++ b/module/webui/styles/boot-hash.css
@@ -0,0 +1,87 @@
+.boot-hash-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1200;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.boot-hash-card {
+ position: fixed;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80vw;
+ max-width: 600px;
+ background-color: #fff;
+ border-radius: 18px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+ z-index: 1200;
+ padding: 20px;
+ display: none;
+ flex-direction: column;
+ gap: 15px;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.boot-hash-overlay.show {
+ visibility: visible;
+ opacity: 1;
+}
+
+.boot-hash-card.show {
+ display: flex;
+ opacity: 1;
+}
+
+.input-box {
+ width: calc(100% - 20px);
+ height: 100px;
+ resize: none;
+ padding: 9px;
+ font-size: 16px;
+ background-color: #FFF;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+}
+
+.button-container {
+ display: flex;
+ justify-content: flex-start;
+}
+
+.boot-hash-save-button {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 38px;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #007bff;
+ color: white;
+ margin-left: auto;
+ transition: background-color 0.2s ease;
+}
+
+.boot-hash-save-button:active {
+ background-color: #003d80;
+}
+
+@media (prefers-color-scheme: dark) {
+ .boot-hash-card {
+ background-color: #343434;
+ }
+
+ .input-box {
+ color: #fff;
+ background-color: #343434;
+ border: 1px solid #6E6E6E;
+ }
+}
\ No newline at end of file
diff --git a/module/webui/styles/global.css b/module/webui/styles/global.css
new file mode 100644
index 0000000..83ebb83
--- /dev/null
+++ b/module/webui/styles/global.css
@@ -0,0 +1,161 @@
+body {
+ background-color: #F5F5F5;
+ padding-top: var(--window-inset-top);
+ padding-bottom: var(--window-inset-bottom);
+}
+
+.no-scroll {
+ overflow: hidden;
+}
+
+.floating-card {
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ bottom: -70px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 3;
+}
+
+.floating-btn {
+ flex-shrink: 0;
+ background-color: #007bff;
+ border: none;
+ box-shadow: 0 4px 8px #0003;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px 20px;
+ font-size: 20px;
+ font-weight: bold;
+ transition: transform 0.3s ease-in-out, background-color 0.2s ease;
+ border-radius: 50px 50px;
+}
+
+.floating-btn:active {
+ background-color: #003d80;
+}
+
+.prompt {
+ position: fixed;
+ bottom: 0;
+ left: 10px;
+ background-color: #4CAF50;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ color: white;
+ font-size: 15px;
+ padding: 5px 10px;
+ z-index: 2000;
+ width: auto;
+ max-width: calc(100% - 40px);
+ transform: translateY(100%);
+ transition: transform 0.5s ease;
+}
+
+.prompt.visible {
+ animation: YbounceIn 0.4s forwards;
+}
+
+.prompt.hidden {
+ animation: YbounceOut 0.4s forwards;
+}
+
+.prompt.error {
+ background-color: #f44336;
+}
+
+@keyframes YbounceIn {
+ 0% {
+ transform: translateY(100%);
+ }
+
+ 50% {
+ transform: translateY(-80%);
+ }
+
+ 100% {
+ transform: translateY(-60%);
+ }
+}
+
+@keyframes YbounceOut {
+ 0% {
+ transform: translateY(-60%);
+ }
+
+ 50% {
+ transform: translateY(-80%);
+ }
+
+ 100% {
+ transform: translateY(100%);
+ }
+}
+
+.loading {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ color: #6E6E6E;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ z-index: 1000;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: calc(100% - 10px);
+ max-width: 1100px;
+ padding: 25px 0;
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.uninstall-container {
+ padding: 10px 10px;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ align-items: center;
+ border-radius: 8px;
+ background-color: #CE0000;
+ white-space: nowrap;
+ transition: background-color 0.2s ease;
+}
+
+.uninstall-container:active {
+ background-color: #830000;
+}
+
+.uninstall-container i {
+ margin-right: 5px;
+}
+
+.uninstall-container span {
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+}
+
+.uninstall-container.hidden-uninstall {
+ display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #121212;
+ color: #fff;
+ }
+}
\ No newline at end of file
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
new file mode 100644
index 0000000..c31821f
--- /dev/null
+++ b/module/webui/styles/header.css
@@ -0,0 +1,236 @@
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: fixed;
+ top: 0;
+ height: 40px;
+ width: calc(100% - 10px);
+ max-width: 1100px;
+ background-color: #F5F5F5;
+ transition: transform 0.3s ease;
+ z-index: 1100;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+
+.header-block {
+ background-color: #F5F5F5;
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1100;
+ transition: transform 0.3s ease;
+ height: var(--window-inset-top);
+}
+
+#title {
+ padding-left: 5px;
+ font-size: 16.5px;
+ font-weight: bold;
+}
+
+.no-connection {
+ padding: 0;
+ display: none;
+ margin-right: 0px;
+ background: none;
+ border: none;
+}
+
+.language-dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.language-button {
+ padding-top: 5px;
+ background: none;
+ border: none;
+}
+
+.language-icon {
+ fill: #000;
+}
+
+.language-menu {
+ display: flex;
+ padding: 3px 10px;
+ flex-direction: column;
+ position: absolute;
+ right: 0;
+ background-color: #fff;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ z-index: 1800;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ opacity: 0;
+ visibility: hidden;
+ max-height: calc(100vh - 50px);
+ overflow-y: auto;
+ transform: translateY(-10px);
+ transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+}
+
+.language-menu.show {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+
+.language-option {
+ padding: 8px 5px;
+ text-align: left;
+ background: none;
+ border: none;
+ font-size: 16px;
+ color: #333;
+ width: 100%;
+ white-space: nowrap;
+ border-bottom: 1px solid #ccc;
+ transition: background-color 0.2s ease;
+}
+
+.language-option:last-child {
+ border-bottom: none;
+}
+
+.language-option:active {
+ background-color: #C8C8C8;
+}
+
+.language-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: none;
+ z-index: 1100;
+ display: none;
+}
+
+.help-button {
+ padding-left: 5px;
+ margin-right: auto;
+ background: none;
+ border: none;
+}
+
+.help-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 2000;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.help-overlay.show {
+ display: flex;
+ opacity: 1;
+}
+
+.help-overlay.hide {
+ opacity: 0;
+}
+
+.help-menu {
+ position: relative;
+ width: 90vw;
+ max-width: 800px;
+ background-color: white;
+ padding: 10px 0;
+ border-radius: 15px;
+ text-align: left;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.close-help {
+ position: absolute;
+ top: 15px;
+ right: 12px;
+ background: none;
+ border: none;
+ font-size: 20px;
+ color: #ccc;
+}
+
+.help-content {
+ max-height: 85vh;
+ padding: 0 30px;
+ overflow-y: auto;
+}
+
+.help-content p {
+ font-size: 26px;
+}
+
+.help-content ul {
+ padding-left: 0;
+ list-style-type: none;
+}
+
+.help-content ul li {
+ font-weight: bold;
+ font-size: 18px;
+}
+
+.help-content ul ul li {
+ font-weight: normal;
+ font-size: 16px;
+}
+
+.help-content ul ul ul li {
+ color: #777777;
+ font-weight: normal;
+ font-size: 14px;
+}
+
+.help-content ul ul ul li a {
+ color: inherit;
+}
+
+@media (prefers-color-scheme: dark) {
+ .header-block,
+ .header {
+ background-color: #121212;
+ }
+
+ .language-option,
+ .help-button {
+ color: #fff;
+ }
+
+ .language-icon {
+ fill: #eee;
+ }
+
+ .help-menu {
+ background-color: #343434;
+ }
+
+ .language-menu {
+ background-color: #343434;
+ border: 1px solid #6E6E6E;
+ }
+
+ .language-option {
+ border-bottom: 1px solid #6E6E6E;
+ }
+
+ .language-option:active {
+ background-color: #616161;
+ }
+}
\ No newline at end of file
diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css
new file mode 100644
index 0000000..721873a
--- /dev/null
+++ b/module/webui/styles/search_menu.css
@@ -0,0 +1,191 @@
+.search-menu-container {
+ display: flex;
+ position: fixed;
+ top: 40px;
+ height: 50px;
+ width: calc(100% - 20px);
+ max-width: 1100px;
+ z-index: 1000;
+ transition: transform 0.3s ease;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+
+.search-card {
+ background-color: white;
+ border: 1px solid #ccc;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ display: flex;
+ align-items: center;
+ border-radius: 50px;
+ left: 0;
+ height: calc(100% - 2px);
+ width: calc(100% - 60px);
+ position: absolute;
+}
+
+.search-icon {
+ position: absolute;
+ padding-top: 5px;
+ left: 15px;
+ z-index: 1000;
+}
+
+.search-input {
+ position: absolute;
+ border: none;
+ font-size: 17px;
+ outline: none;
+ left: 10px;
+ padding: 0 30px;
+ width: calc(100% - 10);
+}
+
+.clear-btn {
+ position: absolute;
+ color: #ccc;
+ padding-bottom: 3px;
+ right: 10px;
+ border: none;
+ background: none;
+ font-size: 18px;
+ cursor: pointer;
+ display: none;
+ z-index: 10;
+}
+
+.menu {
+ display: flex;
+ right: 0;
+ position: absolute;
+ height: 100%;
+}
+
+.menu-toggle {
+ display: none;
+}
+
+#menu-button {
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 50%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ width: 48px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.menu-icon {
+ display: inline-block;
+ fill: #000;
+ transition: transform 0.2s ease;
+}
+
+.menu-icon.menu-open {
+ transform: rotate(90deg);
+}
+
+.menu-icon.menu-closed {
+ transform: rotate(0deg);
+}
+
+.menu-options {
+ background-color: white;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ display: none;
+ position: absolute;
+ padding: 5px 12px;
+ top: 110%;
+ right: 0;
+ z-index: 1200;
+ transform: translateX(120%);
+ transition: transform 0.2s ease;
+ width: auto;
+ max-height: calc(100vh - 120px);
+ overflow-y: auto;
+ white-space: nowrap;
+}
+
+#select-denylist {
+ display: none;
+}
+
+.menu-options.visible {
+ display: block;
+ transform: translateX(0);
+}
+
+.menu-options.hidden {
+ transform: translateX(140%);
+}
+
+.menu-options ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.menu-options li {
+ cursor: default;
+ padding: 12px 4px;
+ text-align: left;
+ border-bottom: 1px solid #ccc;
+ transition: background-color 0.2s ease;
+}
+
+.menu-options li:active {
+ background-color: #C8C8C8;
+}
+
+.menu-options li:last-child {
+ border-bottom: none;
+}
+
+.menu-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: none;
+ z-index: 1000;
+ display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+ .menu-icon {
+ fill: #eee;
+ }
+
+ .search-input,
+ .search-card {
+ background-color: #343434;
+ }
+
+ .search-card {
+ border: 1px solid #6E6E6E;
+ }
+
+ .search-input {
+ color: white;
+ }
+
+ .menu-options,
+ #menu-button {
+ background-color: #343434;
+ border: 1px solid #6E6E6E;
+ }
+
+ .menu-options li {
+ border-bottom: 1px solid #6E6E6E;
+ }
+
+ .menu-options li:active {
+ background-color: #616161;
+ }
+}
\ No newline at end of file