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 */
|
||||
--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 */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
|
|
@ -87,13 +92,20 @@
|
|||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
|
||||
.wordmark { font-size: 18px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; }
|
||||
.wordmark-lg { font-size: 32px; 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: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }
|
||||
|
||||
/* Brand Block */
|
||||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||
.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 */
|
||||
.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); }
|
||||
|
|
@ -126,6 +138,9 @@
|
|||
.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); }
|
||||
|
||||
/* 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 */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
|
|
@ -193,10 +208,6 @@
|
|||
|
||||
/* 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 { 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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -207,17 +218,32 @@
|
|||
<div class="brand-block">
|
||||
<div class="black-square"></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>
|
||||
</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;">
|
||||
A black box vault for AI infrastructure. Tokens, components, layouts.
|
||||
Based on vault1984.com patterns.
|
||||
</p>
|
||||
</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 -->
|
||||
<div class="section">
|
||||
<div class="section-title">Brand Colors</div>
|
||||
|
|
@ -339,4 +365,4 @@
|
|||
|
||||
</div>
|
||||
</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