From 6896aebf295a568fa80c178cd1569079b404cc3e Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 22 Apr 2025 14:27:42 +0700
Subject: [PATCH 1/4] Updates package version to 1.1.0

Increments version from 1.0.9 to 1.1.0 to reflect new updates or changes in the project.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bf6ddc4..db192f8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "google-cloud-skills-boost-helper",
   "description": "__MSG_extDescription__",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.1.0",
   "author": "dev@eplus.dev",
   "license": "MIT",
   "homepage_url": "https://eplus.dev",

From 69529c9ad149af2a3e278c57bccd722c518c5438 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Mon, 28 Apr 2025 11:26:01 +0700
Subject: [PATCH 2/4] Updates dependencies to latest versions

Upgrades multiple dependencies, including `wxt` to v0.20.5 and `@webext-core/fake-browser` to v1.3.2, ensuring compatibility and access to new features. Removes unused or outdated dependencies like `@types/webextension-polyfill` and `chownr`. Resolves potential issues with outdated packages.

Improves overall project stability and maintainability.
---
 package.json |   2 +-
 yarn.lock    | 241 ++++++++++++---------------------------------------
 2 files changed, 56 insertions(+), 187 deletions(-)

diff --git a/package.json b/package.json
index db192f8..d1f87da 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@types/react-dom": "^19.0.2",
     "@wxt-dev/module-react": "^1.1.2",
     "typescript": "^5.6.3",
-    "wxt": "^0.19.29"
+    "wxt": "^0.20.5"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/yarn.lock b/yarn.lock
index 3651068..26a4ef9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -751,11 +751,6 @@
   dependencies:
     csstype "^3.0.2"
 
-"@types/webextension-polyfill@^0.12.1":
-  version "0.12.3"
-  resolved "https://registry.npmjs.org/@types/webextension-polyfill/-/webextension-polyfill-0.12.3.tgz"
-  integrity sha512-F58aDVSeN/MjUGazXo/cPsmR76EvqQhQ1v4x23hFjUX0cfAJYE+JBWwiOGW36/VJGGxoH74sVlRIF3z7SJCKyg==
-
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz"
@@ -774,7 +769,7 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.2"
 
-"@webext-core/fake-browser@^1.3.1":
+"@webext-core/fake-browser@^1.3.2":
   version "1.3.2"
   resolved "https://registry.npmjs.org/@webext-core/fake-browser/-/fake-browser-1.3.2.tgz"
   integrity sha512-jFyPWWz+VkHAC9DRIiIPOyu6X/KlC8dYqSKweHz6tsDb86QawtVgZSpYcM+GOQBlZc5DHFo92jJ7cIq4uBnU0A==
@@ -821,6 +816,14 @@
   dependencies:
     tslib "^2.3.0"
 
+"@wxt-dev/browser@0.0.317":
+  version "0.0.317"
+  resolved "https://registry.npmjs.org/@wxt-dev/browser/-/browser-0.0.317.tgz"
+  integrity sha512-tpFr/OJjTlGY7FLIr950fNi9fIBLQQ9pRVDDajeqEMip5LsXFAxpbF4I1GAGUkdTJEghKQ8P5N9XnsAdbPBAOQ==
+  dependencies:
+    "@types/filesystem" "*"
+    "@types/har-format" "*"
+
 "@wxt-dev/module-react@^1.1.2":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@wxt-dev/module-react/-/module-react-1.1.3.tgz"
@@ -1057,22 +1060,22 @@ bunyan@1.8.15:
     mv "~2"
     safe-json-stringify "~1"
 
-c12@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/c12/-/c12-3.0.2.tgz"
-  integrity sha512-6Tzk1/TNeI3WBPpK0j/Ss4+gPj3PUJYbWl/MWDJBThFvwNGNkXtd7Cz8BJtD4aRwoGHtzQD0SnxamgUiBH0/Nw==
+c12@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/c12/-/c12-3.0.3.tgz"
+  integrity sha512-uC3MacKBb0Z15o5QWCHvHWj5Zv34pGQj9P+iXKSpTuSGFS0KKhUWf4t9AJ+gWjYOdmWCPEGpEzm8sS0iqbpo1w==
   dependencies:
     chokidar "^4.0.3"
-    confbox "^0.1.8"
+    confbox "^0.2.2"
     defu "^6.1.4"
     dotenv "^16.4.7"
-    exsolve "^1.0.0"
+    exsolve "^1.0.4"
     giget "^2.0.0"
     jiti "^2.4.2"
-    ohash "^2.0.5"
+    ohash "^2.0.11"
     pathe "^2.0.3"
     perfect-debounce "^1.0.0"
-    pkg-types "^2.0.0"
+    pkg-types "^2.1.0"
     rc9 "^2.1.2"
 
 cac@^6.7.14:
@@ -1136,11 +1139,6 @@ chokidar@^4.0.3:
   dependencies:
     readdirp "^4.0.1"
 
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
 chrome-launcher@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-1.1.0.tgz"
@@ -1156,7 +1154,7 @@ ci-info@^3.2.0:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-ci-info@^4.1.0:
+ci-info@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-4.2.0.tgz"
   integrity sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==
@@ -1291,10 +1289,10 @@ confbox@^0.1.8:
   resolved "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz"
   integrity sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
 
-confbox@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/confbox/-/confbox-0.2.1.tgz"
-  integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
+confbox@^0.2.1, confbox@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz"
+  integrity sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==
 
 config-chain@^1.1.11:
   version "1.1.13"
@@ -1315,7 +1313,7 @@ configstore@^6.0.0:
     write-file-atomic "^3.0.3"
     xdg-basedir "^5.0.1"
 
-consola@^3.2.3, consola@^3.4.0:
+consola@^3.2.3, consola@^3.4.0, consola@^3.4.2:
   version "3.4.2"
   resolved "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz"
   integrity sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==
@@ -1755,22 +1753,7 @@ execa@^7.1.1:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
-execa@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz"
-  integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^8.0.1"
-    human-signals "^5.0.0"
-    is-stream "^3.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^5.1.0"
-    onetime "^6.0.0"
-    signal-exit "^4.1.0"
-    strip-final-newline "^3.0.0"
-
-exsolve@^1.0.0, exsolve@^1.0.1:
+exsolve@^1.0.1, exsolve@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/exsolve/-/exsolve-1.0.4.tgz"
   integrity sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==
@@ -1786,7 +1769,7 @@ extract-zip@^2.0.1:
   optionalDependencies:
     "@types/yauzl" "^2.9.1"
 
-fast-glob@^3.3.2, fast-glob@^3.3.3:
+fast-glob@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz"
   integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
@@ -1868,7 +1851,7 @@ fs-extra@11.2.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-extra@^11.2.0:
+fs-extra@^11.3.0:
   version "11.3.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz"
   integrity sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==
@@ -1887,13 +1870,6 @@ fs-extra@~9.0.1:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1972,25 +1948,7 @@ get-stream@^6.0.0, get-stream@^6.0.1:
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
-get-stream@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz"
-  integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
-
-giget@^1.2.3:
-  version "1.2.5"
-  resolved "https://registry.npmjs.org/giget/-/giget-1.2.5.tgz"
-  integrity sha512-r1ekGw/Bgpi3HLV3h1MRBIlSAdHoIMklpaQ3OQLFcRw9PwAj2rqigvIbg+dBUI51OxVI2jsEtDywDBjSiuf7Ug==
-  dependencies:
-    citty "^0.1.6"
-    consola "^3.4.0"
-    defu "^6.1.4"
-    node-fetch-native "^1.6.6"
-    nypm "^0.5.4"
-    pathe "^2.0.3"
-    tar "^6.2.1"
-
-giget@^2.0.0:
+"giget@^1.2.3 || ^2.0.0", giget@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz"
   integrity sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==
@@ -2175,11 +2133,6 @@ human-signals@^4.3.0:
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz"
   integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
 
-human-signals@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz"
-  integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
-
 ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
@@ -2578,7 +2531,7 @@ lines-and-columns@^2.0.3:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz"
   integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
 
-linkedom@^0.18.5:
+linkedom@^0.18.9:
   version "0.18.9"
   resolved "https://registry.npmjs.org/linkedom/-/linkedom-0.18.9.tgz"
   integrity sha512-Pfvhwjs46nBrcQdauQjMXDJZqj6VwN7KStT84xQqmIgD9bPH6UVJ/ESW8y4VHVF2h7di0/P+f4Iln4U5emRcmg==
@@ -2786,36 +2739,11 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-minipass@^3.0.0:
-  version "3.3.6"
-  resolved "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
-
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
 mkdirp@3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz"
   integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
 
-mkdirp@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
@@ -2961,30 +2889,6 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nypm@^0.3.12:
-  version "0.3.12"
-  resolved "https://registry.npmjs.org/nypm/-/nypm-0.3.12.tgz"
-  integrity sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==
-  dependencies:
-    citty "^0.1.6"
-    consola "^3.2.3"
-    execa "^8.0.1"
-    pathe "^1.1.2"
-    pkg-types "^1.2.0"
-    ufo "^1.5.4"
-
-nypm@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.npmjs.org/nypm/-/nypm-0.5.4.tgz"
-  integrity sha512-X0SNNrZiGU8/e/zAB7sCTtdxWTMSIO73q+xuKgglm2Yvzwlo8UoC5FNySQFCvl84uPaeADkqHUZUkWy4aH4xOA==
-  dependencies:
-    citty "^0.1.6"
-    consola "^3.4.0"
-    pathe "^2.0.3"
-    pkg-types "^1.3.1"
-    tinyexec "^0.3.2"
-    ufo "^1.5.4"
-
 nypm@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/nypm/-/nypm-0.6.0.tgz"
@@ -3010,12 +2914,7 @@ ofetch@^1.3.3:
     node-fetch-native "^1.6.4"
     ufo "^1.5.4"
 
-ohash@^1.1.4:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/ohash/-/ohash-1.1.6.tgz"
-  integrity sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg==
-
-ohash@^2.0.5:
+ohash@^2.0.11:
   version "2.0.11"
   resolved "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz"
   integrity sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==
@@ -3102,7 +3001,7 @@ ora@^6.3.1:
     strip-ansi "^7.0.1"
     wcwidth "^1.0.1"
 
-ora@^8.1.1:
+ora@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/ora/-/ora-8.2.0.tgz"
   integrity sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==
@@ -3185,11 +3084,6 @@ path-key@^4.0.0:
   resolved "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz"
   integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
 
-pathe@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz"
-  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
-
 pathe@^2.0.1, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz"
@@ -3220,7 +3114,7 @@ picomatch@^4.0.2:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
-pkg-types@^1.2.0, pkg-types@^1.3.0, pkg-types@^1.3.1:
+pkg-types@^1.3.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz"
   integrity sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==
@@ -3229,7 +3123,7 @@ pkg-types@^1.2.0, pkg-types@^1.3.0, pkg-types@^1.3.1:
     mlly "^1.7.4"
     pathe "^2.0.1"
 
-pkg-types@^2.0.0, pkg-types@^2.0.1:
+pkg-types@^2.0.0, pkg-types@^2.0.1, pkg-types@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz"
   integrity sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==
@@ -3798,18 +3692,6 @@ tapable@^2.2.0:
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz"
-  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^5.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
@@ -3931,7 +3813,7 @@ undici-types@~6.20.0:
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz"
   integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
 
-unimport@^3.13.1:
+"unimport@^3.13.1 || ^4.0.0 || ^5.0.0":
   version "3.14.6"
   resolved "https://registry.npmjs.org/unimport/-/unimport-3.14.6.tgz"
   integrity sha512-CYvbDaTT04Rh8bmD8jz3WPmHYZRG/NnvYVzwD6V1YAlvvKROlAeNDUBhkBGzNav2RKaeuXvlWYaa1V4Lfi/O0g==
@@ -4030,7 +3912,7 @@ uuid@^8.3.2:
     pathe "^2.0.3"
     vite "^5.0.0 || ^6.0.0"
 
-"vite@^5.0.0 || ^6.0.0":
+"vite@^5.0.0 || ^6.0.0", "vite@^5.4.17 || ^6.2.5":
   version "6.2.6"
   resolved "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz"
   integrity sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==
@@ -4056,7 +3938,7 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-web-ext-run@^0.2.1:
+web-ext-run@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/web-ext-run/-/web-ext-run-0.2.2.tgz"
   integrity sha512-GD59q5/1wYQJXTHrljMZaBa3cCz+Jj3FMDLYgKyAa34TPcHSuMaGqp7TcLJ66PCe43C3hmbEAZd8QCpAB34eiw==
@@ -4086,11 +3968,6 @@ web-ext-run@^0.2.1:
     ws "8.18.0"
     zip-dir "2.0.0"
 
-webextension-polyfill@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.12.0.tgz"
-  integrity sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
@@ -4188,59 +4065,56 @@ ws@8.18.0:
   resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
-wxt@^0.19.29:
-  version "0.19.29"
-  resolved "https://registry.npmjs.org/wxt/-/wxt-0.19.29.tgz"
-  integrity sha512-n6DRR34OAFczJfZOwJeY5dn+j+w2BTquW2nAX32vk3FMLWUhzpv5svMvSUTyNiFq3P0o3U7YxfxHdmKJnXZHBA==
+wxt@^0.20.5:
+  version "0.20.5"
+  resolved "https://registry.yarnpkg.com/wxt/-/wxt-0.20.5.tgz#353e828449a3749fde590a0596050d50db796b34"
+  integrity sha512-OPOvsPQIRikZtBZ24u4DLHm9fdzCW91xSn905jHsa8IgnPqahsmUP46ys8mbYkJWYNXrMEbgepXYNQOoocwNsQ==
   dependencies:
     "@1natsu/wait-element" "^4.1.2"
     "@aklinker1/rollup-plugin-visualizer" "5.12.0"
