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

feat(ui): add captions to grid

Browse source
This commit is contained in:
Guanran Wang 2024-10-26 20:54:50 +08:00
parent 53dc329dec
commit e54967db50
Signed by: nyancat
GPG key ID: 91F97D9ED12639CF
2 changed files with 69 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
ui/index.html
View file

@ -28,29 +28,76 @@
<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">
<div
class="flex flex-col min-h-screen justify-center items-center md:mw-4/3"
>
<p class="py-2">Ny4 IP checker!</p>
<div class="divide-y divide-violet-300 dark:divide-slate-700">
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
<div>ip.ny4.dev</div>
<div id="check-ny4-ip">Loading...</div>
<div id="check-ny4-location" class="col-span-2">Loading...</div>
<div
class="divide-y divide-violet-300 dark:divide-slate-700 w-full md:w-3/4"
>
<div class="hidden md:grid grid-cols-4 gap-2 p-2">
<div class="table-caption">Source</div>
<div class="table-caption">IP</div>
<div class="table-caption col-span-2">Location</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
<div>ip.sb</div>
<div id="check-ipsb-ip">Loading...</div>
<div id="check-ipsb-location" class="col-span-2">Loading...</div>
<div>
<h5 class="table-caption md:hidden">Source</h5>
<p>ip.ny4.dev</p>
</div>
<div>
<h5 class="table-caption md:hidden">IP</h5>
<p id="check-ny4-ip">Loading...</p>
</div>
<div class="col-span-2">
<h5 class="table-caption md:hidden">Location</h5>
<p id="check-ny4-location">Loading...</p>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
<div>ipapi.is</div>
<div id="check-ipapiis-ip">Loading...</div>
<div id="check-ipapiis-location" class="col-span-2">Loading...</div>
<div>
<h5 class="table-caption md:hidden">Source</h5>
<p>ip.sb</p>
</div>
<div>
<h5 class="table-caption md:hidden">IP</h5>
<p id="check-ipsb-ip">Loading...</p>
</div>
<div class="col-span-2">
<h5 class="table-caption md:hidden">Location</h5>
<p id="check-ipsb-location">Loading...</p>
</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...
<div>
<h5 class="table-caption md:hidden">Source</h5>
<p>ipapi.is</p>
</div>
<div>
<h5 class="table-caption md:hidden">IP</h5>
<p id="check-ipapiis-ip">Loading...</p>
</div>
<div class="col-span-2">
<h5 class="table-caption md:hidden">Location</h5>
<p id="check-ipapiis-location">Loading...</p>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
<div>
<h5 class="table-caption md:hidden">Source</h5>
<p>ip-api.com</p>
</div>
<div>
<h5 class="table-caption md:hidden">IP</h5>
<p id="check-speedtestcn-ip">Loading...</p>
</div>
<div class="col-span-2">
<h5 class="table-caption md:hidden">Location</h5>
<p id="check-speedtestcn-location">Loading...</p>
</div>
</div>
</div>

6
ui/src/style.css
View file

@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.table-caption {
@apply md:hidden text-xs text-gray-500 uppercase dark:text-neutral-400;
}
}