ip-checker/ui/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Ny4 IP Checker" />
    <title>What is my IP?</title>
    <link rel="icon" href="favicon.svg" />
    <link rel="stylesheet" href="/src/style.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap"
    />
    <script type="module" src="/src/main.ts"></script>

    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
    <link rel="dns-prefetch" href="https://api.ip.sb/" />
    <link rel="dns-prefetch" href="https://api-v3.speedtest.cn/" />
    <link rel="dns-prefetch" href="https://api.ipapi.is/" />

    <link rel="preconnect" href="https://fonts.googleapis.com/" />
    <link rel="preconnect" href="https://fonts.gstatic.com/" />
    <link rel="preconnect" href="https://api.ip.sb/" />
    <link rel="preconnect" href="https://api-v3.speedtest.cn/" />
    <link rel="preconnect" href="https://api.ipapi.is/" />
  </head>
  <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 md:mw-4/3"
    >
      <p class="py-2">Ny4 IP checker!</p>
      <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>
            <h5 class="table-caption md:hidden">Source</h5>
            <p>ip.ny4.dev</p>
          </div>
          <div>
            <h5 class="table-caption md:hidden">IP</h5>
            <p class="break-words" 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>
            <h5 class="table-caption md:hidden">Source</h5>
            <p>ip.sb</p>
          </div>
          <div>
            <h5 class="table-caption md:hidden">IP</h5>
            <p class="break-words" 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>
            <h5 class="table-caption md:hidden">Source</h5>
            <p>ipapi.is</p>
          </div>
          <div>
            <h5 class="table-caption md:hidden">IP</h5>
            <p class="break-words" 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 class="break-words" 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>
    </div>

    <footer
      class="fixed inset-x-0 bottom-0 p-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm bg-violet-200 dark:bg-slate-950 border-t border-violet-300 dark:border-slate-700"
    >
      <p>
        (c) 2024 Guanran Wang, source code licenced under MIT.

        <a
          class="text-blue-400 hover:text-blue-600 visited:text-violet-500"
          href="https://git.ny4.dev/nyancat/ip-checker"
          >Git Repo</a
        >
      </p>
    </footer>
  </body>
</html>
initial commit 2024-08-26 22:01:24 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
			`<meta name="description" content="Ny4 IP Checker" />`
			`<title>What is my IP?</title>`
chore(ui): switch to vite 2024-10-26 07:27:02 +00:00			`<link rel="icon" href="favicon.svg" />`
			`<link rel="stylesheet" href="/src/style.css" />`
			`<link`
			`rel="stylesheet"`
			`href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap"`
			`/>`
			`<script type="module" src="/src/main.ts"></script>`
chore(ui): make use of speculative loading https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading 2024-10-25 13:07:26 +00:00
			`<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />`
			`<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />`
			`<link rel="dns-prefetch" href="https://api.ip.sb/" />`
			`<link rel="dns-prefetch" href="https://api-v3.speedtest.cn/" />`
			`<link rel="dns-prefetch" href="https://api.ipapi.is/" />`

			`<link rel="preconnect" href="https://fonts.googleapis.com/" />`
			`<link rel="preconnect" href="https://fonts.gstatic.com/" />`
			`<link rel="preconnect" href="https://api.ip.sb/" />`
			`<link rel="preconnect" href="https://api-v3.speedtest.cn/" />`
			`<link rel="preconnect" href="https://api.ipapi.is/" />`
initial commit 2024-08-26 22:01:24 +00:00			`</head>`
feat: use tailwind css 2024-10-19 04:08:17 +00:00			`<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"`
			`>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<div`
			`class="flex flex-col min-h-screen justify-center items-center md:mw-4/3"`
			`>`
feat: use tailwind css 2024-10-19 04:08:17 +00:00			`<p class="py-2">Ny4 IP checker!</p>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<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>`

chore(ui): use divide instead of border-bottom 2024-10-26 12:05:00 +00:00			`<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<div>`
			`<h5 class="table-caption md:hidden">Source</h5>`
			`<p>ip.ny4.dev</p>`
			`</div>`
			`<div>`
			`<h5 class="table-caption md:hidden">IP</h5>`