-    "@types/chrome" "^0.0.280"
-    "@types/webextension-polyfill" "^0.12.1"
-    "@webext-core/fake-browser" "^1.3.1"
+    "@webext-core/fake-browser" "^1.3.2"
     "@webext-core/isolated-element" "^1.1.2"
     "@webext-core/match-patterns" "^1.0.3"
+    "@wxt-dev/browser" "0.0.317"
     "@wxt-dev/storage" "^1.0.0"
     async-mutex "^0.5.0"
-    c12 "^3.0.2"
+    c12 "^3.0.3"
     cac "^6.7.14"
     chokidar "^4.0.3"
-    ci-info "^4.1.0"
-    consola "^3.2.3"
+    ci-info "^4.2.0"
+    consola "^3.4.2"
     defu "^6.1.4"
-    dotenv "^16.4.5"
+    dotenv "^16.4.7"
     dotenv-expand "^12.0.1"
     esbuild "^0.25.0"
-    fast-glob "^3.3.2"
+    fast-glob "^3.3.3"
     filesize "^10.1.6"
-    fs-extra "^11.2.0"
+    fs-extra "^11.3.0"
     get-port-please "^3.1.2"
-    giget "^1.2.3"
+    giget "^1.2.3 || ^2.0.0"
     hookable "^5.5.3"
     import-meta-resolve "^4.1.0"
     is-wsl "^3.1.0"
-    jiti "^2.4.2"
     json5 "^2.2.3"
     jszip "^3.10.1"
-    linkedom "^0.18.5"
+    linkedom "^0.18.9"
     magicast "^0.3.5"
     minimatch "^10.0.1"
     nano-spawn "^0.2.0"
     normalize-path "^3.0.0"
-    nypm "^0.3.12"
-    ohash "^1.1.4"
+    nypm "^0.6.0"
+    ohash "^2.0.11"
     open "^10.1.0"
-    ora "^8.1.1"
+    ora "^8.2.0"
     perfect-debounce "^1.0.0"
     picocolors "^1.1.1"
     prompts "^2.4.2"
     publish-browser-extension "^2.3.0 || ^3.0.0"
     scule "^1.3.0"
-    unimport "^3.13.1"
-    vite "^5.0.0 || ^6.0.0"
+    unimport "^3.13.1 || ^4.0.0 || ^5.0.0"
+    vite "^5.4.17 || ^6.2.5"
     vite-node "^2.1.4 || ^3.0.0"
-    web-ext-run "^0.2.1"
-    webextension-polyfill "^0.12.0"
+    web-ext-run "^0.2.2"
 
 xdg-basedir@^5.0.1, xdg-basedir@^5.1.0:
   version "5.1.0"
@@ -4270,11 +4144,6 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yargs-parser@^20.2.2:
   version "20.2.9"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"

From 2d2d654b5c436ba91d7cf06f4d96573965aae330 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 29 Apr 2025 11:17:41 +0700
Subject: [PATCH 3/4] Implement new feature for user authentication and improve
 error handling

---
 entrypoints/options/index.html | 418 +++++++++++++--------------------
 1 file changed, 169 insertions(+), 249 deletions(-)

diff --git a/entrypoints/options/index.html b/entrypoints/options/index.html
index f46997f..2437a06 100644
--- a/entrypoints/options/index.html
+++ b/entrypoints/options/index.html
@@ -1,268 +1,188 @@
 <div class="mt-8">
   <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>Options</title>
-      <link rel="stylesheet" href="~/assets/tailwind.css" />
-      <link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"
-      />
-    </head>
 
-    <body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Options</title>
+    <link rel="stylesheet" href="~/assets/tailwind.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" />
+  </head>
+
+  <body>
+    <div
+      class="flex flex-col p-4 w-[800px] mx-auto min-h-screen justify-center bg-gradient-to-br from-purple-100 to-indigo-50">
       <div
-        class="flex flex-col p-4 w-[800px] mx-auto min-h-screen justify-center bg-gradient-to-br from-purple-100 to-indigo-50"
-      >
+        class="text-center mb-8 bg-gradient-to-r from-purple-400 to-indigo-600 p-8 rounded-lg shadow-lg relative border border-indigo-300">
+        <h3 class="text-4xl font-bold text-white inline-block relative">
+          Google Cloud Skills Boost - Helper
+          <span
+            class="absolute top-0 right-[-60px] text-sm font-medium text-white bg-indigo-800 px-3 py-1 rounded-full shadow-md animate-pulse"
+            id="version-number">v1.0.0</span>
+        </h3>
+        <p class="text-white mt-4 text-lg leading-relaxed">
+          Take your Google Cloud Skills Boost experience to the next level
+          with our powerful and intuitive browser extension.
+        </p>
+      </div>
+      <div class="mt-4 space-y-4">
+        <!-- BEGIN - Settings -->
+        <!-- Card 1 -->
         <div
-          class="text-center mb-8 bg-gradient-to-r from-purple-400 to-indigo-600 p-8 rounded-lg shadow-lg relative border border-indigo-300"
-        >
-          <h3 class="text-4xl font-bold text-white inline-block relative">
-            Google Cloud Skills Boost - Helper
-            <span
-              class="absolute top-0 right-[-60px] text-sm font-medium text-white bg-indigo-800 px-3 py-1 rounded-full shadow-md animate-pulse"
-              id="version-number"
-              >v1.0.0</span
-            >
-          </h3>
-          <p class="text-white mt-4 text-lg leading-relaxed">
-            Take your Google Cloud Skills Boost experience to the next level
-            with our powerful and intuitive browser extension.
-          </p>
+          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
+          <div>
+            <h4 class="text-lg font-bold text-gray-800">Show Leaderboard</h4>
+            <p class="text-gray-600 text-sm">(Coming soon)</p>
+          </div>
+          <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600" disabled />
         </div>
-        <div class="mt-4 space-y-4">
-          <!-- BEGIN - Settings -->
-          <!-- Card 1 -->
-          <div
-            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
-          >
-            <div>
-              <h4 class="text-lg font-bold text-gray-800">Show Leaderboard</h4>
-              <p class="text-gray-600 text-sm">(Coming soon)</p>
-            </div>
-            <input
-              type="checkbox"
-              class="form-checkbox h-5 w-5 text-indigo-600"
-              disabled
-            />
+        <!-- Card 2 -->
+        <div
+          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
+          <div>
+            <h4 class="text-lg font-bold text-gray-800">Public Profile</h4>
+            <p class="text-gray-600 text-sm">
+              View your public profile on Google Cloud Skills Boost.
+            </p>
           </div>
-          <!-- Card 2 -->
-          <div
-            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
-          >
-            <div>
-              <h4 class="text-lg font-bold text-gray-800">Public Profile</h4>
-              <p class="text-gray-600 text-sm">
-                View your public profile on Google Cloud Skills Boost.
-              </p>
-            </div>
-            <a
-              href="https://www.cloudskillsboost.google/my_account/profile#public-profile"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
-            >
-              <i class="fa-solid fa-eye"></i> View Profile
-            </a>
+          <a href="https://www.cloudskillsboost.google/my_account/profile#public-profile" target="_blank"
+            rel="noopener noreferrer"
+            class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200">
+            <i class="fa-solid fa-eye"></i> View Profile
+          </a>
+        </div>
+        <!-- Card 3 -->
+        <div
+          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
+          <div>
+            <h4 class="text-lg font-bold text-gray-800">My Badges</h4>
+            <p class="text-gray-600 text-sm">View all your earned badges.</p>
           </div>
-          <!-- Card 3 -->
-          <div
-            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
-          >
-            <div>
-              <h4 class="text-lg font-bold text-gray-800">My Badges</h4>
-              <p class="text-gray-600 text-sm">View all your earned badges.</p>
-            </div>
-            <a
-              href="https://www.cloudskillsboost.google/profile/badges"
-              target="_blank"
-              rel="noopener noreferrer"
+          <a href="https://www.cloudskillsboost.google/profile/badges" target="_blank" rel="noopener noreferrer"
+            class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200">
+            <i class="fa-solid fa-eye"></i> View Badges
+          </a>
+        </div>
+        <!-- Card 4 -->
+        <div class="bg-gradient-to-r from-white to-indigo-50 shadow-lg rounded-lg p-6 border border-indigo-200">
+          <h4 class="text-xl font-semibold text-gray-800 mb-2">
+            Arcade Points Calculator
+          </h4>
+          <p class="text-gray-500 text-sm mb-4">
+            Enter your public profile URL to calculate your arcade points.
+          </p>
+          <div class="flex items-center space-x-3">
+            <input type="url" id="public-profile-url"
+              class="border border-gray-300 rounded-lg px-4 py-2 flex-grow focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+              placeholder="Enter public profile URL" required />
+            <button
               class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
-            >
-              <i class="fa-solid fa-eye"></i> View Badges
-            </a>
+              id="submit-url">
+              Save
+            </button>
           </div>
