MyIP/index.html at main · Cosr-Backup/MyIP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="keywords"
    content="MyIP, IP tool, IP check, IP lookup, DNS leak test, WebRTC test, speed test, DNS lookup, WHOIS lookup, ping test, privacy test" />
  <meta name="description"
    content="A better and open source IP Toolbox. Easy to check what's your IPs, IP information, check for DNS leaks, examine WebRTC connections, test website availability, lookup DNS record, lookup Whois, and test latency from around the world.">
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="theme-color" content="#f8f9fa" />
  <meta name="background-color" content="#ffffff" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <link rel="manifest" href="/manifest.webmanifest" />
  <link rel="apple-touch-icon" href="/logos/ios-logo-512.png" />
  <title>IPCheck.ing - Check My IP Address and Geolocation - Check WebRTC Connection IP - DNS Leak Test - Speed Test -
    Ping/MTR Test - Jason Ng Open Source </title>
  <link rel="icon" href="/logos/logo.svg">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- Seed the `.dark` class on <html> BEFORE first paint.
       Reads the user's stored theme preference from localStorage (key
       `userPreferences`, field `theme`, values: "auto" / "light" / "dark"),
       falling back to the OS `prefers-color-scheme` when on "auto" or when
       there's no stored preference yet. Runs synchronously — must come before
       the inline <style> block below and before the Vue bundle loads, so the
       boot screen and the eventually-mounted app agree on the theme from
       frame 1. Preferences.vue owns the class after mount via
       `store.setDarkMode`. -->
  <script>
    (function () {
      // Gates the initial-hidden `#app` rule; App.vue clears it for the
      // scale/fade-in. If this script never runs, #app renders normally.
      document.documentElement.setAttribute('data-booting', '');
      try {
        var stored = JSON.parse(localStorage.getItem('userPreferences') || '{}');
        var theme = stored.theme || 'auto';
        var isDark =
          theme === 'dark' ||
          (theme === 'auto' &&
            window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches);
        if (isDark) document.documentElement.classList.add('dark');
      } catch (e) {
        /* localStorage / JSON parse disabled — fall through, defaults to light. */
      }
    })();
  </script>

  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    html {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      tab-size: 4;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
      scrollbar-gutter: stable;
      background: #ffffff;
      color: #0a0a0a;
    }

    /* Dark mode is gated strictly on the `.dark` class — *never* on
       `prefers-color-scheme` alone — so this inline CSS never fights with
       Tailwind's dark variant or with Preferences.vue's explicit light/dark
       selection. The `.dark` class is seeded by the script block below
       before first paint, so boot-screen rendering already reflects the
       right theme without a flash. */
    html.dark {
      background: #0a0a0a;
      color: #fafafa;
    }

    /* Boot screen — shown until App.vue runs the hand-off sequence.
       Fixed overlay (not an in-flow 100vh block) so mobile chrome doesn't
       push it into a scroll, and so Vue can mount into `#app` underneath
       while the overlay is still visible.
       25vh top padding anchors the logo to the upper third so phone
       notches / status bars don't visually push it low. */
    .jn-loading {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      padding: 25vh 24px 24px;
      text-align: center;
      background: #ffffff;
    }

    html.dark .jn-loading {
      background: #0a0a0a;
    }

    /* Hand-off, driven from App.vue:
         stage-1 — non-logo children fade out, logo stays put.
         stage-2 — logo scales down to 0 and fades.
         stage-3 — overlay removed, `#app` runs `.jn-app-enter` below. */
    .jn-loading > svg,
    .jn-loading > div,
    .jn-loading > .jn-spinner,
    .jn-loading > p {
      transition: opacity 180ms ease-out,
                  transform 220ms cubic-bezier(0.55, 0, 0.7, 0);
      transform-origin: center center;
    }

    .jn-loading.jn-loading-stage-1 > :not(svg) {
      opacity: 0;
    }

    .jn-loading.jn-loading-stage-2 > svg {
      opacity: 0;
      transform: scale(0);
    }

    .jn-loading svg {
      width: 96px;
      height: 96px;
      fill: currentColor;
    }

    .jn-loading p {
      margin: 0;
      font-size: 14px;
      color: #6b7280;
      line-height: 1.5;
    }

    .jn-loading a {
      color: inherit;
      text-decoration: underline;
    }

    /* Spinner — explicitly border-box so its rendered size stays 28×28 whether
       Preflight has arrived or not. */
    .jn-spinner {
      width: 28px;
      height: 28px;
      border: 4px solid #16a34a;
      border-left-color: transparent;
      border-radius: 50%;
      animation: jn-spin 1s linear infinite;
    }

    @keyframes jn-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* `#app` starts hidden + shrunk; App.vue flips `.jn-app-enter` to
       hand off from the collapsing logo. Gated on `html[data-booting]` so
       a missing inline script doesn't strand the user on a blank screen. */
    html[data-booting] #app {
      opacity: 0;
      transform: scale(0.94);
    }

    #app {
      transform-origin: center center;
      transition: opacity 320ms ease-out, transform 320ms ease-out;
    }

    #app.jn-app-enter {
      opacity: 1;
      transform: none;
    }
  </style>

  <!-- Pre-Vue runtime:
      1. Stash the PWA install-prompt event so the app can reuse it later
        (the event fires exactly once, well before Vue mounts).
      2. After 12s, reveal the slow-network fallback hint. -->
  <script>
    window.ipcheckInstallPromptEvent = null;
    window.addEventListener('beforeinstallprompt', (event) => {
      event.preventDefault();
      window.ipcheckInstallPromptEvent = event;
    });
    setTimeout(() => {
      const hint = document.getElementById('jn-loading-slow-hint');
      if (hint) hint.hidden = false;
    }, 12000);
  </script>
