mirror of
https://github.com/skidoodle/iphistory.git
synced 2026-04-27 23:37:35 +02:00
ui enhancements
This commit is contained in:
@@ -0,0 +1,264 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0a0a0c;
|
||||||
|
--card: #16161a;
|
||||||
|
--border: #2d2d33;
|
||||||
|
--text: #ececed;
|
||||||
|
--text-muted: #94949e;
|
||||||
|
--primary: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.title-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.title-link:hover h1 {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
padding-right: 2.5rem;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:placeholder-shown + .clear-input {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-input {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0 5px;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-input:hover {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-ip-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-ip-card div:first-child {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-ip-card div:last-child {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ip-display {
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table td:first-child {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table td:last-child {
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyable {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyable:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-relative {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination span {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.disabled {
|
||||||
|
opacity: 0.2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 1rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-meta {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-meta a {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-meta a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copied {
|
||||||
|
color: #10b981 !important;
|
||||||
|
}
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
package main
|
package main
|
||||||
|
|
||||||
import "fmt"
|
import (
|
||||||
|
"fmt"
|
||||||
|
"time"
|
||||||
|
)
|
||||||
|
|
||||||
func pathBuilder(page int, query string) string {
|
func pathBuilder(page int, query string) string {
|
||||||
base := "/"
|
base := "/"
|
||||||
@@ -13,54 +16,103 @@ func pathBuilder(page int, query string) string {
|
|||||||
return base
|
return base
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func humanize(t time.Time) string {
|
||||||
|
duration := time.Since(t)
|
||||||
|
switch {
|
||||||
|
case duration < time.Minute:
|
||||||
|
return "just now"
|
||||||
|
case duration < time.Hour:
|
||||||
|
return fmt.Sprintf("%dm ago", int(duration.Minutes()))
|
||||||
|
case duration < time.Hour*24:
|
||||||
|
return fmt.Sprintf("%dh ago", int(duration.Hours()))
|
||||||
|
default:
|
||||||
|
return t.Format("Jan 02")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
templ navLink(text string, page int, query string, active bool) {
|
||||||
|
if active {
|
||||||
|
<a
|
||||||
|
href={ templ.SafeURL(pathBuilder(page, query)) }
|
||||||
|
hx-get={ pathBuilder(page, query) }
|
||||||
|
hx-target="#main-content"
|
||||||
|
hx-push-url="true"
|
||||||
|
class="nav-link"
|
||||||
|
>{ text }</a>
|
||||||
|
} else {
|
||||||
|
<a class="nav-link disabled">{ text }</a>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
templ MainContent(records []Record, query string, page int, hasMore bool) {
|
templ MainContent(records []Record, query string, page int, hasMore bool) {
|
||||||
<div id="main-content" class="fade-in">
|
<title>
|
||||||
|
if query != "" {
|
||||||
|
IP History - { query }
|
||||||
|
} else if page > 1 {
|
||||||
|
IP History - Page { fmt.Sprint(page) }
|
||||||
|
} else {
|
||||||
|
IP History
|
||||||
|
}
|
||||||
|
</title>
|
||||||
|
<div id="main-content">
|
||||||
|
if query != "" {
|
||||||
|
<div class="search-meta">
|
||||||
|
<span>Showing results for "<strong>{ query }</strong>"</span>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
hx-get="/"
|
||||||
|
hx-target="#main-content"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-on:click="document.querySelector('.search-input').value = ''"
|
||||||
|
>Clear Search</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
if page == 1 && query == "" && len(records) > 0 {
|
if page == 1 && query == "" && len(records) > 0 {
|
||||||
<section class="current-ip-card">
|
<section class="current-ip-card">
|
||||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem;">Current Public IP</div>
|
<div>Current Public IP</div>
|
||||||
<div class="ip-display">{ records[0].IP }</div>
|
<div class="ip-display" onclick="copyToClipboard(this.innerText, this)">{ records[0].IP }</div>
|
||||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
|
<div>{ records[0].Timestamp.Format("Jan 02, 15:04:05 MST") } ({ humanize(records[0].Timestamp) })</div>
|
||||||
{ records[0].Timestamp.Format("Jan 02, 15:04:05 MST") }
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
}
|
}
|
||||||
|
if len(records) > 0 {
|
||||||
<table class="history-table">
|
<table class="history-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr><th>Timestamp</th><th>IP Address</th></tr>
|
<tr>
|
||||||
|
<th scope="col">Timestamp</th>
|
||||||
|
<th scope="col">IP Address</th>
|
||||||
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
for _, r := range records {
|
for _, r := range records {
|
||||||
<tr>
|
<tr>
|
||||||
<td style="color: var(--text-muted);">{ r.Timestamp.Format("2006-01-02 15:04:05") }</td>
|
<td>
|
||||||
<td style="font-family: ui-monospace, monospace; font-weight: 500;">{ r.IP }</td>
|
{ r.Timestamp.Format("2006-01-02 15:04:05") }
|
||||||
|
<span class="time-relative">{ humanize(r.Timestamp) }</span>
|
||||||
|
</td>
|
||||||
|
<td class="copyable" onclick="copyToClipboard(this.innerText, this)">{ r.IP }</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
} else {
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>No IP found matching your search.</p>
|
||||||
|
if query != "" {
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-ghost"
|
||||||
|
hx-get="/"
|
||||||
|
hx-target="#main-content"
|
||||||
|
hx-push-url="true"
|
||||||
|
hx-on:click="document.querySelector('.search-input').value = ''"
|
||||||
|
>Return to Home</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
if page > 1 {
|
@navLink("← Previous", page-1, query, page > 1)
|
||||||
<a
|
<span>Page { fmt.Sprint(page) }</span>
|
||||||
href={ templ.SafeURL(pathBuilder(page-1, query)) }
|
@navLink("Next →", page+1, query, hasMore)
|
||||||
hx-get={ pathBuilder(page-1, query) }
|
|
||||||
hx-target="#main-content"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="nav-link"
|
|
||||||
>← Previous</a>
|
|
||||||
} else {
|
|
||||||
<a class="nav-link disabled">← Previous</a>
|
|
||||||
}
|
|
||||||
<span style="font-size: 0.875rem; color: var(--text-muted);">Page { fmt.Sprint(page) }</span>
|
|
||||||
if hasMore {
|
|
||||||
<a
|
|
||||||
href={ templ.SafeURL(pathBuilder(page+1, query)) }
|
|
||||||
hx-get={ pathBuilder(page+1, query) }
|
|
||||||
hx-target="#main-content"
|
|
||||||
hx-push-url="true"
|
|
||||||
class="nav-link"
|
|
||||||
>Next →</a>
|
|
||||||
} else {
|
|
||||||
<a class="nav-link disabled">Next →</a>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@@ -73,43 +125,53 @@ templ Page(records []Record, query string, page int, hasMore bool) {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>IP History</title>
|
<title>IP History</title>
|
||||||
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
|
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
|
||||||
<script src="/assets/htmx.min.js"></script>
|
<script src="/assets/htmx.min.js" defer></script>
|
||||||
<style>
|
<link rel="stylesheet" type="text/css" href="/assets/style.css"/>
|
||||||
:root { --bg: #0a0a0c; --card: #16161a; --border: #2d2d33; --text: #ececed; --text-muted: #94949e; --primary: #3b82f6; }
|
<script>
|
||||||
html { scrollbar-gutter: stable; overflow-y: auto; }
|
function copyToClipboard(text, el) {
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
navigator.clipboard.writeText(text);
|
||||||
body { font-family: ui-sans-serif, system-ui, sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.6; padding: 2rem 1rem; }
|
el.classList.add("copied");
|
||||||
.container { max-width: 800px; margin-inline: auto; }
|
setTimeout(() => {
|
||||||
header { margin-bottom: 2.5rem; }
|
el.classList.remove("copied");
|
||||||
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }
|
}, 1000);
|
||||||
a.title-link { text-decoration: none; color: inherit; display: inline-block; }
|
}
|
||||||
a.title-link:hover h1 { color: var(--primary); }
|
|
||||||
.search-form { margin-bottom: 2rem; display: flex; gap: 0.5rem; }
|
document.addEventListener('keydown', function(e) {
|
||||||
.search-input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; color: var(--text); font-size: 1rem; }
|
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||||
.search-input:focus { outline: none; border-color: var(--primary); }
|
e.preventDefault();
|
||||||
.btn-search { background: var(--primary); color: white; border: none; padding: 0 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; }
|
document.querySelector('.search-input').focus();
|
||||||
.current-ip-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; }
|
}
|
||||||
.ip-display { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 700; color: var(--primary); }
|
});
|
||||||
.history-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
</script>
|
||||||
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); }
|
|
||||||
th { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.02); }
|
|
||||||
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
|
|
||||||
.nav-link { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; font-size: 0.875rem; }
|
|
||||||
.nav-link:hover { border-color: var(--primary); }
|
|
||||||
.nav-link.disabled { opacity: 0.2; pointer-events: none; }
|
|
||||||
.fade-in { animation: fadeIn 0.15s ease-out; }
|
|
||||||
@keyframes fadeIn { from { opacity: 0.5; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body hx-boost="true">
|
<body>
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<header>
|
<header>
|
||||||
<a href="/" hx-boost="false" class="title-link"><h1>IP History</h1></a>
|
<a href="/" class="title-link"><h1>IP History</h1></a>
|
||||||
<p style="color: var(--text-muted); font-size: 0.875rem;">A simple timeline of your public IP changes</p>
|
<p>A simple timeline of your public IP changes</p>
|
||||||
</header>
|
</header>
|
||||||
<form class="search-form" hx-get="/" hx-target="#main-content" hx-push-url="true">
|
<form class="search-form" hx-get="/" hx-target="#main-content" hx-push-url="true" hx-sync="closest form:abort">
|
||||||
<input type="text" name="q" class="search-input" placeholder="Search..." value={ query } autocomplete="off"/>
|
<div class="search-wrapper">
|
||||||
<button type="submit" class="btn-search">Search</button>
|
<input
|
||||||
|
type="text"
|
||||||
|
name="q"
|
||||||
|
class="search-input"
|
||||||
|
placeholder="Search IPs... (Press '/' to focus)"
|
||||||
|
value={ query }
|
||||||
|
autocomplete="off"
|
||||||
|
hx-get="/"
|
||||||
|
hx-trigger="keyup changed delay:300ms, search"
|
||||||
|
hx-target="#main-content"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="clear-input"
|
||||||
|
hx-get="/"
|
||||||
|
hx-target="#main-content"
|
||||||
|
hx-push-url="true"
|
||||||
|
onclick="this.previousElementSibling.value = ''; this.previousElementSibling.focus();"
|
||||||
|
>×</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@MainContent(records, query, page, hasMore)
|
@MainContent(records, query, page, hasMore)
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user