-          <!-- Card 4 -->
-          <div
-            class="bg-gradient-to-r from-white to-indigo-50 shadow-lg rounded-lg p-6 border border-indigo-200"
-          >
-            <h4 class="text-xl font-semibold text-gray-800 mb-2">
-              Arcade Points Calculator
-            </h4>
-            <p class="text-gray-500 text-sm mb-4">
-              Enter your public profile URL to calculate your arcade points.
-            </p>
-            <div class="flex items-center space-x-3">
-              <input
-                type="url"
-                id="public-profile-url"
-                class="border border-gray-300 rounded-lg px-4 py-2 flex-grow focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                placeholder="Enter public profile URL"
-                value=""
-                required
-              />
-              <button
-                class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
-                id="submit-url"
-              >
-                Save
-              </button>
-            </div>
-            <!-- Arcade -->
-            <div
-              id="arcade-points"
-              class="hidden relative bg-gradient-to-br from-purple-600 to-indigo-800 rounded-2xl p-6 mt-6 shadow-lg text-white"
-            >
-              <div class="flex items-center">
-                <div class="relative">
-                  <img
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAOxAAADsQH1g%2B1JAAAABHNCSVQICAgIfAhkiAAAEUVJREFUeNrtnQl0FFXahotZVBD9Z35BEfTXUUeHxeUfHUdHRxQYlkEGGCACoqIsw6aogIDDCIJAQCDBgGQIJBBAMEGIZCMx6ap0ks7W2feFpG8HSAQJAUJCAul3%2BnLo05lIkFR91el013fOew4cQk5VvU%2Fd5avv3iu4WgDoEsPwkMjwqsTwrmTCRpEhWDRBEhlyrTppVY1VdVaB69qfa679W%2B61nw3i%2F5f%2FDp0JI%2FnvBNBF0MK5IrYSfXQMHhLDZpHBYNV5q6CSzksMiSKDt8QwIdqM3oIWjg2xAreJlRjODZdMKObGdLCKrPLSmTEsohS3ClrQR1A%2BbuFNuo4hUGI4R2YevWolht28yzAa8UtBC2URV4nfigyeVlVbhU6mat5K6Rj6C1q0L0SGF60KtcpiFVxACRLDKG0Q%2BROjd8mEsSJDplVwRUkM6TozRmsgtArJhBEig9EquInS%2BKBRcPfQleMxkSHMKripvhPNGCC4W4SeRLdrCZrLVsHN1SQxrDNUoqvgDiEyDJEYjmnG%2F0ilsSYMElww7AkcBk8dQ7NmdpuySAz%2F5i2k4EoRU4knRIY8zeCbVo7L5A8kMyaJDHWaqe1WvVVvCZ01goCf8xy5szzQhMJzSEkzIVPMQl54HPJCRRSERIGtWoWK9RtQutUP%2BftCkP2tDkmZVc4DghkbVgA%2FE2hD%2Fdy9xPB1RzwwfUk9uMllew%2Bg2nMlzi%2BcgctTRwATX7quGvv1ROPvevxYT9yL%2Bhf64tzoV3Bqzjso3vkV9CV1HQXBIT6GEjpDiKfQXWKIcuQDMiYUomKHP2qXzIVl8qA2zG4HAG2p391oeOlxnJ4%2BBYWBwRArmh0Jgi6iFHcKzhwx5biHpzsd8UBSU8th%2FvJLNMz2aG2qHADk6cn7UPPGeGSF6h0FgTGqDHcLTjrNe5DPZVXNpVdcRsHhKJz7aHZLEykAUKyG5x%2FF8U%2BWIa6sXm0ISvizFpwp9FXoyQsjVOvXSxtQuvdrXJo13mYcNQB0euo%2BVM2fi4S8GjUhKBMr0EtwhuD9Em%2F21Xrjiw%2BE4NLMv9OZTg9Am4PI6vdmIa6sQZ3W0IRssQK%2FcoZKnWg1bjBTzETd%2FLdkmEoAAKEuPf0ASn18VRsYdlgZGp%2Bb8spZ8vl6QS2%2B9%2FyUwFwCAAh1YeQLSI0vpIfAhMM85yI4OtRI8uRGJqBxxhhujCsBYNfjvXDM6ws1Ck3WCY4MnQmTSW%2Bg%2FAqYry8waSA3xUUBsKvW46%2FUSSULrzRy2IcdieEi1cUbck8TTOscCgDRtPExpMdmUkLwQ9wJ3O%2BIT7o5ZMmclGNomDWBG%2BFOANj1RG%2FkBUVQjgeSVS1HF83wobrYrBgjrrw1jJvgvgBw9e%2BF4h17KVsCT9UqeajKtHOiDGieMoQboAFgFb%2BGijVr6cYDlRhIXsPHs08k5kcn2T7YaAC0UPkbryO4kGxWkE%2FaFfACTpKvdolFtmZfA6Cl%2BVMmY20SsDYZCC4iyxQuolmeZUJfXrmq9IKSM0%2Bgcfpo%2FtA1AH5sPhcpBHymFluOB5T3%2FSZEKr2YxLwfUD9vcoeb3fTGUJye%2ByaOvz8bx5YsQsHyT3F6%2BJ9xdtAzOP%2Fi46h%2F5jcOBaL89Ul24%2Bkh4AomWLGjtCm6gjrDM8C%2F%2Bjnc8FNzpyL5820I2RWD7REMnoZm%2FoBvKM%2FEKwg8kAH9Cm8cHz8KF599BI19ezrIfHoIdAyDZa%2FVExlSlV4AK1wKZAiwpP%2FcIRB8%2F%2B47EH32wTeykj9IEu38Jh%2BFM2ah7rlHiZp9u%2FlqQyAxJMp9%2B8cqnuuXxcCS8TMOgOoQVH44F8FfJWKtwcIfnmoK8Q0D7zYa%2BxL0%2BY6CwIw%2FC%2B0Npat0E0xn0Jh5j838VhD0JzPevGAeAr4tlmGmMh30%2B46PGwiaffUh4DWacpI%2BUKKT%2BdNbm0%2FaElx8%2B28I2xkh442nVfLSNWh8sg%2B1%2BfQQmPEHh438M8rigYwu3GxVICj5eCm8xHMEBtLoy4jjODvkWSV9vvoQmHC4PduyWOSP%2Bi%2BjLrt%2FG8Yr6w4sk16G3nsXxVtPr8RmFMycbTW8J82bTw%2BBJdaMh4WfCl5coOTtLyrxa200RUvA5%2FB8kEdsHL30n3rz9QMEbz49BJIJq4UbBc8fiwxVcs2PY41oyPoNN5YUAm7%2BV0EZKplGrwivAyh5%2B22C30UOQRX3%2BEZv%2Fyglb39JsY%2FNVHkQfNL%2FuubvDzLym9ZEAUElht9o9L9H%2FlSjCZey%2BrRlsJwxAe%2FzebOvGU0LQUCb1T5KNmHMKw1qaSZJSxDvHaAZTA%2FBWV7OL7QO3jQoaf5rcgdzA8kgqNrgwXP3mrnqQDDkev3%2FZrnmp5QX2ub9JLqY3hM%2BhhOaqWpBYMaG6%2FX%2FJfI%2F%2BCzhxpHpUMpBzUwVIeAVQz%2Facl1J838x6zEy803GVzQTHQCB3oR7W1b7via7tLs8n8x8%2FuXQPyVDM9ABEOhMGEfS%2F5cXrSIDoDhtjGacYyDgAGxq2f8b5AJQm%2FMCGQCBKdqc34EQJLRc5XtBbuq3OfM2EvOrjU9pZjkWgloAXfj8%2FxG5b396WTLZ2x%2BTukkzysEQ8KphRfn%2F0mJvIgC6wCdZm%2Fc7GgJe9CvoGN6TC0B1%2FhSi5v%2F%2FnfKBLdz7PYZPiHR6zfc7LgsCyYzZilb9nMt5ngSApLQlGgAEALQXAh3DekFkCJYJgK3oU7EOpoRoADgMADsE%2BwtgECSGODnm6011ZPn%2FLcmVGgAOBoDLJx01gtxt3FPL80jMb0zvzi9GA6ADAPjCiIscgJOyKn%2BPJZAAcDq9vwZABwHgnYYmDkCtvFU%2F0SQAlBuHagB0EACb0tDMAaiXA0Bu6SESAIqM4zQAOgiADSmwcACuyAGgoGQPCQB5xikaAB0EgKdV8gEo3asB4CR6P%2BCk7Myggi7gsNYFOIkW7jsl6%2F7WWaUNAl0AgCUHz8i6v8%2F5GEBiOCFvGphINA3spwGgUMuOyFsouzEFV3gLkNuRiaCmjNs1ABTqk6MX5eYB6nk9oNjRqeCtyUwDQIE%2Bi7ssLxWcgTNO8THoUMo3GgAyNXqqTvb9bU2H2Uk%2BBy%2FWAJCpiQtSZd%2Ff9iwkCxLDux1fEPKUBoBMTVudL%2Fv%2BdmRjP%2B8CXpVdElbkRVUSZvsk7BZaEd2AER40AMzbJn%2F85J%2BDZUIMw0Oyi0KPpZAVhcambnQbAOb4VNDlAIJr5AOQjz8KALrIXRYusSY0Z3YlAeCUcYDbADBudgKJ%2BSMnR2NNQrO8JFAyLLAdSi0xJDrDwpA9KQkub%2F6S4DNkb%2F%2Fri%2BXvnLI5DedargzydoalYaXGUS4PwORFaWQAzN1qkn0dvplIa7k2cALB4lACdUFAcrrLmr84iO7t5%2FpX%2BAXZ1xKQ1eJomWgzeitaHp79OzIImHGgawJgsGD83EQy88dOj1N0Pbtz8UTrzaGLnWWDiMMpwS4HwAf%2BJ0jf%2FlleZbKvxSsNlwRbUIwDkstLSLeIqc%2FogU0ulBf49LsGjHozlg4Aj6NYHt0g%2B3r%2BnYlUoXXozBimbJOoQaStwNq4v2N1UrMrNP08XUv59vOBpKJr8s%2FGwusdA38rLw6Rv03cQTLzdyX0xW2hczA0JrzTA%2FCPjaXk6d8PdlfJvh5eBLI1H93b2il0t4JNovlGkWTm33JkLm4NnYepcTmd1vwFgdUY4XGU1PwxM%2BKwOtEif2fzTBTf6FDokQRbxZKYb9Ptoe9jRlxR50v37juGv06MUqsCWLb8c7FUaCtE4Bd8pRDBZtEk5reEYKa%2B80Dwtx1RGPpaGLn5Y2fEYU2iRUnz3xxqRLefOi3EU9l28TtJzbdD8AHekrKd3vyhRw7iuZk71Cn%2F3qlsE43tmUgQfir4ljHKD4zoR2i%2BXbcemYdBMSFY44QHRvAZy%2BNfr0e3zeNxx6ZJeH7aLkrz%2BQckxfcdWHiTZwpLDOHKjozR87wAmfmtNSBqG5YlXnCewV5cFXrs%2BAe4%2BTbd4TURz0%2F3J5v3L%2FnmrKJr9DGiWrjZiDVhkPJDo2aQmt9a%2FxO6CKNjxQ5vDV4O2YduW16zGa8KBNPWFiq%2Bzl15mCu0JySGdCUAxJtqcSmrN7n5rfVI5EbMizc53PjxkSJ%2BvX1aK9PpIRjzjojP9FcUXetmIy4I7Q2dGaOVtgLZZRF8%2B9e2zCfVY0c3Y5q%2BAGuS1G0RxkZ8h7v8ZnJzb0aKxgS8bGzRgdPKTz7NxnJBTkgMKQRHx8owX77uC1%2BNEbFHsSChmsz0eboyDDiwDt23vd620fQtAc8iKr52byPqbJU%2FclqBYRSHR5dkPC3DfOXqE7EKL8ccwiQpFR%2FGV93Ut4VVhiZMj83D4CNf48E9S2WYTgPB5IWpJOObnblYIMgIshkBV3hZJR6OXuFA89vOJfQOX4mHIz9Hv6Nb8XS0P%2B7d9T567JzF%2B3Or2VPQ7YsJMsylhWDMNAkrdU3KD7RMBxOUBs8LSAyNSiHYX%2FoD7olYSmAkqayGkxhLNiYYOSUGy0LPKzZ%2FfQosu3LwtCAjiA%2BTtMuvyIw7wj50DQDoWwJe5Wsr81as7dn4VqAKQyW6igylFBCsyMhHtyPzXQAAWgj%2BMjEUM%2FYVkpjvnYaGIAO6CmRhTw5ZKCD4LLMYd4YtdHMA7BD8ceYOjPQNtRlIk%2FShD3vZGIU255xAj7B%2FujcAXD4ePKlEZT4v90oUSKN11ZAZWVQQ%2BOaeRq%2FwFW4LwO1bJ%2BHtmEwy83nGz%2Fa5V7XQMfQXGeqoINiVfx6%2FjdzkdgD8r98MfCjRnZHAR%2F1%2B2XhOcERIJoylGg9wHSxuxrDYcF4C5hYAPLJvOVYn0ha87sjFZ4Ijg58%2Byc2j0qFiYLo%2BH3eF%2FdNlAbh9y2t4NSyMznj7Mi%2BD4NCwHzZ1gBKCw8XAiqSLeDYqkBd%2FuBQA%2Fxf4EZbqz5CbvyUdbAXwC6EjwmjEL0WGo9QQrEsGZunLcH%2FE6k4PwJ2%2Bb8AjMo7WeHuRR83eZNwpdGQkFOEOkcGoBgT84814MZFPFzsdAN2%2FnIznvtmOVUmXVTHfOw11X%2BXiHsEZQjyJHiJDkRoQ8JtdaWjCGJ2Iu8M%2FcXoAum%2B9Zryhid54%2BzbvTTuyMUBwphAr8KDIUEI9MPRM%2Fu%2FCy8lSGh6N9OJjBCIA6KZ1Lx3eY3vj1TM%2FFU3%2BufiT4IwRcxx3iWYkqdUStBQv%2BBgc8y1PJHUYALxWoO%2F%2BNZijK2nDMPpmf28G%2BgnOHOIpdFdnYNj2g5kffxy8CujRSG90DX1PPQB8PMBrB54K9sKb0akyTFQ24NuWhT5CZ4igfNwimrDfcRDYtdLQiNn6Yxit04FPJx%2BKWM8riNsNAJ%2Bz%2F9pvOh7Ysxi%2FD96McZGxBP267B09TwRk4lcCbaifJ7hWR2ChHxO0X8sN9eDdBp9eTpVyMEXKwEQxFQND9mBo6EGMCT%2BKSVGJmBlbgI%2FjCb7JEyZ5HDvPp%2F%2BCOMSqavqWwLXF1%2FHZqnk7fYjHcZ%2FIEK9BcPODvcAsvCi4TNhXHq%2FQMTRrELQt3wxk2T7pumToKjFQZMijGxO4zFvfQF%2FJ49ytwXyrzrt7S7Du6rJtSLZtW9wq%2BP6EOoZAd4VgSwaqA3gRh7uHjmGwyKB3l%2B6Al25dXbGjxX9HrBkv8Syiq0LAR%2FdXp3Za3Dh05XjyWtdwxRW6gy%2BMOOOfhVWCFu2LuBO4X2RYLJnBOhsEG1LQvD0LSbvz8IqgBcGsoRLDRYYAq87edHfg%2BOydZVsGSgKy8XFABW4TtFDnQ5PE8Bd%2B2pnEkE8EgaKNl%2Fne%2B%2F45%2BOjqVE4Lhxei9NKZMM6qTSJDglW19BDYj1nhJ234ZiDdLxvrr1blaOGUUDwomTBCZ8YcHcP6AwXQ%2B6Sjhh%2BVuikVlzeloZk3154tFlXwv%2FOzdL1T0cB%2Fllfb%2BmYhhR%2Btxk%2FXulqF44LxH6hcs87tJ6aMAAAAAElFTkSuQmCC"
-                    alt="Avatar"
-                    width="80"
-                    height="80"
-                    class="rounded-full border-4 border-white shadow-md"
-                    id="user-avatar"
-                  />
-                  <div
-                    class="absolute -bottom-2 -right-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-full p-2 shadow-lg"
-                  >
-                    <i class="fa-solid fa-trophy"></i>
-                  </div>
+          <!-- Arcade -->
+          <div id="arcade-points"
+            class="hidden relative bg-gradient-to-br from-purple-600 to-indigo-800 rounded-2xl p-6 mt-6 shadow-lg text-white">
+            <div class="flex items-center">
+              <div class="relative">
+                <img
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAOxAAADsQH1g%2B1JAAAABHNCSVQICAgIfAhkiAAAEUVJREFUeNrtnQl0FFXahotZVBD9Z35BEfTXUUeHxeUfHUdHRxQYlkEGGCACoqIsw6aogIDDCIJAQCDBgGQIJBBAMEGIZCMx6ap0ks7W2feFpG8HSAQJAUJCAul3%2BnLo05lIkFR91el013fOew4cQk5VvU%2Fd5avv3iu4WgDoEsPwkMjwqsTwrmTCRpEhWDRBEhlyrTppVY1VdVaB69qfa679W%2B61nw3i%2F5f%2FDp0JI%2FnvBNBF0MK5IrYSfXQMHhLDZpHBYNV5q6CSzksMiSKDt8QwIdqM3oIWjg2xAreJlRjODZdMKObGdLCKrPLSmTEsohS3ClrQR1A%2BbuFNuo4hUGI4R2YevWolht28yzAa8UtBC2URV4nfigyeVlVbhU6mat5K6Rj6C1q0L0SGF60KtcpiFVxACRLDKG0Q%2BROjd8mEsSJDplVwRUkM6TozRmsgtArJhBEig9EquInS%2BKBRcPfQleMxkSHMKripvhPNGCC4W4SeRLdrCZrLVsHN1SQxrDNUoqvgDiEyDJEYjmnG%2F0ilsSYMElww7AkcBk8dQ7NmdpuySAz%2F5i2k4EoRU4knRIY8zeCbVo7L5A8kMyaJDHWaqe1WvVVvCZ01goCf8xy5szzQhMJzSEkzIVPMQl54HPJCRRSERIGtWoWK9RtQutUP%2BftCkP2tDkmZVc4DghkbVgA%2FE2hD%2Fdy9xPB1RzwwfUk9uMllew%2Bg2nMlzi%2BcgctTRwATX7quGvv1ROPvevxYT9yL%2Bhf64tzoV3Bqzjso3vkV9CV1HQXBIT6GEjpDiKfQXWKIcuQDMiYUomKHP2qXzIVl8qA2zG4HAG2p391oeOlxnJ4%2BBYWBwRArmh0Jgi6iFHcKzhwx5biHpzsd8UBSU8th%2FvJLNMz2aG2qHADk6cn7UPPGeGSF6h0FgTGqDHcLTjrNe5DPZVXNpVdcRsHhKJz7aHZLEykAUKyG5x%2FF8U%2BWIa6sXm0ISvizFpwp9FXoyQsjVOvXSxtQuvdrXJo13mYcNQB0euo%2BVM2fi4S8GjUhKBMr0EtwhuD9Em%2F21Xrjiw%2BE4NLMv9OZTg9Am4PI6vdmIa6sQZ3W0IRssQK%2FcoZKnWg1bjBTzETd%2FLdkmEoAAKEuPf0ASn18VRsYdlgZGp%2Bb8spZ8vl6QS2%2B9%2FyUwFwCAAh1YeQLSI0vpIfAhMM85yI4OtRI8uRGJqBxxhhujCsBYNfjvXDM6ws1Ck3WCY4MnQmTSW%2Bg%2FAqYry8waSA3xUUBsKvW46%2FUSSULrzRy2IcdieEi1cUbck8TTOscCgDRtPExpMdmUkLwQ9wJ3O%2BIT7o5ZMmclGNomDWBG%2BFOANj1RG%2FkBUVQjgeSVS1HF83wobrYrBgjrrw1jJvgvgBw9e%2BF4h17KVsCT9UqeajKtHOiDGieMoQboAFgFb%2BGijVr6cYDlRhIXsPHs08k5kcn2T7YaAC0UPkbryO4kGxWkE%2FaFfACTpKvdolFtmZfA6Cl%2BVMmY20SsDYZCC4iyxQuolmeZUJfXrmq9IKSM0%2Bgcfpo%2FtA1AH5sPhcpBHymFluOB5T3%2FSZEKr2YxLwfUD9vcoeb3fTGUJye%2ByaOvz8bx5YsQsHyT3F6%2BJ9xdtAzOP%2Fi46h%2F5jcOBaL89Ul24%2Bkh4AomWLGjtCm6gjrDM8C%2F%2Bjnc8FNzpyL5820I2RWD7REMnoZm%2FoBvKM%2FEKwg8kAH9Cm8cHz8KF599BI19ezrIfHoIdAyDZa%2FVExlSlV4AK1wKZAiwpP%2FcIRB8%2F%2B47EH32wTeykj9IEu38Jh%2BFM2ah7rlHiZp9u%2FlqQyAxJMp9%2B8cqnuuXxcCS8TMOgOoQVH44F8FfJWKtwcIfnmoK8Q0D7zYa%2BxL0%2BY6CwIw%2FC%2B0Npat0E0xn0Jh5j838VhD0JzPevGAeAr4tlmGmMh30%2B46PGwiaffUh4DWacpI%2BUKKT%2BdNbm0%2FaElx8%2B28I2xkh442nVfLSNWh8sg%2B1%2BfQQmPEHh438M8rigYwu3GxVICj5eCm8xHMEBtLoy4jjODvkWSV9vvoQmHC4PduyWOSP%2Bi%2BjLrt%2FG8Yr6w4sk16G3nsXxVtPr8RmFMycbTW8J82bTw%2BBJdaMh4WfCl5coOTtLyrxa200RUvA5%2FB8kEdsHL30n3rz9QMEbz49BJIJq4UbBc8fiwxVcs2PY41oyPoNN5YUAm7%2BV0EZKplGrwivAyh5%2B22C30UOQRX3%2BEZv%2Fyglb39JsY%2FNVHkQfNL%2FuubvDzLym9ZEAUElht9o9L9H%2FlSjCZey%2BrRlsJwxAe%2FzebOvGU0LQUCb1T5KNmHMKw1qaSZJSxDvHaAZTA%2FBWV7OL7QO3jQoaf5rcgdzA8kgqNrgwXP3mrnqQDDkev3%2FZrnmp5QX2ub9JLqY3hM%2BhhOaqWpBYMaG6%2FX%2FJfI%2F%2BCzhxpHpUMpBzUwVIeAVQz%2Facl1J838x6zEy803GVzQTHQCB3oR7W1b7via7tLs8n8x8%2FuXQPyVDM9ABEOhMGEfS%2F5cXrSIDoDhtjGacYyDgAGxq2f8b5AJQm%2FMCGQCBKdqc34EQJLRc5XtBbuq3OfM2EvOrjU9pZjkWgloAXfj8%2FxG5b396WTLZ2x%2BTukkzysEQ8KphRfn%2F0mJvIgC6wCdZm%2Fc7GgJe9CvoGN6TC0B1%2FhSi5v%2F%2FnfKBLdz7PYZPiHR6zfc7LgsCyYzZilb9nMt5ngSApLQlGgAEALQXAh3DekFkCJYJgK3oU7EOpoRoADgMADsE%2BwtgECSGODnm6011ZPn%2FLcmVGgAOBoDLJx01gtxt3FPL80jMb0zvzi9GA6ADAPjCiIscgJOyKn%2BPJZAAcDq9vwZABwHgnYYmDkCtvFU%2F0SQAlBuHagB0EACb0tDMAaiXA0Bu6SESAIqM4zQAOgiADSmwcACuyAGgoGQPCQB5xikaAB0EgKdV8gEo3asB4CR6P%2BCk7Myggi7gsNYFOIkW7jsl6%2F7WWaUNAl0AgCUHz8i6v8%2F5GEBiOCFvGphINA3spwGgUMuOyFsouzEFV3gLkNuRiaCmjNs1ABTqk6MX5eYB6nk9oNjRqeCtyUwDQIE%2Bi7ssLxWcgTNO8THoUMo3GgAyNXqqTvb9bU2H2Uk%2BBy%2FWAJCpiQtSZd%2Ff9iwkCxLDux1fEPKUBoBMTVudL%2Fv%2BdmRjP%2B8CXpVdElbkRVUSZvsk7BZaEd2AER40AMzbJn%2F85J%2BDZUIMw0Oyi0KPpZAVhcambnQbAOb4VNDlAIJr5AOQjz8KALrIXRYusSY0Z3YlAeCUcYDbADBudgKJ%2BSMnR2NNQrO8JFAyLLAdSi0xJDrDwpA9KQkub%2F6S4DNkb%2F%2Fri%2BXvnLI5DedargzydoalYaXGUS4PwORFaWQAzN1qkn0dvplIa7k2cALB4lACdUFAcrrLmr84iO7t5%2FpX%2BAXZ1xKQ1eJomWgzeitaHp79OzIImHGgawJgsGD83EQy88dOj1N0Pbtz8UTrzaGLnWWDiMMpwS4HwAf%2BJ0jf%2FlleZbKvxSsNlwRbUIwDkstLSLeIqc%2FogU0ulBf49LsGjHozlg4Aj6NYHt0g%2B3r%2BnYlUoXXozBimbJOoQaStwNq4v2N1UrMrNP08XUv59vOBpKJr8s%2FGwusdA38rLw6Rv03cQTLzdyX0xW2hczA0JrzTA%2FCPjaXk6d8PdlfJvh5eBLI1H93b2il0t4JNovlGkWTm33JkLm4NnYepcTmd1vwFgdUY4XGU1PwxM%2BKwOtEif2fzTBTf6FDokQRbxZKYb9Ptoe9jRlxR50v37juGv06MUqsCWLb8c7FUaCtE4Bd8pRDBZtEk5reEYKa%2B80Dwtx1RGPpaGLn5Y2fEYU2iRUnz3xxqRLefOi3EU9l28TtJzbdD8AHekrKd3vyhRw7iuZk71Cn%2F3qlsE43tmUgQfir4ljHKD4zoR2i%2BXbcemYdBMSFY44QHRvAZy%2BNfr0e3zeNxx6ZJeH7aLkrz%2BQckxfcdWHiTZwpLDOHKjozR87wAmfmtNSBqG5YlXnCewV5cFXrs%2BAe4%2BTbd4TURz0%2F3J5v3L%2FnmrKJr9DGiWrjZiDVhkPJDo2aQmt9a%2FxO6CKNjxQ5vDV4O2YduW16zGa8KBNPWFiq%2Bzl15mCu0JySGdCUAxJtqcSmrN7n5rfVI5EbMizc53PjxkSJ%2BvX1aK9PpIRjzjojP9FcUXetmIy4I7Q2dGaOVtgLZZRF8%2B9e2zCfVY0c3Y5q%2BAGuS1G0RxkZ8h7v8ZnJzb0aKxgS8bGzRgdPKTz7NxnJBTkgMKQRHx8owX77uC1%2BNEbFHsSChmsz0eboyDDiwDt23vd620fQtAc8iKr52byPqbJU%2FclqBYRSHR5dkPC3DfOXqE7EKL8ccwiQpFR%2FGV93Ut4VVhiZMj83D4CNf48E9S2WYTgPB5IWpJOObnblYIMgIshkBV3hZJR6OXuFA89vOJfQOX4mHIz9Hv6Nb8XS0P%2B7d9T567JzF%2B3Or2VPQ7YsJMsylhWDMNAkrdU3KD7RMBxOUBs8LSAyNSiHYX%2FoD7olYSmAkqayGkxhLNiYYOSUGy0LPKzZ%2FfQosu3LwtCAjiA%2BTtMuvyIw7wj50DQDoWwJe5Wsr81as7dn4VqAKQyW6igylFBCsyMhHtyPzXQAAWgj%2BMjEUM%2FYVkpjvnYaGIAO6CmRhTw5ZKCD4LLMYd4YtdHMA7BD8ceYOjPQNtRlIk%2FShD3vZGIU255xAj7B%2FujcAXD4ePKlEZT4v90oUSKN11ZAZWVQQ%2BOaeRq%2FwFW4LwO1bJ%2BHtmEwy83nGz%2Fa5V7XQMfQXGeqoINiVfx6%2FjdzkdgD8r98MfCjRnZHAR%2F1%2B2XhOcERIJoylGg9wHSxuxrDYcF4C5hYAPLJvOVYn0ha87sjFZ4Ijg58%2Byc2j0qFiYLo%2BH3eF%2FdNlAbh9y2t4NSyMznj7Mi%2BD4NCwHzZ1gBKCw8XAiqSLeDYqkBd%2FuBQA%2Fxf4EZbqz5CbvyUdbAXwC6EjwmjEL0WGo9QQrEsGZunLcH%2FE6k4PwJ2%2Bb8AjMo7WeHuRR83eZNwpdGQkFOEOkcGoBgT84814MZFPFzsdAN2%2FnIznvtmOVUmXVTHfOw11X%2BXiHsEZQjyJHiJDkRoQ8JtdaWjCGJ2Iu8M%2FcXoAum%2B9Zryhid54%2BzbvTTuyMUBwphAr8KDIUEI9MPRM%2Fu%2FCy8lSGh6N9OJjBCIA6KZ1Lx3eY3vj1TM%2FFU3%2BufiT4IwRcxx3iWYkqdUStBQv%2BBgc8y1PJHUYALxWoO%2F%2BNZijK2nDMPpmf28G%2BgnOHOIpdFdnYNj2g5kffxy8CujRSG90DX1PPQB8PMBrB54K9sKb0akyTFQ24NuWhT5CZ4igfNwimrDfcRDYtdLQiNn6Yxit04FPJx%2BKWM8riNsNAJ%2Bz%2F9pvOh7Ysxi%2FD96McZGxBP267B09TwRk4lcCbaifJ7hWR2ChHxO0X8sN9eDdBp9eTpVyMEXKwEQxFQND9mBo6EGMCT%2BKSVGJmBlbgI%2FjCb7JEyZ5HDvPp%2F%2BCOMSqavqWwLXF1%2FHZqnk7fYjHcZ%2FIEK9BcPODvcAsvCi4TNhXHq%2FQMTRrELQt3wxk2T7pumToKjFQZMijGxO4zFvfQF%2FJ49ytwXyrzrt7S7Du6rJtSLZtW9wq%2BP6EOoZAd4VgSwaqA3gRh7uHjmGwyKB3l%2B6Al25dXbGjxX9HrBkv8Syiq0LAR%2FdXp3Za3Dh05XjyWtdwxRW6gy%2BMOOOfhVWCFu2LuBO4X2RYLJnBOhsEG1LQvD0LSbvz8IqgBcGsoRLDRYYAq87edHfg%2BOydZVsGSgKy8XFABW4TtFDnQ5PE8Bd%2B2pnEkE8EgaKNl%2Fne%2B%2F45%2BOjqVE4Lhxei9NKZMM6qTSJDglW19BDYj1nhJ234ZiDdLxvrr1blaOGUUDwomTBCZ8YcHcP6AwXQ%2B6Sjhh%2BVuikVlzeloZk3154tFlXwv%2FOzdL1T0cB%2Fllfb%2BmYhhR%2Btxk%2FXulqF44LxH6hcs87tJ6aMAAAAAElFTkSuQmCC"
+                  alt="Avatar" width="80" height="80" class="rounded-full border-4 border-white shadow-md"
+                  id="user-avatar" />
+                <div
+                  class="absolute -bottom-2 -right-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-full p-2 shadow-lg">
+                  <i class="fa-solid fa-trophy"></i>
                 </div>