fix(ui): make ip doesn't overflow 2024-10-26 13:08:37 +00:00			`<p class="break-words" id="check-ny4-ip">Loading...</p>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`</div>`
			`<div class="col-span-2">`
			`<h5 class="table-caption md:hidden">Location</h5>`
			`<p id="check-ny4-location">Loading...</p>`
			`</div>`
feat(ui): use grid instead of table for responsive design 2024-10-26 11:49:33 +00:00			`</div>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00
chore(ui): use divide instead of border-bottom 2024-10-26 12:05:00 +00:00			`<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<div>`
			`<h5 class="table-caption md:hidden">Source</h5>`
			`<p>ip.sb</p>`
			`</div>`
			`<div>`
			`<h5 class="table-caption md:hidden">IP</h5>`
fix(ui): make ip doesn't overflow 2024-10-26 13:08:37 +00:00			`<p class="break-words" id="check-ipsb-ip">Loading...</p>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`</div>`
			`<div class="col-span-2">`
			`<h5 class="table-caption md:hidden">Location</h5>`
			`<p id="check-ipsb-location">Loading...</p>`
			`</div>`
feat(ui): use grid instead of table for responsive design 2024-10-26 11:49:33 +00:00			`</div>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00
chore(ui): use divide instead of border-bottom 2024-10-26 12:05:00 +00:00			`<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<div>`
			`<h5 class="table-caption md:hidden">Source</h5>`
			`<p>ipapi.is</p>`
			`</div>`
			`<div>`
			`<h5 class="table-caption md:hidden">IP</h5>`
fix(ui): make ip doesn't overflow 2024-10-26 13:08:37 +00:00			`<p class="break-words" id="check-ipapiis-ip">Loading...</p>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`</div>`
			`<div class="col-span-2">`
			`<h5 class="table-caption md:hidden">Location</h5>`
			`<p id="check-ipapiis-location">Loading...</p>`
			`</div>`
feat(ui): use grid instead of table for responsive design 2024-10-26 11:49:33 +00:00			`</div>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00
feat(ui): use grid instead of table for responsive design 2024-10-26 11:49:33 +00:00			`<div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`<div>`
			`<h5 class="table-caption md:hidden">Source</h5>`
			`<p>ip-api.com</p>`
			`</div>`
			`<div>`
			`<h5 class="table-caption md:hidden">IP</h5>`
fix(ui): make ip doesn't overflow 2024-10-26 13:08:37 +00:00			`<p class="break-words" id="check-speedtestcn-ip">Loading...</p>`
feat(ui): add captions to grid 2024-10-26 12:54:50 +00:00			`</div>`
			`<div class="col-span-2">`
			`<h5 class="table-caption md:hidden">Location</h5>`
			`<p id="check-speedtestcn-location">Loading...</p>`
feat(ui): use grid instead of table for responsive design 2024-10-26 11:49:33 +00:00			`</div>`
			`</div>`
			`</div>`
initial commit 2024-08-26 22:01:24 +00:00			`</div>`

feat: use tailwind css 2024-10-19 04:08:17 +00:00			`<footer`
feat(ui): add background to footer 2024-10-26 12:01:25 +00:00			`class="fixed inset-x-0 bottom-0 p-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm bg-violet-200 dark:bg-slate-950 border-t border-violet-300 dark:border-slate-700"`
feat: use tailwind css 2024-10-19 04:08:17 +00:00			`>`
feat(ui): add background to footer 2024-10-26 12:01:25 +00:00			`<p>`
			`(c) 2024 Guanran Wang, source code licenced under MIT.`
initial commit 2024-08-26 22:01:24 +00:00
feat(ui): add background to footer 2024-10-26 12:01:25 +00:00			`<a`
			`class="text-blue-400 hover:text-blue-600 visited:text-violet-500"`
			`href="https://git.ny4.dev/nyancat/ip-checker"`
			`>Git Repo</a`
			`>`
			`</p>`
initial commit 2024-08-26 22:01:24 +00:00			`</footer>`
			`</body>`
			`</html>`