git link
This commit is contained in:
samantha42
@@ -35,10 +35,6 @@ func Finance(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./s
|
|||||||
func Cinema(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cinema.html") }
|
func Cinema(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cinema.html") }
|
||||||
func Cyber(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cyber.html") }
|
func Cyber(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/cyber.html") }
|
||||||
func About(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/about.html") }
|
func About(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/about.html") }
|
||||||
func GitPage(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/gitpage.html") }
|
|
||||||
func GitPageTicTacToe(w http.ResponseWriter, r *http.Request) {
|
|
||||||
http.ServeFile(w, r, "./static/gitpages/TicTacToe.html")
|
|
||||||
}
|
|
||||||
|
|
||||||
func Styles(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/styles.css") }
|
func Styles(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/styles.css") }
|
||||||
|
|
||||||
@@ -110,10 +106,9 @@ func main() {
|
|||||||
http.HandleFunc("/finance", Finance)
|
http.HandleFunc("/finance", Finance)
|
||||||
http.HandleFunc("/cinema", Cinema)
|
http.HandleFunc("/cinema", Cinema)
|
||||||
http.HandleFunc("/cyber", Cyber)
|
http.HandleFunc("/cyber", Cyber)
|
||||||
//http.HandleFunc("/gitpage", GitPage)
|
http.HandleFunc("/git", func(w http.ResponseWriter, r *http.Request) {
|
||||||
//http.HandleFunc("/gitpage/TicTacToe", GitPageTicTacToe)
|
http.Redirect(w, r, "https://git.samantha42.xyz", http.StatusFound)
|
||||||
//http.HandleFunc("/trades", TradesHandler)
|
})
|
||||||
//http.HandleFunc("/api/prices", PricesHandler)
|
|
||||||
|
|
||||||
fmt.Printf("running on http://localhost:%s/\n", *port)
|
fmt.Printf("running on http://localhost:%s/\n", *port)
|
||||||
if err := http.ListenAndServe(":"+*port, nil); err != nil {
|
if err := http.ListenAndServe(":"+*port, nil); err != nil {
|
||||||
|
|||||||
+2
-5
@@ -15,18 +15,15 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- PAGE NAV — place right before <header> -->
|
<!-- PAGE NAV — place right before <header> -->
|
||||||
<nav class="page-nav">
|
<nav class="page-nav">
|
||||||
<a href="#about" class="active"><span>about</span></a>
|
<a href="#about" class="active"><span>about</span></a>
|
||||||
|
<a href="/git" target="_blank"><span>git</span></a>
|
||||||
<br /><span><p class="section-label">//Opinion</p></span>
|
<br /><span><p class="section-label">//Opinion</p></span>
|
||||||
|
|
||||||
<a href="/cinema"><span>Cinema</span></a>
|
<a href="/cinema"><span>Cinema</span></a>
|
||||||
<a href="/finance"><span>Finance</span></a>
|
<a href="/finance"><span>Finance</span></a>
|
||||||
<a href="/cyber"><span>cyber</span></a>
|
<a href="/cyber"><span>cyber</span></a>
|
||||||
<a href="/infra"><span>infra</span></a>
|
<a href="/infra"><span>infra</span></a>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<p class="tag">// about me</p>
|
<p class="tag">// about me</p>
|
||||||
<h1>Samantha<br /><span>Vero Friis</span></h1>
|
<h1>Samantha<br /><span>Vero Friis</span></h1>
|
||||||
|
|||||||
@@ -1,953 +0,0 @@
|
|||||||
<!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>
|
|
||||||
Reference in New Issue
Block a user