-                <div class="ml-6">
-                  <h2
-                    class="text-2xl font-bold truncate max-w-[200px]"
-                    title="Anonymous"
-                    id="user-name"
-                  >
-                    Anonymous
-                  </h2>
-                  <div class="flex items-center mt-2">
-                    <div
-                      class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-sm font-semibold px-3 py-1 rounded-full flex items-center shadow-md"
-                    >
-                      <i class="fa-solid fa-crown"></i>
-                      <span class="ml-2" id="league">VIP</span>
-                    </div>
+              </div>
+              <div class="ml-6">
+                <h2 class="text-2xl font-bold truncate max-w-[200px]" title="Anonymous" id="user-name">
+                  Anonymous
+                </h2>
+                <div class="flex items-center mt-2">
+                  <div
+                    class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-sm font-semibold px-3 py-1 rounded-full flex items-center shadow-md">
+                    <i class="fa-solid fa-crown"></i>
+                    <span class="ml-2" id="league">VIP</span>
                   </div>
                 </div>
               </div>
             </div>
-            <!-- Arcade -->
-            <div
-              id="error-message"
-              class="hidden bg-gradient-to-r from-red-400 to-red-600 border border-red-500 text-white px-4 py-3 rounded mb-4"
-              role="alert"
-            >
-              <strong class="font-bold">Error:</strong>
-              <span class="block sm:inline"
-                >Something went wrong. Please try again.</span
-              >
-            </div>
-            <div
-              id="success-message"
-              class="hidden bg-gradient-to-r from-green-400 to-green-600 border border-green-500 text-white px-4 py-3 rounded mb-4"
-              role="alert"
-            >
-              <strong class="font-bold">Success:</strong>
-              <span class="block sm:inline">Your action was successful!</span>
-            </div>
-            <div class="flex justify-center mt-6">
-              <button
-                id="toggle-video"
-                class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200 flex items-center space-x-2"
-              >
-                <i class="fa-solid fa-video"></i>
-                <span>Show/Hide Video</span>
-              </button>
-            </div>
-            <div
-              class="flex justify-center mt-6"
-              id="video-container"
-              style="display: none"
-            >
-              <iframe
-                class="rounded-lg shadow-md"
-                width="560"
-                height="315"
-                src="https://www.youtube.com/embed/lcQywccAT4A?si=zWZwa2nCP5CPA-2P"
-                title="YouTube video player"
-                frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                referrerpolicy="strict-origin-when-cross-origin"
-                allowfullscreen
-              ></iframe>
-            </div>
-            <script>
-              document
-                .getElementById("toggle-video")
-                .addEventListener("click", () => {
-                  const videoContainer =
-                    document.getElementById("video-container");
-                  if (videoContainer.style.display === "none") {
-                    videoContainer.style.display = "flex";
-                  } else {
-                    videoContainer.style.display = "none";
-                  }
-                });
-            </script>
           </div>
-          <!-- END - Settings -->
-        </div>
-        <footer
-          class="mt-12 text-center text-gray-600 border-t border-gray-200 pt-6"
-        >
-          <div class="mb-4">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://chromewebstore.google.com/detail/google-cloud-skills-boost/lmbhjioadhcoebhgapaidogodllonbgg/?utm_source=webext&utm_medium=options_page"
-              class="inline-block"
-              aria-label="Chrome Web Store"
-            >
-              <img
-                alt="Chrome Web Store Version"
-                class="hidden"
-                id="chrome-web-store-badge"
-                src="https://img.shields.io/chrome-web-store/v/lmbhjioadhcoebhgapaidogodllonbgg?style=for-the-badge&logo=googlechrome&logoColor=white"
-                class="mx-auto"
-              />
-            </a>
-
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://addons.mozilla.org/addon/cloud-skills-boost-helper?utm_source=webext&utm_medium=options_page"
-              class="inline-block"
-              aria-label="Firefox Addon Store"
-            >
-              <img
-                alt="Mozilla Add-on Version"
-                class="hidden"
-                id="firefox-addon-store"
-                src="https://img.shields.io/amo/v/cloud-skills-boost-helper?style=for-the-badge&logo=firefoxbrowser&logoColor=white"
-              />
-            </a>
+          <!-- Arcade -->
+          <div id="error-message"
+            class="hidden bg-gradient-to-r from-red-400 to-red-600 border border-red-500 text-white px-4 py-3 rounded mb-4"
+            role="alert">
+            <strong class="font-bold">Error:</strong>
+            <span class="block sm:inline">Something went wrong. Please try again.</span>
           </div>
-          <p class="text-sm">
-            This extension is not affiliated with Google Cloud Skills Boost. All
-            rights reserved.
-          </p>
-          <p class="text-sm mt-2">
-            <i class="fa-solid fa-copyright"></i> 2025 -
-            <a
-              href="http://eplus.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-indigo-600 hover:underline"
-            >
-              ePlus.DEV
-            </a>
-          </p>
-        </footer>
+          <div id="success-message"
+            class="hidden bg-gradient-to-r from-green-400 to-green-600 border border-green-500 text-white px-4 py-3 rounded mb-4"
+            role="alert">
+            <strong class="font-bold">Success:</strong>
+            <span class="block sm:inline">Your action was successful!</span>
+          </div>
+          <div class="flex justify-center mt-6">
+            <button id="toggle-video"
+              class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200 flex items-center space-x-2">
+              <i class="fa-solid fa-video"></i>
+              <span>Show/Hide Video</span>
+            </button>
+          </div>
+          <div class="flex justify-center mt-6" id="video-container" style="display: none">
+            <iframe class="rounded-lg shadow-md" width="560" height="315"
+              src="https://www.youtube.com/embed/lcQywccAT4A?si=zWZwa2nCP5CPA-2P" title="YouTube video player"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          </div>
+          <script>
+            document
+              .getElementById("toggle-video")
+              .addEventListener("click", () => {
+                const videoContainer =
+                  document.getElementById("video-container");
+                if (videoContainer.style.display === "none") {
+                  videoContainer.style.display = "flex";
+                } else {
+                  videoContainer.style.display = "none";
+                }
+              });
+          </script>
+        </div>
+        <!-- END - Settings -->
       </div>
-      <script type="module" src="main.tsx"></script>
-    </body>
+      <footer class="mt-12 text-center text-gray-600 border-t border-gray-200 pt-6">
+        <div class="mb-4">
+          <a target="_blank" rel="noopener noreferrer"
+            href="https://chromewebstore.google.com/detail/google-cloud-skills-boost/lmbhjioadhcoebhgapaidogodllonbgg/?utm_source=webext&utm_medium=options_page"
+            class="inline-block" aria-label="Chrome Web Store">
+            <img alt="Chrome Web Store Version" class="hidden" id="chrome-web-store-badge"
+              src="https://img.shields.io/chrome-web-store/v/lmbhjioadhcoebhgapaidogodllonbgg?style=for-the-badge&logo=googlechrome&logoColor=white"
+              class="mx-auto" />
+          </a>
+
+          <a target="_blank" rel="noopener noreferrer"
+            href="https://addons.mozilla.org/addon/cloud-skills-boost-helper?utm_source=webext&utm_medium=options_page"
+            class="inline-block" aria-label="Firefox Addon Store">
+            <img alt="Mozilla Add-on Version" class="hidden" id="firefox-addon-store"
+              src="https://img.shields.io/amo/v/cloud-skills-boost-helper?style=for-the-badge&logo=firefoxbrowser&logoColor=white" />
+          </a>
+        </div>
+        <p class="text-sm">
+          This extension is not affiliated with Google Cloud Skills Boost. All
+          rights reserved.
+        </p>
+        <p class="text-sm mt-2">
+          <i class="fa-solid fa-copyright"></i> 2025 -
+          <a href="http://eplus.dev" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline">
+            ePlus.DEV
+          </a>
+        </p>
+      </footer>
+    </div>
+    <script type="module" src="main.tsx"></script>
+  </body>
+
   </html>
-</div>
+</div>
\ No newline at end of file

From f6f67107acd3fe52aecdcca2e491777ba5ab994a Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Tue, 29 Apr 2025 04:17:54 +0000
Subject: [PATCH 4/4] style: format code with Prettier

This commit fixes the style issues introduced in 2d2d654 according to the output
from Prettier.

Details: https://github.com/ePlus-DEV/google-cloud-skills-boost-helper/pull/32
---
 entrypoints/options/index.html | 417 ++++++++++++++++++++-------------
 1 file changed, 248 insertions(+), 169 deletions(-)

diff --git a/entrypoints/options/index.html b/entrypoints/options/index.html
index 2437a06..6db6073 100644
--- a/entrypoints/options/index.html
+++ b/entrypoints/options/index.html
@@ -1,188 +1,267 @@
 <div class="mt-8">
   <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Options</title>
+      <link rel="stylesheet" href="~/assets/tailwind.css" />
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"
+      />
+    </head>
 
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Options</title>
-    <link rel="stylesheet" href="~/assets/tailwind.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" />
-  </head>
-
-  <body>
-    <div
-      class="flex flex-col p-4 w-[800px] mx-auto min-h-screen justify-center bg-gradient-to-br from-purple-100 to-indigo-50">
+    <body>
       <div
-        class="text-center mb-8 bg-gradient-to-r from-purple-400 to-indigo-600 p-8 rounded-lg shadow-lg relative border border-indigo-300">
-        <h3 class="text-4xl font-bold text-white inline-block relative">
-          Google Cloud Skills Boost - Helper
-          <span
-            class="absolute top-0 right-[-60px] text-sm font-medium text-white bg-indigo-800 px-3 py-1 rounded-full shadow-md animate-pulse"
-            id="version-number">v1.0.0</span>
-        </h3>
-        <p class="text-white mt-4 text-lg leading-relaxed">
-          Take your Google Cloud Skills Boost experience to the next level
-          with our powerful and intuitive browser extension.
-        </p>
-      </div>
-      <div class="mt-4 space-y-4">
-        <!-- BEGIN - Settings -->
-        <!-- Card 1 -->
+        class="flex flex-col p-4 w-[800px] mx-auto min-h-screen justify-center bg-gradient-to-br from-purple-100 to-indigo-50"
+      >
         <div
-          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
-          <div>
-            <h4 class="text-lg font-bold text-gray-800">Show Leaderboard</h4>
-            <p class="text-gray-600 text-sm">(Coming soon)</p>
-          </div>
-          <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600" disabled />
+          class="text-center mb-8 bg-gradient-to-r from-purple-400 to-indigo-600 p-8 rounded-lg shadow-lg relative border border-indigo-300"
+        >
+          <h3 class="text-4xl font-bold text-white inline-block relative">
+            Google Cloud Skills Boost - Helper
+            <span
+              class="absolute top-0 right-[-60px] text-sm font-medium text-white bg-indigo-800 px-3 py-1 rounded-full shadow-md animate-pulse"
+              id="version-number"
+              >v1.0.0</span
+            >
+          </h3>
+          <p class="text-white mt-4 text-lg leading-relaxed">
+            Take your Google Cloud Skills Boost experience to the next level
+            with our powerful and intuitive browser extension.
+          </p>
         </div>
-        <!-- Card 2 -->
-        <div
-          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
-          <div>
-            <h4 class="text-lg font-bold text-gray-800">Public Profile</h4>
-            <p class="text-gray-600 text-sm">
-              View your public profile on Google Cloud Skills Boost.
-            </p>
+        <div class="mt-4 space-y-4">
+          <!-- BEGIN - Settings -->
+          <!-- Card 1 -->
+          <div
+            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
+          >
+            <div>
+              <h4 class="text-lg font-bold text-gray-800">Show Leaderboard</h4>
+              <p class="text-gray-600 text-sm">(Coming soon)</p>
+            </div>
+            <input
+              type="checkbox"
+              class="form-checkbox h-5 w-5 text-indigo-600"
+              disabled
+            />
           </div>
-          <a href="https://www.cloudskillsboost.google/my_account/profile#public-profile" target="_blank"
-            rel="noopener noreferrer"
-            class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200">
-            <i class="fa-solid fa-eye"></i> View Profile
-          </a>
-        </div>
-        <!-- Card 3 -->
-        <div
-          class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center">
-          <div>
-            <h4 class="text-lg font-bold text-gray-800">My Badges</h4>
-            <p class="text-gray-600 text-sm">View all your earned badges.</p>
+          <!-- Card 2 -->
+          <div
+            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
+          >
+            <div>
+              <h4 class="text-lg font-bold text-gray-800">Public Profile</h4>
+              <p class="text-gray-600 text-sm">
+                View your public profile on Google Cloud Skills Boost.
+              </p>
+            </div>
+            <a
+              href="https://www.cloudskillsboost.google/my_account/profile#public-profile"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
+            >
+              <i class="fa-solid fa-eye"></i> View Profile
+            </a>
           </div>
-          <a href="https://www.cloudskillsboost.google/profile/badges" target="_blank" rel="noopener noreferrer"
-            class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200">
-            <i class="fa-solid fa-eye"></i> View Badges
-          </a>
-        </div>
-        <!-- Card 4 -->
-        <div class="bg-gradient-to-r from-white to-indigo-50 shadow-lg rounded-lg p-6 border border-indigo-200">
-          <h4 class="text-xl font-semibold text-gray-800 mb-2">
-            Arcade Points Calculator
-          </h4>
-          <p class="text-gray-500 text-sm mb-4">
-            Enter your public profile URL to calculate your arcade points.
-          </p>
-          <div class="flex items-center space-x-3">
-            <input type="url" id="public-profile-url"
-              class="border border-gray-300 rounded-lg px-4 py-2 flex-grow focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-              placeholder="Enter public profile URL" required />
-            <button
+          <!-- Card 3 -->
+          <div
+            class="bg-gradient-to-r from-purple-100 to-indigo-200 shadow-md rounded-lg p-6 border border-indigo-300 flex justify-between items-center"
+          >
+            <div>
+              <h4 class="text-lg font-bold text-gray-800">My Badges</h4>
+              <p class="text-gray-600 text-sm">View all your earned badges.</p>
+            </div>
+            <a
+              href="https://www.cloudskillsboost.google/profile/badges"
+              target="_blank"
+              rel="noopener noreferrer"
               class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
-              id="submit-url">
-              Save
-            </button>
+            >
+              <i class="fa-solid fa-eye"></i> View Badges
+            </a>
           </div>
