|
|
@@ -5,6 +5,36 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>ip2location</title>
|
|
|
<style>
|
|
|
+ *,
|
|
|
+ ::after,
|
|
|
+ ::before {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ html {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ color: #212529;
|
|
|
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear::after {
|
|
|
+ clear: both;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ line-height: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
html {
|
|
|
min-height: 100%;
|
|
|
height: 100%;
|
|
|
@@ -22,6 +52,15 @@
|
|
|
display: table;
|
|
|
}
|
|
|
|
|
|
+ a {
|
|
|
+ color: #0d6efd;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
.wrapper {
|
|
|
padding: 15px;
|
|
|
text-align: center;
|
|
|
@@ -43,6 +82,82 @@
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
+ .form-control {
|
|
|
+ background-clip: padding-box;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #ced4da;
|
|
|
+ color: #495057;
|
|
|
+ display: inline-block;
|
|
|
+ font-family: inherit;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin: 0;
|
|
|
+ overflow: visible;
|
|
|
+ padding: 6px 12px;
|
|
|
+ transition: box-shadow .15s ease-in-out;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-control:focus {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: #80bdff;
|
|
|
+ box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
|
+ color: #495057;
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 1.5;
|
|
|
+ padding: 6px 12px;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
|
+ user-select: none;
|
|
|
+ vertical-align: middle;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn:focus,
|
|
|
+ .btn:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn:focus {
|
|
|
+ box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn.blue {
|
|
|
+ background-color: #0d6efd;
|
|
|
+ border-color: #0d6efd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn.blue:hover {
|
|
|
+ background-color: #0b5ed7;
|
|
|
+ border-color: #0a58ca;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn.blue:focus {
|
|
|
+ box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ form {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
@media only screen and (max-width:800px) {
|
|
|
.wrapper {
|
|
|
padding: 15px 0;
|
|
|
@@ -51,14 +166,34 @@
|
|
|
h1, h2 {
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
+
|
|
|
+ form {
|
|
|
+ display: block;
|
|
|
+ padding: 0px 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ form .form-control,
|
|
|
+ form .btn {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ form button {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="wrapper">
|
|
|
- <h1>ip2location</h1>
|
|
|
+ <h1><a href="/">ip2location</a></h1>
|
|
|
<h2>{{$.Data.Additional.ClientIP}}</h2>
|
|
|
<h2>{{$.Data.Additional.GeoIPData}}</h2>
|
|
|
+ <form action="/" method="get">
|
|
|
+ <input class="form-control" type="text" name="ip" value="{{$.Data.Additional.ClientIP}}" />
|
|
|
+ <button class="btn blue" type="submit">Check</button>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
