mirror of https://github.com/mpolden/echoip
fixed issues with gutter and spilling over layout
This commit is contained in:
parent
37c1cdf33e
commit
313481d2a5
312
html/index.html
312
html/index.html
|
@ -32,22 +32,29 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="pure-g gutters center">
|
<div class="pure-g gutters center">
|
||||||
<div class="pure-u-1 pure-u-md-2-3">
|
<div class="pure-u-1 pure-u-md-2-3">
|
||||||
<h1>{{ .Host }} — What is my IP address?</h1>
|
<div class="l-box">
|
||||||
<p><code class="ip">{{ .IP }}</code></p>
|
<h1>{{ .Host }} — What is my IP address?</h1>
|
||||||
<p>
|
<p><code class="ip">{{ .IP }}</code></p>
|
||||||
The best tool to find your own IP address, and information about it.
|
<p>
|
||||||
</p>
|
The best tool to find your own IP address, and information about
|
||||||
|
it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-u-1 pure-u-md-1-3 align-right">
|
<div class="pure-u-1 pure-u-md-1-3 align-right">
|
||||||
<div class="leafcloud-logo">
|
<div class="l-box">
|
||||||
{{ template "leafcloud-logo.svg" "." }}
|
<div class="leafcloud-logo">
|
||||||
|
<a href="https://www.leaf.cloud?utm_source=ifconfig">
|
||||||
|
{{ template "leafcloud-logo.svg" "." }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
This site is graciously hosted by<br />
|
||||||
|
<a href="https://www.leaf.cloud?utm_source=ifconfig"
|
||||||
|
>Leafcloud – The Truly Sustainable Cloud</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
|
||||||
This site is graciously hosted by<br />
|
|
||||||
<a href="https://www.leaf.cloud?utm_source=ifconfig"
|
|
||||||
>Leafcloud – The Truly Sustainable Cloud</a
|
|
||||||
>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -176,142 +183,153 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- COLUMN 2 -->
|
<!-- COLUMN 2 -->
|
||||||
<div class="pure-u-1 pure-u-md-1-2">
|
<div class="pure-u-1 pure-u-md-1-2">
|
||||||
<h2>How do I get this programmatically?</h2>
|
<div class="l-box">
|
||||||
<p>
|
<h2>How do I get this programmatically?</h2>
|
||||||
With the widget below you can build your query, and see what the
|
<p>
|
||||||
result will look like.
|
With the widget below you can build your query, and see what the
|
||||||
</p>
|
result will look like.
|
||||||
<div class="pure-form">
|
</p>
|
||||||
<!-- COMMAND WIDGET -->
|
<div class="pure-form">
|
||||||
<div class="buttons">
|
<!-- COMMAND WIDGET -->
|
||||||
<button
|
<div class="buttons">
|
||||||
name="ip"
|
<button
|
||||||
class="button widget-select"
|
name="ip"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
ip
|
>
|
||||||
</button>
|
ip
|
||||||
<button
|
</button>
|
||||||
name="country"
|
<button
|
||||||
class="button widget-select"
|
name="country"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
country
|
>
|
||||||
</button>
|
country
|
||||||
<button
|
</button>
|
||||||
name="country-iso"
|
<button
|
||||||
class="button widget-select"
|
name="country-iso"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
country-iso
|
>
|
||||||
</button>
|
country-iso
|
||||||
<button
|
</button>
|
||||||
name="city"
|
<button
|
||||||
class="button widget-select"
|
name="city"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
city
|
>
|
||||||
</button>
|
city
|
||||||
<button
|
</button>
|
||||||
name="asn"
|
<button
|
||||||
class="button widget-select"
|
name="asn"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
ASN
|
>
|
||||||
</button>
|
ASN
|
||||||
<button
|
</button>
|
||||||
name="json"
|
<button
|
||||||
class="button widget-select"
|
name="json"
|
||||||
onclick="changeInput(this.name)"
|
class="button widget-select"
|
||||||
>
|
onclick="changeInput(this.name)"
|
||||||
JSON
|
>
|
||||||
</button>
|
JSON
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="widgetbox input">
|
||||||
|
<code id="command"></code>
|
||||||
|
</div>
|
||||||
|
<div id="output" class="widgetbox output"></div>
|
||||||
|
|
||||||
|
<table class="input-table">
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">You can open this page for another IP</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
id="ipCheckBox"
|
||||||
|
type="checkbox"
|
||||||
|
class="toggle"
|
||||||
|
onchange="enableIP(this)"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>Check Another IP</td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
id="ipInput"
|
||||||
|
class="narrow-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="1.1.1.1"
|
||||||
|
onkeyup="updateIP(this)"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button onclick="navigate()">open</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">
|
||||||
|
And you can check if a port on your IP is open
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
id="portCheckBox"
|
||||||
|
type="checkbox"
|
||||||
|
class="toggle"
|
||||||
|
onchange="enablePort(this)"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>Check For Port</td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
id="portInput"
|
||||||
|
type="text"
|
||||||
|
class="narrow-input"
|
||||||
|
placeholder="8080"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td><button onclick="getQuery()">go</button></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="widgetbox input">
|
|
||||||
<code id="command"></code>
|
<!-- FAQ -->
|
||||||
|
<div class="FAQ">
|
||||||
|
<h2>FAQ</h2>
|
||||||
|
<h3>How do I force IPv4 or IPv6 lookup?</h3>
|
||||||
|
<p>
|
||||||
|
As of 2018-07-25 it's no longer possible to force protocol using
|
||||||
|
the
|
||||||
|
<i>v4</i> and <i>v6</i> subdomains. IPv4 or IPv6 still can be
|
||||||
|
forced by passing the appropiate flag to your client, e.g
|
||||||
|
<code>curl -4</code> or <code>curl -6</code>.
|
||||||
|
</p>
|
||||||
|
<h3>Can I force getting JSON?</h3>
|
||||||
|
<p>
|
||||||
|
Setting the <code>Accept: application/json</code> header works
|
||||||
|
as expected.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Is automated use of this service permitted?</h3>
|
||||||
|
<p>
|
||||||
|
Yes, as long as the rate limit is respected. The rate limit is
|
||||||
|
in place to ensure a fair service for all.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<em>Please limit automated requests to 1 request per minute</em
|
||||||
|
>. No guarantee is made for requests that exceed this limit.
|
||||||
|
They may be rate-limited, with a 429 status code, or dropped
|
||||||
|
entirely.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Can I run my own service?</h3>
|
||||||
|
<p>
|
||||||
|
Yes, the source code and documentation is available on
|
||||||
|
<a href="https://github.com/mpolden/echoip">GitHub</a>.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="output" class="widgetbox output"></div>
|
|
||||||
|
|
||||||
<table class="input-table">
|
|
||||||
<tr>
|
|
||||||
<td colspan="3">You can open this page for another IP</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
id="ipCheckBox"
|
|
||||||
type="checkbox"
|
|
||||||
class="toggle"
|
|
||||||
onchange="enableIP(this)"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td>Check Another IP</td>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
id="ipInput"
|
|
||||||
type="text"
|
|
||||||
placeholder="1.1.1.1"
|
|
||||||
onkeyup="updateIP(this)"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<button onclick="navigate()">open</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td colspan="3">
|
|
||||||
And you can check if a port on your IP is open
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<input
|
|
||||||
id="portCheckBox"
|
|
||||||
type="checkbox"
|
|
||||||
class="toggle"
|
|
||||||
onchange="enablePort(this)"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
<td>Check For Port</td>
|
|
||||||
<td><input id="portInput" type="text" placeholder="8080" /></td>
|
|
||||||
<td><button onclick="getQuery()">go</button></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FAQ -->
|
|
||||||
<div class="FAQ">
|
|
||||||
<h2>FAQ</h2>
|
|
||||||
<h3>How do I force IPv4 or IPv6 lookup?</h3>
|
|
||||||
<p>
|
|
||||||
As of 2018-07-25 it's no longer possible to force protocol using
|
|
||||||
the
|
|
||||||
<i>v4</i> and <i>v6</i> subdomains. IPv4 or IPv6 still can be
|
|
||||||
forced by passing the appropiate flag to your client, e.g
|
|
||||||
<code>curl -4</code> or <code>curl -6</code>.
|
|
||||||
</p>
|
|
||||||
<h3>Can I force getting JSON?</h3>
|
|
||||||
<p>
|
|
||||||
Setting the <code>Accept: application/json</code> header works as
|
|
||||||
expected.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Is automated use of this service permitted?</h3>
|
|
||||||
<p>
|
|
||||||
Yes, as long as the rate limit is respected. The rate limit is in
|
|
||||||
place to ensure a fair service for all.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<em>Please limit automated requests to 1 request per minute</em>.
|
|
||||||
No guarantee is made for requests that exceed this limit. They may
|
|
||||||
be rate-limited, with a 429 status code, or dropped entirely.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Can I run my own service?</h3>
|
|
||||||
<p>
|
|
||||||
Yes, the source code and documentation is available on
|
|
||||||
<a href="https://github.com/mpolden/echoip">GitHub</a>.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
max-width: 1280px;
|
max-width: 1024px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
|
@ -66,6 +66,7 @@
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.widgetbox.input :first-child::before {
|
.widgetbox.input :first-child::before {
|
||||||
|
@ -79,19 +80,18 @@
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add a gutter to Pure's Columns */
|
.l-box {
|
||||||
.pure-g.gutters {
|
margin: 0 1rem;
|
||||||
margin: 0 -1em;
|
|
||||||
}
|
|
||||||
.pure-g.gutters > [class*="pure-u"] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0em 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-right {
|
.align-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.narrow-input {
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
/* TOGGLE */ /* https://codepen.io/avstorm/pen/jOEpBLW */
|
/* TOGGLE */ /* https://codepen.io/avstorm/pen/jOEpBLW */
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
Loading…
Reference in New Issue