From 664aa74673b610b652257c514fbfa8c3e9db4293 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Fri, 5 Apr 2024 08:56:51 -0300 Subject: [PATCH] Reimplement UI with 0x1eef/tail.css --- .prettierrc | 8 +++ package-lock.json | 6 +- package.json | 5 +- src/_locales/en/messages.json | 7 +-- .../BooleanLabel.css} | 0 src/css/components/ErrorRenderer.css | 19 ------ src/css/components/ResponseRenderer.css | 10 --- src/css/index.css | 11 +--- src/css/tail.min.css | 1 + src/fonts/.gitkeep | 0 src/html/browseraction.html | 10 +-- src/js/components/App.tsx | 11 +++- src/js/components/ErrorRenderer.tsx | 11 ++-- src/js/components/ResponseRenderer.tsx | 62 +++++++++---------- src/js/hooks/useWebService.ts | 6 +- src/js/index.tsx | 2 +- src/js/lib/response.ts | 2 +- webpack.config.js | 3 +- 18 files changed, 75 insertions(+), 99 deletions(-) create mode 100644 .prettierrc rename src/css/{label.css => components/BooleanLabel.css} (100%) delete mode 100644 src/css/components/ErrorRenderer.css delete mode 100644 src/css/components/ResponseRenderer.css create mode 100644 src/css/tail.min.css create mode 100644 src/fonts/.gitkeep diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e6a0cdc --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "printWidth": 100, + "arrowParens": "avoid" +} diff --git a/package-lock.json b/package-lock.json index c418d5c..1f2f6ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "myip.wtf", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "myip.wtf", - "version": "0.3.0", + "version": "0.3.1", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" @@ -24,7 +24,7 @@ "eslint-config-prettier": "^8.5.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "prettier": "^2.7.1", + "prettier": "^2.8.8", "ts-jest": "^29.1.1", "ts-loader": "^9.3.1", "ts-standard": "^12.0.1", diff --git a/package.json b/package.json index 4b27527..c8d66d6 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "eslint-config-prettier": "^8.5.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "prettier": "^2.7.1", + "prettier": "^2.8.8", "ts-jest": "^29.1.1", "ts-loader": "^9.3.1", "ts-standard": "^12.0.1", @@ -28,6 +28,7 @@ }, "scripts": { "build": "npm exec webpack", - "test": "npm exec jest -- test" + "test": "npm exec jest -- test", + "format": "npm exec prettier -- -w src/js" } } diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 3782abc..b653cb6 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -5,11 +5,8 @@ "isp": { "message": "ISP" }, - "city": { - "message": "City" - }, - "country": { - "message": "Country" + "location": { + "message": "Location" }, "tor_exit_node": { "message": "Tor exit node" diff --git a/src/css/label.css b/src/css/components/BooleanLabel.css similarity index 100% rename from src/css/label.css rename to src/css/components/BooleanLabel.css diff --git a/src/css/components/ErrorRenderer.css b/src/css/components/ErrorRenderer.css deleted file mode 100644 index eadeccb..0000000 --- a/src/css/components/ErrorRenderer.css +++ /dev/null @@ -1,19 +0,0 @@ -.error { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - place-content: center; - height: 100%; -} - -.error span:first-child { - color: var(--primary-red); - font-weight: bold; -} - -.error span { - display: flex; - flex-direction: column; - align-items: center; -} diff --git a/src/css/components/ResponseRenderer.css b/src/css/components/ResponseRenderer.css deleted file mode 100644 index 7e57e24..0000000 --- a/src/css/components/ResponseRenderer.css +++ /dev/null @@ -1,10 +0,0 @@ -body .response { - padding: 30px; -} - -body .response .row { - display: flex; - place-content: space-between; - font-size: var(--default-font-size); - margin: 0 0 10px 0; -} diff --git a/src/css/index.css b/src/css/index.css index 6450af4..6d73cc7 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1,7 +1,6 @@ :root { /* Defaults */ --default-font-size: 1.15em; - --default-font-family: "SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace; /* Colors */ --primary-red: #d73e48; @@ -13,10 +12,8 @@ } body { - font-family: var(--default-font-family); - width: 368px; - height: 212px; - margin: 0; + font-size: small; + width: 400px; } #root, .loader { @@ -37,11 +34,7 @@ a:active, a:focus, a:hover { footer { background: var(--secondary-white); color: var(--primary-red); - position: fixed; - bottom: 0; width: 100%; - padding: 10px; - text-align: center; } .loader { diff --git a/src/css/tail.min.css b/src/css/tail.min.css new file mode 100644 index 0000000..fdc62ff --- /dev/null +++ b/src/css/tail.min.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.h-0{height:0px}.h-px{height:1px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-36{height:9rem}.h-40{height:10rem}.h-44{height:11rem}.h-48{height:12rem}.h-52{height:13rem}.h-56{height:14rem}.h-60{height:15rem}.h-64{height:16rem}.h-72{height:18rem}.h-80{height:20rem}.h-96{height:24rem}.h-auto{height:auto}.h-1\/2{height:50%}.h-1\/3{height:33.333333%}.h-2\/3{height:66.666667%}.h-1\/4{height:25%}.h-2\/4{height:50%}.h-3\/4{height:75%}.h-1\/5{height:20%}.h-2\/5{height:40%}.h-3\/5{height:60%}.h-4\/5{height:80%}.h-1\/6{height:16.666667%}.h-2\/6{height:33.333333%}.h-3\/6{height:50%}.h-4\/6{height:66.666667%}.h-5\/6{height:83.333333%}.h-full{height:100%}.h-screen{height:100vh}.h-svh{height:100svh}.h-lvh{height:100lvh}.h-dvh{height:100dvh}.h-min{height:min-content}.h-max{height:max-content}.h-fit{height:fit-content}.max-h-0{max-height:0px}.max-h-px{max-height:1px}.max-h-0\.5{max-height:.125rem}.max-h-1{max-height:.25rem}.max-h-1\.5{max-height:.375rem}.max-h-2{max-height:.5rem}.max-h-2\.5{max-height:.625rem}.max-h-3{max-height:.75rem}.max-h-3\.5{max-height:.875rem}.max-h-4{max-height:1rem}.max-h-5{max-height:1.25rem}.max-h-6{max-height:1.5rem}.max-h-7{max-height:1.75rem}.max-h-8{max-height:2rem}.max-h-9{max-height:2.25rem}.max-h-10{max-height:2.5rem}.max-h-11{max-height:2.75rem}.max-h-12{max-height:3rem}.max-h-14{max-height:3.5rem}.max-h-16{max-height:4rem}.max-h-20{max-height:5rem}.max-h-24{max-height:6rem}.max-h-28{max-height:7rem}.max-h-32{max-height:8rem}.max-h-36{max-height:9rem}.max-h-40{max-height:10rem}.max-h-44{max-height:11rem}.max-h-48{max-height:12rem}.max-h-52{max-height:13rem}.max-h-56{max-height:14rem}.max-h-60{max-height:15rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.max-h-none{max-height:none}.max-h-full{max-height:100%}.max-h-screen{max-height:100vh}.max-h-svh{max-height:100svh}.max-h-lvh{max-height:100lvh}.max-h-dvh{max-height:100dvh}.max-h-min{max-height:min-content}.max-h-max{max-height:max-content}.max-h-fit{max-height:fit-content}.w-0{width:0px}.w-px{width:1px}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-32{width:8rem}.w-36{width:9rem}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-52{width:13rem}.w-56{width:14rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-80{width:20rem}.w-96{width:24rem}.w-auto{width:auto}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-2\/3{width:66.666667%}.w-1\/4{width:25%}.w-2\/4{width:50%}.w-3\/4{width:75%}.w-1\/5{width:20%}.w-2\/5{width:40%}.w-3\/5{width:60%}.w-4\/5{width:80%}.w-1\/6{width:16.666667%}.w-2\/6{width:33.333333%}.w-3\/6{width:50%}.w-4\/6{width:66.666667%}.w-5\/6{width:83.333333%}.w-1\/12{width:8.333333%}.w-2\/12{width:16.666667%}.w-3\/12{width:25%}.w-4\/12{width:33.333333%}.w-5\/12{width:41.666667%}.w-6\/12{width:50%}.w-7\/12{width:58.333333%}.w-8\/12{width:66.666667%}.w-9\/12{width:75%}.w-10\/12{width:83.333333%}.w-11\/12{width:91.666667%}.w-full{width:100%}.w-screen{width:100vw}.w-svw{width:100svw}.w-lvw{width:100lvw}.w-dvw{width:100dvw}.w-min{width:min-content}.w-max{width:max-content}.w-fit{width:fit-content}.min-w-0{min-width:0px}.min-w-1{min-width:.25rem}.min-w-2{min-width:.5rem}.min-w-3{min-width:.75rem}.min-w-4{min-width:1rem}.min-w-5{min-width:1.25rem}.min-w-6{min-width:1.5rem}.min-w-7{min-width:1.75rem}.min-w-8{min-width:2rem}.min-w-9{min-width:2.25rem}.min-w-10{min-width:2.5rem}.min-w-11{min-width:2.75rem}.min-w-12{min-width:3rem}.min-w-14{min-width:3.5rem}.min-w-16{min-width:4rem}.min-w-20{min-width:5rem}.min-w-24{min-width:6rem}.min-w-28{min-width:7rem}.min-w-32{min-width:8rem}.min-w-36{min-width:9rem}.min-w-40{min-width:10rem}.min-w-44{min-width:11rem}.min-w-48{min-width:12rem}.min-w-52{min-width:13rem}.min-w-56{min-width:14rem}.min-w-60{min-width:15rem}.min-w-64{min-width:16rem}.min-w-72{min-width:18rem}.min-w-80{min-width:20rem}.min-w-96{min-width:24rem}.min-w-px{min-width:1px}.min-w-full{min-width:100%}.min-w-min{min-width:min-content}.min-w-max{min-width:max-content}.min-w-fit{min-width:fit-content}.max-w-0{max-width:0px}.max-w-px{max-width:1px}.max-w-1{max-width:.25rem}.max-w-2{max-width:.5rem}.max-w-3{max-width:.75rem}.max-w-4{max-width:1rem}.max-w-5{max-width:1.25rem}.max-w-6{max-width:1.5rem}.max-w-7{max-width:1.75rem}.max-w-8{max-width:2rem}.max-w-9{max-width:2.25rem}.max-w-10{max-width:2.5rem}.max-w-11{max-width:2.75rem}.max-w-12{max-width:3rem}.max-w-14{max-width:3.5rem}.max-w-16{max-width:4rem}.max-w-20{max-width:5rem}.max-w-24{max-width:6rem}.max-w-28{max-width:7rem}.max-w-32{max-width:8rem}.max-w-36{max-width:9rem}.max-w-40{max-width:10rem}.max-w-44{max-width:11rem}.max-w-48{max-width:12rem}.max-w-52{max-width:13rem}.max-w-56{max-width:14rem}.max-w-60{max-width:15rem}.max-w-64{max-width:16rem}.max-w-72{max-width:18rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-min{max-width:min-content}.max-w-max{max-width:max-content}.max-w-fit{max-width:fit-content}.max-w-prose{max-width:65ch}.max-w-screen-sm{max-width:640px}.max-w-screen-md{max-width:768px}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.max-w-screen-2xl{max-width:1536px}.m-0{margin:0px}.mx-0{margin-left:0px}.my-0{margin-top:0px}.ms-0{margin-inline-start:0px}.me-0{margin-inline-end:0px}.mt-0{margin-top:0px}.mr-0{margin-right:0px}.mb-0{margin-bottom:0px}.ml-0{margin-left:0px}.m-px{margin:1px}.mx-px{margin-left:1px}.my-px{margin-top:1px}.ms-px{margin-inline-start:1px}.me-px{margin-inline-end:1px}.mt-px{margin-top:1px}.mr-px{margin-right:1px}.mb-px{margin-bottom:1px}.ml-px{margin-left:1px}.m-1{margin:.25rem}.mx-1{margin-left:.25rem}.my-1{margin-top:.25rem}.ms-1{margin-inline-start:.25rem}.me-1{margin-inline-end:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.m-2{margin:.5rem}.mx-2{margin-left:.5rem}.my-2{margin-top:.5rem}.ms-2{margin-inline-start:.5rem}.me-2{margin-inline-end:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.m-3{margin:.75rem}.mx-3{margin-left:.75rem}.my-3{margin-top:.75rem}.ms-3{margin-inline-start:.75rem}.me-3{margin-inline-end:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.m-4{margin:1rem}.mx-4{margin-left:1rem}.my-4{margin-top:1rem}.ms-4{margin-inline-start:1rem}.me-4{margin-inline-end:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.m-5{margin:1.25rem}.mx-5{margin-left:1.25rem}.my-5{margin-top:1.25rem}.ms-5{margin-inline-start:1.25rem}.me-5{margin-inline-end:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.m-6{margin:1.5rem}.mx-6{margin-left:1.5rem}.my-6{margin-top:1.5rem}.ms-6{margin-inline-start:1.5rem}.me-6{margin-inline-end:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.m-7{margin:1.75rem}.mx-7{margin-left:1.75rem}.my-7{margin-top:1.75rem}.ms-7{margin-inline-start:1.75rem}.me-7{margin-inline-end:1.75rem}.mt-7{margin-top:1.75rem}.mr-7{margin-right:1.75rem}.mb-7{margin-bottom:1.75rem}.ml-7{margin-left:1.75rem}.m-8{margin:2rem}.mx-8{margin-left:2rem}.my-8{margin-top:2rem}.ms-8{margin-inline-start:2rem}.me-8{margin-inline-end:2rem}.mt-8{margin-top:2rem}.mr-8{margin-right:2rem}.mb-8{margin-bottom:2rem}.ml-8{margin-left:2rem}.m-9{margin:2.25rem}.mx-9{margin-left:2.25rem}.my-9{margin-top:2.25rem}.ms-9{margin-inline-start:2.25rem}.me-9{margin-inline-end:2.25rem}.mt-9{margin-top:2.25rem}.mr-9{margin-right:2.25rem}.mb-9{margin-bottom:2.25rem}.ml-9{margin-left:2.25rem}.m-10{margin:2.5rem}.mx-10{margin-left:2.5rem}.my-10{margin-top:2.5rem}.ms-10{margin-inline-start:2.5rem}.me-10{margin-inline-end:2.5rem}.mt-10{margin-top:2.5rem}.mr-10{margin-right:2.5rem}.mb-10{margin-bottom:2.5rem}.ml-10{margin-left:2.5rem}.m-11{margin:2.75rem}.mx-11{margin-left:2.75rem}.my-11{margin-top:2.75rem}.ms-11{margin-inline-start:2.75rem}.me-11{margin-inline-end:2.75rem}.mt-11{margin-top:2.75rem}.mr-11{margin-right:2.75rem}.mb-11{margin-bottom:2.75rem}.ml-11{margin-left:2.75rem}.m-12{margin:3rem}.mx-12{margin-left:3rem}.my-12{margin-top:3rem}.ms-12{margin-inline-start:3rem}.me-12{margin-inline-end:3rem}.mt-12{margin-top:3rem}.mr-12{margin-right:3rem}.mb-12{margin-bottom:3rem}.ml-12{margin-left:3rem}.m-14{margin:3.5rem}.mx-14{margin-left:3.5rem}.my-14{margin-top:3.5rem}.ms-14{margin-inline-start:3.5rem}.me-14{margin-inline-end:3.5rem}.mt-14{margin-top:3.5rem}.mr-14{margin-right:3.5rem}.mb-14{margin-bottom:3.5rem}.ml-14{margin-left:3.5rem}.m-16{margin:4rem}.mx-16{margin-left:4rem}.my-16{margin-top:4rem}.ms-16{margin-inline-start:4rem}.me-16{margin-inline-end:4rem}.mt-16{margin-top:4rem}.mr-16{margin-right:4rem}.mb-16{margin-bottom:4rem}.ml-16{margin-left:4rem}.m-20{margin:5rem}.mx-20{margin-left:5rem}.my-20{margin-top:5rem}.ms-20{margin-inline-start:5rem}.me-20{margin-inline-end:5rem}.mt-20{margin-top:5rem}.mr-20{margin-right:5rem}.mb-20{margin-bottom:5rem}.ml-20{margin-left:5rem}.m-24{margin:6rem}.mx-24{margin-left:6rem}.my-24{margin-top:6rem}.ms-24{margin-inline-start:6rem}.me-24{margin-inline-end:6rem}.mt-24{margin-top:6rem}.mr-24{margin-right:6rem}.mb-24{margin-bottom:6rem}.ml-24{margin-left:6rem}.m-28{margin:7rem}.mx-28{margin-left:7rem}.my-28{margin-top:7rem}.ms-28{margin-inline-start:7rem}.me-28{margin-inline-end:7rem}.mt-28{margin-top:7rem}.mr-28{margin-right:7rem}.mb-28{margin-bottom:7rem}.ml-28{margin-left:7rem}.m-32{margin:8rem}.mx-32{margin-left:8rem}.my-32{margin-top:8rem}.ms-32{margin-inline-start:8rem}.me-32{margin-inline-end:8rem}.mt-32{margin-top:8rem}.mr-32{margin-right:8rem}.mb-32{margin-bottom:8rem}.ml-32{margin-left:8rem}.m-36{margin:9rem}.mx-36{margin-left:9rem}.my-36{margin-top:9rem}.ms-36{margin-inline-start:9rem}.me-36{margin-inline-end:9rem}.mt-36{margin-top:9rem}.mr-36{margin-right:9rem}.mb-36{margin-bottom:9rem}.ml-36{margin-left:9rem}.m-40{margin:10rem}.mx-40{margin-left:10rem}.my-40{margin-top:10rem}.ms-40{margin-inline-start:10rem}.me-40{margin-inline-end:10rem}.mt-40{margin-top:10rem}.mr-40{margin-right:10rem}.mb-40{margin-bottom:10rem}.ml-40{margin-left:10rem}.m-44{margin:11rem}.mx-44{margin-left:11rem}.my-44{margin-top:11rem}.ms-44{margin-inline-start:11rem}.me-44{margin-inline-end:11rem}.mt-44{margin-top:11rem}.mr-44{margin-right:11rem}.mb-44{margin-bottom:11rem}.ml-44{margin-left:11rem}.m-48{margin:12rem}.mx-48{margin-left:12rem}.my-48{margin-top:12rem}.ms-48{margin-inline-start:12rem}.me-48{margin-inline-end:12rem}.mt-48{margin-top:12rem}.mr-48{margin-right:12rem}.mb-48{margin-bottom:12rem}.ml-48{margin-left:12rem}.m-52{margin:13rem}.mx-52{margin-left:13rem}.my-52{margin-top:13rem}.ms-52{margin-inline-start:13rem}.me-52{margin-inline-end:13rem}.mt-52{margin-top:13rem}.mr-52{margin-right:13rem}.mb-52{margin-bottom:13rem}.ml-52{margin-left:13rem}.m-56{margin:14rem}.mx-56{margin-left:14rem}.my-56{margin-top:14rem}.ms-56{margin-inline-start:14rem}.me-56{margin-inline-end:14rem}.mt-56{margin-top:14rem}.mr-56{margin-right:14rem}.mb-56{margin-bottom:14rem}.ml-56{margin-left:14rem}.m-60{margin:15rem}.mx-60{margin-left:15rem}.my-60{margin-top:15rem}.ms-60{margin-inline-start:15rem}.me-60{margin-inline-end:15rem}.mt-60{margin-top:15rem}.mr-60{margin-right:15rem}.mb-60{margin-bottom:15rem}.ml-60{margin-left:15rem}.m-64{margin:16rem}.mx-64{margin-left:16rem}.my-64{margin-top:16rem}.ms-64{margin-inline-start:16rem}.me-64{margin-inline-end:16rem}.mt-64{margin-top:16rem}.mr-64{margin-right:16rem}.mb-64{margin-bottom:16rem}.ml-64{margin-left:16rem}.m-72{margin:18rem}.mx-72{margin-left:18rem}.my-72{margin-top:18rem}.ms-72{margin-inline-start:18rem}.me-72{margin-inline-end:18rem}.mt-72{margin-top:18rem}.mr-72{margin-right:18rem}.mb-72{margin-bottom:18rem}.ml-72{margin-left:18rem}.m-80{margin:20rem}.mx-80{margin-left:20rem}.my-80{margin-top:20rem}.ms-80{margin-inline-start:20rem}.me-80{margin-inline-end:20rem}.mt-80{margin-top:20rem}.mr-80{margin-right:20rem}.mb-80{margin-bottom:20rem}.ml-80{margin-left:20rem}.m-96{margin:24rem}.mx-96{margin-left:24rem}.my-96{margin-top:24rem}.ms-96{margin-inline-start:24rem}.me-96{margin-inline-end:24rem}.mt-96{margin-top:24rem}.mr-96{margin-right:24rem}.mb-96{margin-bottom:24rem}.ml-96{margin-left:24rem}.m-auto{margin:auto}.mx-auto{margin-left:auto}.my-auto{margin-top:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.p-0{padding:0px}.px-0{padding-left:0px}.py-0{padding-top:0px}.ps-0{padding-inline-start:0px}.pe-0{padding-inline-end:0px}.pt-0{padding-top:0px}.pr-0{padding-right:0px}.pb-0{padding-bottom:0px}.pl-0{padding-left:0px}.p-px{padding:1px}.px-px{padding-left:1px}.py-px{padding-top:1px}.ps-px{padding-inline-start:1px}.pe-px{padding-inline-end:1px}.pt-px{padding-top:1px}.pr-px{padding-right:1px}.pb-px{padding-bottom:1px}.pl-px{padding-left:1px}.p-1{padding:.25rem}.px-1{padding-left:.25rem}.py-1{padding-top:.25rem}.ps-1{padding-inline-start:.25rem}.pe-1{padding-inline-end:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.p-2{padding:.5rem}.px-2{padding-left:.5rem}.py-2{padding-top:.5rem}.ps-2{padding-inline-start:.5rem}.pe-2{padding-inline-end:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.p-3{padding:.75rem}.px-3{padding-left:.75rem}.py-3{padding-top:.75rem}.ps-3{padding-inline-start:.75rem}.pe-3{padding-inline-end:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.p-4{padding:1rem}.px-4{padding-left:1rem}.py-4{padding-top:1rem}.ps-4{padding-inline-start:1rem}.pe-4{padding-inline-end:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.p-5{padding:1.25rem}.px-5{padding-left:1.25rem}.py-5{padding-top:1.25rem}.ps-5{padding-inline-start:1.25rem}.pe-5{padding-inline-end:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.p-6{padding:1.5rem}.px-6{padding-left:1.5rem}.py-6{padding-top:1.5rem}.ps-6{padding-inline-start:1.5rem}.pe-6{padding-inline-end:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.p-7{padding:1.75rem}.px-7{padding-left:1.75rem}.py-7{padding-top:1.75rem}.ps-7{padding-inline-start:1.75rem}.pe-7{padding-inline-end:1.75rem}.pt-7{padding-top:1.75rem}.pr-7{padding-right:1.75rem}.pb-7{padding-bottom:1.75rem}.pl-7{padding-left:1.75rem}.p-8{padding:2rem}.px-8{padding-left:2rem}.py-8{padding-top:2rem}.ps-8{padding-inline-start:2rem}.pe-8{padding-inline-end:2rem}.pt-8{padding-top:2rem}.pr-8{padding-right:2rem}.pb-8{padding-bottom:2rem}.pl-8{padding-left:2rem}.p-9{padding:2.25rem}.px-9{padding-left:2.25rem}.py-9{padding-top:2.25rem}.ps-9{padding-inline-start:2.25rem}.pe-9{padding-inline-end:2.25rem}.pt-9{padding-top:2.25rem}.pr-9{padding-right:2.25rem}.pb-9{padding-bottom:2.25rem}.pl-9{padding-left:2.25rem}.p-10{padding:2.5rem}.px-10{padding-left:2.5rem}.py-10{padding-top:2.5rem}.ps-10{padding-inline-start:2.5rem}.pe-10{padding-inline-end:2.5rem}.pt-10{padding-top:2.5rem}.pr-10{padding-right:2.5rem}.pb-10{padding-bottom:2.5rem}.pl-10{padding-left:2.5rem}.p-11{padding:2.75rem}.px-11{padding-left:2.75rem}.py-11{padding-top:2.75rem}.ps-11{padding-inline-start:2.75rem}.pe-11{padding-inline-end:2.75rem}.pt-11{padding-top:2.75rem}.pr-11{padding-right:2.75rem}.pb-11{padding-bottom:2.75rem}.pl-11{padding-left:2.75rem}.p-12{padding:3rem}.px-12{padding-left:3rem}.py-12{padding-top:3rem}.ps-12{padding-inline-start:3rem}.pe-12{padding-inline-end:3rem}.pt-12{padding-top:3rem}.pr-12{padding-right:3rem}.pb-12{padding-bottom:3rem}.pl-12{padding-left:3rem}.p-14{padding:3.5rem}.px-14{padding-left:3.5rem}.py-14{padding-top:3.5rem}.ps-14{padding-inline-start:3.5rem}.pe-14{padding-inline-end:3.5rem}.pt-14{padding-top:3.5rem}.pr-14{padding-right:3.5rem}.pb-14{padding-bottom:3.5rem}.pl-14{padding-left:3.5rem}.p-16{padding:4rem}.px-16{padding-left:4rem}.py-16{padding-top:4rem}.ps-16{padding-inline-start:4rem}.pe-16{padding-inline-end:4rem}.pt-16{padding-top:4rem}.pr-16{padding-right:4rem}.pb-16{padding-bottom:4rem}.pl-16{padding-left:4rem}.p-20{padding:5rem}.px-20{padding-left:5rem}.py-20{padding-top:5rem}.ps-20{padding-inline-start:5rem}.pe-20{padding-inline-end:5rem}.pt-20{padding-top:5rem}.pr-20{padding-right:5rem}.pb-20{padding-bottom:5rem}.pl-20{padding-left:5rem}.p-24{padding:6rem}.px-24{padding-left:6rem}.py-24{padding-top:6rem}.ps-24{padding-inline-start:6rem}.pe-24{padding-inline-end:6rem}.pt-24{padding-top:6rem}.pr-24{padding-right:6rem}.pb-24{padding-bottom:6rem}.pl-24{padding-left:6rem}.p-28{padding:7rem}.px-28{padding-left:7rem}.py-28{padding-top:7rem}.ps-28{padding-inline-start:7rem}.pe-28{padding-inline-end:7rem}.pt-28{padding-top:7rem}.pr-28{padding-right:7rem}.pb-28{padding-bottom:7rem}.pl-28{padding-left:7rem}.p-32{padding:8rem}.px-32{padding-left:8rem}.py-32{padding-top:8rem}.ps-32{padding-inline-start:8rem}.pe-32{padding-inline-end:8rem}.pt-32{padding-top:8rem}.pr-32{padding-right:8rem}.pb-32{padding-bottom:8rem}.pl-32{padding-left:8rem}.p-36{padding:9rem}.px-36{padding-left:9rem}.py-36{padding-top:9rem}.ps-36{padding-inline-start:9rem}.pe-36{padding-inline-end:9rem}.pt-36{padding-top:9rem}.pr-36{padding-right:9rem}.pb-36{padding-bottom:9rem}.pl-36{padding-left:9rem}.p-40{padding:10rem}.px-40{padding-left:10rem}.py-40{padding-top:10rem}.ps-40{padding-inline-start:10rem}.pe-40{padding-inline-end:10rem}.pt-40{padding-top:10rem}.pr-40{padding-right:10rem}.pb-40{padding-bottom:10rem}.pl-40{padding-left:10rem}.p-44{padding:11rem}.px-44{padding-left:11rem}.py-44{padding-top:11rem}.ps-44{padding-inline-start:11rem}.pe-44{padding-inline-end:11rem}.pt-44{padding-top:11rem}.pr-44{padding-right:11rem}.pb-44{padding-bottom:11rem}.pl-44{padding-left:11rem}.p-48{padding:12rem}.px-48{padding-left:12rem}.py-48{padding-top:12rem}.ps-48{padding-inline-start:12rem}.pe-48{padding-inline-end:12rem}.pt-48{padding-top:12rem}.pr-48{padding-right:12rem}.pb-48{padding-bottom:12rem}.pl-48{padding-left:12rem}.p-52{padding:13rem}.px-52{padding-left:13rem}.py-52{padding-top:13rem}.ps-52{padding-inline-start:13rem}.pe-52{padding-inline-end:13rem}.pt-52{padding-top:13rem}.pr-52{padding-right:13rem}.pb-52{padding-bottom:13rem}.pl-52{padding-left:13rem}.p-56{padding:14rem}.px-56{padding-left:14rem}.py-56{padding-top:14rem}.ps-56{padding-inline-start:14rem}.pe-56{padding-inline-end:14rem}.pt-56{padding-top:14rem}.pr-56{padding-right:14rem}.pb-56{padding-bottom:14rem}.pl-56{padding-left:14rem}.p-60{padding:15rem}.px-60{padding-left:15rem}.py-60{padding-top:15rem}.ps-60{padding-inline-start:15rem}.pe-60{padding-inline-end:15rem}.pt-60{padding-top:15rem}.pr-60{padding-right:15rem}.pb-60{padding-bottom:15rem}.pl-60{padding-left:15rem}.p-64{padding:16rem}.px-64{padding-left:16rem}.py-64{padding-top:16rem}.ps-64{padding-inline-start:16rem}.pe-64{padding-inline-end:16rem}.pt-64{padding-top:16rem}.pr-64{padding-right:16rem}.pb-64{padding-bottom:16rem}.pl-64{padding-left:16rem}.p-72{padding:18rem}.px-72{padding-left:18rem}.py-72{padding-top:18rem}.ps-72{padding-inline-start:18rem}.pe-72{padding-inline-end:18rem}.pt-72{padding-top:18rem}.pr-72{padding-right:18rem}.pb-72{padding-bottom:18rem}.pl-72{padding-left:18rem}.p-80{padding:20rem}.px-80{padding-left:20rem}.py-80{padding-top:20rem}.ps-80{padding-inline-start:20rem}.pe-80{padding-inline-end:20rem}.pt-80{padding-top:20rem}.pr-80{padding-right:20rem}.pb-80{padding-bottom:20rem}.pl-80{padding-left:20rem}.p-96{padding:24rem}.px-96{padding-left:24rem}.py-96{padding-top:24rem}.ps-96{padding-inline-start:24rem}.pe-96{padding-inline-end:24rem}.pt-96{padding-top:24rem}.pr-96{padding-right:24rem}.pb-96{padding-bottom:24rem}.pl-96{padding-left:24rem}.cursor-auto{cursor:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.cursor-text{cursor:text}.cursor-move{cursor:move}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-none{cursor:none}.cursor-context-menu{cursor:context-menu}.cursor-progress{cursor:progress}.cursor-cell{cursor:cell}.cursor-crosshair{cursor:crosshair}.cursor-vertical-text{cursor:vertical-text}.cursor-alias{cursor:alias}.cursor-copy{cursor:copy}.cursor-no-drop{cursor:no-drop}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-all-scroll{cursor:all-scroll}.cursor-col-resize{cursor:col-resize}.cursor-row-resize{cursor:row-resize}.cursor-n-resize{cursor:n-resize}.cursor-e-resize{cursor:e-resize}.cursor-s-resize{cursor:s-resize}.cursor-w-resize{cursor:w-resize}.cursor-ne-resize{cursor:ne-resize}.cursor-nw-resize{cursor:nw-resize}.cursor-se-resize{cursor:se-resize}.cursor-sw-resize{cursor:sw-resize}.cursor-ew-resize{cursor:ew-resize}.cursor-ns-resize{cursor:ns-resize}.cursor-nesw-resize{cursor:nesw-resize}.cursor-nwse-resize{cursor:nwse-resize}.cursor-zoom-in{cursor:zoom-in}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.flow-root{display:flow-root}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-nowrap{flex-wrap:nowrap}.basis-0{flex-basis:0px}.basis-1{flex-basis:.25rem}.basis-2{flex-basis:.5rem}.basis-3{flex-basis:.75rem}.basis-4{flex-basis:1rem}.basis-5{flex-basis:1.25rem}.basis-6{flex-basis:1.5rem}.basis-7{flex-basis:1.75rem}.basis-8{flex-basis:2rem}.basis-9{flex-basis:2.25rem}.basis-10{flex-basis:2.5rem}.basis-11{flex-basis:2.75rem}.basis-12{flex-basis:3rem}.basis-14{flex-basis:3.5rem}.basis-16{flex-basis:4rem}.basis-20{flex-basis:5rem}.basis-24{flex-basis:6rem}.basis-28{flex-basis:7rem}.basis-32{flex-basis:8rem}.basis-36{flex-basis:9rem}.basis-40{flex-basis:10rem}.basis-44{flex-basis:11rem}.basis-48{flex-basis:12rem}.basis-52{flex-basis:13rem}.basis-56{flex-basis:14rem}.basis-60{flex-basis:15rem}.basis-64{flex-basis:16rem}.basis-72{flex-basis:18rem}.basis-80{flex-basis:20rem}.basis-96{flex-basis:24rem}.basis-auto{flex-basis:auto}.basis-px{flex-basis:1px}.basis-0\.5{flex-basis:.125rem}.basis-1\.5{flex-basis:.375rem}.basis-2\.5{flex-basis:.625rem}.basis-3\.5{flex-basis:.875rem}.basis-1\/2{flex-basis:50%}.basis-1\/3{flex-basis:33.333333%}.basis-2\/3{flex-basis:66.666667%}.basis-1\/4{flex-basis:25%}.basis-2\/4{flex-basis:50%}.basis-3\/4{flex-basis:75%}.basis-1\/5{flex-basis:20%}.basis-2\/5{flex-basis:40%}.basis-3\/5{flex-basis:60%}.basis-4\/5{flex-basis:80%}.basis-1\/6{flex-basis:16.666667%}.basis-2\/6{flex-basis:33.333333%}.basis-3\/6{flex-basis:50%}.basis-4\/6{flex-basis:66.666667%}.basis-5\/6{flex-basis:83.333333%}.basis-1\/12{flex-basis:8.333333%}.basis-2\/12{flex-basis:16.666667%}.basis-3\/12{flex-basis:25%}.basis-4\/12{flex-basis:33.333333%}.basis-5\/12{flex-basis:41.666667%}.basis-6\/12{flex-basis:50%}.basis-7\/12{flex-basis:58.333333%}.basis-8\/12{flex-basis:66.666667%}.basis-9\/12{flex-basis:75%}.basis-10\/12{flex-basis:83.333333%}.basis-11\/12{flex-basis:91.666667%}.basis-full{flex-basis:100%}.grow{flex-grow:1}.grow-0{flex-grow:0}.content-normal{align-content:normal}.content-center{align-content:center}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-evenly{align-content:space-evenly}.content-baseline{align-content:baseline}.content-stretch{align-content:stretch}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-normal{justify-content:normal}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.justify-stretch{justify-content:stretch}.place-content-center{place-content:center}.place-content-start{place-content:start}.place-content-end{place-content:end}.place-content-between{place-content:space-between}.place-content-around{place-content:space-around}.place-content-evenly{place-content:space-evenly}.place-content-baseline{place-content:baseline}.place-content-stretch{place-content:stretch}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.order-first{order:-9999}.order-last{order:9999}.order-none{order:0}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}.font-serif{font-family:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-8xl{font-size:6rem;line-height:1}.text-9xl{font-size:8rem;line-height:1}.italic{font-style:italic}.not-italic{font-style:normal}.font-thin{font-weight:100}.font-extralight{font-weight:200}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.normal-nums{font-variant-numeric:normal}.ordinal{font-variant-numeric:ordinal}.slashed-zero{font-variant-numeric:slashed-zero}.lining-nums{font-variant-numeric:lining-nums}.oldstyle-nums{font-variant-numeric:oldstyle-nums}.proportional-nums{font-variant-numeric:proportional-nums}.tabular-nums{font-variant-numeric:tabular-nums}.diagonal-fractions{font-variant-numeric:diagonal-fractions}.stacked-fractions{font-variant-numeric:stacked-fractions}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-start{text-align:start}.text-end{text-align:end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-clip{overflow-x:clip}.overflow-y-clip{overflow-y:clip}.overflow-x-visible{overflow-x:visible}.overflow-y-visible{overflow-y:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-scroll{overflow-y:scroll}.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.shadow-inner{box-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05)}.shadow-none{box-shadow:0 0 rgba(0,0,0,0)}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.rounded-none{border-radius:0px}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-s-none{border-start-start-radius:0px;border-end-start-radius:0px}.rounded-s-sm{border-start-start-radius:.125rem;border-end-start-radius:.125rem}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-s-md{border-start-start-radius:.375rem;border-end-start-radius:.375rem}.rounded-s-lg{border-start-start-radius:.5rem;border-end-start-radius:.5rem}.rounded-s-xl{border-start-start-radius:.75rem;border-end-start-radius:.75rem}.rounded-s-2xl{border-start-start-radius:1rem;border-end-start-radius:1rem}.rounded-s-3xl{border-start-start-radius:1.5rem;border-end-start-radius:1.5rem}.rounded-s-full{border-start-start-radius:9999px;border-end-start-radius:9999px}.rounded-e-none{border-start-end-radius:0px;border-end-end-radius:0px}.rounded-e-sm{border-start-end-radius:.125rem;border-end-end-radius:.125rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-e-md{border-start-end-radius:.375rem;border-end-end-radius:.375rem}.rounded-e-lg{border-start-end-radius:.5rem;border-end-end-radius:.5rem}.rounded-e-xl{border-start-end-radius:.75rem;border-end-end-radius:.75rem}.rounded-e-2xl{border-start-end-radius:1rem;border-end-end-radius:1rem}.rounded-e-3xl{border-start-end-radius:1.5rem;border-end-end-radius:1.5rem}.rounded-e-full{border-start-end-radius:9999px;border-end-end-radius:9999px}.rounded-t-none{border-top-left-radius:0px;border-top-right-radius:0px}.rounded-t-sm{border-top-left-radius:.125rem;border-top-right-radius:.125rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-t-xl{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.rounded-t-full{border-top-left-radius:9999px;border-top-right-radius:9999px}.rounded-r-none{border-top-right-radius:0px;border-bottom-right-radius:0px}.rounded-r-sm{border-top-right-radius:.125rem;border-bottom-right-radius:.125rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.rounded-r-3xl{border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-b-none{border-bottom-right-radius:0px;border-bottom-left-radius:0px}.rounded-b-sm{border-bottom-right-radius:.125rem;border-bottom-left-radius:.125rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-b-2xl{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.rounded-b-3xl{border-bottom-right-radius:1.5rem;border-bottom-left-radius:1.5rem}.rounded-b-full{border-bottom-right-radius:9999px;border-bottom-left-radius:9999px}.rounded-l-none{border-top-left-radius:0px;border-bottom-left-radius:0px}.rounded-l-sm{border-top-left-radius:.125rem;border-bottom-left-radius:.125rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-l-xl{border-top-left-radius:.75rem;border-bottom-left-radius:.75rem}.rounded-l-2xl{border-top-left-radius:1rem;border-bottom-left-radius:1rem}.rounded-l-3xl{border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-ss-none{border-start-start-radius:0px}.rounded-ss-sm{border-start-start-radius:.125rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-ss-md{border-start-start-radius:.375rem}.rounded-ss-lg{border-start-start-radius:.5rem}.rounded-ss-xl{border-start-start-radius:.75rem}.rounded-ss-2xl{border-start-start-radius:1rem}.rounded-ss-3xl{border-start-start-radius:1.5rem}.rounded-ss-full{border-start-start-radius:9999px}.rounded-se-none{border-start-end-radius:0px}.rounded-se-sm{border-start-end-radius:.125rem}.rounded-se{border-start-end-radius:.25rem}.rounded-se-md{border-start-end-radius:.375rem}.rounded-se-lg{border-start-end-radius:.5rem}.rounded-se-xl{border-start-end-radius:.75rem}.rounded-se-2xl{border-start-end-radius:1rem}.rounded-se-3xl{border-start-end-radius:1.5rem}.rounded-se-full{border-start-end-radius:9999px}.rounded-ee-none{border-end-end-radius:0px}.rounded-ee-sm{border-end-end-radius:.125rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-ee-md{border-end-end-radius:.375rem}.rounded-ee-lg{border-end-end-radius:.5rem}.rounded-ee-xl{border-end-end-radius:.75rem}.rounded-ee-2xl{border-end-end-radius:1rem}.rounded-ee-3xl{border-end-end-radius:1.5rem}.rounded-ee-full{border-end-end-radius:9999px}.rounded-es-none{border-end-start-radius:0px}.rounded-es-sm{border-end-start-radius:.125rem}.rounded-es{border-end-start-radius:.25rem}.rounded-es-md{border-end-start-radius:.375rem}.rounded-es-lg{border-end-start-radius:.5rem}.rounded-es-xl{border-end-start-radius:.75rem}.rounded-es-2xl{border-end-start-radius:1rem}.rounded-es-3xl{border-end-start-radius:1.5rem}.rounded-es-full{border-end-start-radius:9999px}.rounded-tl-none{border-top-left-radius:0px}.rounded-tl-sm{border-top-left-radius:.125rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-tl-md{border-top-left-radius:.375rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-tl-xl{border-top-left-radius:.75rem}.rounded-tl-2xl{border-top-left-radius:1rem}.rounded-tl-3xl{border-top-left-radius:1.5rem}.rounded-tl-full{border-top-left-radius:9999px}.rounded-tr-none{border-top-right-radius:0px}.rounded-tr-sm{border-top-right-radius:.125rem}.rounded-tr{border-top-right-radius:.25rem}.rounded-tr-md{border-top-right-radius:.375rem}.rounded-tr-lg{border-top-right-radius:.5rem}.rounded-tr-xl{border-top-right-radius:.75rem}.rounded-tr-2xl{border-top-right-radius:1rem}.rounded-tr-3xl{border-top-right-radius:1.5rem}.rounded-tr-full{border-top-right-radius:9999px}.rounded-br-none{border-bottom-right-radius:0px}.rounded-br-sm{border-bottom-right-radius:.125rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-br-md{border-bottom-right-radius:.375rem}.rounded-br-lg{border-bottom-right-radius:.5rem}.rounded-br-xl{border-bottom-right-radius:.75rem}.rounded-br-2xl{border-bottom-right-radius:1rem}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.rounded-br-full{border-bottom-right-radius:9999px}.rounded-bl-none{border-bottom-left-radius:0px}.rounded-bl-sm{border-bottom-left-radius:.125rem}.rounded-bl{border-bottom-left-radius:.25rem}.rounded-bl-md{border-bottom-left-radius:.375rem}.rounded-bl-lg{border-bottom-left-radius:.5rem}.rounded-bl-xl{border-bottom-left-radius:.75rem}.rounded-bl-2xl{border-bottom-left-radius:1rem}.rounded-bl-3xl{border-bottom-left-radius:1.5rem}.rounded-bl-full{border-bottom-left-radius:9999px}.outline-none{outline:2px solid rgba(0,0,0,0);outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-dotted{outline-style:dotted}.outline-double{outline-style:double} diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/html/browseraction.html b/src/html/browseraction.html index 64d08b4..0983b62 100644 --- a/src/html/browseraction.html +++ b/src/html/browseraction.html @@ -1,16 +1,12 @@ + - - - + -
- +
diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx index 2b6fe83..e90e15a 100644 --- a/src/js/components/App.tsx +++ b/src/js/components/App.tsx @@ -7,10 +7,15 @@ export function App() { const [response, error] = useWebService(); const t = chrome.i18n.getMessage; if (response) { - return (); + return ; } else if (error) { - return (); + return ; } else { - return (
{t("loading")}
); + return ( +
+
+
{t("loading")}
+
+ ); } } diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx index 001061d..af9116d 100644 --- a/src/js/components/ErrorRenderer.tsx +++ b/src/js/components/ErrorRenderer.tsx @@ -1,11 +1,14 @@ import React from "react"; -export function ErrorRenderer({ error }: {error: Error}) { +export function ErrorRenderer({ error }: { error: Error }) { const t = chrome.i18n.getMessage; return ( -
- {t("error")}: -  {error.message} +
+
+
+
+ {t("error")}: {error.message} +
); } diff --git a/src/js/components/ResponseRenderer.tsx b/src/js/components/ResponseRenderer.tsx index 2b1db66..8e5a910 100644 --- a/src/js/components/ResponseRenderer.tsx +++ b/src/js/components/ResponseRenderer.tsx @@ -1,39 +1,39 @@ -import React from "react"; +import React, { ReactNode } from "react"; import { TResponse } from "~/lib/response"; +type TFunction = typeof chrome.i18n.getMessage; -export function ResponseRenderer({ response }: {response: TResponse}) { +export function ResponseRenderer({ response }: { response: TResponse }) { const t = chrome.i18n.getMessage; - - function YesOrNoLabel({ yes }: {yes: boolean}) { - if (yes) { - return (); - } else { - return (); - } - } - return ( -
-
-
{t("ip_address")}
-
{response.IPAddress}
-
-
-
{t("isp")}
-
{response.ISP}
-
-
-
{t("city")}
-
{response.City}
-
-
-
{t("country")}
-
{response.Country}
-
-
-
{t("tor_exit_node")}
-
+
+
+ + + + } />
+ +
+ ); +} + +function BooleanLabel({ on, t }: { on: boolean; t: TFunction }) { + if (on) { + return ; + } else { + return ; + } +} + +function Row({ name, value }: { name: string; value: ReactNode }) { + return ( +
+
{name}
+
{value}
); } diff --git a/src/js/hooks/useWebService.ts b/src/js/hooks/useWebService.ts index 516ae89..2c8bce8 100644 --- a/src/js/hooks/useWebService.ts +++ b/src/js/hooks/useWebService.ts @@ -7,7 +7,7 @@ export function useWebService(): [Maybe, Maybe] { const endpoint = "https://clean.myip.wtf/json"; const [response, setResponse] = useState>(null); const [error, setError] = useState>(null); - const options: RequestInit = {cache: "no-store"}; + const options: RequestInit = { cache: "no-store" }; function receive(res: Response) { if (res.status === 200) { @@ -21,8 +21,8 @@ export function useWebService(): [Maybe, Maybe] { useEffect(() => { fetch(endpoint, options) .then(receive) - .then((json) => setResponse(Response(json))) - .catch((err) => setError(err)); + .then(json => setResponse(Response(json))) + .catch(err => setError(err)); }, []); return [response, error]; diff --git a/src/js/index.tsx b/src/js/index.tsx index 0d74615..b6ef900 100644 --- a/src/js/index.tsx +++ b/src/js/index.tsx @@ -4,5 +4,5 @@ import { App } from "~/components/App"; document.addEventListener("DOMContentLoaded", () => { const el: HTMLElement = document.getElementById("root")!; - ReactDOM.createRoot(el).render(); + ReactDOM.createRoot(el).render(); }); diff --git a/src/js/lib/response.ts b/src/js/lib/response.ts index ee2a19c..30cfcc9 100644 --- a/src/js/lib/response.ts +++ b/src/js/lib/response.ts @@ -20,7 +20,7 @@ export function Response(res: TServerResponse): TResponse { self.IPAddress = res.YourIPAddress; self.ISP = res.YourISP; self.City = res.YourCity; - self.Country = res.YourCountry; + self.Country = res.YourCountry; self.isTorExitNode = res.YourTorExit; return self; diff --git a/webpack.config.js b/webpack.config.js index 3849a48..7e350d8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,7 +35,8 @@ module.exports = { { from: "src/css/", to: "css" }, { from: "src/manifest.json", to: "manifest.json" }, { from: "src/images", to: "images/" }, - { from: "src/_locales", to: "_locales/" } + { from: "src/_locales", to: "_locales/" }, + { from: "src/fonts", to: "fonts/" } ], }), new CleanWebpackPlugin(),