</head>

<body>
  <!-- Pre-Vue boot screen. App.vue drives the hand-off via `#jn-loading` —
       the id is a load-bearing contract, keep it in sync. -->
  <div id="jn-loading" class="jn-loading" role="status" aria-live="polite">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 512.35" aria-hidden="true"
      shape-rendering="geometricPrecision" fill-rule="evenodd" clip-rule="evenodd">
      <path id="Logo"
        d="M162.62,21.9026663 C157.13,27.3326663 151.99,33.9226663 147.2,41.6126663 C129.83,69.4326663 116.87,111.602666 107.28,164.772666 C50.98,175.412666 16.22,198.912666 17.38,222.912666 C18.42,244.652666 45.84,261.322666 87.05,272.832666 C84.34,281.212666 84.98,282.652666 88.65,292.962666 C57.87,305.942666 25.71,345.362666 0,379.892666 L100.03,447.502666 L64.71,512.352666 L449.12,512.352666 L411.86,447.502666 L511,378.632666 C481.92,337.782666 446.81,303.072666 424.88,293.652666 C429.51,281.632666 430.32,279.532666 426.44,272.862666 C467.65,261.142666 494.67,244.022666 494.61,221.392666 C494.55,196.712666 459.11,173.012666 406.3,164.772666 C393.66,111.272666 381.08,69.1526663 365.07,41.5026663 C362.16,36.4826663 359.14,31.9326663 355.98,27.8826663 C308.32,-33.2373337 291.62,25.1926663 257.84,25.1226663 C218.67,25.0426663 213.69,-28.5673337 162.62,21.9026663 Z M223.27,419.802666 C223.27,416.232666 226.17,413.332666 229.74,413.332666 L240.26,413.332666 C241.64,413.332666 242.92,413.772666 243.96,414.502666 C247.73,416.602666 251.42,417.832666 254.97,417.922666 C256.256726,417.95538 257.551379,417.837477 258.853959,417.554552 C261.134997,417.059103 263.440344,416.057596 265.77,414.472666 C266.837339,413.754341 268.093464,413.368108 269.38,413.362666 L282.16,413.332666 C285.73,413.332666 288.62,416.232666 288.62,419.802666 C288.62,423.372666 285.73,426.272666 282.16,426.272666 L271.21,426.272666 C265.75,429.542666 260.23,430.942666 254.67,430.802666 C249.23,430.662666 243.89,429.032666 238.66,426.272666 L229.74,426.272666 C226.17,426.272666 223.27,423.372666 223.27,419.802666 Z M160.62,279.492666 C221.05,301.232666 281.49,300.872666 341.92,281.322666 C283.47,286.072666 219.13,284.942666 160.62,279.492666 Z M267.04,306.612666 L244.93,306.612666 C210.81,384.892666 122.79,350.782666 142.77,277.672666 C135.46,276.872666 128.26,275.992666 121.21,275.052666 L120.89,276.932666 L120.3,280.492666 L116.82,301.362666 C86.43,294.642666 103.46,373.132666 131.08,366.232666 C135.3,378.412666 136.442197,389.44711 142.34,398.422666 C171.368144,442.599077 205.648487,494.791988 256.040415,494.791988 C306.432342,494.791988 341.594767,438.778379 368.99,398.422666 C375.513955,388.812277 376.14,383.142666 380.53,369.392666 C405.97,373.452666 426.88,296.082666 395.87,301.762666 L392.68,280.712666 L392.13,277.062666 L391.9,275.522666 C384.43,276.682666 376.78,277.722666 368.99,278.632666 C389.88,349.262666 300.46,385.132666 267.04,306.612666 Z M284.280512,176.166601 L284.280512,67.1666006 C366.547618,67.1666006 361.40053,176.166601 284.280512,176.166601 Z M170.780508,409.666601 C182.571845,404.08157 211.029823,401.289054 256.154442,401.289054 C301.27906,401.289054 329.487749,404.08157 340.780508,409.666601 C340.780508,398.413948 339.802073,389.918194 323.84137,384.371704 C288.837937,372.207694 222.824258,373.335802 189.15409,384.371704 C170.816498,390.382125 170.780508,397.067154 170.780508,409.666601 Z M206.779566,446.766602 C218.286957,452.470688 235.027101,455.322731 257,455.322731 C278.972899,455.322731 295.566401,452.470688 306.780508,446.766602 C306.780508,458.019255 306.204953,466.515009 296.816215,472.061498 C286.632212,478.077798 271.985838,480.842479 257.386147,480.76502 C242.467564,480.685868 227.597726,477.639061 217.587657,472.061498 C206.800736,466.051077 206.779566,459.366048 206.779566,446.766602 Z M256.254843,67.1117579 L229.254843,87.6169826 C229.254843,124.271828 229.254843,160.370447 229.254843,204.775426 L256.254843,208.111758 C256.254843,143.245746 256.254843,107.726499 256.254843,67.1117579 Z M207.254843,67.1117579 L180.254843,87.6169826 C180.254843,124.271828 180.254843,160.370447 180.254843,204.775426 L207.254843,208.111758 C207.254843,143.245746 207.254843,107.726499 207.254843,67.1117579 Z" />
    </svg>

    <div>
      <p>It may take a while for the first time</p>
      <p>Please wait&hellip;</p>
    </div>

    <div class="jn-spinner" aria-label="Loading"></div>

    <p id="jn-loading-slow-hint" hidden>
      Waiting too long? Try <a href="https://lite.ipcheck.ing/">IPCheck.ing Lite</a>, or refresh the page.
    </p>
  </div>

  <noscript>
    <p style="padding: 40px; text-align: center;">
      IPCheck.ing requires JavaScript. Please enable it and refresh.
    </p>
  </noscript>

  <!-- Vue mounts here. `vaul-drawer-wrapper` is the marker vaul-vue uses to scale
      the page background when a bottom drawer is open (Advanced Tools panel). -->
  <div id="app" vaul-drawer-wrapper></div>
  <script type="module" src="/frontend/main.js"></script>
</body>

</html>