From ea36c48f40c217c6f74a4b08a1beb804f01b3a1f Mon Sep 17 00:00:00 2001
From: Guanran Wang <guanran928@outlook.com>
Date: Sat, 19 Oct 2024 12:08:17 +0800
Subject: [PATCH] feat: use tailwind css

---
 assets/index.html           | 57 ++++++++++++++++-----------
 assets/static/generated.css |  3 ++
 assets/static/style.css     | 77 +++----------------------------------
 assets/tailwind.config.js   |  9 +++++
 flake.nix                   |  1 +
 5 files changed, 53 insertions(+), 94 deletions(-)
 create mode 100644 assets/static/generated.css
 create mode 100644 assets/tailwind.config.js
diff --git a/assets/index.html b/assets/index.html
index 9efba86..62c669f 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -5,50 +5,61 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Ny4 IP Checker" />
     <title>What is my IP?</title>
-    <link href="static/style.css" rel="stylesheet" />
+    <link href="static/generated.css" rel="stylesheet" />
     <script src="static/script.js" defer></script>
   </head>
-  <body>
-    <div class="center">
-      <p>Ny4 IP checker!</p>
-      <!-- FIXME: this is not responsive -->
-      <table>
+  <body
+    class="text-violet-950 bg-violet-100 dark:text-slate-100 dark:bg-slate-900 font-mono font-medium text-sm md:text-base"
+  >
+    <div
+      class="flex flex-col min-h-screen justify-center items-center overflow-x-auto"
+    >
+      <p class="py-2">Ny4 IP checker!</p>
+      <table class="table-auto border-collapse">
         <thead>
           <tr>
-            <th>source</th>
-            <th>ip</th>
-            <th>location</th>
+            <th class="table-cell">source</th>
+            <th class="table-cell">ip</th>
+            <th class="table-cell">location</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <th>local</th>
-            <th>{{.sourceIP}}</th>
-            <th>N/A</th>
+            <td class="table-cell">local</td>
+            <td class="table-cell">{{.sourceIP}}</td>
+            <td class="table-cell">N/A</td>
           </tr>
           <tr>
-            <th>ip.sb</th>
-            <th id="check-ipsb-ip">Loading...</th>
-            <th id="check-ipsb-location">Loading...</th>
+            <td class="table-cell">ip.sb</td>
+            <td class="table-cell" id="check-ipsb-ip">Loading...</td>
+            <td class="table-cell" id="check-ipsb-location">Loading...</td>
           </tr>
           <tr>
-            <th>ipapi.is</th>
-            <th id="check-ipapiis-ip">Loading...</th>
-            <th id="check-ipapiis-location">Loading...</th>
+            <td class="table-cell">ipapi.is</td>
+            <td class="table-cell" id="check-ipapiis-ip">Loading...</td>
+            <td class="table-cell" id="check-ipapiis-location">Loading...</td>
           </tr>
           <tr>
-            <th>ip-api.com</th>
-            <th id="check-speedtestcn-ip">Loading...</th>
-            <th id="check-speedtestcn-location">Loading...</th>
+            <td class="table-cell">ip-api.com</td>
+            <td class="table-cell" id="check-speedtestcn-ip">Loading...</td>
+            <td class="table-cell" id="check-speedtestcn-location">
+              Loading...
+            </td>
           </tr>
         </tbody>
       </table>
     </div>
 
-    <footer>
+    <footer
+      class="absolute inset-x-0 bottom-0 py-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm"
+    >
       (c) 2024 Guanran Wang, source code licenced under MIT.
 
-      <a href="https://git.ny4.dev/nyancat/ip-checker">Git Repo</a>
+      <a
+        class="text-blue-500 hover:text-blue-600 visited:text-violet-500"
+        href="https://git.ny4.dev/nyancat/ip-checker"
+        >Git Repo</a
+      >
     </footer>
   </body>
 </html>
diff --git a/assets/static/generated.css b/assets/static/generated.css
new file mode 100644
index 0000000..61f1973
--- /dev/null
+++ b/assets/static/generated.css
@@ -0,0 +1,3 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+
+/*! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}.table-cell{border-width:2px;--tw-border-opacity:1;border-color:rgb(196 181 253/var(--tw-border-opacity));padding:.5rem 1.25rem}@media (prefers-color-scheme:dark){.table-cell{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity))}}.absolute{position:absolute}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.flex{display:flex}.table{display:table}.table-cell{display:table-cell}.min-h-screen{min-height:100vh}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-x-auto{overflow-x:auto}.bg-violet-100{--tw-bg-opacity:1;background-color:rgb(237 233 254/var(--tw-bg-opacity))}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}.text-violet-950{--tw-text-opacity:1;color:rgb(46 16 101/var(--tw-text-opacity))}.visited\:text-violet-500:visited{color:#8b5cf6}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}@media (min-width:768px){.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (prefers-color-scheme:dark){.dark\:bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.dark\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.dark\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}}
\ No newline at end of file
diff --git a/assets/static/style.css b/assets/static/style.css
index 6bdbe1b..b9b762d 100644
--- a/assets/static/style.css
+++ b/assets/static/style.css
@@ -1,76 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");
 
-/* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
-:root {
-  --bg: #ede9fe;
-  --table: #c4b5fd;
-  --text-footer: #475569;
-  --text: #2e1065;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0f172a;
-    --table: #334155;
-    --text-footer: #94a3b8;
-    --text: #f1f5f9;
-  }
-
-  a:link {
-    color: #3b82f6;
-  }
-
-  a:visited {
-    color: #8b5cf6;
+@layer components {
+  .table-cell {
+    @apply py-2 px-5 border-2 border-violet-300 dark:border-slate-700;
   }
 }
-
-@media (max-width: 600px) {
-  body {
-    font-size: 14px !important;
-  }
-  th {
-    padding: 2px !important;
-  }
-  footer {
-    font-size: 12px !important;
-  }
-}
-
-body {
-  font-family: "Fira Code", monospace;
-  font-optical-sizing: auto;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-
-  background-color: var(--bg);
-  color: var(--text);
-}
-
-table {
-  border-collapse: collapse;
-}
-
-th {
-  border: 2px var(--table) solid;
-  padding: 5px 20px;
-}
-
-footer {
-  color: var(--text-footer);
-  font-size: 14px;
-
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, -10px);
-}
-
-.center {
-  margin: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
new file mode 100644
index 0000000..edd33e2
--- /dev/null
+++ b/assets/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/flake.nix b/flake.nix
index 1b37175..c7b13de 100644
--- a/flake.nix
+++ b/flake.nix
@@ -38,6 +38,7 @@
           nativeBuildInputs = with pkgs; [
             go
             nodePackages.prettier
+            nodePackages.tailwindcss
           ];
         };
       }

source	ip	location	source	ip	location
local	{{.sourceIP}}	N/A	local	{{.sourceIP}}	N/A
ip.sb	Loading...	Loading...	ip.sb	Loading...	Loading...
ipapi.is	Loading...	Loading...	ipapi.is	Loading...	Loading...
ip-api.com	Loading...	Loading...	ip-api.com	Loading...	+ Loading... +