added more specs and rebuilt for simpler additions
This commit is contained in:
venus
901
samples/public-services.html
Normal file
901
samples/public-services.html
Normal file
@@ -0,0 +1,901 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>River Rooks | Public Services & Applications Portal</title>
|
||||
<meta name="description" content="Public portal for River Rooks self-hosted web applications, developer utilities, media services, and public identity endpoints.">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-canvas: #0d0f12; /* Deep slate/charcoal */
|
||||
--bg-surface: #121417; /* Solid surface container */
|
||||
--bg-surface-alt: #181b21; /* Slightly lighter surface card */
|
||||
--border-color: #2b303b; /* Low-contrast 1px border */
|
||||
--border-active: #ffb000; /* Active Amber border */
|
||||
--text-primary: #e0e6f0; /* Off-white prose */
|
||||
--text-muted: #8a95a5; /* Monospaced metadata gray */
|
||||
--accent: #ffb000; /* High-visibility Amber terminal accent */
|
||||
--accent-cyan: #00f0ff; /* Cyan secondary accent */
|
||||
--accent-green: #00ff66; /* Green status indicator */
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.65;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Sticky Navigation Header */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 56px;
|
||||
background-color: var(--bg-canvas);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
z-index: 100;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-prompt {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.82rem;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: none; /* Zero-delay snap */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.nav-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.nav-link.active::before {
|
||||
content: "> ";
|
||||
color: var(--accent);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.nav-link.active:hover::before {
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Main Page Wrapper */
|
||||
.page-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 24px 60px 24px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
/* Hero Banner */
|
||||
.hero-header {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
/* Dividers */
|
||||
.section-divider {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
/* Search & Filter Controls */
|
||||
.controls-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-canvas);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.search-prompt {
|
||||
color: var(--accent);
|
||||
margin-right: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
transition: none; /* Instant snap */
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.filter-btn:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Featured Services Grid */
|
||||
.featured-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.featured-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
align-self: flex-start;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--bg-canvas);
|
||||
background-color: var(--accent);
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.featured-card:hover .service-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.service-body {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.access-tag {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.launch-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.launch-btn:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.launch-btn:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* All Public Services Grid */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: var(--border-active);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-card:hover .card-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.card-category {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.badge-access {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dot-public {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dot-auth {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--accent);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.direct-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
background-color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.direct-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Public Identity & Quick Keys Box */
|
||||
.identity-box {
|
||||
background-color: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.identity-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.key-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 0.83rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.key-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.key-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-value {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
/* Piped Footer Links */
|
||||
.footer-links {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 2px 6px;
|
||||
transition: none; /* Zero-delay snap */
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-canvas);
|
||||
}
|
||||
|
||||
.footer-link:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.pipe {
|
||||
color: var(--border-color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sticky Header -->
|
||||
<header class="sticky-header">
|
||||
<div class="logo-container">
|
||||
<span class="logo-prompt">$</span> agy --page=public-services
|
||||
</div>
|
||||
<nav class="header-nav" aria-label="Main Navigation">
|
||||
<a href="index.html" class="nav-link">Catalog</a>
|
||||
<a href="homepage.html" class="nav-link">Sample 1</a>
|
||||
<a href="split-panel.html" class="nav-link">Sample 2</a>
|
||||
<a href="companion.html" class="nav-link">Sample 3</a>
|
||||
<a href="document-flow.html" class="nav-link">Sample 4</a>
|
||||
<a href="portfolio.html" class="nav-link">Sample 5</a>
|
||||
<a href="homelab.html" class="nav-link">Sample 6</a>
|
||||
<a href="public-services.html" class="nav-link active">Sample 7 (Public Services)</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Page Content Area -->
|
||||
<div class="page-wrapper">
|
||||
<main class="content-container">
|
||||
|
||||
<!-- Hero Header -->
|
||||
<header class="hero-header">
|
||||
<h1 class="site-title">Public Services Portal</h1>
|
||||
<p class="site-subtitle">
|
||||
Direct access to public self-hosted web applications, developer utilities, repository mirrors, and interactive tools operated by River Rooks.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Instant Search & Category Filter Controls -->
|
||||
<section aria-label="Search and Filter Controls">
|
||||
<div class="controls-panel">
|
||||
<div class="search-box">
|
||||
<span class="search-prompt">$ search_services</span>
|
||||
<input type="text" id="searchInput" class="search-input" placeholder="type service name, tag, or technology..." aria-label="Search Public Services">
|
||||
</div>
|
||||
<div class="filter-bar" id="filterBar" role="tablist" aria-label="Service Categories">
|
||||
<button class="filter-btn active" data-filter="all" role="tab" aria-selected="true">All Services</button>
|
||||
<button class="filter-btn" data-filter="dev" role="tab">Developer Services</button>
|
||||
<button class="filter-btn" data-filter="tools" role="tab">Utilities & Tools</button>
|
||||
<button class="filter-btn" data-filter="media" role="tab">Media & Content</button>
|
||||
<button class="filter-btn" data-filter="security" role="tab">Identity & Security</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Services Section -->
|
||||
<section aria-label="Featured Public Services">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">featured_flagships</h2>
|
||||
<span class="section-meta">Primary Public Endpoints</span>
|
||||
</div>
|
||||
|
||||
<div class="featured-grid">
|
||||
|
||||
<!-- Forgejo -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Open Source Git Forge</span>
|
||||
<h3 class="service-title">Forgejo Repositories</h3>
|
||||
<p class="service-body">
|
||||
Self-hosted Git platform hosting public source code for network security scripts, Neovim dotfiles, Ansible playbooks, and Docker compose templates.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Public Read</span>
|
||||
<a href="#" class="launch-btn">Explore Repos ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CyberChef -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Security Utility</span>
|
||||
<h3 class="service-title">CyberChef Workbench</h3>
|
||||
<p class="service-body">
|
||||
Web-based data transformation tool for hex decoding, Base64 operations, regex extraction, cryptographic hashing, and CTF payload analysis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Open Web</span>
|
||||
<a href="#" class="launch-btn">Launch App ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Stirling PDF -->
|
||||
<article class="featured-card">
|
||||
<div>
|
||||
<span class="featured-badge">Document Tools</span>
|
||||
<h3 class="service-title">Stirling PDF Studio</h3>
|
||||
<p class="service-body">
|
||||
Locally hosted document processing suite for merging, splitting, OCR extraction, password encryption, and PDF page manipulation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<span class="access-tag">Access: Open Web</span>
|
||||
<a href="#" class="launch-btn">Launch App ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- All Public Services Catalog Grid -->
|
||||
<section aria-label="Complete Public Services Directory">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">services_catalog</h2>
|
||||
<span class="section-meta" id="resultCount">Showing 9 Services</span>
|
||||
</div>
|
||||
|
||||
<div class="services-grid" id="servicesGrid">
|
||||
|
||||
<!-- Forgejo Git -->
|
||||
<article class="service-card" data-category="dev" data-search="forgejo git repo code source open">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Forgejo Git Forge</h3>
|
||||
<span class="card-category">[#dev-git]</span>
|
||||
</div>
|
||||
<p class="card-desc">Public repository mirror for software projects, dotfiles, and CTF writeups.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">git.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CyberChef -->
|
||||
<article class="service-card" data-category="tools" data-search="cyberchef decode base64 crypto hex ctf">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">CyberChef Workbench</h3>
|
||||
<span class="card-category">[#security-tool]</span>
|
||||
</div>
|
||||
<p class="card-desc">Cyber Swiss Army Knife for encoding, decoding, hashing, and data parsing.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">chef.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Stirling PDF -->
|
||||
<article class="service-card" data-category="tools" data-search="pdf stirling merge split ocr document">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Stirling PDF Studio</h3>
|
||||
<span class="card-category">[#pdf-tools]</span>
|
||||
</div>
|
||||
<p class="card-desc">Complete PDF manipulation tool for merging, splitting, and OCR scanning.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC</span>
|
||||
<a href="#" class="direct-link">pdf.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Hedgedoc -->
|
||||
<article class="service-card" data-category="dev" data-search="hedgedoc codimd markdown notes collab">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HedgeDoc Collaborative</h3>
|
||||
<span class="card-category">[#markdown]</span>
|
||||
</div>
|
||||
<p class="card-desc">Real-time collaborative Markdown editor for technical specs and meeting notes.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> OPEN</span>
|
||||
<a href="#" class="direct-link">pad.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Jellyfin Media -->
|
||||
<article class="service-card" data-category="media" data-search="jellyfin video stream media movie tv">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Jellyfin Media Portal</h3>
|
||||
<span class="card-category">[#media-video]</span>
|
||||
</div>
|
||||
<p class="card-desc">Personal video library with 4K HDR hardware acceleration and mobile streaming.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> ACCOUNT REQ</span>
|
||||
<a href="#" class="direct-link">watch.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Audiobookshelf -->
|
||||
<article class="service-card" data-category="media" data-search="audiobookshelf audio book podcast library">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Audiobookshelf</h3>
|
||||
<span class="card-category">[#media-audio]</span>
|
||||
</div>
|
||||
<p class="card-desc">Self-hosted audiobook and podcast server with position syncing across devices.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> INVITE ONLY</span>
|
||||
<a href="#" class="direct-link">listen.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Calibre-Web -->
|
||||
<article class="service-card" data-category="media" data-search="calibre ebook pdf book reading library">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Calibre-Web Library</h3>
|
||||
<span class="card-category">[#ebooks]</span>
|
||||
</div>
|
||||
<p class="card-desc">E-book library catalog with e-reader OPDS feed and browser reading support.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> PUBLIC READ</span>
|
||||
<a href="#" class="direct-link">read.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Vaultwarden -->
|
||||
<article class="service-card" data-category="security" data-search="vaultwarden bitwarden password vault secrets 2fa">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Vaultwarden Password Vault</h3>
|
||||
<span class="card-category">[#secrets]</span>
|
||||
</div>
|
||||
<p class="card-desc">End-to-end encrypted password manager endpoint for authorized client syncing.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-auth"></span> 2FA / AUTH</span>
|
||||
<a href="#" class="direct-link">vault.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Matrix Synapse -->
|
||||
<article class="service-card" data-category="security" data-search="matrix chat element federation identity messaging">
|
||||
<div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Matrix Federated Chat</h3>
|
||||
<span class="card-category">[#messaging]</span>
|
||||
</div>
|
||||
<p class="card-desc">Federated Matrix homeserver for encrypted messaging and public discussion rooms.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge-access"><span class="dot-public"></span> FEDERATED</span>
|
||||
<a href="#" class="direct-link">matrix.rooks.dev ↗</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Public Identity & Key Verification Section -->
|
||||
<section aria-label="Identity and Public Keys">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">public_keys_&_verification</h2>
|
||||
<span class="section-meta">Cryptographic Identity</span>
|
||||
</div>
|
||||
|
||||
<div class="identity-box">
|
||||
<div class="identity-title">// Public Endpoints & Cryptographic Fingerprints</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">PGP Key Fingerprint:</span><br>
|
||||
<span class="key-value">3F8A B29C 7D1E 4056 9912 A8B0 C4D3 E2F1 8091 22A4</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('3F8AB29C7D1E40569912A8B0C4D3E2F1809122A4')">Copy Key Fingerprint</button>
|
||||
</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">Matrix Handle:</span><br>
|
||||
<span class="key-value">@river:rooks.dev</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('@river:rooks.dev')">Copy Matrix ID</button>
|
||||
</div>
|
||||
|
||||
<div class="key-row">
|
||||
<div>
|
||||
<span class="key-label">Public SSH Key:</span><br>
|
||||
<span class="key-value">ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882a... river@rooks.dev</span>
|
||||
</div>
|
||||
<button class="copy-btn" onclick="navigator.clipboard.writeText('ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIH8q882aZ9kX1m2pL3vN4qR5sT6uV7wX8yZ9river@rooks.dev')">Copy Public Key</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- Piped Contact Footer -->
|
||||
<footer class="footer-links">
|
||||
<a href="index.html" class="footer-link">Spec Catalog</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="https://github.com" target="_blank" rel="noopener" class="footer-link">GitHub</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="mailto:river@example.com" class="footer-link">Email Contact</a>
|
||||
<span class="pipe">|</span>
|
||||
<a href="#" class="footer-link">Download PGP Key</a>
|
||||
<span class="pipe">|</span>
|
||||
<span style="font-size:0.78rem; color:var(--text-muted);">PUBLIC SERVICES PORTAL v2.4</span>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Pure Vanilla JS Search & Filter Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const filterBtns = document.querySelectorAll('#filterBar .filter-btn');
|
||||
const serviceCards = document.querySelectorAll('#servicesGrid .service-card');
|
||||
const resultCount = document.getElementById('resultCount');
|
||||
|
||||
let currentFilter = 'all';
|
||||
let currentQuery = '';
|
||||
|
||||
function updateResults() {
|
||||
let visibleCount = 0;
|
||||
|
||||
serviceCards.forEach(card => {
|
||||
const category = card.getAttribute('data-category');
|
||||
const searchData = card.getAttribute('data-search').toLowerCase();
|
||||
const cardText = card.innerText.toLowerCase();
|
||||
|
||||
const matchesCategory = (currentFilter === 'all' || category === currentFilter);
|
||||
const matchesQuery = currentQuery === '' || searchData.includes(currentQuery) || cardText.includes(currentQuery);
|
||||
|
||||
if (matchesCategory && matchesQuery) {
|
||||
card.style.display = 'flex';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
resultCount.textContent = `Showing ${visibleCount} Service${visibleCount !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
// Filter Buttons Click Listener
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterBtns.forEach(b => {
|
||||
b.classList.remove('active');
|
||||
b.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
btn.classList.add('active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
|
||||
currentFilter = btn.getAttribute('data-filter');
|
||||
updateResults();
|
||||
});
|
||||
});
|
||||
|
||||
// Search Input Listener
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
currentQuery = e.target.value.trim().toLowerCase();
|
||||
updateResults();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user