generated from ShayanTheNerd/multi-function-timepiece
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (118 loc) · 7.25 KB
/
index.html
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
<!-- prettier-ignore -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!-- prettier-ignore -->
<head>
<meta charset="UTF-8" />
<title>IP Address Tracker</title>
<meta name="color-scheme" content="light" />
<meta name="theme-color" content="#ffffff" />
<meta name="author" content="Shayan Zamani" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="online free ip address tracker, frontend mentor ip address tracker challenge" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="shayan-zamani.me" />
<meta property="og:title" name="title" content="IP Address Tracker" />
<meta property="og:url" content="https://shayanthenerd.github.io/IP-address-tracker/" />
<meta property="og:image" content="https://shayanthenerd.github.io/IP-address-tracker/og-img.webp" />
<meta property="og:image:alt" content="IP Address Tracker" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" name="description" content="IP Address Tracker is a Frontend Mentor challenge designed for easily tracking the geographical location of any provided IP address on an interactive map." />
<meta name="twitter:creator" content="@ShayanTheNerd">
<meta name="twitter:title" content="IP Address Tracker">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://shayanthenerd.github.io/IP-address-tracker/og-img.webp" />
<meta property="twitter:image:alt" content="IP Address Tracker" />
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon.png" />
<link rel="prefetch" href="./assets/fonts/rubik-400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="prefetch" href="./assets/fonts/rubik-500.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="prefetch" href="./assets/fonts/rubik-700.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/css/leaflet.min.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<script defer src="./assets/js/leaflet.min.js"></script>
<script type="module" src="./assets/js/app.js"></script>
</head>
<body
class="flex min-h-screen flex-col font-rubik antialiased [-webkit-tap-highlight-color:transparent] selection:bg-[#5873da] selection:text-white supports-[min-height:100dvh]:min-h-[100dvh]">
<header
class="relative z-500 flex h-[244px] flex-col items-center bg-[url('../images/pattern-bg-mobile.png')] bg-cover bg-no-repeat shadow-2xl sm:h-[250px] sm:bg-[url('../images/pattern-bg-desktop.png')] sm:bg-center lg:h-[230px]">
<h1 class="my-3.5 text-xl font-medium tracking-wide text-white sm:text-2xl lg:my-6 lg:text-3xl">
IP Address Tracker
</h1>
<!-- IP search form -->
<search class="w-full max-w-lg px-6">
<form id="IP_tracker_form" class="rounded-xl shadow-2xl">
<fieldset id="IP_tracker_form_fieldset" class="group flex disabled:opacity-90">
<legend class="sr-only">Search for any IP address</legend>
<label class="relative w-full after:absolute after:right-0 after:h-full after:w-0.5 after:bg-birch">
<p class="sr-only">IP address</p>
<input
required
id="IP_input"
type="search"
inputmode="decimal"
title="Enter a valid IP address. E.g., '192.158.1.38'."
placeholder="Search for any IP address"
pattern="^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
class="h-12 w-full rounded-l-xl rounded-r-none bg-white px-3.5 py-2 text-birch placeholder:text-sm focus:outline focus:outline-[3px] focus:outline-offset-[-3px] focus:outline-birch sm:px-4 placeholder:sm:text-base" />
</label>
<button
type="submit"
title="Look up"
class="group flex w-12 shrink-0 items-center justify-center rounded-r-xl bg-birch pe-0.5 transition-opacity focus-within:outline-none focus-visible:opacity-90 group-enabled:hover:opacity-90">
<svg aria-hidden="true" width="11" height="14" class="group-disabled:hidden">
<path fill="none" stroke="#ffffff" stroke-width="3" d="M2 1l6 6-6 6" />
</svg>
<!-- Loading spinner -->
<svg
viewBox="0 0 24 24"
aria-hidden="true"
class="hidden h-7 w-7 fill-white group-disabled:inline-block"
style="animation: spin 2s infinite linear">
<path
d="M11 2v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 18v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM4.223 5.637l2.83 2.83c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.83-2.83c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM15.533 16.947l2.83 2.83c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.83-2.83c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM2 13h4c0.552 0 1-0.448 1-1s-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1zM18 13h4c0.552 0 1-0.448 1-1s-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1zM5.637 19.777l2.83-2.83c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.83 2.83c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM16.947 8.467l2.83-2.83c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.83 2.83c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z" />
</svg>
</button>
</fieldset>
</form>
</search>
</header>
<main class="relative flex grow flex-col items-center">
<!-- IP address info -->
<div class="absolute z-500 mx-auto w-full max-w-lg -translate-y-1/2 px-6 lg:max-w-screen-lg">
<article class="rounded-xl bg-white py-4 shadow-2xl lg:py-6">
<ul class="lg:custom-divide-x space-y-4 text-center lg:grid lg:grid-cols-4 lg:space-y-0 lg:text-start">
<li class="space-y-1 px-4 lg:space-y-1.5 lg:px-6">
<p class="text-xxs font-bold leading-2 tracking-widest text-grey lg:text-xs">IP ADDRESS</p>
<strong id="IP_address" class="line-clamp-1 font-medium tracking-wide lg:line-clamp-3 lg:text-xl">
0.0.0.0
</strong>
</li>
<li class="space-y-1 px-4 lg:space-y-1.5 lg:px-6">
<p class="text-xxs font-bold leading-2 tracking-widest text-grey lg:text-xs">LOCATION</p>
<strong id="IP_location" class="line-clamp-1 font-medium tracking-wide lg:line-clamp-3 lg:text-xl">
Loremdolor, ipsum, amet
</strong>
</li>
<li class="space-y-1 px-4 lg:space-y-1.5 lg:px-6">
<p class="text-xxs font-bold leading-2 tracking-widest text-grey lg:text-xs">TIMEZONE</p>
<strong class="line-clamp-1 font-medium tracking-wide lg:line-clamp-3 lg:text-xl">
UTC
<time id="IP_timezone">-00:00</time>
</strong>
</li>
<li class="space-y-1 px-4 lg:space-y-1.5 lg:px-6">
<p class="text-xxs font-bold leading-2 tracking-widest text-grey lg:text-xs">ISP</p>
<strong id="IP_ISP" class="line-clamp-1 font-medium tracking-wide lg:line-clamp-3 lg:text-xl">
Lorem ipsum
</strong>
</li>
</ul>
</article>
</div>
<!-- Map -->
<figure id="map" class="w-full grow"></figure>
</main>
</body>
</html>