nyancat/ip-checker
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): use grid instead of table for responsive design

Browse source
This commit is contained in:
Guanran Wang 2024-10-26 19:49:33 +08:00
parent 659ce3064b
commit e753e3fba8
Signed by: nyancat
GPG key ID: 91F97D9ED12639CF
2 changed files with 32 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
ui/index.html
View file

@ -28,47 +28,42 @@
<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"
>
<div class="flex flex-col min-h-screen justify-center items-center">
<p class="py-2">Ny4 IP checker!</p>
<table class="table-auto border-collapse">
<thead>
<tr>
<th class="table-cell">source</th>
<th class="table-cell">ip</th>
<th class="table-cell">location</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell">ip.ny4.dev</td>
<td class="table-cell" id="check-ny4-ip">Loading...</td>
<td class="table-cell" id="check-ny4-location">Loading...</td>
</tr>
<tr>
<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>
<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>
<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">
<div>
<div
class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
>
<div>ip.ny4.dev</div>
<div id="check-ny4-ip">Loading...</div>
<div id="check-ny4-location" class="col-span-2">Loading...</div>
</div>
<div
class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
>
<div>ip.sb</div>
<div id="check-ipsb-ip">Loading...</div>
<div id="check-ipsb-location" class="col-span-2">Loading...</div>
</div>
<div
class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
>
<div>ipapi.is</div>
<div id="check-ipapiis-ip">Loading...</div>
<div id="check-ipapiis-location" class="col-span-2">Loading...</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
<div>ip-api.com</div>
<div id="check-speedtestcn-ip">Loading...</div>
<div id="check-speedtestcn-location" class="col-span-2">
Loading...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer
class="absolute inset-x-0 bottom-0 py-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm"
class="fixed inset-x-0 bottom-0 p-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm"
>
(c) 2024 Guanran Wang, source code licenced under MIT.

6
ui/src/style.css
View file

@ -1,9 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.table-cell {
@apply py-2 px-5 border-2 border-violet-300 dark:border-slate-700;
}
}