chore: auto-commit uncommitted changes
This commit is contained in:
James
parent
f5e9b54767
commit
f24d7e288a
|
|
@ -0,0 +1,51 @@
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"context"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
"time"
|
||||||
|
)
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fs := http.FileServer(http.Dir("."))
|
||||||
|
|
||||||
|
// Wrap to add no-cache headers
|
||||||
|
handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
|
||||||
|
w.Header().Set("Pragma", "no-cache")
|
||||||
|
w.Header().Set("Expires", "0")
|
||||||
|
fs.ServeHTTP(w, r)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Auto-shutdown after 60 minutes
|
||||||
|
ctx, cancel := context.WithTimeout(context.Background(), 60*time.Minute)
|
||||||
|
defer cancel()
|
||||||
|
|
||||||
|
server := &http.Server{
|
||||||
|
Addr: "0.0.0.0:8888",
|
||||||
|
Handler: handler,
|
||||||
|
}
|
||||||
|
|
||||||
|
log.Println("Serving on http://192.168.1.16:8888")
|
||||||
|
log.Println("Auto-shutdown in 60 minutes")
|
||||||
|
|
||||||
|
// Run server in goroutine
|
||||||
|
go func() {
|
||||||
|
if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
|
||||||
|
log.Fatalf("Server error: %v", err)
|
||||||
|
}
|
||||||
|
}()
|
||||||
|
|
||||||
|
// Wait for shutdown signal
|
||||||
|
<-ctx.Done()
|
||||||
|
log.Println("Shutting down...")
|
||||||
|
|
||||||
|
shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), 5*time.Second)
|
||||||
|
defer shutdownCancel()
|
||||||
|
|
||||||
|
if err := server.Shutdown(shutdownCtx); err != nil {
|
||||||
|
log.Printf("Shutdown error: %v", err)
|
||||||
|
}
|
||||||
|
log.Println("Server stopped")
|
||||||
|
}
|
||||||
|
|
@ -43,6 +43,11 @@
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--font-family: "Figtree", system-ui, sans-serif;
|
--font-family: "Figtree", system-ui, sans-serif;
|
||||||
|
|
||||||
|
/* Wordmark — FINAL: Figtree 700, 0.25em */
|
||||||
|
--wordmark-font: "Figtree", system-ui, sans-serif;
|
||||||
|
--wordmark-weight: 700;
|
||||||
|
--wordmark-spacing: 0.25em;
|
||||||
|
|
||||||
/* Spacing */
|
/* Spacing */
|
||||||
--space-1: 4px;
|
--space-1: 4px;
|
||||||
--space-2: 8px;
|
--space-2: 8px;
|
||||||
|
|
@ -87,13 +92,20 @@
|
||||||
.text-secondary { color: var(--text-secondary); }
|
.text-secondary { color: var(--text-secondary); }
|
||||||
.text-tertiary { color: var(--text-tertiary); }
|
.text-tertiary { color: var(--text-tertiary); }
|
||||||
|
|
||||||
.wordmark { font-size: 18px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
.wordmark { font-size: 18px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
|
||||||
.wordmark-lg { font-size: 32px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
.wordmark-lg { font-size: 32px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }
|
||||||
|
|
||||||
/* Brand Block */
|
/* Brand Block */
|
||||||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||||
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||||
|
|
||||||
|
/* Logo Lockup — The Trinity */
|
||||||
|
.logo-lockup { display: flex; gap: 20px; align-items: center; }
|
||||||
|
.logo-lockup-square { width: 72px; height: 72px; background: var(--brand-black); flex-shrink: 0; }
|
||||||
|
.logo-lockup-text { display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
.logo-lockup-wordmark { font-family: var(--font-family); font-size: 28px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
|
||||||
|
.logo-lockup-tagline { font-size: 14px; color: var(--text-secondary); letter-spacing: 0.02em; }
|
||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
||||||
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
||||||
|
|
@ -126,6 +138,9 @@
|
||||||
.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
|
.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
|
||||||
.stat-label { font-size: 14px; color: var(--text-secondary); }
|
.stat-label { font-size: 14px; color: var(--text-secondary); }
|
||||||
|
|
||||||
|
/* Section Title */
|
||||||
|
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||||
|
|
@ -193,10 +208,6 @@
|
||||||
|
|
||||||
/* Code */
|
/* Code */
|
||||||
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
||||||
code { font-family: "JetBrains Mono", monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
|
||||||
|
|
||||||
/* Section Title */
|
|
||||||
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -207,17 +218,32 @@
|
||||||
<div class="brand-block">
|
<div class="brand-block">
|
||||||
<div class="black-square"></div>
|
<div class="black-square"></div>
|
||||||
<div>
|
<div>
|
||||||
<h1>Clavitor</h1>
|
<h1 style="font-size:40px;">Clavitor</h1>
|
||||||
<p class="text-secondary">Design System v0.1 — Violet + Figtree + JetBrains Mono</p>
|
<p class="text-secondary">Design System v0.1 — Violet + Figtree + JetBrains Mono</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
|
<p class="wordmark-lg" style="margin-top: 24px;">CLAVITOR</p>
|
||||||
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
||||||
A black box vault for AI infrastructure. Tokens, components, layouts.
|
A black box vault for AI infrastructure. Tokens, components, layouts.
|
||||||
Based on vault1984.com patterns.
|
Based on vault1984.com patterns.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Logo Lockup — The Trinity -->
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-title">Logo Lockup (Black Square + Wordmark + Tagline)</div>
|
||||||
|
<div class="logo-lockup">
|
||||||
|
<div class="logo-lockup-square"></div>
|
||||||
|
<div class="logo-lockup-text">
|
||||||
|
<div class="logo-lockup-wordmark">CLAVITOR</div>
|
||||||
|
<div class="logo-lockup-tagline">Black-box credential issuance for AI infrastructure</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-tertiary text-xs" style="margin-top: 16px;">
|
||||||
|
<strong>Spec:</strong> 72px black square, Figtree 700, 0.25em spacing, aligned left edge to left edge
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Brand Colors -->
|
<!-- Brand Colors -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">Brand Colors</div>
|
<div class="section-title">Brand Colors</div>
|
||||||
|
|
@ -339,4 +365,4 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CLAVITOR Wordmark — Interactive Tester</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=Figtree:wght@300..800&family=Plus+Jakarta+Sans:wght@300..800&family=Inter:wght@300..800&family=Sora:wght@300..800&family=Syne:wght@400..800&family=Cormorant+Garamond:wght@300..700&family=Unbounded:wght@300..900&family=DM+Sans:wght@300..800&family=Outfit:wght@300..800&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--brand-black: #0A0A0A;
|
||||||
|
--brand-accent: #7C3AED;
|
||||||
|
--bg-primary: #FFFFFF;
|
||||||
|
--bg-secondary: #F5F5F5;
|
||||||
|
--text-primary: #171717;
|
||||||
|
--text-secondary: #525252;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { font-family: system-ui, sans-serif; background: var(--bg-primary); color: var(--text-primary); padding: 40px; }
|
||||||
|
h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
|
||||||
|
.subtitle { color: var(--text-secondary); margin-bottom: 24px; }
|
||||||
|
.controls { background: var(--bg-secondary); padding: 20px; border-radius: 12px; margin-bottom: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
|
||||||
|
.control-group { display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); }
|
||||||
|
select, input[type="text"] { padding: 10px 14px; font-size: 16px; border-radius: 8px; border: 2px solid #E5E5E5; background: white; min-width: 200px; }
|
||||||
|
select:focus, input:focus { outline: none; border-color: var(--brand-accent); }
|
||||||
|
.weight-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin: 40px 0 20px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-accent); }
|
||||||
|
.spacing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
|
||||||
|
.wordmark-box { text-align: center; padding: 28px 16px; background: var(--bg-secondary); border-radius: 12px; min-height: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
||||||
|
.wordmark { font-size: 72px; white-space: nowrap; margin-bottom: 12px; line-height: 1.1; }
|
||||||
|
.spacing-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
|
||||||
|
.preview-size { display: flex; gap: 12px; align-items: center; margin-left: auto; }
|
||||||
|
.size-value { font-weight: 600; color: var(--brand-accent); min-width: 50px; }
|
||||||
|
input[type="range"] { width: 140px; }
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.spacing-grid { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
.wordmark { font-size: 48px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.spacing-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.wordmark { font-size: 36px; }
|
||||||
|
.preview-size { width: 100%; margin-left: 0; margin-top: 10px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>CLAVITOR Wordmark Tester</h1>
|
||||||
|
<p class="subtitle">Pick a font. See all weight + spacing combinations.</p>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Font Family</label>
|
||||||
|
<select id="fontSelect">
|
||||||
|
<option value="Figtree">Figtree (Sans)</option>
|
||||||
|
<option value="Inter">Inter (Sans)</option>
|
||||||
|
<option value="Plus Jakarta Sans">Plus Jakarta Sans (Sans)</option>
|
||||||
|
<option value="Sora">Sora — Geometric</option>
|
||||||
|
<option value="Syne">Syne — Wide Geometric</option>
|
||||||
|
<option value="Unbounded">Unbounded — Wide Display</option>
|
||||||
|
<option value="DM Sans">DM Sans — Clean Wide</option>
|
||||||
|
<option value="Outfit">Outfit — Geometric Modern</option>
|
||||||
|
<option value="Cormorant Garamond">Cormorant Garamond — Serif</option>
|
||||||
|
<option value="Satoshi">Satoshi (fallback)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group">
|
||||||
|
<label>Preview Text</label>
|
||||||
|
<input type="text" id="previewText" value="Clavitor" maxlength="20">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-group preview-size">
|
||||||
|
<label>Size</label>
|
||||||
|
<input type="range" id="sizeSlider" min="24" max="120" value="72">
|
||||||
|
<span class="size-value" id="sizeValue">72px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="results"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const fonts = {
|
||||||
|
'Figtree': { family: "'Figtree', sans-serif", weights: [100, 200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Inter': { family: "'Inter', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Plus Jakarta Sans': { family: "'Plus Jakarta Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Sora': { family: "'Sora', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Syne': { family: "'Syne', sans-serif", weights: [400, 500, 600, 700, 800] },
|
||||||
|
'Unbounded': { family: "'Unbounded', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800, 900] },
|
||||||
|
'DM Sans': { family: "'DM Sans', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Outfit': { family: "'Outfit', sans-serif", weights: [200, 300, 400, 500, 600, 700, 800] },
|
||||||
|
'Cormorant Garamond': { family: "'Cormorant Garamond', serif", weights: [300, 400, 500, 600, 700] },
|
||||||
|
'Satoshi': { family: "'Satoshi', 'Plus Jakarta Sans', sans-serif", weights: [300, 400, 500, 600, 700, 800] }
|
||||||
|
};
|
||||||
|
|
||||||
|
const spacings = [
|
||||||
|
{ val: 0, label: '0em (tight)' },
|
||||||
|
{ val: 0.125, label: '0.125em' },
|
||||||
|
{ val: 0.25, label: '0.25em' },
|
||||||
|
{ val: 0.375, label: '0.375em' },
|
||||||
|
{ val: 0.5, label: '0.5em (wide)' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
const fontName = document.getElementById('fontSelect').value;
|
||||||
|
const text = document.getElementById('previewText').value || 'Clavitor';
|
||||||
|
const size = document.getElementById('sizeSlider').value;
|
||||||
|
const font = fonts[fontName];
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
font.weights.forEach(weight => {
|
||||||
|
html += `<div class="weight-label">Weight ${weight}</div>`;
|
||||||
|
html += `<div class="spacing-grid">`;
|
||||||
|
|
||||||
|
spacings.forEach(sp => {
|
||||||
|
html += `
|
||||||
|
<div class="wordmark-box">
|
||||||
|
<div class="wordmark" style="font-family: ${font.family}; font-weight: ${weight}; letter-spacing: ${sp.val}em; font-size: ${size}px;">
|
||||||
|
${text}
|
||||||
|
</div>
|
||||||
|
<div class="spacing-label">${sp.label}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
html += `</div>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('results').innerHTML = html;
|
||||||
|
document.getElementById('sizeValue').textContent = size + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('fontSelect').addEventListener('change', render);
|
||||||
|
document.getElementById('previewText').addEventListener('input', render);
|
||||||
|
document.getElementById('sizeSlider').addEventListener('input', render);
|
||||||
|
|
||||||
|
render();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue