Compare commits
10
Commits
c31ba229af
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 Justin
|
4260f9350c | ||
|
Justin
|
b7367f7e35 | ||
|
Justin
|
46987b967e | ||
|
Justin
|
64020603e1 | ||
 JustinandClaude Opus 5.5
|
3d9c5c4b2b | ||
|
Justin
|
38f38c89fe | ||
|
Justin
|
ac08a5b7e5 | ||
|
Justin
|
a60a44aa82 | ||
|
Justin
|
2d96cd70a0 | ||
|
Justin
|
5b35c52d58 |
No files matched your search
@@ -3,11 +3,7 @@
|
||||
"configurations": [
|
||||
{
|
||||
"name": "static-site",
|
||||
<<<<<<< HEAD
|
||||
"runtimeExecutable": "C:\\Users\\justi\\AppData\\Local\\Programs\\Python\\Python312\\python.exe",
|
||||
=======
|
||||
"runtimeExecutable": "python",
|
||||
>>>>>>> 6cea0312d23f660964b44ad3b2a6f18619d0b10b
|
||||
"runtimeArgs": ["-m", "http.server", "8123"],
|
||||
"port": 8123
|
||||
}
|
||||
|
||||
Executable → Regular
File mode changed.
@@ -1,13 +1,5 @@
|
||||
/*
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
Content-Security-Policy: default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self' https://cloudflareinsights.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests
|
||||
=======
|
||||
Content-Security-Policy: default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://ki5bhv.com data:; connect-src 'self' https://cloudflareinsights.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests
|
||||
>>>>>>> c7a10ae71906680d14e62b25c702ac21e5067a7f
|
||||
=======
|
||||
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://ki5bhv.com data:; connect-src 'self' https://cloudflareinsights.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests
|
||||
>>>>>>> 6cea0312d23f660964b44ad3b2a6f18619d0b10b
|
||||
X-Content-Type-Options: nosniff
|
||||
X-Frame-Options: DENY
|
||||
Referrer-Policy: strict-origin-when-cross-origin
|
||||
|
||||
+576
@@ -0,0 +1,576 @@
|
||||
:root {
|
||||
--bg: #0a0c10;
|
||||
--surface: #111418;
|
||||
--surface2: #181c22;
|
||||
--border: #1e2530;
|
||||
--green: #00ff88;
|
||||
--green2: #00cc6a;
|
||||
--amber: #ffaa00;
|
||||
--red: #ff4455;
|
||||
--blue: #4499ff;
|
||||
--cyan: #00ddff;
|
||||
--text: #c8d8e8;
|
||||
--muted: #5a7080;
|
||||
--font-mono: 'Share Tech Mono', monospace;
|
||||
--font-display: 'Orbitron', sans-serif;
|
||||
--font-body: 'Barlow', sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 300;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Scanline overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.07) 2px,
|
||||
rgba(0,0,0,0.07) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
header {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
|
||||
animation: scanH 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanH {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.callsign-block {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.callsign {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 900;
|
||||
color: var(--green);
|
||||
text-shadow: 0 0 30px rgba(0,255,136,0.5), 0 0 60px rgba(0,255,136,0.2);
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.op-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-val {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
text-shadow: 0 0 20px rgba(255,170,0,0.4);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status-lbl {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.online-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--green);
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid var(--green);
|
||||
border-radius: 2px;
|
||||
background: rgba(0,255,136,0.05);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 8px var(--green);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
/* ─── NAV ─── */
|
||||
nav {
|
||||
background: var(--surface2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
padding: 0.9rem 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-btn:hover { color: var(--text); }
|
||||
.nav-btn.active { color: var(--green); border-bottom-color: var(--green); }
|
||||
|
||||
/* ─── MAIN ─── */
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--red);
|
||||
border-radius: 4px;
|
||||
color: var(--red);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.log-error[hidden] { display: none; }
|
||||
|
||||
.section { display: none; }
|
||||
.section.active { display: block; }
|
||||
|
||||
/* ─── DASHBOARD ─── */
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
|
||||
.card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
|
||||
.card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
|
||||
.card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
|
||||
.card.red::before { background: linear-gradient(90deg, var(--red), transparent); }
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bar-chart { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
|
||||
.bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 40px;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
height: 16px;
|
||||
background: var(--surface2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 1s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
|
||||
.bar-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.country-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.country-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.country-name { color: var(--text); }
|
||||
.country-count {
|
||||
color: var(--amber);
|
||||
background: rgba(255,170,0,0.1);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 2px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* ─── ACTIVITY CHART ─── */
|
||||
.activity-card { grid-column: 1 / -1; }
|
||||
|
||||
#activityCanvas {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ─── LOGBOOK TABLE ─── */
|
||||
.log-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
padding: 0.5rem 1rem;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus { border-color: var(--green); }
|
||||
.search-input::placeholder { color: var(--muted); }
|
||||
|
||||
.filter-select {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
padding: 0.5rem 0.75rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select option { background: var(--surface2); }
|
||||
|
||||
.log-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: var(--surface2);
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
thead th:hover { color: var(--green); }
|
||||
thead th.sort-asc::after { content: ' ▲'; font-size: 0.6rem; }
|
||||
thead th.sort-desc::after { content: ' ▼'; font-size: 0.6rem; }
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid rgba(30,37,48,0.5);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
tbody tr:hover { background: rgba(0,255,136,0.03); }
|
||||
|
||||
tbody td {
|
||||
padding: 0.6rem 1rem;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.call-cell {
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.band-badge {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 2px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.band-20M, .band-20m { background: rgba(68,153,255,0.15); color: var(--blue); }
|
||||
.band-40M, .band-40m { background: rgba(0,255,136,0.12); color: var(--green); }
|
||||
.band-80M, .band-80m { background: rgba(255,68,85,0.12); color: var(--red); }
|
||||
.band-10M, .band-10m { background: rgba(0,221,255,0.12); color: var(--cyan); }
|
||||
.band-default { background: rgba(90,112,128,0.2); color: var(--muted); }
|
||||
|
||||
.mode-cell { color: var(--amber); font-size: 0.75rem; letter-spacing: 0.1em; }
|
||||
|
||||
.lotw-y { color: var(--green); }
|
||||
.lotw-n { color: var(--muted); }
|
||||
|
||||
.rst-cell { color: var(--text); font-size: 0.75rem; }
|
||||
|
||||
.dist-cell { color: var(--muted); font-size: 0.75rem; }
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover { border-color: var(--green); color: var(--green); }
|
||||
.page-btn.active { background: rgba(0,255,136,0.1); border-color: var(--green); color: var(--green); }
|
||||
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
|
||||
.page-info { color: var(--muted); padding: 0.4rem 0.5rem; }
|
||||
|
||||
/* ─── ABOUT ─── */
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.info-block { margin-bottom: 1.5rem; }
|
||||
|
||||
.info-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1.1rem;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-value a { color: var(--cyan); text-decoration: none; }
|
||||
.info-value a:hover { text-decoration: underline; }
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
background: var(--surface2);
|
||||
}
|
||||
|
||||
/* ─── SCROLLBAR ─── */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface2); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 3rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
footer span { color: var(--green); }
|
||||
|
||||
/* ─── LOADING ─── */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px; height: 16px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.header-inner { padding: 1rem 0; }
|
||||
.callsign { font-size: 2rem; }
|
||||
.status-val { font-size: 1.2rem; }
|
||||
main { padding: 1rem; }
|
||||
.log-controls { gap: 0.5rem; }
|
||||
.nav-btn { padding: 0.75rem 1rem; font-size: 0.7rem; }
|
||||
}
|
||||
|
||||
Executable → Regular
File mode changed.
+2114
File diff suppressed because it is too large.
Load diff
Executable → Regular
File mode changed.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Executable → Regular
File mode changed.
|
Before Width: | Height: | Size: 473 B After Width: | Height: | Size: 473 B |
Executable → Regular
File mode changed.
|
Before Width: | Height: | Size: 826 B After Width: | Height: | Size: 826 B |
Executable → Regular
File mode changed.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Executable → Regular
File mode changed.
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
+9
-22
@@ -6,16 +6,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; connect-src 'self' https://cloudflareinsights.com; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests" />
|
||||
=======
|
||||
>>>>>>> c7a10ae71906680d14e62b25c702ac21e5067a7f
|
||||
=======
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' https://ki5bhv.com data:; connect-src 'self' https://cloudflareinsights.com; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests" />
|
||||
>>>>>>> 6cea0312d23f660964b44ad3b2a6f18619d0b10b
|
||||
<title>Justin Frasier | Infrastructure Administrator</title>
|
||||
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%230f1218'/%3E%3Ctext x='3' y='11' font-family='IBM Plex Mono,Courier New,monospace' font-size='6' fill='%234a5568'%3E~$%3C/text%3E%3Ctext x='2' y='27' font-family='IBM Plex Mono,Courier New,monospace' font-size='19' font-weight='600' fill='%2322c55e'%3Ejf%3C/text%3E%3C/svg%3E" />
|
||||
@@ -34,11 +24,7 @@
|
||||
|
||||
<!-- ── Sidebar ── -->
|
||||
<aside>
|
||||
<<<<<<< HEAD
|
||||
<img class="profile-photo" src="./photo/justin1.jpg" alt="Justin Frasier">
|
||||
=======
|
||||
<img class="profile-photo" src="https://ki5bhv.com/photo/justin1.jpg" alt="Justin Frasier">
|
||||
>>>>>>> c7a10ae71906680d14e62b25c702ac21e5067a7f
|
||||
<div class="profile-name">Justin Frasier</div>
|
||||
<div class="profile-title">Infrastructure Administrator</div>
|
||||
<div class="profile-loc">📍 Bossier City, LA</div>
|
||||
@@ -85,6 +71,7 @@
|
||||
<span class="tag blue">Azure AD</span>
|
||||
<span class="tag blue">Docker</span>
|
||||
<span class="tag blue">Proxmox VE</span>
|
||||
<span class="tag blue">VMware VSphere</span>
|
||||
<span class="tag blue">Web Design</span>
|
||||
<span class="tag">Self-hosted Infrastructure</span>
|
||||
<span class="tag">FCC K5BSS</span>
|
||||
@@ -269,8 +256,14 @@
|
||||
<div class="skill-cell"><span class="skill-icon">▸</span>Crisis Management</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="skills-subheading">Home Lab</div>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-cell"><span class="skill-icon">▸</span>Docker</div>
|
||||
<div class="skill-cell"><span class="skill-icon">▸</span></div>
|
||||
<div class="skill-cell"><span class="skill-icon">▸</span>Corporate Security</div>
|
||||
<div class="skill-cell"><span class="skill-icon">▸</span>Corporate Security</div>
|
||||
</section>
|
||||
|
||||
-->
|
||||
<!-- Education -->
|
||||
<section id="education">
|
||||
<h2><span class="hash">#</span>education</h2>
|
||||
@@ -371,17 +364,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<span style="color:var(--accent)">$</span> site built by Justin Frasier · k5bss.com ·
|
||||
2026
|
||||
<span style="color:var(--accent)">$</span> site built by Justin Frasier · k5bss.com · 2026
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="js/main.js" defer></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+318
@@ -0,0 +1,318 @@
|
||||
// ─── DATA ───────────────────────────────────────────────────
|
||||
let ALL_DATA = [];
|
||||
let filteredData = [];
|
||||
let sortKey = 'date';
|
||||
let sortDir = -1; // -1 = desc
|
||||
let currentPage = 1;
|
||||
const PAGE_SIZE = 50;
|
||||
let logUnavailable = false;
|
||||
|
||||
// ─── FULL LOG ────────────────────────────────────────────────
|
||||
const FULL_LOG_URL = 'data/k5bss-log.json';
|
||||
|
||||
async function loadFullLog() {
|
||||
try {
|
||||
const res = await fetch(FULL_LOG_URL);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return await res.json();
|
||||
} catch (err) {
|
||||
console.warn('Could not load full log:', err);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const log = await loadFullLog();
|
||||
logUnavailable = !log;
|
||||
ALL_DATA = log || [];
|
||||
filteredData = [...ALL_DATA];
|
||||
|
||||
if (logUnavailable) {
|
||||
document.getElementById('log-error').hidden = false;
|
||||
renderTable();
|
||||
return;
|
||||
}
|
||||
|
||||
// Update stats
|
||||
const countries = new Set(ALL_DATA.map(r => r.country).filter(Boolean));
|
||||
const states = new Set(ALL_DATA.filter(r => r.country === 'United States').map(r => r.state).filter(Boolean));
|
||||
document.getElementById('stat-qso').textContent = ALL_DATA.length.toLocaleString();
|
||||
document.getElementById('stat-dxcc').textContent = countries.size;
|
||||
document.getElementById('stat-states').textContent = states.size;
|
||||
|
||||
buildDashboard();
|
||||
populateFilters();
|
||||
renderTable();
|
||||
}
|
||||
|
||||
// ─── DASHBOARD ───────────────────────────────────────────────
|
||||
function buildDashboard() {
|
||||
// Modes
|
||||
const modes = countBy(ALL_DATA, 'mode');
|
||||
const topModes = Object.entries(modes).sort((a,b)=>b[1]-a[1]).slice(0,7);
|
||||
const maxMode = topModes[0][1];
|
||||
const modesEl = document.getElementById('modes-chart');
|
||||
const modeColors = { FT8:'#ffaa00', FT4:'#ffcc44', DIG:'#ff8800', USB:'#4499ff', LSB:'#66aaff', SSB:'#88bbff', RTTY:'#ff4455' };
|
||||
modesEl.innerHTML = topModes.map(([m, c]) => `
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">${m}</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:0%;background:${modeColors[m]||'#888'}" data-target="${(c/maxMode*100).toFixed(1)}"></div></div>
|
||||
<div class="bar-count">${c}</div>
|
||||
</div>`).join('');
|
||||
|
||||
// Bands
|
||||
const bands = countBy(ALL_DATA, 'band');
|
||||
const topBands = Object.entries(bands).sort((a,b)=>b[1]-a[1]).slice(0,8);
|
||||
const maxBand = topBands[0][1];
|
||||
const bandEl = document.getElementById('bands-chart');
|
||||
const bandColors = { '20M':'#4499ff','40M':'#00ff88','80M':'#ff4455','10M':'#00ddff','30M':'#88aaff','17M':'#aaddff','15M':'#ffaaff','12M':'#ffdd88' };
|
||||
bandEl.innerHTML = topBands.map(([b, c]) => `
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">${b}</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:0%;background:${bandColors[b]||'#888'}" data-target="${(c/maxBand*100).toFixed(1)}"></div></div>
|
||||
<div class="bar-count">${c}</div>
|
||||
</div>`).join('');
|
||||
|
||||
// Countries
|
||||
const countries = countBy(ALL_DATA, 'country');
|
||||
const topCountries = Object.entries(countries).sort((a,b)=>b[1]-a[1]).slice(0,20);
|
||||
const ctEl = document.getElementById('countries-list');
|
||||
ctEl.innerHTML = topCountries.map(([c,n]) => `
|
||||
<div class="country-row">
|
||||
<span class="country-name">${c||'Unknown'}</span>
|
||||
<span class="country-count">${n}</span>
|
||||
</div>`).join('');
|
||||
|
||||
// Animate bars after a tick
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.bar-fill').forEach(el => {
|
||||
el.style.width = el.dataset.target + '%';
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Activity chart
|
||||
drawActivityChart();
|
||||
}
|
||||
|
||||
function drawActivityChart() {
|
||||
if (!ALL_DATA.length) return;
|
||||
const canvas = document.getElementById('activityCanvas');
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const W = canvas.parentElement.offsetWidth - 48;
|
||||
const H = 120;
|
||||
canvas.width = W * dpr;
|
||||
canvas.height = H * dpr;
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
// Group by year-month
|
||||
const monthly = {};
|
||||
ALL_DATA.forEach(r => {
|
||||
if (!r.date) return;
|
||||
const key = r.date.slice(0,7);
|
||||
monthly[key] = (monthly[key]||0) + 1;
|
||||
});
|
||||
const keys = Object.keys(monthly).sort();
|
||||
const vals = keys.map(k => monthly[k]);
|
||||
const max = Math.max(...vals);
|
||||
|
||||
const pad = { l: 10, r: 10, t: 15, b: 30 };
|
||||
const chartW = W - pad.l - pad.r;
|
||||
const chartH = H - pad.t - pad.b;
|
||||
const barW = Math.max(2, (chartW / keys.length) - 1);
|
||||
|
||||
ctx.clearRect(0,0,W,H);
|
||||
|
||||
// Grid line
|
||||
ctx.strokeStyle = 'rgba(30,37,48,0.8)';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pad.l, pad.t + chartH);
|
||||
ctx.lineTo(W - pad.r, pad.t + chartH);
|
||||
ctx.stroke();
|
||||
|
||||
// Bars
|
||||
keys.forEach((k, i) => {
|
||||
const x = pad.l + i * (chartW / keys.length);
|
||||
const h = (vals[i] / max) * chartH;
|
||||
const y = pad.t + chartH - h;
|
||||
const grad = ctx.createLinearGradient(0, y, 0, y + h);
|
||||
grad.addColorStop(0, 'rgba(0,255,136,0.9)');
|
||||
grad.addColorStop(1, 'rgba(0,255,136,0.15)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(x, y, barW, h);
|
||||
});
|
||||
|
||||
// X labels (every 6 months)
|
||||
ctx.fillStyle = 'rgba(90,112,128,0.9)';
|
||||
ctx.font = `${9 * dpr / dpr}px 'Share Tech Mono', monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
keys.forEach((k, i) => {
|
||||
if (i % 6 === 0) {
|
||||
const x = pad.l + i * (chartW / keys.length) + barW/2;
|
||||
ctx.fillText(k, x, H - 8);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── TABLE ───────────────────────────────────────────────────
|
||||
function populateFilters() {
|
||||
const bands = [...new Set(ALL_DATA.map(r=>r.band).filter(Boolean))].sort();
|
||||
const modes = [...new Set(ALL_DATA.map(r=>r.mode).filter(Boolean))].sort();
|
||||
const bandSel = document.getElementById('filter-band');
|
||||
const modeSel = document.getElementById('filter-mode');
|
||||
bands.forEach(b => { const o = document.createElement('option'); o.value=b; o.text=b; bandSel.appendChild(o); });
|
||||
modes.forEach(m => { const o = document.createElement('option'); o.value=m; o.text=m; modeSel.appendChild(o); });
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const q = document.getElementById('search-input').value.trim().toLowerCase();
|
||||
const band = document.getElementById('filter-band').value;
|
||||
const mode = document.getElementById('filter-mode').value;
|
||||
const lotw = document.getElementById('filter-lotw').value;
|
||||
|
||||
filteredData = ALL_DATA.filter(r => {
|
||||
if (band && r.band !== band) return false;
|
||||
if (mode && r.mode !== mode) return false;
|
||||
if (lotw && r.lotw !== lotw) return false;
|
||||
if (q) {
|
||||
const hay = [r.call, r.name, r.country, r.qth, r.state, r.grid].join(' ').toLowerCase();
|
||||
if (!hay.includes(q)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function sortTable(key) {
|
||||
if (sortKey === key) sortDir *= -1;
|
||||
else { sortKey = key; sortDir = key === 'date' || key === 'time' ? -1 : 1; }
|
||||
|
||||
filteredData.sort((a,b) => {
|
||||
let av = a[key]||'', bv = b[key]||'';
|
||||
if (key === 'dist') { av = parseInt(av)||0; bv = parseInt(bv)||0; }
|
||||
if (av < bv) return -sortDir;
|
||||
if (av > bv) return sortDir;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Update header indicators
|
||||
document.querySelectorAll('thead th').forEach(th => {
|
||||
th.classList.remove('sort-asc','sort-desc');
|
||||
});
|
||||
const headers = ['call','name','date','time','band','mode','rst_sent','country','dist','lotw'];
|
||||
const idx = headers.indexOf(key);
|
||||
if (idx >= 0) {
|
||||
const ths = document.querySelectorAll('thead th');
|
||||
ths[idx].classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
|
||||
}
|
||||
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById('log-tbody');
|
||||
const total = filteredData.length;
|
||||
const pages = Math.ceil(total / PAGE_SIZE);
|
||||
const start = (currentPage - 1) * PAGE_SIZE;
|
||||
const slice = filteredData.slice(start, start + PAGE_SIZE);
|
||||
|
||||
document.getElementById('log-meta').textContent =
|
||||
`${total.toLocaleString()} QSOs · Page ${currentPage} of ${Math.max(1,pages)}`;
|
||||
|
||||
if (slice.length === 0) {
|
||||
const msg = logUnavailable ? 'LOG UNAVAILABLE — TRY AGAIN LATER' : 'NO CONTACTS FOUND';
|
||||
tbody.innerHTML = `<tr><td colspan="10" style="text-align:center;padding:2rem;color:var(--muted);font-family:var(--font-mono);font-size:0.8rem;">${msg}</td></tr>`;
|
||||
} else {
|
||||
tbody.innerHTML = slice.map(r => {
|
||||
const timeStr = r.time ? r.time.slice(0,2)+':'+r.time.slice(2,4) : '';
|
||||
const bandClass = `band-${r.band}`;
|
||||
const lotwClass = r.lotw === 'Y' ? 'lotw-y' : 'lotw-n';
|
||||
const lotwSym = r.lotw === 'Y' ? '✓' : '·';
|
||||
const rst = r.rst_sent && r.rst_rcvd ? `${r.rst_sent} / ${r.rst_rcvd}` : r.rst_sent || '';
|
||||
return `<tr>
|
||||
<td class="call-cell">${esc(r.call)}</td>
|
||||
<td>${esc(r.name ? titleCase(r.name) : '')}</td>
|
||||
<td>${esc(r.date)}</td>
|
||||
<td>${timeStr}Z</td>
|
||||
<td><span class="band-badge ${bandClass}">${esc(r.band)}</span></td>
|
||||
<td class="mode-cell">${esc(r.mode)}</td>
|
||||
<td class="rst-cell">${esc(rst)}</td>
|
||||
<td>${esc(r.country||'')}${r.state ? ' <span style="color:var(--muted)">'+esc(r.state)+'</span>' : ''}</td>
|
||||
<td class="dist-cell">${r.dist ? Number(r.dist).toLocaleString() : ''}</td>
|
||||
<td class="${lotwClass}" style="text-align:center">${lotwSym}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
renderPagination(pages);
|
||||
}
|
||||
|
||||
function renderPagination(pages) {
|
||||
const el = document.getElementById('pagination');
|
||||
if (pages <= 1) { el.innerHTML = ''; return; }
|
||||
|
||||
let html = `<button class="page-btn" onclick="goPage(${currentPage-1})" ${currentPage===1?'disabled':''}>‹ Prev</button>`;
|
||||
|
||||
const range = [];
|
||||
if (pages <= 7) {
|
||||
for (let i=1;i<=pages;i++) range.push(i);
|
||||
} else {
|
||||
range.push(1);
|
||||
if (currentPage > 3) range.push('...');
|
||||
for (let i=Math.max(2,currentPage-1); i<=Math.min(pages-1,currentPage+1); i++) range.push(i);
|
||||
if (currentPage < pages-2) range.push('...');
|
||||
range.push(pages);
|
||||
}
|
||||
|
||||
range.forEach(p => {
|
||||
if (p === '...') html += `<span class="page-info">…</span>`;
|
||||
else html += `<button class="page-btn ${p===currentPage?'active':''}" onclick="goPage(${p})">${p}</button>`;
|
||||
});
|
||||
|
||||
html += `<button class="page-btn" onclick="goPage(${currentPage+1})" ${currentPage===pages?'disabled':''}>Next ›</button>`;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
function goPage(p) {
|
||||
currentPage = p;
|
||||
renderTable();
|
||||
document.querySelector('.table-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
|
||||
}
|
||||
|
||||
// ─── HELPERS ─────────────────────────────────────────────────
|
||||
function countBy(arr, key) {
|
||||
return arr.reduce((acc, r) => {
|
||||
const v = r[key];
|
||||
if (v) acc[v] = (acc[v]||0)+1;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
|
||||
function titleCase(s) {
|
||||
return s.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
|
||||
}
|
||||
|
||||
function showSection(id, btn) {
|
||||
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
||||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById('section-' + id).classList.add('active');
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
window.addEventListener('load', init);
|
||||
window.addEventListener('resize', () => {
|
||||
if (document.getElementById('section-dashboard').classList.contains('active')) {
|
||||
drawActivityChart();
|
||||
}
|
||||
});
|
||||
Executable → Regular
+7
-866
@@ -16,570 +16,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Barlow:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0c10;
|
||||
--surface: #111418;
|
||||
--surface2: #181c22;
|
||||
--border: #1e2530;
|
||||
--green: #00ff88;
|
||||
--green2: #00cc6a;
|
||||
--amber: #ffaa00;
|
||||
--red: #ff4455;
|
||||
--blue: #4499ff;
|
||||
--cyan: #00ddff;
|
||||
--text: #c8d8e8;
|
||||
--muted: #5a7080;
|
||||
--font-mono: 'Share Tech Mono', monospace;
|
||||
--font-display: 'Orbitron', sans-serif;
|
||||
--font-body: 'Barlow', sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 300;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Scanline overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.07) 2px,
|
||||
rgba(0,0,0,0.07) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
header {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
|
||||
animation: scanH 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanH {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.callsign-block {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.callsign {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 900;
|
||||
color: var(--green);
|
||||
text-shadow: 0 0 30px rgba(0,255,136,0.5), 0 0 60px rgba(0,255,136,0.2);
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.op-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.header-status {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-val {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
text-shadow: 0 0 20px rgba(255,170,0,0.4);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status-lbl {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.online-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--green);
|
||||
padding: 0.4rem 1rem;
|
||||
border: 1px solid var(--green);
|
||||
border-radius: 2px;
|
||||
background: rgba(0,255,136,0.05);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 8px var(--green);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
/* ─── NAV ─── */
|
||||
nav {
|
||||
background: var(--surface2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
padding: 0.9rem 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-btn:hover { color: var(--text); }
|
||||
.nav-btn.active { color: var(--green); border-bottom-color: var(--green); }
|
||||
|
||||
/* ─── MAIN ─── */
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.section { display: none; }
|
||||
.section.active { display: block; }
|
||||
|
||||
/* ─── DASHBOARD ─── */
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
|
||||
.card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
|
||||
.card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
|
||||
.card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
|
||||
.card.red::before { background: linear-gradient(90deg, var(--red), transparent); }
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.bar-chart { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
|
||||
.bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 40px;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
height: 16px;
|
||||
background: var(--surface2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 1s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
|
||||
.bar-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.country-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.country-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.3rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.country-name { color: var(--text); }
|
||||
.country-count {
|
||||
color: var(--amber);
|
||||
background: rgba(255,170,0,0.1);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 2px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* ─── ACTIVITY CHART ─── */
|
||||
.activity-card { grid-column: 1 / -1; }
|
||||
|
||||
#activityCanvas {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ─── LOGBOOK TABLE ─── */
|
||||
.log-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
padding: 0.5rem 1rem;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus { border-color: var(--green); }
|
||||
.search-input::placeholder { color: var(--muted); }
|
||||
|
||||
.filter-select {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
padding: 0.5rem 0.75rem;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select option { background: var(--surface2); }
|
||||
|
||||
.log-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: var(--surface2);
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
thead th:hover { color: var(--green); }
|
||||
thead th.sort-asc::after { content: ' ▲'; font-size: 0.6rem; }
|
||||
thead th.sort-desc::after { content: ' ▼'; font-size: 0.6rem; }
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid rgba(30,37,48,0.5);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
tbody tr:hover { background: rgba(0,255,136,0.03); }
|
||||
|
||||
tbody td {
|
||||
padding: 0.6rem 1rem;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.call-cell {
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.band-badge {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 2px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.band-20M, .band-20m { background: rgba(68,153,255,0.15); color: var(--blue); }
|
||||
.band-40M, .band-40m { background: rgba(0,255,136,0.12); color: var(--green); }
|
||||
.band-80M, .band-80m { background: rgba(255,68,85,0.12); color: var(--red); }
|
||||
.band-10M, .band-10m { background: rgba(0,221,255,0.12); color: var(--cyan); }
|
||||
.band-default { background: rgba(90,112,128,0.2); color: var(--muted); }
|
||||
|
||||
.mode-cell { color: var(--amber); font-size: 0.75rem; letter-spacing: 0.1em; }
|
||||
|
||||
.lotw-y { color: var(--green); }
|
||||
.lotw-n { color: var(--muted); }
|
||||
|
||||
.rst-cell { color: var(--text); font-size: 0.75rem; }
|
||||
|
||||
.dist-cell { color: var(--muted); font-size: 0.75rem; }
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-btn:hover { border-color: var(--green); color: var(--green); }
|
||||
.page-btn.active { background: rgba(0,255,136,0.1); border-color: var(--green); color: var(--green); }
|
||||
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
|
||||
.page-info { color: var(--muted); padding: 0.4rem 0.5rem; }
|
||||
|
||||
/* ─── ABOUT ─── */
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.info-block { margin-bottom: 1.5rem; }
|
||||
|
||||
.info-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1.1rem;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-value a { color: var(--cyan); text-decoration: none; }
|
||||
.info-value a:hover { text-decoration: underline; }
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
color: var(--text);
|
||||
background: var(--surface2);
|
||||
}
|
||||
|
||||
/* ─── SCROLLBAR ─── */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--surface2); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 3rem;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
footer span { color: var(--green); }
|
||||
|
||||
/* ─── LOADING ─── */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px; height: 16px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.header-inner { padding: 1rem 0; }
|
||||
.callsign { font-size: 2rem; }
|
||||
.status-val { font-size: 1.2rem; }
|
||||
main { padding: 1rem; }
|
||||
.log-controls { gap: 0.5rem; }
|
||||
.nav-btn { padding: 0.75rem 1rem; font-size: 0.7rem; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/k5bss.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -593,7 +30,7 @@
|
||||
</div>
|
||||
<div class="header-status">
|
||||
<div class="status-item">
|
||||
<span class="status-val" id="stat-qso">2,112</span>
|
||||
<span class="status-val" id="stat-qso">—</span>
|
||||
<span class="status-lbl">QSOs Logged</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
@@ -622,6 +59,10 @@
|
||||
|
||||
<main>
|
||||
|
||||
<div class="log-error" id="log-error" role="alert" hidden>
|
||||
⚠ LOG UNAVAILABLE — The logbook could not be loaded. Try again later.
|
||||
</div>
|
||||
|
||||
<!-- DASHBOARD -->
|
||||
<div id="section-dashboard" class="section active">
|
||||
<div class="dash-grid">
|
||||
@@ -776,306 +217,6 @@
|
||||
LOGBOOK GENERATED FROM ADIF EXPORT
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// ─── DATA ───────────────────────────────────────────────────
|
||||
const RAW_DATA = [{"call":"WE2M","name":"ROBERT A HOGUE","date":"2021-01-24","time":"0553","band":"40M","mode":"FT8","rst_sent":"-20","rst_rcvd":"-10","country":"United States","state":"WA","qth":"E WENATCHEE","lotw":"Y","dist":"2782","grid":"CN97UJ"},{"call":"WD8AXA","name":"CHARLES D AGOSTI","date":"2021-01-24","time":"0555","band":"40M","mode":"FT8","rst_sent":"-07","rst_rcvd":"-11","country":"United States","state":"MI","qth":"PORTAGE","lotw":"N","dist":"1291","grid":"EN72ef"},{"call":"KG4IXS","name":"RICHARD A VAUGHAN","date":"2021-01-24","time":"0558","band":"40M","mode":"FT8","rst_sent":"+00","rst_rcvd":"-13","country":"United States","state":"VA","qth":"CHATHAM","lotw":"Y","dist":"1390","grid":"FM06HU"},{"call":"KE0DC","name":"","date":"2021-01-24","time":"0600","band":"40M","mode":"FT8","rst_sent":"-08","rst_rcvd":"-09","country":"United States","state":"CO","qth":"AURORA","lotw":"Y","dist":"1274","grid":"DM79OQ"},{"call":"KC0HHN","name":"","date":"2021-01-24","time":"0604","band":"40M","mode":"FT8","rst_sent":"-12","rst_rcvd":"-08","country":"United States","state":"IA","qth":"","lotw":"N","dist":"","grid":"EN31"},{"call":"WB0OEW","name":"JAMES D VOGT","date":"2021-01-24","time":"0606","band":"40M","mode":"FT8","rst_sent":"-10","rst_rcvd":"-15","country":"United States","state":"MO","qth":"CAMDENTON","lotw":"Y","dist":"747","grid":"EM37TH"},{"call":"N4JKO","name":"GARY E HORTON","date":"2021-01-24","time":"0608","band":"40M","mode":"FT8","rst_sent":"-12","rst_rcvd":"-15","country":"United States","state":"TN","qth":"","lotw":"N","dist":"","grid":"EM65RT"},{"call":"WW4LL","name":"LESTER P LEEPER","date":"2021-01-24","time":"0610","band":"40M","mode":"FT8","rst_sent":"-14","rst_rcvd":"-13","country":"United States","state":"GA","qth":"BOWDON","lotw":"Y","dist":"575","grid":"EM73DS"},{"call":"K0MBT","name":"MICHAEL B TEDESCO","date":"2021-01-24","time":"0612","band":"40M","mode":"FT8","rst_sent":"-09","rst_rcvd":"-18","country":"United States","state":"MN","qth":"SHAKOPEE","lotw":"Y","dist":"1247","grid":"EN34HE"},{"call":"WB4LHD","name":"ROY A MCDANIEL","date":"2021-01-24","time":"0618","band":"40M","mode":"FT8","rst_sent":"-14","rst_rcvd":"-12","country":"United States","state":"NC","qth":"SANFORD","lotw":"Y","dist":"1118","grid":"FM03HF"},{"call":"N0KJA","name":"FRANK O KORANDA","date":"2021-01-24","time":"0620","band":"40M","mode":"FT8","rst_sent":"-10","rst_rcvd":"-14","country":"United States","state":"KS","qth":"WICHITA","lotw":"Y","dist":"641","grid":"EM17PT"},{"call":"W9JML","name":"JAMES M LAURENDEAU","date":"2021-01-24","time":"0623","band":"40M","mode":"FT8","rst_sent":"-05","rst_rcvd":"-16","country":"United States","state":"IL","qth":"COLLINSVILLE","lotw":"Y","dist":"668","grid":"EM58GI"},{"call":"K9ADV","name":"DWIGHT A VANDERLINDEN","date":"2021-01-24","time":"0625","band":"40M","mode":"FT8","rst_sent":"-11","rst_rcvd":"-13","country":"United States","state":"IN","qth":"INDIANAPOLIS","lotw":"Y","dist":"929","grid":"EM79MF"},{"call":"WB8YYY","name":"ERNEST E MUENZER","date":"2021-01-24","time":"0628","band":"40M","mode":"FT8","rst_sent":"-10","rst_rcvd":"-05","country":"United States","state":"MI","qth":"","lotw":"Y","dist":"","grid":"EN72"},{"call":"KD2UKS","name":"RAYMOND JOSEPH MCDERMOTT","date":"2021-01-24","time":"0641","band":"40M","mode":"FT8","rst_sent":"-12","rst_rcvd":"-15","country":"United States","state":"NY","qth":"MASTIC","lotw":"N","dist":"1561","grid":"FN30HT"},{"call":"KD8IYI","name":"JEFFREY C WHITLEY","date":"2021-01-24","time":"0644","band":"40M","mode":"FT8","rst_sent":"-13","rst_rcvd":"-13","country":"United States","state":"OH","qth":"","lotw":"Y","dist":"","grid":"EM89LG"},{"call":"K9DW","name":"DAN WELBORN","date":"2021-01-24","time":"0647","band":"40M","mode":"FT8","rst_sent":"-09","rst_rcvd":"-06","country":"United States","state":"AL","qth":"DOTHAN","lotw":"Y","dist":"435","grid":"EM64SA"},{"call":"K8DO","name":"DEAN L OSTERMAN","date":"2021-01-24","time":"0649","band":"40M","mode":"FT8","rst_sent":"-11","rst_rcvd":"-10","country":"United States","state":"MI","qth":"ALLENDALE","lotw":"Y","dist":"1298","grid":"EN62OX"},{"call":"K6VMV","name":"VICTOR M VALADEZ","date":"2021-01-24","time":"0651","band":"40M","mode":"FT8","rst_sent":"-08","rst_rcvd":"-12","country":"United States","state":"CA","qth":"MANTECA","lotw":"N","dist":"1954","grid":"CM97KC"},{"call":"W0ULF","name":"MIKE WOLFE","date":"2021-01-24","time":"0653","band":"40M","mode":"FT8","rst_sent":"-11","rst_rcvd":"-13","country":"United States","state":"NE","qth":"OMAHA","lotw":"Y","dist":"1012","grid":"EN21WC"}];
|
||||
|
||||
// We'll load more data dynamically
|
||||
let ALL_DATA = [];
|
||||
let filteredData = [];
|
||||
let sortKey = 'date';
|
||||
let sortDir = -1; // -1 = desc
|
||||
let currentPage = 1;
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
// ─── FULL DATA EMBEDDED ──────────────────────────────────────
|
||||
// Data will be injected here
|
||||
const FULL_LOG = [{"call":"WE2M","name":"ROBERT A HOGUE","date":"2021-01-24","time":"0553","band":"40M","mode":"FT8","rst_sent":"-20","rst_rcvd":"-10","country":"United States","state":"WA","qth":"E WENATCHEE","lotw":"Y","dist":"2782","grid":"CN97UJ"},{"call":"WD8AXA","name":"CHARLES D AGOSTI","date":"2021-01-24","time":"0555","band":"40M","mode":"FT8","rst_sent":"-07","rst_rcvd":"-11","country":"United States","state":"MI","qth":"PORTAGE","lotw":"N","dist":"1291","grid":"EN72ef"},{"call":"KG4IXS","name":"RICHARD A VAUGHAN","date":"2021-01-24","time":"0558","band":"40M","mode":"FT8","rst_sent":"+00","rst_rcvd":"-13","country":"United States","state":"VA","qth":"CHATHAM","lotw":"Y","dist":"1390","grid":"FM06HU"},{"call":"KE0DC","name":"DOUGLAS J COMER","date":"2021-01-24","time":"0600","band":"40M","mode":"FT8","rst_sent":"-08","rst_rcvd":"-09","country":"United States","state":"CO","qth":"AURORA","lotw":"Y","dist":"1274","grid":"DM79OQ"},{"call":"KC2DUX","name":"John W Hamann, Jr","date":"2021-01-24","time":"0608","band":"40M","mode":"FT8","rst_sent":"-11","rst_rcvd":"-11","country":"United States","state":"NJ","qth":"Dennisville","lotw":"N","dist":"1850","grid":"FM29oe"},{"call":"N3XLS","name":"Joseph C Raymer","date":"2021-01-24","time":"0613","band":"40M","mode":"FT8","rst_sent":"-07","rst_rcvd":"-15","country":"United States","state":"PA","qth":"North Abington Twp","lotw":"Y","dist":"1880","grid":"FN21DN"},{"call":"HK1O","name":"Juan Guillermo Ochoa P","date":"2021-01-24","time":"0617","band":"40M","mode":"FT8","rst_sent":"-01","rst_rcvd":"-15","country":"Colombia","state":"","qth":"Puerto Colombia","lotw":"Y","dist":"3071","grid":"FK21NA"},{"call":"WJ9E","name":"Michael D Elder","date":"2021-01-24","time":"0645","band":"40M","mode":"FT8","rst_sent":"+05","rst_rcvd":"-14","country":"United States","state":"IN","qth":"Rushville","lotw":"Y","dist":"1081","grid":"EM79GO"},{"call":"K8TE","name":"WILLIAM A MADER, JR","date":"2021-01-24","time":"0647","band":"40M","mode":"FT8","rst_sent":"+06","rst_rcvd":"-05","country":"United States","state":"NM","qth":"RIO RANCHO","lotw":"Y","dist":"1230","grid":"DM65QG"},{"call":"N1UL","name":"ULRICH L ROHDE, PhD","date":"2021-01-24","time":"0703","band":"40M","mode":"FT8","rst_sent":"-08","rst_rcvd":"-11","country":"United States","state":"FL","qth":"MARCO ISLAND","lotw":"Y","dist":"1373","grid":"EL95DW"},{"call":"K9IHM","name":"JERROLD L JOHNSON","date":"2021-01-24","time":"0708","band":"40M","mode":"FT8","rst_sent":"+11","rst_rcvd":"+07","country":"United States","state":"TN","qth":"NEW MARKET","lotw":"Y","dist":"1010","grid":"EM86FC"},{"call":"WB7WUQ","name":"Malcolm A Clark","date":"2021-01-24","time":"0710","band":"40M","mode":"FT8","rst_sent":"-11","rst_rcvd":"-10","country":"United States","state":"WA","qth":"Inchelium","lotw":"Y","dist":"2714","grid":"DN08RG"},{"call":"N6AKO","name":"Luis Dimagiba","date":"2021-01-24","time":"0717","band":"40M","mode":"FT8","rst_sent":"-13","rst_rcvd":"+05","country":"United States","state":"CA","qth":"Arleta","lotw":"Y","dist":"2299","grid":"DM04SG"},{"call":"KC2DUX","name":"John W Hamann, Jr","date":"2021-01-24","time":"0719","band":"40M","mode":"FT8","rst_sent":"-01","rst_rcvd":"-04","country":"United States","state":"NJ","qth":"Dennisville","lotw":"Y","dist":"1850","grid":"FM29OE"},{"call":"KA9FOX","name":"SCOTT E NEADER","date":"2021-01-24","time":"0721","band":"40M","mode":"FT8","rst_sent":"+04","rst_rcvd":"+03","country":"United States","state":"WI","qth":"LA CROSSE","lotw":"Y","dist":"1271","grid":"EN43KS"},{"call":"KI3N","name":"Kenneth A Yates","date":"2021-01-24","time":"0723","band":"40M","mode":"FT8","rst_sent":"+00","rst_rcvd":"-03","country":"United States","state":"AL","qth":"Oxford","lotw":"Y","dist":"742","grid":"EM73CN"},{"call":"KA4NIV","name":"MAURICE E RICE, JR","date":"2021-01-24","time":"0725","band":"40M","mode":"FT8","rst_sent":"-07","rst_rcvd":"+07","country":"United States","state":"SC","qth":"SIMPSONVILLE","lotw":"Y","dist":"1087","grid":"EM84UT"},{"call":"KB1EFS","name":"Steven J Henchy","date":"2021-01-24","time":"0727","band":"40M","mode":"FT8","rst_sent":"-07","rst_rcvd":"-06","country":"United States","state":"MA","qth":"Franklin","lotw":"Y","dist":"2230","grid":"FN42HC"},{"call":"NR5G","name":"LEE E SWANSON","date":"2021-01-24","time":"0728","band":"40M","mode":"FT8","rst_sent":"+01","rst_rcvd":"-06","country":"United States","state":"GA","qth":"WARNER ROBINS","lotw":"N","dist":"943","grid":"EM82ep"},{"call":"KO4ARA","name":"David W Hunt, Jr","date":"2021-01-24","time":"0733","band":"40M","mode":"FT8","rst_sent":"-09","rst_rcvd":"-05","country":"United States","state":"VA","qth":"Annandale","lotw":"Y","dist":"1642","grid":"FM18JT"},{"call":"N7FN","name":"FRANKLIN B NORAGON","date":"2021-01-26","time":"1334","band":"20M","mode":"FT8","rst_sent":"+03","rst_rcvd":"-09","country":"United States","state":"AZ","qth":"Buckeye","lotw":"N","dist":"1765","grid":"DM33qq"},{"call":"N0DOW","name":"Richard WLine truncated
|
||||
|
||||
function init() {
|
||||
ALL_DATA = FULL_LOG.length ? FULL_LOG : RAW_DATA;
|
||||
filteredData = [...ALL_DATA];
|
||||
|
||||
// Update stats
|
||||
const countries = new Set(ALL_DATA.map(r => r.country).filter(Boolean));
|
||||
const states = new Set(ALL_DATA.filter(r => r.country === 'United States').map(r => r.state).filter(Boolean));
|
||||
document.getElementById('stat-dxcc').textContent = countries.size;
|
||||
document.getElementById('stat-states').textContent = states.size;
|
||||
|
||||
buildDashboard();
|
||||
populateFilters();
|
||||
renderTable();
|
||||
}
|
||||
|
||||
// ─── DASHBOARD ───────────────────────────────────────────────
|
||||
function buildDashboard() {
|
||||
// Modes
|
||||
const modes = countBy(ALL_DATA, 'mode');
|
||||
const topModes = Object.entries(modes).sort((a,b)=>b[1]-a[1]).slice(0,7);
|
||||
const maxMode = topModes[0][1];
|
||||
const modesEl = document.getElementById('modes-chart');
|
||||
const modeColors = { FT8:'#ffaa00', FT4:'#ffcc44', DIG:'#ff8800', USB:'#4499ff', LSB:'#66aaff', SSB:'#88bbff', RTTY:'#ff4455' };
|
||||
modesEl.innerHTML = topModes.map(([m, c]) => `
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">${m}</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:0%;background:${modeColors[m]||'#888'}" data-target="${(c/maxMode*100).toFixed(1)}"></div></div>
|
||||
<div class="bar-count">${c}</div>
|
||||
</div>`).join('');
|
||||
|
||||
// Bands
|
||||
const bands = countBy(ALL_DATA, 'band');
|
||||
const topBands = Object.entries(bands).sort((a,b)=>b[1]-a[1]).slice(0,8);
|
||||
const maxBand = topBands[0][1];
|
||||
const bandEl = document.getElementById('bands-chart');
|
||||
const bandColors = { '20M':'#4499ff','40M':'#00ff88','80M':'#ff4455','10M':'#00ddff','30M':'#88aaff','17M':'#aaddff','15M':'#ffaaff','12M':'#ffdd88' };
|
||||
bandEl.innerHTML = topBands.map(([b, c]) => `
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">${b}</div>
|
||||
<div class="bar-track"><div class="bar-fill" style="width:0%;background:${bandColors[b]||'#888'}" data-target="${(c/maxBand*100).toFixed(1)}"></div></div>
|
||||
<div class="bar-count">${c}</div>
|
||||
</div>`).join('');
|
||||
|
||||
// Countries
|
||||
const countries = countBy(ALL_DATA, 'country');
|
||||
const topCountries = Object.entries(countries).sort((a,b)=>b[1]-a[1]).slice(0,20);
|
||||
const ctEl = document.getElementById('countries-list');
|
||||
ctEl.innerHTML = topCountries.map(([c,n]) => `
|
||||
<div class="country-row">
|
||||
<span class="country-name">${c||'Unknown'}</span>
|
||||
<span class="country-count">${n}</span>
|
||||
</div>`).join('');
|
||||
|
||||
// Animate bars after a tick
|
||||
requestAnimationFrame(() => {
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.bar-fill').forEach(el => {
|
||||
el.style.width = el.dataset.target + '%';
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Activity chart
|
||||
drawActivityChart();
|
||||
}
|
||||
|
||||
function drawActivityChart() {
|
||||
const canvas = document.getElementById('activityCanvas');
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const W = canvas.parentElement.offsetWidth - 48;
|
||||
const H = 120;
|
||||
canvas.width = W * dpr;
|
||||
canvas.height = H * dpr;
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
// Group by year-month
|
||||
const monthly = {};
|
||||
ALL_DATA.forEach(r => {
|
||||
if (!r.date) return;
|
||||
const key = r.date.slice(0,7);
|
||||
monthly[key] = (monthly[key]||0) + 1;
|
||||
});
|
||||
const keys = Object.keys(monthly).sort();
|
||||
const vals = keys.map(k => monthly[k]);
|
||||
const max = Math.max(...vals);
|
||||
|
||||
const pad = { l: 10, r: 10, t: 15, b: 30 };
|
||||
const chartW = W - pad.l - pad.r;
|
||||
const chartH = H - pad.t - pad.b;
|
||||
const barW = Math.max(2, (chartW / keys.length) - 1);
|
||||
|
||||
ctx.clearRect(0,0,W,H);
|
||||
|
||||
// Grid line
|
||||
ctx.strokeStyle = 'rgba(30,37,48,0.8)';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pad.l, pad.t + chartH);
|
||||
ctx.lineTo(W - pad.r, pad.t + chartH);
|
||||
ctx.stroke();
|
||||
|
||||
// Bars
|
||||
keys.forEach((k, i) => {
|
||||
const x = pad.l + i * (chartW / keys.length);
|
||||
const h = (vals[i] / max) * chartH;
|
||||
const y = pad.t + chartH - h;
|
||||
const grad = ctx.createLinearGradient(0, y, 0, y + h);
|
||||
grad.addColorStop(0, 'rgba(0,255,136,0.9)');
|
||||
grad.addColorStop(1, 'rgba(0,255,136,0.15)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(x, y, barW, h);
|
||||
});
|
||||
|
||||
// X labels (every 6 months)
|
||||
ctx.fillStyle = 'rgba(90,112,128,0.9)';
|
||||
ctx.font = `${9 * dpr / dpr}px 'Share Tech Mono', monospace`;
|
||||
ctx.textAlign = 'center';
|
||||
keys.forEach((k, i) => {
|
||||
if (i % 6 === 0) {
|
||||
const x = pad.l + i * (chartW / keys.length) + barW/2;
|
||||
ctx.fillText(k, x, H - 8);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ─── TABLE ───────────────────────────────────────────────────
|
||||
function populateFilters() {
|
||||
const bands = [...new Set(ALL_DATA.map(r=>r.band).filter(Boolean))].sort();
|
||||
const modes = [...new Set(ALL_DATA.map(r=>r.mode).filter(Boolean))].sort();
|
||||
const bandSel = document.getElementById('filter-band');
|
||||
const modeSel = document.getElementById('filter-mode');
|
||||
bands.forEach(b => { const o = document.createElement('option'); o.value=b; o.text=b; bandSel.appendChild(o); });
|
||||
modes.forEach(m => { const o = document.createElement('option'); o.value=m; o.text=m; modeSel.appendChild(o); });
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const q = document.getElementById('search-input').value.trim().toLowerCase();
|
||||
const band = document.getElementById('filter-band').value;
|
||||
const mode = document.getElementById('filter-mode').value;
|
||||
const lotw = document.getElementById('filter-lotw').value;
|
||||
|
||||
filteredData = ALL_DATA.filter(r => {
|
||||
if (band && r.band !== band) return false;
|
||||
if (mode && r.mode !== mode) return false;
|
||||
if (lotw && r.lotw !== lotw) return false;
|
||||
if (q) {
|
||||
const hay = [r.call, r.name, r.country, r.qth, r.state, r.grid].join(' ').toLowerCase();
|
||||
if (!hay.includes(q)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function sortTable(key) {
|
||||
if (sortKey === key) sortDir *= -1;
|
||||
else { sortKey = key; sortDir = key === 'date' || key === 'time' ? -1 : 1; }
|
||||
|
||||
filteredData.sort((a,b) => {
|
||||
let av = a[key]||'', bv = b[key]||'';
|
||||
if (key === 'dist') { av = parseInt(av)||0; bv = parseInt(bv)||0; }
|
||||
if (av < bv) return -sortDir;
|
||||
if (av > bv) return sortDir;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Update header indicators
|
||||
document.querySelectorAll('thead th').forEach(th => {
|
||||
th.classList.remove('sort-asc','sort-desc');
|
||||
});
|
||||
const headers = ['call','name','date','time','band','mode','rst_sent','country','dist','lotw'];
|
||||
const idx = headers.indexOf(key);
|
||||
if (idx >= 0) {
|
||||
const ths = document.querySelectorAll('thead th');
|
||||
ths[idx].classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
|
||||
}
|
||||
|
||||
renderTable();
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const tbody = document.getElementById('log-tbody');
|
||||
const total = filteredData.length;
|
||||
const pages = Math.ceil(total / PAGE_SIZE);
|
||||
const start = (currentPage - 1) * PAGE_SIZE;
|
||||
const slice = filteredData.slice(start, start + PAGE_SIZE);
|
||||
|
||||
document.getElementById('log-meta').textContent =
|
||||
`${total.toLocaleString()} QSOs · Page ${currentPage} of ${Math.max(1,pages)}`;
|
||||
|
||||
if (slice.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;padding:2rem;color:var(--muted);font-family:var(--font-mono);font-size:0.8rem;">NO CONTACTS FOUND</td></tr>';
|
||||
} else {
|
||||
tbody.innerHTML = slice.map(r => {
|
||||
const timeStr = r.time ? r.time.slice(0,2)+':'+r.time.slice(2,4) : '';
|
||||
const bandClass = `band-${r.band}`;
|
||||
const lotwClass = r.lotw === 'Y' ? 'lotw-y' : 'lotw-n';
|
||||
const lotwSym = r.lotw === 'Y' ? '✓' : '·';
|
||||
const rst = r.rst_sent && r.rst_rcvd ? `${r.rst_sent} / ${r.rst_rcvd}` : r.rst_sent || '';
|
||||
return `<tr>
|
||||
<td class="call-cell">${esc(r.call)}</td>
|
||||
<td>${esc(r.name ? titleCase(r.name) : '')}</td>
|
||||
<td>${esc(r.date)}</td>
|
||||
<td>${timeStr}Z</td>
|
||||
<td><span class="band-badge ${bandClass}">${esc(r.band)}</span></td>
|
||||
<td class="mode-cell">${esc(r.mode)}</td>
|
||||
<td class="rst-cell">${esc(rst)}</td>
|
||||
<td>${esc(r.country||'')}${r.state ? ' <span style="color:var(--muted)">'+esc(r.state)+'</span>' : ''}</td>
|
||||
<td class="dist-cell">${r.dist ? Number(r.dist).toLocaleString() : ''}</td>
|
||||
<td class="${lotwClass}" style="text-align:center">${lotwSym}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
renderPagination(pages);
|
||||
}
|
||||
|
||||
function renderPagination(pages) {
|
||||
const el = document.getElementById('pagination');
|
||||
if (pages <= 1) { el.innerHTML = ''; return; }
|
||||
|
||||
let html = `<button class="page-btn" onclick="goPage(${currentPage-1})" ${currentPage===1?'disabled':''}>‹ Prev</button>`;
|
||||
|
||||
const range = [];
|
||||
if (pages <= 7) {
|
||||
for (let i=1;i<=pages;i++) range.push(i);
|
||||
} else {
|
||||
range.push(1);
|
||||
if (currentPage > 3) range.push('...');
|
||||
for (let i=Math.max(2,currentPage-1); i<=Math.min(pages-1,currentPage+1); i++) range.push(i);
|
||||
if (currentPage < pages-2) range.push('...');
|
||||
range.push(pages);
|
||||
}
|
||||
|
||||
range.forEach(p => {
|
||||
if (p === '...') html += `<span class="page-info">…</span>`;
|
||||
else html += `<button class="page-btn ${p===currentPage?'active':''}" onclick="goPage(${p})">${p}</button>`;
|
||||
});
|
||||
|
||||
html += `<button class="page-btn" onclick="goPage(${currentPage+1})" ${currentPage===pages?'disabled':''}>Next ›</button>`;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
function goPage(p) {
|
||||
currentPage = p;
|
||||
renderTable();
|
||||
document.querySelector('.table-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
|
||||
}
|
||||
|
||||
// ─── HELPERS ─────────────────────────────────────────────────
|
||||
function countBy(arr, key) {
|
||||
return arr.reduce((acc, r) => {
|
||||
const v = r[key];
|
||||
if (v) acc[v] = (acc[v]||0)+1;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
|
||||
function titleCase(s) {
|
||||
return s.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
|
||||
}
|
||||
|
||||
function showSection(id, btn) {
|
||||
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
||||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById('section-' + id).classList.add('active');
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
window.addEventListener('load', init);
|
||||
window.addEventListener('resize', () => {
|
||||
if (document.getElementById('section-dashboard').classList.contains('active')) {
|
||||
drawActivityChart();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="js/k5bss.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable → Regular
File mode changed.
Executable → Regular
File mode changed.
Reference in new issue
Block a user