Initial pass at page format and styling

This commit is contained in:
Zachary Elliott 2014-07-08 21:08:50 -04:00
parent af819ae597
commit 8ba6ca3ec0
2 changed files with 173 additions and 3 deletions

View File

@ -0,0 +1,59 @@
$gray: #757575;
$white: #fff;
body {
width: 750px;
border: 1px solid $gray;
margin: 20px auto;
color: $gray;
}
nav, footer {
background-color: $gray;
color: $white;
height: 20px;
line-height: 20px;
padding: 5px;
}
header {
h1 {
margin: .67em;
}
}
nav {
}
main {
min-height:300px;
table {
margin: 10px;
width: 730px;
tbody {
border: 1px solid $gray;
}
tr {
border-bottom: 1px solid $gray;
th {
text-align: left;
padding: 20px;
font-size: 1.5em;
}
td {
padding: 10px;
width: 30%;
}
td + td {
width: 70%;
}
}
}
}
footer {
text-align: center;
}

View File

@ -10,9 +10,120 @@
<title>ifconfig.io</title> <title>ifconfig.io</title>
</head> </head>
<body> <body>
<header></header> <header>
<h1>What is my ip address? - <small>ifconfig.io</small></h1>
</header>
<nav></nav> <nav></nav>
<main></main> <main>
<footer></footer> <table>
<thead>
<tr><th colspan="2">Your Connection</th></tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>IP Address</td><td>{{ ip_address }}</td>
</tr>
<tr>
<td>Remote Host</td><td>{{ remote_host }}</td>
</tr>
<tr>
<td>User Agent</td><td>{{ user_agent }}</td>
</tr>
<tr>
<td>Port</td><td>{{ port }}</td>
</tr>
<tr>
<td>Language</td><td>{{ language }}</td>
</tr>
<tr>
<td>Referer</td><td>{{ referer }}</td>
</tr>
<tr>
<td>Connection</td><td>{{ connection }}</td>
</tr>
<tr>
<td>KeepAlive</td><td>{{ keep_alive }}</td>
</tr>
<tr>
<td>Method</td><td>{{ method }}</td>
</tr>
<tr>
<td>Encoding</td><td>{{ encoding }}</td>
</tr>
<tr>
<td>MIME Type</td><td>{{ mime_type }}</td>
</tr>
<tr>
<td>Charset</td><td>{{ charset }}</td>
</tr>
<tr>
<td>Via</td><td>{{ via }}</td>
</tr>
<tr>
<td>X-Forwarded-For</td><td>{{ x_forwarded_for }}</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">Command Line Interface</th>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>$ curl ifconfig.io</td><td>{{ ipaddr }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/ip</td><td>{{ ipaddr }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/host</td><td>{{ hostname }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/ua</td><td>{{ useragent }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/port</td><td>{{ port }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/lang</td><td>{{ language }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/keepalive</td><td>{{ keepalive }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/connection</td><td>{{ keep_alive }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/encoding</td><td>{{ encoding }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/mime</td><td>{{ mime_type }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/charset</td><td>{{ charset }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/via</td><td>{{ via }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/forwarded</td><td>{{ x_forwarded_for }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/all</td><td>{{ hash as yaml }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/all.xml</td><td>{{ hash as xml }}</td>
</tr>
<tr>
<td>$ curl ifconfig.io/all.json</td><td>{{ hash as json }}</td>
</tr>
</tbody>
</table>
</main>
<footer>&copy; 2014 ifconfig.io</footer>
</body> </body>
</html> </html>