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
|
||||
|
||||
import "fmt"
|
||||
import (
|
||||
"fmt"
|
||||
"time"
|
||||
)
|
||||
|
||||
func pathBuilder(page int, query string) string {
|
||||
base := "/"
|
||||
@@ -13,54 +16,103 @@ func pathBuilder(page int, query string) string {
|
||||
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) {
|
||||
<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 {
|
||||
<section class="current-ip-card">
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem;">Current Public IP</div>
|
||||
<div class="ip-display">{ records[0].IP }</div>
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
|
||||
{ records[0].Timestamp.Format("Jan 02, 15:04:05 MST") }
|
||||
</div>
|
||||
<div>Current Public IP</div>
|
||||
<div class="ip-display" onclick="copyToClipboard(this.innerText, this)">{ records[0].IP }</div>
|
||||
<div>{ records[0].Timestamp.Format("Jan 02, 15:04:05 MST") } ({ humanize(records[0].Timestamp) })</div>
|
||||
</section>
|
||||
}
|
||||
if len(records) > 0 {
|
||||
<table class="history-table">
|
||||
<thead>
|
||||
<tr><th>Timestamp</th><th>IP Address</th></tr>
|
||||
<tr>
|
||||
<th scope="col">Timestamp</th>
|
||||
<th scope="col">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
for _, r := range records {
|
||||
<tr>
|
||||
<td style="color: var(--text-muted);">{ r.Timestamp.Format("2006-01-02 15:04:05") }</td>
|
||||
<td style="font-family: ui-monospace, monospace; font-weight: 500;">{ r.IP }</td>
|
||||
<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>
|
||||
}
|
||||
</tbody>
|
||||
</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">
|
||||
if page > 1 {
|
||||
<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"
|
||||
>← 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>
|
||||
}
|
||||
@navLink("← Previous", page-1, query, page > 1)
|
||||
<span>Page { fmt.Sprint(page) }</span>
|
||||
@navLink("Next →", page+1, query, hasMore)
|
||||
</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"/>
|
||||
<title>IP History</title>
|
||||
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
|
||||
<script src="/assets/htmx.min.js"></script>
|
||||
<style>
|
||||
: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; }
|
||||
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }
|
||||
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; }
|
||||
.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; }
|
||||
.search-input:focus { outline: none; border-color: var(--primary); }
|
||||
.btn-search { background: var(--primary); color: white; border: none; padding: 0 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; }
|
||||
.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; }
|
||||
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>
|
||||
<script src="/assets/htmx.min.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/style.css"/>
|
||||
<script>
|
||||
function copyToClipboard(text, el) {
|
||||
navigator.clipboard.writeText(text);
|
||||
el.classList.add("copied");
|
||||
setTimeout(() => {
|
||||
el.classList.remove("copied");
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
document.querySelector('.search-input').focus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body hx-boost="true">
|
||||
<body>
|
||||
<main class="container">
|
||||
<header>
|
||||
<a href="/" hx-boost="false" 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>
|
||||
<a href="/" class="title-link"><h1>IP History</h1></a>
|
||||
<p>A simple timeline of your public IP changes</p>
|
||||
</header>
|
||||
<form class="search-form" hx-get="/" hx-target="#main-content" hx-push-url="true">
|
||||
<input type="text" name="q" class="search-input" placeholder="Search..." value={ query } autocomplete="off"/>
|
||||
<button type="submit" class="btn-search">Search</button>
|
||||
<form class="search-form" hx-get="/" hx-target="#main-content" hx-push-url="true" hx-sync="closest form:abort">
|
||||
<div class="search-wrapper">
|
||||
<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>
|
||||
@MainContent(records, query, page, hasMore)
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user