-          <!-- Arcade -->
-          <div id="arcade-points"
-            class="hidden relative bg-gradient-to-br from-purple-600 to-indigo-800 rounded-2xl p-6 mt-6 shadow-lg text-white">
-            <div class="flex items-center">
-              <div class="relative">
-                <img
-                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAOxAAADsQH1g%2B1JAAAABHNCSVQICAgIfAhkiAAAEUVJREFUeNrtnQl0FFXahotZVBD9Z35BEfTXUUeHxeUfHUdHRxQYlkEGGCACoqIsw6aogIDDCIJAQCDBgGQIJBBAMEGIZCMx6ap0ks7W2feFpG8HSAQJAUJCAul3%2BnLo05lIkFR91el013fOew4cQk5VvU%2Fd5avv3iu4WgDoEsPwkMjwqsTwrmTCRpEhWDRBEhlyrTppVY1VdVaB69qfa679W%2B61nw3i%2F5f%2FDp0JI%2FnvBNBF0MK5IrYSfXQMHhLDZpHBYNV5q6CSzksMiSKDt8QwIdqM3oIWjg2xAreJlRjODZdMKObGdLCKrPLSmTEsohS3ClrQR1A%2BbuFNuo4hUGI4R2YevWolht28yzAa8UtBC2URV4nfigyeVlVbhU6mat5K6Rj6C1q0L0SGF60KtcpiFVxACRLDKG0Q%2BROjd8mEsSJDplVwRUkM6TozRmsgtArJhBEig9EquInS%2BKBRcPfQleMxkSHMKripvhPNGCC4W4SeRLdrCZrLVsHN1SQxrDNUoqvgDiEyDJEYjmnG%2F0ilsSYMElww7AkcBk8dQ7NmdpuySAz%2F5i2k4EoRU4knRIY8zeCbVo7L5A8kMyaJDHWaqe1WvVVvCZ01goCf8xy5szzQhMJzSEkzIVPMQl54HPJCRRSERIGtWoWK9RtQutUP%2BftCkP2tDkmZVc4DghkbVgA%2FE2hD%2Fdy9xPB1RzwwfUk9uMllew%2Bg2nMlzi%2BcgctTRwATX7quGvv1ROPvevxYT9yL%2Bhf64tzoV3Bqzjso3vkV9CV1HQXBIT6GEjpDiKfQXWKIcuQDMiYUomKHP2qXzIVl8qA2zG4HAG2p391oeOlxnJ4%2BBYWBwRArmh0Jgi6iFHcKzhwx5biHpzsd8UBSU8th%2FvJLNMz2aG2qHADk6cn7UPPGeGSF6h0FgTGqDHcLTjrNe5DPZVXNpVdcRsHhKJz7aHZLEykAUKyG5x%2FF8U%2BWIa6sXm0ISvizFpwp9FXoyQsjVOvXSxtQuvdrXJo13mYcNQB0euo%2BVM2fi4S8GjUhKBMr0EtwhuD9Em%2F21Xrjiw%2BE4NLMv9OZTg9Am4PI6vdmIa6sQZ3W0IRssQK%2FcoZKnWg1bjBTzETd%2FLdkmEoAAKEuPf0ASn18VRsYdlgZGp%2Bb8spZ8vl6QS2%2B9%2FyUwFwCAAh1YeQLSI0vpIfAhMM85yI4OtRI8uRGJqBxxhhujCsBYNfjvXDM6ws1Ck3WCY4MnQmTSW%2Bg%2FAqYry8waSA3xUUBsKvW46%2FUSSULrzRy2IcdieEi1cUbck8TTOscCgDRtPExpMdmUkLwQ9wJ3O%2BIT7o5ZMmclGNomDWBG%2BFOANj1RG%2FkBUVQjgeSVS1HF83wobrYrBgjrrw1jJvgvgBw9e%2BF4h17KVsCT9UqeajKtHOiDGieMoQboAFgFb%2BGijVr6cYDlRhIXsPHs08k5kcn2T7YaAC0UPkbryO4kGxWkE%2FaFfACTpKvdolFtmZfA6Cl%2BVMmY20SsDYZCC4iyxQuolmeZUJfXrmq9IKSM0%2Bgcfpo%2FtA1AH5sPhcpBHymFluOB5T3%2FSZEKr2YxLwfUD9vcoeb3fTGUJye%2ByaOvz8bx5YsQsHyT3F6%2BJ9xdtAzOP%2Fi46h%2F5jcOBaL89Ul24%2Bkh4AomWLGjtCm6gjrDM8C%2F%2Bjnc8FNzpyL5820I2RWD7REMnoZm%2FoBvKM%2FEKwg8kAH9Cm8cHz8KF599BI19ezrIfHoIdAyDZa%2FVExlSlV4AK1wKZAiwpP%2FcIRB8%2F%2B47EH32wTeykj9IEu38Jh%2BFM2ah7rlHiZp9u%2FlqQyAxJMp9%2B8cqnuuXxcCS8TMOgOoQVH44F8FfJWKtwcIfnmoK8Q0D7zYa%2BxL0%2BY6CwIw%2FC%2B0Npat0E0xn0Jh5j838VhD0JzPevGAeAr4tlmGmMh30%2B46PGwiaffUh4DWacpI%2BUKKT%2BdNbm0%2FaElx8%2B28I2xkh442nVfLSNWh8sg%2B1%2BfQQmPEHh438M8rigYwu3GxVICj5eCm8xHMEBtLoy4jjODvkWSV9vvoQmHC4PduyWOSP%2Bi%2BjLrt%2FG8Yr6w4sk16G3nsXxVtPr8RmFMycbTW8J82bTw%2BBJdaMh4WfCl5coOTtLyrxa200RUvA5%2FB8kEdsHL30n3rz9QMEbz49BJIJq4UbBc8fiwxVcs2PY41oyPoNN5YUAm7%2BV0EZKplGrwivAyh5%2B22C30UOQRX3%2BEZv%2Fyglb39JsY%2FNVHkQfNL%2FuubvDzLym9ZEAUElht9o9L9H%2FlSjCZey%2BrRlsJwxAe%2FzebOvGU0LQUCb1T5KNmHMKw1qaSZJSxDvHaAZTA%2FBWV7OL7QO3jQoaf5rcgdzA8kgqNrgwXP3mrnqQDDkev3%2FZrnmp5QX2ub9JLqY3hM%2BhhOaqWpBYMaG6%2FX%2FJfI%2F%2BCzhxpHpUMpBzUwVIeAVQz%2Facl1J838x6zEy803GVzQTHQCB3oR7W1b7via7tLs8n8x8%2FuXQPyVDM9ABEOhMGEfS%2F5cXrSIDoDhtjGacYyDgAGxq2f8b5AJQm%2FMCGQCBKdqc34EQJLRc5XtBbuq3OfM2EvOrjU9pZjkWgloAXfj8%2FxG5b396WTLZ2x%2BTukkzysEQ8KphRfn%2F0mJvIgC6wCdZm%2Fc7GgJe9CvoGN6TC0B1%2FhSi5v%2F%2FnfKBLdz7PYZPiHR6zfc7LgsCyYzZilb9nMt5ngSApLQlGgAEALQXAh3DekFkCJYJgK3oU7EOpoRoADgMADsE%2BwtgECSGODnm6011ZPn%2FLcmVGgAOBoDLJx01gtxt3FPL80jMb0zvzi9GA6ADAPjCiIscgJOyKn%2BPJZAAcDq9vwZABwHgnYYmDkCtvFU%2F0SQAlBuHagB0EACb0tDMAaiXA0Bu6SESAIqM4zQAOgiADSmwcACuyAGgoGQPCQB5xikaAB0EgKdV8gEo3asB4CR6P%2BCk7Myggi7gsNYFOIkW7jsl6%2F7WWaUNAl0AgCUHz8i6v8%2F5GEBiOCFvGphINA3spwGgUMuOyFsouzEFV3gLkNuRiaCmjNs1ABTqk6MX5eYB6nk9oNjRqeCtyUwDQIE%2Bi7ssLxWcgTNO8THoUMo3GgAyNXqqTvb9bU2H2Uk%2BBy%2FWAJCpiQtSZd%2Ff9iwkCxLDux1fEPKUBoBMTVudL%2Fv%2BdmRjP%2B8CXpVdElbkRVUSZvsk7BZaEd2AER40AMzbJn%2F85J%2BDZUIMw0Oyi0KPpZAVhcambnQbAOb4VNDlAIJr5AOQjz8KALrIXRYusSY0Z3YlAeCUcYDbADBudgKJ%2BSMnR2NNQrO8JFAyLLAdSi0xJDrDwpA9KQkub%2F6S4DNkb%2F%2Fri%2BXvnLI5DedargzydoalYaXGUS4PwORFaWQAzN1qkn0dvplIa7k2cALB4lACdUFAcrrLmr84iO7t5%2FpX%2BAXZ1xKQ1eJomWgzeitaHp79OzIImHGgawJgsGD83EQy88dOj1N0Pbtz8UTrzaGLnWWDiMMpwS4HwAf%2BJ0jf%2FlleZbKvxSsNlwRbUIwDkstLSLeIqc%2FogU0ulBf49LsGjHozlg4Aj6NYHt0g%2B3r%2BnYlUoXXozBimbJOoQaStwNq4v2N1UrMrNP08XUv59vOBpKJr8s%2FGwusdA38rLw6Rv03cQTLzdyX0xW2hczA0JrzTA%2FCPjaXk6d8PdlfJvh5eBLI1H93b2il0t4JNovlGkWTm33JkLm4NnYepcTmd1vwFgdUY4XGU1PwxM%2BKwOtEif2fzTBTf6FDokQRbxZKYb9Ptoe9jRlxR50v37juGv06MUqsCWLb8c7FUaCtE4Bd8pRDBZtEk5reEYKa%2B80Dwtx1RGPpaGLn5Y2fEYU2iRUnz3xxqRLefOi3EU9l28TtJzbdD8AHekrKd3vyhRw7iuZk71Cn%2F3qlsE43tmUgQfir4ljHKD4zoR2i%2BXbcemYdBMSFY44QHRvAZy%2BNfr0e3zeNxx6ZJeH7aLkrz%2BQckxfcdWHiTZwpLDOHKjozR87wAmfmtNSBqG5YlXnCewV5cFXrs%2BAe4%2BTbd4TURz0%2F3J5v3L%2FnmrKJr9DGiWrjZiDVhkPJDo2aQmt9a%2FxO6CKNjxQ5vDV4O2YduW16zGa8KBNPWFiq%2Bzl15mCu0JySGdCUAxJtqcSmrN7n5rfVI5EbMizc53PjxkSJ%2BvX1aK9PpIRjzjojP9FcUXetmIy4I7Q2dGaOVtgLZZRF8%2B9e2zCfVY0c3Y5q%2BAGuS1G0RxkZ8h7v8ZnJzb0aKxgS8bGzRgdPKTz7NxnJBTkgMKQRHx8owX77uC1%2BNEbFHsSChmsz0eboyDDiwDt23vd620fQtAc8iKr52byPqbJU%2FclqBYRSHR5dkPC3DfOXqE7EKL8ccwiQpFR%2FGV93Ut4VVhiZMj83D4CNf48E9S2WYTgPB5IWpJOObnblYIMgIshkBV3hZJR6OXuFA89vOJfQOX4mHIz9Hv6Nb8XS0P%2B7d9T567JzF%2B3Or2VPQ7YsJMsylhWDMNAkrdU3KD7RMBxOUBs8LSAyNSiHYX%2FoD7olYSmAkqayGkxhLNiYYOSUGy0LPKzZ%2FfQosu3LwtCAjiA%2BTtMuvyIw7wj50DQDoWwJe5Wsr81as7dn4VqAKQyW6igylFBCsyMhHtyPzXQAAWgj%2BMjEUM%2FYVkpjvnYaGIAO6CmRhTw5ZKCD4LLMYd4YtdHMA7BD8ceYOjPQNtRlIk%2FShD3vZGIU255xAj7B%2FujcAXD4ePKlEZT4v90oUSKN11ZAZWVQQ%2BOaeRq%2FwFW4LwO1bJ%2BHtmEwy83nGz%2Fa5V7XQMfQXGeqoINiVfx6%2FjdzkdgD8r98MfCjRnZHAR%2F1%2B2XhOcERIJoylGg9wHSxuxrDYcF4C5hYAPLJvOVYn0ha87sjFZ4Ijg58%2Byc2j0qFiYLo%2BH3eF%2FdNlAbh9y2t4NSyMznj7Mi%2BD4NCwHzZ1gBKCw8XAiqSLeDYqkBd%2FuBQA%2Fxf4EZbqz5CbvyUdbAXwC6EjwmjEL0WGo9QQrEsGZunLcH%2FE6k4PwJ2%2Bb8AjMo7WeHuRR83eZNwpdGQkFOEOkcGoBgT84814MZFPFzsdAN2%2FnIznvtmOVUmXVTHfOw11X%2BXiHsEZQjyJHiJDkRoQ8JtdaWjCGJ2Iu8M%2FcXoAum%2B9Zryhid54%2BzbvTTuyMUBwphAr8KDIUEI9MPRM%2Fu%2FCy8lSGh6N9OJjBCIA6KZ1Lx3eY3vj1TM%2FFU3%2BufiT4IwRcxx3iWYkqdUStBQv%2BBgc8y1PJHUYALxWoO%2F%2BNZijK2nDMPpmf28G%2BgnOHOIpdFdnYNj2g5kffxy8CujRSG90DX1PPQB8PMBrB54K9sKb0akyTFQ24NuWhT5CZ4igfNwimrDfcRDYtdLQiNn6Yxit04FPJx%2BKWM8riNsNAJ%2Bz%2F9pvOh7Ysxi%2FD96McZGxBP267B09TwRk4lcCbaifJ7hWR2ChHxO0X8sN9eDdBp9eTpVyMEXKwEQxFQND9mBo6EGMCT%2BKSVGJmBlbgI%2FjCb7JEyZ5HDvPp%2F%2BCOMSqavqWwLXF1%2FHZqnk7fYjHcZ%2FIEK9BcPODvcAsvCi4TNhXHq%2FQMTRrELQt3wxk2T7pumToKjFQZMijGxO4zFvfQF%2FJ49ytwXyrzrt7S7Du6rJtSLZtW9wq%2BP6EOoZAd4VgSwaqA3gRh7uHjmGwyKB3l%2B6Al25dXbGjxX9HrBkv8Syiq0LAR%2FdXp3Za3Dh05XjyWtdwxRW6gy%2BMOOOfhVWCFu2LuBO4X2RYLJnBOhsEG1LQvD0LSbvz8IqgBcGsoRLDRYYAq87edHfg%2BOydZVsGSgKy8XFABW4TtFDnQ5PE8Bd%2B2pnEkE8EgaKNl%2Fne%2B%2F45%2BOjqVE4Lhxei9NKZMM6qTSJDglW19BDYj1nhJ234ZiDdLxvrr1blaOGUUDwomTBCZ8YcHcP6AwXQ%2B6Sjhh%2BVuikVlzeloZk3154tFlXwv%2FOzdL1T0cB%2Fllfb%2BmYhhR%2Btxk%2FXulqF44LxH6hcs87tJ6aMAAAAAElFTkSuQmCC"
-                  alt="Avatar" width="80" height="80" class="rounded-full border-4 border-white shadow-md"
-                  id="user-avatar" />
-                <div
-                  class="absolute -bottom-2 -right-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-full p-2 shadow-lg">
-                  <i class="fa-solid fa-trophy"></i>
-                </div>
-              </div>
-              <div class="ml-6">
-                <h2 class="text-2xl font-bold truncate max-w-[200px]" title="Anonymous" id="user-name">
-                  Anonymous
-                </h2>
-                <div class="flex items-center mt-2">
+          <!-- Card 4 -->
+          <div
+            class="bg-gradient-to-r from-white to-indigo-50 shadow-lg rounded-lg p-6 border border-indigo-200"
+          >
+            <h4 class="text-xl font-semibold text-gray-800 mb-2">
+              Arcade Points Calculator
+            </h4>
+            <p class="text-gray-500 text-sm mb-4">
+              Enter your public profile URL to calculate your arcade points.
+            </p>
+            <div class="flex items-center space-x-3">
+              <input
+                type="url"
+                id="public-profile-url"
+                class="border border-gray-300 rounded-lg px-4 py-2 flex-grow focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                placeholder="Enter public profile URL"
+                required
+              />
+              <button
+                class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200"
+                id="submit-url"
+              >
+                Save
+              </button>
+            </div>
+            <!-- Arcade -->
+            <div
+              id="arcade-points"
+              class="hidden relative bg-gradient-to-br from-purple-600 to-indigo-800 rounded-2xl p-6 mt-6 shadow-lg text-white"
+            >
+              <div class="flex items-center">
+                <div class="relative">
+                  <img
+                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAOxAAADsQH1g%2B1JAAAABHNCSVQICAgIfAhkiAAAEUVJREFUeNrtnQl0FFXahotZVBD9Z35BEfTXUUeHxeUfHUdHRxQYlkEGGCACoqIsw6aogIDDCIJAQCDBgGQIJBBAMEGIZCMx6ap0ks7W2feFpG8HSAQJAUJCAul3%2BnLo05lIkFR91el013fOew4cQk5VvU%2Fd5avv3iu4WgDoEsPwkMjwqsTwrmTCRpEhWDRBEhlyrTppVY1VdVaB69qfa679W%2B61nw3i%2F5f%2FDp0JI%2FnvBNBF0MK5IrYSfXQMHhLDZpHBYNV5q6CSzksMiSKDt8QwIdqM3oIWjg2xAreJlRjODZdMKObGdLCKrPLSmTEsohS3ClrQR1A%2BbuFNuo4hUGI4R2YevWolht28yzAa8UtBC2URV4nfigyeVlVbhU6mat5K6Rj6C1q0L0SGF60KtcpiFVxACRLDKG0Q%2BROjd8mEsSJDplVwRUkM6TozRmsgtArJhBEig9EquInS%2BKBRcPfQleMxkSHMKripvhPNGCC4W4SeRLdrCZrLVsHN1SQxrDNUoqvgDiEyDJEYjmnG%2F0ilsSYMElww7AkcBk8dQ7NmdpuySAz%2F5i2k4EoRU4knRIY8zeCbVo7L5A8kMyaJDHWaqe1WvVVvCZ01goCf8xy5szzQhMJzSEkzIVPMQl54HPJCRRSERIGtWoWK9RtQutUP%2BftCkP2tDkmZVc4DghkbVgA%2FE2hD%2Fdy9xPB1RzwwfUk9uMllew%2Bg2nMlzi%2BcgctTRwATX7quGvv1ROPvevxYT9yL%2Bhf64tzoV3Bqzjso3vkV9CV1HQXBIT6GEjpDiKfQXWKIcuQDMiYUomKHP2qXzIVl8qA2zG4HAG2p391oeOlxnJ4%2BBYWBwRArmh0Jgi6iFHcKzhwx5biHpzsd8UBSU8th%2FvJLNMz2aG2qHADk6cn7UPPGeGSF6h0FgTGqDHcLTjrNe5DPZVXNpVdcRsHhKJz7aHZLEykAUKyG5x%2FF8U%2BWIa6sXm0ISvizFpwp9FXoyQsjVOvXSxtQuvdrXJo13mYcNQB0euo%2BVM2fi4S8GjUhKBMr0EtwhuD9Em%2F21Xrjiw%2BE4NLMv9OZTg9Am4PI6vdmIa6sQZ3W0IRssQK%2FcoZKnWg1bjBTzETd%2FLdkmEoAAKEuPf0ASn18VRsYdlgZGp%2Bb8spZ8vl6QS2%2B9%2FyUwFwCAAh1YeQLSI0vpIfAhMM85yI4OtRI8uRGJqBxxhhujCsBYNfjvXDM6ws1Ck3WCY4MnQmTSW%2Bg%2FAqYry8waSA3xUUBsKvW46%2FUSSULrzRy2IcdieEi1cUbck8TTOscCgDRtPExpMdmUkLwQ9wJ3O%2BIT7o5ZMmclGNomDWBG%2BFOANj1RG%2FkBUVQjgeSVS1HF83wobrYrBgjrrw1jJvgvgBw9e%2BF4h17KVsCT9UqeajKtHOiDGieMoQboAFgFb%2BGijVr6cYDlRhIXsPHs08k5kcn2T7YaAC0UPkbryO4kGxWkE%2FaFfACTpKvdolFtmZfA6Cl%2BVMmY20SsDYZCC4iyxQuolmeZUJfXrmq9IKSM0%2Bgcfpo%2FtA1AH5sPhcpBHymFluOB5T3%2FSZEKr2YxLwfUD9vcoeb3fTGUJye%2ByaOvz8bx5YsQsHyT3F6%2BJ9xdtAzOP%2Fi46h%2F5jcOBaL89Ul24%2Bkh4AomWLGjtCm6gjrDM8C%2F%2Bjnc8FNzpyL5820I2RWD7REMnoZm%2FoBvKM%2FEKwg8kAH9Cm8cHz8KF599BI19ezrIfHoIdAyDZa%2FVExlSlV4AK1wKZAiwpP%2FcIRB8%2F%2B47EH32wTeykj9IEu38Jh%2BFM2ah7rlHiZp9u%2FlqQyAxJMp9%2B8cqnuuXxcCS8TMOgOoQVH44F8FfJWKtwcIfnmoK8Q0D7zYa%2BxL0%2BY6CwIw%2FC%2B0Npat0E0xn0Jh5j838VhD0JzPevGAeAr4tlmGmMh30%2B46PGwiaffUh4DWacpI%2BUKKT%2BdNbm0%2FaElx8%2B28I2xkh442nVfLSNWh8sg%2B1%2BfQQmPEHh438M8rigYwu3GxVICj5eCm8xHMEBtLoy4jjODvkWSV9vvoQmHC4PduyWOSP%2Bi%2BjLrt%2FG8Yr6w4sk16G3nsXxVtPr8RmFMycbTW8J82bTw%2BBJdaMh4WfCl5coOTtLyrxa200RUvA5%2FB8kEdsHL30n3rz9QMEbz49BJIJq4UbBc8fiwxVcs2PY41oyPoNN5YUAm7%2BV0EZKplGrwivAyh5%2B22C30UOQRX3%2BEZv%2Fyglb39JsY%2FNVHkQfNL%2FuubvDzLym9ZEAUElht9o9L9H%2FlSjCZey%2BrRlsJwxAe%2FzebOvGU0LQUCb1T5KNmHMKw1qaSZJSxDvHaAZTA%2FBWV7OL7QO3jQoaf5rcgdzA8kgqNrgwXP3mrnqQDDkev3%2FZrnmp5QX2ub9JLqY3hM%2BhhOaqWpBYMaG6%2FX%2FJfI%2F%2BCzhxpHpUMpBzUwVIeAVQz%2Facl1J838x6zEy803GVzQTHQCB3oR7W1b7via7tLs8n8x8%2FuXQPyVDM9ABEOhMGEfS%2F5cXrSIDoDhtjGacYyDgAGxq2f8b5AJQm%2FMCGQCBKdqc34EQJLRc5XtBbuq3OfM2EvOrjU9pZjkWgloAXfj8%2FxG5b396WTLZ2x%2BTukkzysEQ8KphRfn%2F0mJvIgC6wCdZm%2Fc7GgJe9CvoGN6TC0B1%2FhSi5v%2F%2FnfKBLdz7PYZPiHR6zfc7LgsCyYzZilb9nMt5ngSApLQlGgAEALQXAh3DekFkCJYJgK3oU7EOpoRoADgMADsE%2BwtgECSGODnm6011ZPn%2FLcmVGgAOBoDLJx01gtxt3FPL80jMb0zvzi9GA6ADAPjCiIscgJOyKn%2BPJZAAcDq9vwZABwHgnYYmDkCtvFU%2F0SQAlBuHagB0EACb0tDMAaiXA0Bu6SESAIqM4zQAOgiADSmwcACuyAGgoGQPCQB5xikaAB0EgKdV8gEo3asB4CR6P%2BCk7Myggi7gsNYFOIkW7jsl6%2F7WWaUNAl0AgCUHz8i6v8%2F5GEBiOCFvGphINA3spwGgUMuOyFsouzEFV3gLkNuRiaCmjNs1ABTqk6MX5eYB6nk9oNjRqeCtyUwDQIE%2Bi7ssLxWcgTNO8THoUMo3GgAyNXqqTvb9bU2H2Uk%2BBy%2FWAJCpiQtSZd%2Ff9iwkCxLDux1fEPKUBoBMTVudL%2Fv%2BdmRjP%2B8CXpVdElbkRVUSZvsk7BZaEd2AER40AMzbJn%2F85J%2BDZUIMw0Oyi0KPpZAVhcambnQbAOb4VNDlAIJr5AOQjz8KALrIXRYusSY0Z3YlAeCUcYDbADBudgKJ%2BSMnR2NNQrO8JFAyLLAdSi0xJDrDwpA9KQkub%2F6S4DNkb%2F%2Fri%2BXvnLI5DedargzydoalYaXGUS4PwORFaWQAzN1qkn0dvplIa7k2cALB4lACdUFAcrrLmr84iO7t5%2FpX%2BAXZ1xKQ1eJomWgzeitaHp79OzIImHGgawJgsGD83EQy88dOj1N0Pbtz8UTrzaGLnWWDiMMpwS4HwAf%2BJ0jf%2FlleZbKvxSsNlwRbUIwDkstLSLeIqc%2FogU0ulBf49LsGjHozlg4Aj6NYHt0g%2B3r%2BnYlUoXXozBimbJOoQaStwNq4v2N1UrMrNP08XUv59vOBpKJr8s%2FGwusdA38rLw6Rv03cQTLzdyX0xW2hczA0JrzTA%2FCPjaXk6d8PdlfJvh5eBLI1H93b2il0t4JNovlGkWTm33JkLm4NnYepcTmd1vwFgdUY4XGU1PwxM%2BKwOtEif2fzTBTf6FDokQRbxZKYb9Ptoe9jRlxR50v37juGv06MUqsCWLb8c7FUaCtE4Bd8pRDBZtEk5reEYKa%2B80Dwtx1RGPpaGLn5Y2fEYU2iRUnz3xxqRLefOi3EU9l28TtJzbdD8AHekrKd3vyhRw7iuZk71Cn%2F3qlsE43tmUgQfir4ljHKD4zoR2i%2BXbcemYdBMSFY44QHRvAZy%2BNfr0e3zeNxx6ZJeH7aLkrz%2BQckxfcdWHiTZwpLDOHKjozR87wAmfmtNSBqG5YlXnCewV5cFXrs%2BAe4%2BTbd4TURz0%2F3J5v3L%2FnmrKJr9DGiWrjZiDVhkPJDo2aQmt9a%2FxO6CKNjxQ5vDV4O2YduW16zGa8KBNPWFiq%2Bzl15mCu0JySGdCUAxJtqcSmrN7n5rfVI5EbMizc53PjxkSJ%2BvX1aK9PpIRjzjojP9FcUXetmIy4I7Q2dGaOVtgLZZRF8%2B9e2zCfVY0c3Y5q%2BAGuS1G0RxkZ8h7v8ZnJzb0aKxgS8bGzRgdPKTz7NxnJBTkgMKQRHx8owX77uC1%2BNEbFHsSChmsz0eboyDDiwDt23vd620fQtAc8iKr52byPqbJU%2FclqBYRSHR5dkPC3DfOXqE7EKL8ccwiQpFR%2FGV93Ut4VVhiZMj83D4CNf48E9S2WYTgPB5IWpJOObnblYIMgIshkBV3hZJR6OXuFA89vOJfQOX4mHIz9Hv6Nb8XS0P%2B7d9T567JzF%2B3Or2VPQ7YsJMsylhWDMNAkrdU3KD7RMBxOUBs8LSAyNSiHYX%2FoD7olYSmAkqayGkxhLNiYYOSUGy0LPKzZ%2FfQosu3LwtCAjiA%2BTtMuvyIw7wj50DQDoWwJe5Wsr81as7dn4VqAKQyW6igylFBCsyMhHtyPzXQAAWgj%2BMjEUM%2FYVkpjvnYaGIAO6CmRhTw5ZKCD4LLMYd4YtdHMA7BD8ceYOjPQNtRlIk%2FShD3vZGIU255xAj7B%2FujcAXD4ePKlEZT4v90oUSKN11ZAZWVQQ%2BOaeRq%2FwFW4LwO1bJ%2BHtmEwy83nGz%2Fa5V7XQMfQXGeqoINiVfx6%2FjdzkdgD8r98MfCjRnZHAR%2F1%2B2XhOcERIJoylGg9wHSxuxrDYcF4C5hYAPLJvOVYn0ha87sjFZ4Ijg58%2Byc2j0qFiYLo%2BH3eF%2FdNlAbh9y2t4NSyMznj7Mi%2BD4NCwHzZ1gBKCw8XAiqSLeDYqkBd%2FuBQA%2Fxf4EZbqz5CbvyUdbAXwC6EjwmjEL0WGo9QQrEsGZunLcH%2FE6k4PwJ2%2Bb8AjMo7WeHuRR83eZNwpdGQkFOEOkcGoBgT84814MZFPFzsdAN2%2FnIznvtmOVUmXVTHfOw11X%2BXiHsEZQjyJHiJDkRoQ8JtdaWjCGJ2Iu8M%2FcXoAum%2B9Zryhid54%2BzbvTTuyMUBwphAr8KDIUEI9MPRM%2Fu%2FCy8lSGh6N9OJjBCIA6KZ1Lx3eY3vj1TM%2FFU3%2BufiT4IwRcxx3iWYkqdUStBQv%2BBgc8y1PJHUYALxWoO%2F%2BNZijK2nDMPpmf28G%2BgnOHOIpdFdnYNj2g5kffxy8CujRSG90DX1PPQB8PMBrB54K9sKb0akyTFQ24NuWhT5CZ4igfNwimrDfcRDYtdLQiNn6Yxit04FPJx%2BKWM8riNsNAJ%2Bz%2F9pvOh7Ysxi%2FD96McZGxBP267B09TwRk4lcCbaifJ7hWR2ChHxO0X8sN9eDdBp9eTpVyMEXKwEQxFQND9mBo6EGMCT%2BKSVGJmBlbgI%2FjCb7JEyZ5HDvPp%2F%2BCOMSqavqWwLXF1%2FHZqnk7fYjHcZ%2FIEK9BcPODvcAsvCi4TNhXHq%2FQMTRrELQt3wxk2T7pumToKjFQZMijGxO4zFvfQF%2FJ49ytwXyrzrt7S7Du6rJtSLZtW9wq%2BP6EOoZAd4VgSwaqA3gRh7uHjmGwyKB3l%2B6Al25dXbGjxX9HrBkv8Syiq0LAR%2FdXp3Za3Dh05XjyWtdwxRW6gy%2BMOOOfhVWCFu2LuBO4X2RYLJnBOhsEG1LQvD0LSbvz8IqgBcGsoRLDRYYAq87edHfg%2BOydZVsGSgKy8XFABW4TtFDnQ5PE8Bd%2B2pnEkE8EgaKNl%2Fne%2B%2F45%2BOjqVE4Lhxei9NKZMM6qTSJDglW19BDYj1nhJ234ZiDdLxvrr1blaOGUUDwomTBCZ8YcHcP6AwXQ%2B6Sjhh%2BVuikVlzeloZk3154tFlXwv%2FOzdL1T0cB%2Fllfb%2BmYhhR%2Btxk%2FXulqF44LxH6hcs87tJ6aMAAAAAElFTkSuQmCC"
+                    alt="Avatar"
+                    width="80"
+                    height="80"
+                    class="rounded-full border-4 border-white shadow-md"
+                    id="user-avatar"
+                  />
                   <div
-                    class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-sm font-semibold px-3 py-1 rounded-full flex items-center shadow-md">
-                    <i class="fa-solid fa-crown"></i>
-                    <span class="ml-2" id="league">VIP</span>
+                    class="absolute -bottom-2 -right-2 bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-full p-2 shadow-lg"
+                  >
+                    <i class="fa-solid fa-trophy"></i>
+                  </div>
+                </div>
+                <div class="ml-6">
+                  <h2
+                    class="text-2xl font-bold truncate max-w-[200px]"
+                    title="Anonymous"
+                    id="user-name"
+                  >
+                    Anonymous
+                  </h2>
+                  <div class="flex items-center mt-2">
+                    <div
+                      class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-sm font-semibold px-3 py-1 rounded-full flex items-center shadow-md"
+                    >
+                      <i class="fa-solid fa-crown"></i>
+                      <span class="ml-2" id="league">VIP</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <!-- Arcade -->
+            <div
+              id="error-message"
+              class="hidden bg-gradient-to-r from-red-400 to-red-600 border border-red-500 text-white px-4 py-3 rounded mb-4"
+              role="alert"
+            >
+              <strong class="font-bold">Error:</strong>
+              <span class="block sm:inline"
+                >Something went wrong. Please try again.</span
+              >
+            </div>
+            <div
+              id="success-message"
+              class="hidden bg-gradient-to-r from-green-400 to-green-600 border border-green-500 text-white px-4 py-3 rounded mb-4"
+              role="alert"
+            >
+              <strong class="font-bold">Success:</strong>
+              <span class="block sm:inline">Your action was successful!</span>
+            </div>
+            <div class="flex justify-center mt-6">
+              <button
+                id="toggle-video"
+                class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200 flex items-center space-x-2"
+              >
+                <i class="fa-solid fa-video"></i>
+                <span>Show/Hide Video</span>
+              </button>
+            </div>
+            <div
+              class="flex justify-center mt-6"
+              id="video-container"
+              style="display: none"
+            >
+              <iframe
+                class="rounded-lg shadow-md"
+                width="560"
+                height="315"
+                src="https://www.youtube.com/embed/lcQywccAT4A?si=zWZwa2nCP5CPA-2P"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerpolicy="strict-origin-when-cross-origin"
+                allowfullscreen
+              ></iframe>
+            </div>
+            <script>
+              document
+                .getElementById("toggle-video")
+                .addEventListener("click", () => {
+                  const videoContainer =
+                    document.getElementById("video-container");
+                  if (videoContainer.style.display === "none") {
+                    videoContainer.style.display = "flex";
+                  } else {
+                    videoContainer.style.display = "none";
+                  }
+                });
+            </script>
           </div>
-          <!-- Arcade -->
-          <div id="error-message"
-            class="hidden bg-gradient-to-r from-red-400 to-red-600 border border-red-500 text-white px-4 py-3 rounded mb-4"
-            role="alert">
-            <strong class="font-bold">Error:</strong>
-            <span class="block sm:inline">Something went wrong. Please try again.</span>
-          </div>
-          <div id="success-message"
-            class="hidden bg-gradient-to-r from-green-400 to-green-600 border border-green-500 text-white px-4 py-3 rounded mb-4"
-            role="alert">
-            <strong class="font-bold">Success:</strong>
-            <span class="block sm:inline">Your action was successful!</span>
-          </div>
-          <div class="flex justify-center mt-6">
-            <button id="toggle-video"
-              class="bg-gradient-to-r from-purple-500 to-indigo-700 hover:from-purple-600 hover:to-indigo-800 text-white font-medium px-4 py-2 rounded-lg shadow-md transition duration-200 flex items-center space-x-2">
-              <i class="fa-solid fa-video"></i>
-              <span>Show/Hide Video</span>
-            </button>
-          </div>
-          <div class="flex justify-center mt-6" id="video-container" style="display: none">
-            <iframe class="rounded-lg shadow-md" width="560" height="315"
-              src="https://www.youtube.com/embed/lcQywccAT4A?si=zWZwa2nCP5CPA-2P" title="YouTube video player"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-          </div>
-          <script>
-            document
-              .getElementById("toggle-video")
-              .addEventListener("click", () => {
-                const videoContainer =
-                  document.getElementById("video-container");
-                if (videoContainer.style.display === "none") {
-                  videoContainer.style.display = "flex";
-                } else {
-                  videoContainer.style.display = "none";
-                }
-              });
-          </script>
-        </div>
-        <!-- END - Settings -->
-      </div>
-      <footer class="mt-12 text-center text-gray-600 border-t border-gray-200 pt-6">
-        <div class="mb-4">
-          <a target="_blank" rel="noopener noreferrer"
-            href="https://chromewebstore.google.com/detail/google-cloud-skills-boost/lmbhjioadhcoebhgapaidogodllonbgg/?utm_source=webext&utm_medium=options_page"
-            class="inline-block" aria-label="Chrome Web Store">
-            <img alt="Chrome Web Store Version" class="hidden" id="chrome-web-store-badge"
-              src="https://img.shields.io/chrome-web-store/v/lmbhjioadhcoebhgapaidogodllonbgg?style=for-the-badge&logo=googlechrome&logoColor=white"
-              class="mx-auto" />
-          </a>
-
-          <a target="_blank" rel="noopener noreferrer"
-            href="https://addons.mozilla.org/addon/cloud-skills-boost-helper?utm_source=webext&utm_medium=options_page"
-            class="inline-block" aria-label="Firefox Addon Store">
-            <img alt="Mozilla Add-on Version" class="hidden" id="firefox-addon-store"
-              src="https://img.shields.io/amo/v/cloud-skills-boost-helper?style=for-the-badge&logo=firefoxbrowser&logoColor=white" />
-          </a>
+          <!-- END - Settings -->
         </div>
-        <p class="text-sm">
-          This extension is not affiliated with Google Cloud Skills Boost. All
-          rights reserved.
-        </p>
-        <p class="text-sm mt-2">
-          <i class="fa-solid fa-copyright"></i> 2025 -
-          <a href="http://eplus.dev" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline">
-            ePlus.DEV
-          </a>
-        </p>
-      </footer>
-    </div>
-    <script type="module" src="main.tsx"></script>
-  </body>
+        <footer
+          class="mt-12 text-center text-gray-600 border-t border-gray-200 pt-6"
+        >
+          <div class="mb-4">
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://chromewebstore.google.com/detail/google-cloud-skills-boost/lmbhjioadhcoebhgapaidogodllonbgg/?utm_source=webext&utm_medium=options_page"
+              class="inline-block"
+              aria-label="Chrome Web Store"
+            >
+              <img
+                alt="Chrome Web Store Version"
+                class="hidden"
+                id="chrome-web-store-badge"
+                src="https://img.shields.io/chrome-web-store/v/lmbhjioadhcoebhgapaidogodllonbgg?style=for-the-badge&logo=googlechrome&logoColor=white"
+                class="mx-auto"
+              />
+            </a>
 
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://addons.mozilla.org/addon/cloud-skills-boost-helper?utm_source=webext&utm_medium=options_page"
+              class="inline-block"
+              aria-label="Firefox Addon Store"
+            >
+              <img
+                alt="Mozilla Add-on Version"
+                class="hidden"
+                id="firefox-addon-store"
+                src="https://img.shields.io/amo/v/cloud-skills-boost-helper?style=for-the-badge&logo=firefoxbrowser&logoColor=white"
+              />
+            </a>
+          </div>
+          <p class="text-sm">
+            This extension is not affiliated with Google Cloud Skills Boost. All
+            rights reserved.
+          </p>
+          <p class="text-sm mt-2">
+            <i class="fa-solid fa-copyright"></i> 2025 -
+            <a
+              href="http://eplus.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-indigo-600 hover:underline"
+            >
+              ePlus.DEV
+            </a>
+          </p>
+        </footer>
+      </div>
+      <script type="module" src="main.tsx"></script>
+    </body>
   </html>
-</div>
\ No newline at end of file
+</div>