953 lines
30 KiB
HTML
953 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>username / project-name</title>
|
|
<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=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" />
|
|
<style>
|
|
/* ─── Variables ─── */
|
|
:root {
|
|
--bg: #252525;
|
|
--surface: #2b2b2b;
|
|
--surface2: #313131;
|
|
--border: #3a3a3a;
|
|
--border-focus: #4e4e4e;
|
|
--text: #e8e8e0;
|
|
--muted: #777770;
|
|
--accent: #B88FE0;
|
|
--accent2: #6247AA;
|
|
--green: #6fcf8a;
|
|
--red: #e07070;
|
|
--yellow: #e0c870;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'DM Mono', monospace;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Grain overlay */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.container { max-width: 980px; margin: 0 auto; padding: 0 2rem; }
|
|
|
|
/* ─── Top nav ─── */
|
|
.topbar {
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 1rem 0;
|
|
animation: fadeUp 0.4s ease both;
|
|
}
|
|
.topbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
.site-logo {
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.site-logo span { color: var(--accent); }
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
}
|
|
.breadcrumb a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.breadcrumb a:hover { opacity: 0.7; }
|
|
.breadcrumb .sep { color: var(--border-focus); }
|
|
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
|
|
.nav-link {
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.nav-link:hover { color: var(--text); }
|
|
|
|
/* ─── Repo header ─── */
|
|
.repo-header {
|
|
padding: 2.5rem 0 2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
animation: fadeUp 0.5s 0.05s ease both;
|
|
}
|
|
.repo-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.repo-title-group { flex: 1; min-width: 0; }
|
|
.repo-tag {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
.repo-name {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: clamp(1.6rem, 3vw, 2.4rem);
|
|
font-weight: 800;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.repo-name span { color: var(--accent); }
|
|
.repo-desc-text {
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
max-width: 540px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.repo-topics {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.topic {
|
|
font-size: 0.62rem;
|
|
padding: 0.2rem 0.6rem;
|
|
border: 1px solid rgba(184, 143, 224, 0.2);
|
|
color: var(--accent);
|
|
letter-spacing: 0.08em;
|
|
background: rgba(184, 143, 224, 0.05);
|
|
transition: background 0.2s;
|
|
}
|
|
.topic:hover { background: rgba(184, 143, 224, 0.12); cursor: default; }
|
|
|
|
/* stats row */
|
|
.repo-stats {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
}
|
|
.stat-item .stat-icon { font-size: 0.85rem; opacity: 0.6; }
|
|
.stat-item strong { color: var(--text); font-weight: 500; }
|
|
|
|
/* action buttons */
|
|
.repo-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent2);
|
|
color: var(--text);
|
|
font-family: 'DM Mono', monospace;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.6rem 1.2rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary:hover { background: var(--accent); }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-family: 'DM Mono', monospace;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
padding: 0.6rem 1.2rem;
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, color 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-ghost:hover { border-color: var(--border-focus); color: var(--text); }
|
|
|
|
/* ─── Tab bar ─── */
|
|
.tabs {
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
gap: 0;
|
|
animation: fadeUp 0.5s 0.1s ease both;
|
|
overflow-x: auto;
|
|
}
|
|
.tab {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
padding: 1rem 1.2rem;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.tab:hover { color: var(--text); }
|
|
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
|
.tab-count {
|
|
font-size: 0.6rem;
|
|
padding: 0.1rem 0.4rem;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ─── Main layout ─── */
|
|
.repo-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 260px;
|
|
gap: 2rem;
|
|
padding: 2rem 0 4rem;
|
|
animation: fadeUp 0.5s 0.15s ease both;
|
|
}
|
|
|
|
/* ─── File browser ─── */
|
|
.file-browser {
|
|
border: 1px solid var(--border);
|
|
}
|
|
.file-browser-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.8rem 1rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 1rem;
|
|
}
|
|
.branch-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.72rem;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
padding: 0.35rem 0.7rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.branch-selector:hover { border-color: var(--border-focus); }
|
|
.branch-name { color: var(--accent); }
|
|
.file-meta {
|
|
font-size: 0.68rem;
|
|
color: var(--muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
flex: 1;
|
|
}
|
|
.latest-commit {
|
|
font-size: 0.68rem;
|
|
color: var(--muted);
|
|
}
|
|
.latest-commit span { color: var(--text); }
|
|
.commit-hash {
|
|
font-size: 0.65rem;
|
|
color: var(--accent2);
|
|
border: 1px solid rgba(98, 71, 170, 0.3);
|
|
padding: 0.1rem 0.4rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.commit-hash:hover { background: rgba(98, 71, 170, 0.1); }
|
|
|
|
/* file rows */
|
|
.file-row {
|
|
display: grid;
|
|
grid-template-columns: 1.5rem 1fr 1fr auto;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.65rem 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.15s;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.file-row:last-child { border-bottom: none; }
|
|
.file-row:hover { background: var(--surface2); }
|
|
.file-icon { font-size: 0.85rem; text-align: center; }
|
|
.file-name {
|
|
font-size: 0.78rem;
|
|
color: var(--text);
|
|
transition: color 0.15s;
|
|
}
|
|
.file-row:hover .file-name { color: var(--accent); }
|
|
.file-row.dir .file-name { color: var(--accent2); }
|
|
.file-row.dir:hover .file-name { color: var(--accent); }
|
|
.file-commit {
|
|
font-size: 0.65rem;
|
|
color: var(--muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.file-age {
|
|
font-size: 0.62rem;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
/* README */
|
|
.readme {
|
|
border: 1px solid var(--border);
|
|
margin-top: 1rem;
|
|
}
|
|
.readme-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.8rem 1rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.readme-bar-icon { color: var(--accent); }
|
|
.readme-content {
|
|
padding: 2rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.9;
|
|
color: #c8c8c0;
|
|
}
|
|
.readme-content h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
margin-bottom: 0.8rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.readme-content h2 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
margin: 2rem 0 0.8rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.readme-content h2::before {
|
|
content: '// ';
|
|
color: var(--accent2);
|
|
font-family: 'DM Mono', monospace;
|
|
font-weight: 300;
|
|
}
|
|
.readme-content p { margin-bottom: 1rem; }
|
|
.readme-content code {
|
|
font-family: 'DM Mono', monospace;
|
|
font-size: 0.76rem;
|
|
color: var(--accent);
|
|
background: rgba(184, 143, 224, 0.08);
|
|
padding: 0.1rem 0.4rem;
|
|
border: 1px solid rgba(184, 143, 224, 0.15);
|
|
}
|
|
.readme-content pre {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
padding: 1.2rem 1.4rem;
|
|
margin: 1rem 0 1.4rem;
|
|
overflow-x: auto;
|
|
}
|
|
.readme-content pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.76rem;
|
|
color: #c8c8c0;
|
|
}
|
|
.readme-content ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 1rem;
|
|
}
|
|
.readme-content ul li {
|
|
padding-left: 1.2rem;
|
|
position: relative;
|
|
margin-bottom: 0.4rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.readme-content ul li::before {
|
|
content: '▸';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--accent2);
|
|
font-size: 0.7rem;
|
|
}
|
|
.readme-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
font-size: 0.62rem;
|
|
padding: 0.2rem 0.6rem;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
margin-right: 0.4rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.readme-badge.green { color: var(--green); border-color: rgba(111, 207, 138, 0.3); }
|
|
.readme-badge.purple { color: var(--accent); border-color: rgba(184, 143, 224, 0.3); }
|
|
.readme-badge.yellow { color: var(--yellow); border-color: rgba(224, 200, 112, 0.3); }
|
|
|
|
/* ─── Sidebar ─── */
|
|
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
|
|
|
|
.sidebar-section { }
|
|
.sidebar-title {
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 0.8rem;
|
|
padding-bottom: 0.6rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* about */
|
|
.about-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
line-height: 1.7;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.about-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.72rem;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
margin-bottom: 0.5rem;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.about-link:hover { opacity: 0.7; }
|
|
|
|
/* languages */
|
|
.lang-bar {
|
|
height: 4px;
|
|
display: flex;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.lang-seg { height: 100%; transition: opacity 0.2s; }
|
|
.lang-seg:hover { opacity: 0.7; cursor: default; }
|
|
.lang-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.lang-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 0.7rem;
|
|
}
|
|
.lang-label { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
|
|
.lang-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.lang-pct { color: var(--muted); }
|
|
|
|
/* activity */
|
|
.activity-graph {
|
|
display: grid;
|
|
grid-template-columns: repeat(26, 1fr);
|
|
gap: 2px;
|
|
}
|
|
.activity-col { display: flex; flex-direction: column; gap: 2px; }
|
|
.activity-cell {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 1px;
|
|
background: var(--surface2);
|
|
transition: background 0.2s;
|
|
}
|
|
.activity-cell:hover { opacity: 0.7; cursor: default; }
|
|
.activity-cell.l1 { background: rgba(98, 71, 170, 0.25); }
|
|
.activity-cell.l2 { background: rgba(98, 71, 170, 0.5); }
|
|
.activity-cell.l3 { background: rgba(184, 143, 224, 0.5); }
|
|
.activity-cell.l4 { background: var(--accent); }
|
|
.activity-label {
|
|
font-size: 0.6rem;
|
|
color: var(--muted);
|
|
margin-top: 0.5rem;
|
|
text-align: right;
|
|
}
|
|
|
|
/* contributors */
|
|
.contributors { display: flex; flex-direction: column; gap: 0.6rem; }
|
|
.contributor {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.contributor:hover { opacity: 0.7; }
|
|
.avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.7rem;
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
.contributor-info { flex: 1; }
|
|
.contributor-name { font-size: 0.73rem; color: var(--text); }
|
|
.contributor-commits { font-size: 0.62rem; color: var(--muted); }
|
|
|
|
/* releases */
|
|
.release-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.8rem;
|
|
padding-bottom: 0.8rem;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
.release-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
|
.release-tag-label {
|
|
font-size: 0.62rem;
|
|
padding: 0.2rem 0.5rem;
|
|
background: rgba(111, 207, 138, 0.1);
|
|
border: 1px solid rgba(111, 207, 138, 0.3);
|
|
color: var(--green);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.release-info {}
|
|
.release-name { font-size: 0.75rem; color: var(--text); margin-bottom: 0.15rem; }
|
|
.release-date { font-size: 0.62rem; color: var(--muted); }
|
|
|
|
/* ─── Footer ─── */
|
|
footer {
|
|
padding: 2rem 0 2.5rem;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-align: center;
|
|
animation: fadeUp 0.6s 0.4s ease both;
|
|
}
|
|
.footer-copy { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.05em; }
|
|
footer a { color: var(--accent); text-decoration: none; font-size: 0.75rem; transition: opacity 0.2s; }
|
|
footer a:hover { opacity: 0.7; }
|
|
|
|
/* ─── Animations ─── */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ─── Responsive ─── */
|
|
@media (max-width: 768px) {
|
|
.repo-body { grid-template-columns: 1fr; }
|
|
.sidebar { order: -1; }
|
|
.repo-actions { flex-direction: row; flex-wrap: wrap; }
|
|
.file-row { grid-template-columns: 1.5rem 1fr auto; }
|
|
.file-commit { display: none; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.repo-title-row { flex-direction: column; }
|
|
.tabs { gap: 0; }
|
|
.tab { padding: 0.8rem 0.8rem; font-size: 0.65rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top nav -->
|
|
<nav class="topbar">
|
|
<div class="container">
|
|
<div class="topbar-inner">
|
|
<a href="/gitpage" class="site-logo">Git</a>
|
|
<div class="breadcrumb">
|
|
<a href="#">samantha</a>
|
|
<span class="sep">/</span>
|
|
<a href="#" style="font-weight:500;">TicTacToe</a>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<a href="#" class="nav-link">Projects</a>
|
|
<a href="#" class="nav-link">About</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Repo header -->
|
|
<div class="repo-header">
|
|
<div class="container">
|
|
<div class="repo-title-row">
|
|
<div class="repo-title-group">
|
|
<div class="repo-tag">// public repository</div>
|
|
<div class="repo-name">project-<span>name</span></div>
|
|
<div class="repo-desc-text">A fast, minimal toolkit for processing and visualizing time-series data. Built for clarity and performance with zero dependencies.</div>
|
|
<div class="repo-topics">
|
|
<span class="topic">typescript</span>
|
|
<span class="topic">data-viz</span>
|
|
<span class="topic">time-series</span>
|
|
<span class="topic">zero-deps</span>
|
|
<span class="topic">cli</span>
|
|
</div>
|
|
<div class="repo-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-icon">☆</span>
|
|
<strong>248</strong> stars
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">⑂</span>
|
|
<strong>34</strong> forks
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">◎</span>
|
|
<strong>12</strong> watching
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-icon">⬡</span>
|
|
MIT License
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="repo-actions">
|
|
<a href="#" class="btn-primary">⬇ Clone</a>
|
|
<a href="#" class="btn-ghost">☆ Star</a>
|
|
<a href="#" class="btn-ghost">⑂ Fork</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<div class="container" style="display:flex;">
|
|
<a href="#" class="tab active">
|
|
◫ Code
|
|
</a>
|
|
<a href="#" class="tab">
|
|
◎ Issues <span class="tab-count">7</span>
|
|
</a>
|
|
<a href="#" class="tab">
|
|
⇄ Pull Requests <span class="tab-count">2</span>
|
|
</a>
|
|
<a href="#" class="tab">
|
|
◷ Actions
|
|
</a>
|
|
<a href="#" class="tab">
|
|
◈ Releases <span class="tab-count">4</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main body -->
|
|
<main>
|
|
<div class="container">
|
|
<div class="repo-body">
|
|
|
|
<!-- Left: file browser + readme -->
|
|
<div>
|
|
<!-- File browser -->
|
|
<div class="file-browser">
|
|
<div class="file-browser-bar">
|
|
<div class="branch-selector">
|
|
⎇ <span class="branch-name">main</span> ▾
|
|
</div>
|
|
<div class="file-meta">
|
|
<span class="latest-commit"><span>fix: handle edge case in parser</span></span>
|
|
<span class="commit-hash">a3f92d1</span>
|
|
</div>
|
|
<div style="font-size:0.65rem;color:var(--muted);white-space:nowrap;">3 days ago</div>
|
|
</div>
|
|
|
|
<!-- Dir rows -->
|
|
<a href="#" class="file-row dir">
|
|
<span class="file-icon">📁</span>
|
|
<span class="file-name">src</span>
|
|
<span class="file-commit">refactor: split core modules into separate files</span>
|
|
<span class="file-age">2 wks ago</span>
|
|
</a>
|
|
<a href="#" class="file-row dir">
|
|
<span class="file-icon">📁</span>
|
|
<span class="file-name">tests</span>
|
|
<span class="file-commit">test: add coverage for edge cases</span>
|
|
<span class="file-age">3 days ago</span>
|
|
</a>
|
|
<a href="#" class="file-row dir">
|
|
<span class="file-icon">📁</span>
|
|
<span class="file-name">docs</span>
|
|
<span class="file-commit">docs: update API reference</span>
|
|
<span class="file-age">1 wk ago</span>
|
|
</a>
|
|
<a href="#" class="file-row dir">
|
|
<span class="file-icon">📁</span>
|
|
<span class="file-name">examples</span>
|
|
<span class="file-commit">chore: add more usage examples</span>
|
|
<span class="file-age">5 days ago</span>
|
|
</a>
|
|
<a href="#" class="file-row">
|
|
<span class="file-icon">📄</span>
|
|
<span class="file-name">.gitignore</span>
|
|
<span class="file-commit">chore: initial setup</span>
|
|
<span class="file-age">3 mos ago</span>
|
|
</a>
|
|
<a href="#" class="file-row">
|
|
<span class="file-icon">📄</span>
|
|
<span class="file-name">LICENSE</span>
|
|
<span class="file-commit">chore: initial setup</span>
|
|
<span class="file-age">3 mos ago</span>
|
|
</a>
|
|
<a href="#" class="file-row">
|
|
<span class="file-icon">📄</span>
|
|
<span class="file-name">README.md</span>
|
|
<span class="file-commit">docs: improve getting started section</span>
|
|
<span class="file-age">1 wk ago</span>
|
|
</a>
|
|
<a href="#" class="file-row">
|
|
<span class="file-icon">📄</span>
|
|
<span class="file-name">package.json</span>
|
|
<span class="file-commit">chore: bump dependencies</span>
|
|
<span class="file-age">4 days ago</span>
|
|
</a>
|
|
<a href="#" class="file-row">
|
|
<span class="file-icon">📄</span>
|
|
<span class="file-name">tsconfig.json</span>
|
|
<span class="file-commit">chore: strict mode enabled</span>
|
|
<span class="file-age">2 mos ago</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- README -->
|
|
<div class="readme">
|
|
<div class="readme-bar">
|
|
<span class="readme-bar-icon">◫</span>
|
|
README.md
|
|
</div>
|
|
<div class="readme-content">
|
|
<span class="readme-badge green">● build passing</span>
|
|
<span class="readme-badge purple">v2.1.0</span>
|
|
<span class="readme-badge yellow">MIT</span>
|
|
|
|
<h1>project-name</h1>
|
|
<p>A fast, minimal toolkit for processing and visualizing time-series data. Built with TypeScript, zero runtime dependencies, works in Node and the browser.</p>
|
|
|
|
<h2>Installation</h2>
|
|
<pre><code>npm install project-name
|
|
# or
|
|
yarn add project-name</code></pre>
|
|
|
|
<h2>Quick Start</h2>
|
|
<pre><code>import { TimeSeries, plot } from 'project-name';
|
|
|
|
const ts = new TimeSeries(data);
|
|
const smoothed = ts.rollingMean(7);
|
|
plot(smoothed, { width: 80, height: 20 });</code></pre>
|
|
|
|
<h2>Features</h2>
|
|
<ul>
|
|
<li>Zero runtime dependencies — ships as a single ESM/CJS bundle</li>
|
|
<li>Rolling statistics: mean, median, stddev, percentiles</li>
|
|
<li>Gap detection and interpolation for irregular time series</li>
|
|
<li>ASCII plot renderer for terminal output</li>
|
|
<li>Full TypeScript support with strict types</li>
|
|
<li>~8kb gzipped</li>
|
|
</ul>
|
|
|
|
<h2>Documentation</h2>
|
|
<p>Full API reference available in <code>docs/</code> or at the project website. Each method is documented with examples and edge-case notes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
|
|
<!-- About -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">About</div>
|
|
<div class="about-desc">Fast, minimal time-series processing and visualization. Zero deps.</div>
|
|
<a href="#" class="about-link">🔗 project-name.dev</a>
|
|
<a href="#" class="about-link">📦 npm package</a>
|
|
</div>
|
|
|
|
<!-- Languages -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Languages</div>
|
|
<div class="lang-bar">
|
|
<div class="lang-seg" style="width:74%;background:var(--accent2);"></div>
|
|
<div class="lang-seg" style="width:16%;background:var(--accent);"></div>
|
|
<div class="lang-seg" style="width:7%;background:var(--yellow);"></div>
|
|
<div class="lang-seg" style="width:3%;background:var(--muted);"></div>
|
|
</div>
|
|
<div class="lang-list">
|
|
<div class="lang-item">
|
|
<div class="lang-label"><div class="lang-dot" style="background:var(--accent2);"></div>TypeScript</div>
|
|
<div class="lang-pct">74%</div>
|
|
</div>
|
|
<div class="lang-item">
|
|
<div class="lang-label"><div class="lang-dot" style="background:var(--accent);"></div>JavaScript</div>
|
|
<div class="lang-pct">16%</div>
|
|
</div>
|
|
<div class="lang-item">
|
|
<div class="lang-label"><div class="lang-dot" style="background:var(--yellow);"></div>Shell</div>
|
|
<div class="lang-pct">7%</div>
|
|
</div>
|
|
<div class="lang-item">
|
|
<div class="lang-label"><div class="lang-dot" style="background:var(--muted);"></div>Other</div>
|
|
<div class="lang-pct">3%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Releases -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Releases</div>
|
|
<div class="release-item">
|
|
<span class="release-tag-label">v2.1.0</span>
|
|
<div class="release-info">
|
|
<div class="release-name">Rolling stats & fix</div>
|
|
<div class="release-date">5 days ago</div>
|
|
</div>
|
|
</div>
|
|
<div class="release-item">
|
|
<span class="release-tag-label">v2.0.0</span>
|
|
<div class="release-info">
|
|
<div class="release-name">Major rewrite</div>
|
|
<div class="release-date">3 wks ago</div>
|
|
</div>
|
|
</div>
|
|
<div class="release-item">
|
|
<span class="release-tag-label">v1.4.2</span>
|
|
<div class="release-info">
|
|
<div class="release-name">Bug fix release</div>
|
|
<div class="release-date">2 mos ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Activity</div>
|
|
<div class="activity-graph" id="activityGraph"></div>
|
|
<div class="activity-label">Last 26 weeks</div>
|
|
</div>
|
|
|
|
<!-- Contributors -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-title">Contributors</div>
|
|
<div class="contributors">
|
|
<a href="#" class="contributor">
|
|
<div class="avatar">U</div>
|
|
<div class="contributor-info">
|
|
<div class="contributor-name">username</div>
|
|
<div class="contributor-commits">142 commits</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="contributor">
|
|
<div class="avatar">J</div>
|
|
<div class="contributor-info">
|
|
<div class="contributor-name">jsmith</div>
|
|
<div class="contributor-commits">28 commits</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="contributor">
|
|
<div class="avatar">K</div>
|
|
<div class="contributor-info">
|
|
<div class="contributor-name">k_dev</div>
|
|
<div class="contributor-commits">11 commits</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<a href="#">username</a>
|
|
<div class="footer-copy">© 2026 — built with intention</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Generate activity graph
|
|
const graph = document.getElementById('activityGraph');
|
|
const levels = [null, 'l1', 'l2', 'l3', 'l4'];
|
|
const pattern = [0,0,1,0,2,1,0,1,3,2,1,0,0,1,2,3,4,2,1,0,1,2,1,0,3,2];
|
|
|
|
for (let w = 0; w < 26; w++) {
|
|
const col = document.createElement('div');
|
|
col.className = 'activity-col';
|
|
for (let d = 0; d < 7; d++) {
|
|
const cell = document.createElement('div');
|
|
const activity = Math.random() < 0.4 ? Math.min(4, Math.floor(Math.random() * 3) + pattern[w]) : 0;
|
|
cell.className = 'activity-cell' + (activity > 0 ? ` l${activity}` : '');
|
|
col.appendChild(cell);
|
|
}
|
|
graph.appendChild(col);
|
|
}
|
|
|
|
// Tab switching
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |