echoip/html/index.html

311 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>What is my IP address? &mdash; {{ .Host }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="{{ .Host }} • What is my IP address? &mdash; The best tool to find your own IP address, and information about it."
/>
<link rel="canonical" href="https://ip.level.io/" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/grids-responsive-min.css"
integrity="sha384-b92sF+wDNTHrfEtRaYo+EpcA8FUyHOSXrdxKc9XB9kaaX1rSQAgMevW6cYeE5Bdv"
crossorigin="anonymous"
/>
{{ template "script.html" . }} {{ template "styles.html" . }}
</head>
<body>
<div class="content">
<div class="pure-g gutters center">
<div class="pure-u-1 pure-u-md-2-3">
<div class="l-box">
<h1>{{ .Host }} — What is my IP address?</h1>
<p><code class="ip">{{ .IP }}</code></p>
<p>
The best tool to find your own IP address, and information about
it.
</p>
</div>
</div>
</div>
<div class="pure-g gutters center">
<!-- COLUMN 1 -->
<div class="pure-u-1 pure-u-md-1-2 col">
<div class="l-box">
<h2>What do we know about this IP address?</h2>
<table class="info-table">
<tr>
<th scope="row">IP&nbsp;address</th>
<td>{{ .IP }}</td>
</tr>
<tr>
<th scope="row">IP&nbsp;address (decimal)</th>
<td>{{ .IPDecimal }}</td>
</tr>
{{ if .Country }}
<tr>
<th scope="row">Country</th>
<td>{{ .Country }}</td>
</tr>
{{ end }} {{ if .CountryISO }}
<tr>
<th scope="row">Country (ISO code)</th>
<td>{{ .CountryISO }}</td>
</tr>
{{ end }} {{ if .CountryEU }}
<tr>
<th scope="row">In EU?</th>
<td>{{ .CountryEU }}</td>
</tr>
{{ end }} {{ if .RegionName }}
<tr>
<th scope="row">Region</th>
<td>{{ .RegionName }}</td>
</tr>
{{ end }} {{ if .RegionCode }}
<tr>
<th scope="row">Region&nbsp;code</th>
<td>{{ .RegionCode }}</td>
</tr>
{{ end }} {{ if .MetroCode }}
<tr>
<th scope="row">Metro code</th>
<td>{{ .MetroCode }}</td>
</tr>
{{ end }} {{ if .PostalCode }}
<tr>
<th scope="row">Postal&nbsp;code</th>
<td>{{ .PostalCode }}</td>
</tr>
{{ end }} {{ if .City }}
<tr>
<th scope="row">City</th>
<td>{{ .City }}</td>
</tr>
{{ end }} {{ if .Latitude }}
<tr>
<th scope="row">Latitude</th>
<td>{{ .Latitude }}</td>
</tr>
{{ end }} {{ if .Longitude }}
<tr>
<th scope="row">Longitude</th>
<td>{{ .Longitude }}</td>
</tr>
{{ end }} {{ if .Timezone }}
<tr>
<th scope="row">Timezone</th>
<td>{{ .Timezone }}</td>
</tr>
<tr>
<th scope="row">Is Daylight Savings?</th>
<td>{{ .TimezoneEtc.IsDaylightSavings }}</td>
</tr>
{{ end }} {{ if .ASN }}
<tr>
<th scope="row">ASN</th>
<td>{{ .ASN }}</td>
</tr>
{{ end }} {{ if .ASNOrg }}
<tr>
<th scope="row">ASN (organization)</th>
<td>{{ .ASNOrg }}</td>
</tr>
{{ end }} {{ if .Hostname }}
<tr>
<th scope="row">Hostname</th>
<td>{{ .Hostname }}</td>
</tr>
{{ end }} {{ if .UserAgent }} {{ if .UserAgent.Comment }}
<tr>
<th scope="row">User&nbsp;agent</th>
<td>{{ .UserAgent.Product }}/{{ .UserAgent.Version }}</td>
</tr>
{{ end }} {{ if .UserAgent.Comment }}
<tr>
<th scope="row">User&nbsp;agent: Comment</th>
<td>{{ .UserAgent.Comment }}</td>
</tr>
{{ end }} {{ if .UserAgent.RawValue }}
<tr>
<th scope="row">User&nbsp;agent: Raw</th>
<td>{{ .UserAgent.RawValue }}</td>
</tr>
{{ end }}
{{ if .IPStackSecurityEnabled }}
<tr>
<th scope="row">Is Proxy?</th>
<td>{{ .Security.IsProxy }}</td>
</tr>
<tr>
<th scope="row">Is Crawler?</th>
<td>{{ .Security.IsCrawler }}</td>
</tr>
{{ if .Security.IsCrawler }}
<tr>
<th scope="row">Crawler Name</th>
<td>{{ .Security.CrawlerName }}</td>
</tr>
<tr>
<th scope="row">Crawler Type</th>
<td>{{ .Security.CrawlerType }}</td>
</tr>
{{ end }}
<tr>
<th scope="row">Is Tor?</th>
<td>{{ .Security.IsTor }}</td>
</tr>
<tr>
<th scope="row">Threat Level</th>
<td>{{ .Security.ThreatLevel }}</td>
</tr>
<tr>
<th scope="row">Threat Types</th>
<td>{{ .Security.ThreatTypes }}</td>
</tr>
{{ end }}
{{ end }}
</table>
{{ if .Country }}
{{ end }}
{{ if .Latitude }}
<div class="pure-u-1 pure-u-md-1-1">
<h2>Map</h2>
<iframe
width="100%"
height="350"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox={{ .BoxLonLeft }}%2C{{ .BoxLatBottom }}%2C{{ .BoxLonRight }}%2C{{ .BoxLatTop }}&amp;layer=mapnik&amp;marker={{ .Latitude }}%2C{{ .Longitude }}"
></iframe>
</div>
{{ end }}
</div>
</div>
<!-- COLUMN 2 -->
<div class="pure-u-1 pure-u-md-1-2">
<div class="l-box">
<h2>How do I get this programmatically?</h2>
<p>
With the widget below you can build your query, and see what the
result will look like.
</p>
<div class="pure-form">
<!-- COMMAND WIDGET -->
<div class="input-buttons">
<button
name="ip"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
ip
</button>
<button
name="country"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
country
</button>
<button
name="country-iso"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
country-iso
</button>
<button
name="city"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
city
</button>
<button
name="asn"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
asn
</button>
<button
name="json"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
json
</button>
<button
name="port"
class="pure-button widget-select"
onclick="changeInput(this.name, this)"
>
port
</button>
<input
id="portInput"
type="number"
min="1"
max="40000"
value="8080"
class="narrow-input pure-input"
placeholder="8080"
onchange="updatePort(this.value)"
/>
</div>
<div class="widgetbox input">
<code id="command"></code>
</div>
<div id="output" class="widgetbox output"></div>
<form class="pure-form input-buttons">
<fieldset>
<label for="ipInput">
Check another IP (optional)
<input
id="ipInput"
class=""
type="text"
placeholder="IP to query"
onkeyup="updateIP(this.value)"
/>
</label>
<button
type="button"
class="pure-button"
onclick="navigate()"
>
Open
</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>