mirror of https://github.com/mpolden/echoip
fixed issues with gutter and spilling over layout
This commit is contained in:
Thatcher Peskens
parent
37c1cdf33e
commit
313481d2a5
312
html/index.html
312
html/index.html
|
|
@ -32,22 +32,29 @@
|
|||
<div class="content">
|
||||
<div class="pure-g gutters center">
|
||||
<div class="pure-u-1 pure-u-md-2-3">
|
||||
<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 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 class="pure-u-1 pure-u-md-1-3 align-right">
|
||||
<div class="leafcloud-logo">
|
||||
{{ template "leafcloud-logo.svg" "." }}
|
||||
<div class="l-box">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -176,142 +183,153 @@
|
|||
</div>
|
||||
<!-- COLUMN 2 -->
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<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="buttons">
|
||||
<button
|
||||
name="ip"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
ip
|
||||
</button>
|
||||
<button
|
||||
name="country"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
country
|
||||
</button>
|
||||
<button
|
||||
name="country-iso"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
country-iso
|
||||
</button>
|
||||
<button
|
||||
name="city"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
city
|
||||
</button>
|
||||
<button
|
||||
name="asn"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
ASN
|
||||
</button>
|
||||
<button
|
||||
name="json"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
JSON
|
||||
</button>
|
||||
<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="buttons">
|
||||
<button
|
||||
name="ip"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
ip
|
||||
</button>
|
||||
<button
|
||||
name="country"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
country
|
||||
</button>
|
||||
<button
|
||||
name="country-iso"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
country-iso
|
||||
</button>
|
||||
<button
|
||||
name="city"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
city
|
||||
</button>
|
||||
<button
|
||||
name="asn"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
ASN
|
||||
</button>
|
||||
<button
|
||||
name="json"
|
||||
class="button widget-select"
|
||||
onclick="changeInput(this.name)"
|
||||
>
|
||||
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 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 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>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
margin-right: auto;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
max-width: 1280px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
border: 1px solid grey;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
margin-top: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.widgetbox.input :first-child::before {
|
||||
|
|
@ -79,19 +80,18 @@
|
|||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
/* Add a gutter to Pure's Columns */
|
||||
.pure-g.gutters {
|
||||
margin: 0 -1em;
|
||||
}
|
||||
.pure-g.gutters > [class*="pure-u"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0em 1em;
|
||||
.l-box {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.narrow-input {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
/* TOGGLE */ /* https://codepen.io/avstorm/pen/jOEpBLW */
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue