mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
612e137a60
Scale the branded "i" glyph proportionally to each SVG's font size (scale 0.94 for 64px, 1.24 for 84px) and align the stem bottom to the text baseline so the glyph sits naturally beside "NTERCEPT". Also adds brand-pack.html (logos, profiles, banners, stickers, release templates) and wallpapers.html (12 themes, 8 resolutions, PNG export). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
977 lines
63 KiB
HTML
977 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>iNTERCEPT Brand Pack</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
:root {
|
|
--bg: #0a0a0f;
|
|
--bg-card: #0e1018;
|
|
--cyan: #00d4ff;
|
|
--green: #00ff88;
|
|
--cyan-dim: rgba(0, 212, 255, 0.15);
|
|
--green-dim: rgba(0, 255, 136, 0.15);
|
|
--text: #e0e0e8;
|
|
--text-dim: rgba(255, 255, 255, 0.4);
|
|
--border: rgba(0, 212, 255, 0.1);
|
|
}
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'Outfit', sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Page header ── */
|
|
.page-header {
|
|
padding: 40px 48px 32px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
.page-header svg { width: 48px; height: 48px; }
|
|
.page-header h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.page-header h1 span { color: var(--cyan); }
|
|
.page-header p {
|
|
font-size: 14px;
|
|
color: var(--text-dim);
|
|
margin-left: auto;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* ── Tab navigation ── */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 0 48px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-bottom: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
}
|
|
.tab {
|
|
padding: 14px 24px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
.tab:hover { color: var(--text); }
|
|
.tab.active {
|
|
color: var(--cyan);
|
|
border-bottom-color: var(--cyan);
|
|
}
|
|
|
|
/* ── Section layout ── */
|
|
.section {
|
|
display: none;
|
|
padding: 40px 48px 60px;
|
|
}
|
|
.section.active { display: block; }
|
|
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
}
|
|
.section-desc {
|
|
font-size: 14px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.asset-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.asset-item {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
}
|
|
.asset-label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--cyan);
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
.asset-dimensions {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 20px;
|
|
}
|
|
.asset-canvas {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ── Scale wrapper for large assets ── */
|
|
.scale-wrapper {
|
|
transform-origin: top left;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════
|
|
SHARED ASSET STYLES
|
|
══════════════════════════════════════════════════ */
|
|
|
|
.asset-base {
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: 'Outfit', sans-serif;
|
|
}
|
|
|
|
.a-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.a-scanlines {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 212, 255, 0.008) 2px, rgba(0, 212, 255, 0.008) 4px);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.a-noise {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
opacity: 0.3;
|
|
z-index: 9;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
|
background-size: 256px 256px;
|
|
}
|
|
|
|
.a-blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.a-corner {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
.a-corner::before, .a-corner::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: rgba(0, 212, 255, 0.2);
|
|
}
|
|
.a-corner::before { width: 24px; height: 1.5px; }
|
|
.a-corner::after { width: 1.5px; height: 24px; }
|
|
.a-corner.tl { top: 16px; left: 16px; }
|
|
.a-corner.tl::before { top: 0; left: 0; }
|
|
.a-corner.tl::after { top: 0; left: 0; }
|
|
.a-corner.tr { top: 16px; right: 16px; }
|
|
.a-corner.tr::before { top: 0; right: 0; }
|
|
.a-corner.tr::after { top: 0; right: 0; }
|
|
.a-corner.bl { bottom: 16px; left: 16px; }
|
|
.a-corner.bl::before { bottom: 0; left: 0; }
|
|
.a-corner.bl::after { bottom: 0; left: 0; }
|
|
.a-corner.br { bottom: 16px; right: 16px; }
|
|
.a-corner.br::before { bottom: 0; right: 0; }
|
|
.a-corner.br::after { bottom: 0; right: 0; }
|
|
|
|
/* inline logo SVG helper */
|
|
.inline-logo { display: inline-block; flex-shrink: 0; }
|
|
.inline-logo svg { display: block; }
|
|
|
|
/* Branded "i" — inline SVG glyph matching the logo */
|
|
.brand-i {
|
|
display: inline-block;
|
|
width: 0.55em;
|
|
height: 0.9em;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
top: 0.05em;
|
|
}
|
|
.brand-i svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ── Wallpaper controls ── */
|
|
.wallpaper-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.wp-btn {
|
|
padding: 8px 16px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-dim);
|
|
background: rgba(0, 212, 255, 0.04);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.wp-btn:hover { color: var(--text); border-color: rgba(0, 212, 255, 0.3); }
|
|
.wp-btn.active { color: var(--cyan); border-color: var(--cyan); background: rgba(0, 212, 255, 0.08); }
|
|
|
|
/* ── Light background variants ── */
|
|
.bg-light {
|
|
background: #f0f2f5 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
<h1><span>iNTERCEPT</span> Brand Pack</h1>
|
|
<p>Right-click any asset → Save Image / Screenshot at exact dimensions</p>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="logos">Logos</button>
|
|
<button class="tab" data-tab="profiles">Profile Pictures</button>
|
|
<button class="tab" data-tab="banners">Social Banners</button>
|
|
<button class="tab" data-tab="github">GitHub Assets</button>
|
|
<button class="tab" data-tab="wallpapers">Wallpapers</button>
|
|
<button class="tab" data-tab="stickers">Stickers</button>
|
|
<button class="tab" data-tab="release">Release Template</button>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
1. LOGOS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section active" id="logos">
|
|
<h2 class="section-title">Logo Variations</h2>
|
|
<p class="section-desc">Full lockup, icon-only, and horizontal versions on dark and light backgrounds</p>
|
|
<div class="asset-grid">
|
|
|
|
<!-- Full lockup dark -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Full Lockup — Dark</div>
|
|
<div class="asset-dimensions">800 x 300</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:800px;height:300px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;gap:28px;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="inline-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="120" height="120">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:64px;font-weight:800;letter-spacing:-1px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:400;color:rgba(0,212,255,0.5);letter-spacing:3px;margin-top:8px;">SIGNAL INTELLIGENCE PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Full lockup light -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Full Lockup — Light</div>
|
|
<div class="asset-dimensions">800 x 300</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:800px;height:300px;background:#f0f2f5;display:flex;align-items:center;justify-content:center;gap:28px;">
|
|
<div class="inline-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="120" height="120">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#0080a0" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#0080a0" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#0080a0" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#0080a0" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#0080a0" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#0080a0" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00b368"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#0080a0"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#0080a0"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#0080a0"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:64px;font-weight:800;letter-spacing:-1px;color:#1a1a2e;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00b368"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#0080a0"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#0080a0"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#0080a0"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:400;color:rgba(0,128,160,0.6);letter-spacing:3px;margin-top:8px;">SIGNAL INTELLIGENCE PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Icon only dark -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Icon Only — Dark</div>
|
|
<div class="asset-dimensions">400 x 400</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:400px;height:400px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="240" height="240" style="filter:drop-shadow(0 0 30px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wordmark only -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Wordmark Only — Dark</div>
|
|
<div class="asset-dimensions">600 x 150</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:600px;height:150px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;">
|
|
<div class="a-noise"></div>
|
|
<div style="position:relative;z-index:2;font-family:'Outfit',sans-serif;font-size:72px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
2. PROFILE PICTURES
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="profiles">
|
|
<h2 class="section-title">Profile Pictures</h2>
|
|
<p class="section-desc">Square format for GitHub, Twitter/X, Discord, and other platforms</p>
|
|
<div class="asset-grid">
|
|
|
|
<!-- Icon profile -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Icon Profile — Standard</div>
|
|
<div class="asset-dimensions">400 x 400</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:400px;height:400px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:300px;height:300px;background:#00d4ff;top:-80px;right:-80px;opacity:0.06;"></div>
|
|
<div class="a-blob" style="width:200px;height:200px;background:#00ff88;bottom:-60px;left:-40px;opacity:0.04;"></div>
|
|
<div class="a-corner tl"></div>
|
|
<div class="a-corner tr"></div>
|
|
<div class="a-corner bl"></div>
|
|
<div class="a-corner br"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="220" height="220" style="filter:drop-shadow(0 0 25px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wordmark profile -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Wordmark Profile</div>
|
|
<div class="asset-dimensions">400 x 400</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:400px;height:400px;background:#0a0a0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:250px;height:250px;background:#00d4ff;top:-60px;left:-60px;opacity:0.05;"></div>
|
|
<div class="a-corner tl"></div>
|
|
<div class="a-corner tr"></div>
|
|
<div class="a-corner bl"></div>
|
|
<div class="a-corner br"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="140" height="140" style="filter:drop-shadow(0 0 20px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;text-align:center;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:36px;font-weight:800;letter-spacing:-0.5px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(0,212,255,0.4);letter-spacing:3px;margin-top:6px;">SIGINT PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Minimal profile -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Minimal Profile — Rounded</div>
|
|
<div class="asset-dimensions">400 x 400</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:400px;height:400px;background:linear-gradient(135deg,#0a0a0f 0%,#0f1420 100%);display:flex;align-items:center;justify-content:center;border-radius:50%;">
|
|
<div class="a-noise" style="border-radius:50%;"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200" style="filter:drop-shadow(0 0 20px rgba(0,212,255,0.15));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
3. SOCIAL BANNERS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="banners">
|
|
<h2 class="section-title">Social Media Banners</h2>
|
|
<p class="section-desc">Twitter/X header and general social banners</p>
|
|
<div class="asset-grid">
|
|
|
|
<!-- Twitter header -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Twitter/X Header</div>
|
|
<div class="asset-dimensions">1500 x 500</div>
|
|
<div class="asset-canvas" style="overflow-x:auto;">
|
|
<div class="asset-base" style="width:1500px;height:500px;background:#0a0a0f;display:flex;align-items:center;padding:0 100px;gap:48px;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:500px;height:500px;background:#00d4ff;top:-200px;right:-100px;opacity:0.05;"></div>
|
|
<div class="a-blob" style="width:400px;height:400px;background:#00ff88;bottom:-200px;left:100px;opacity:0.03;"></div>
|
|
|
|
<!-- Left decorative signal wave -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 200" width="80" height="200" style="position:absolute;left:30px;top:150px;opacity:0.15;z-index:2;">
|
|
<path d="M40 0 Q0 50, 40 100 Q80 150, 40 200" stroke="#00d4ff" stroke-width="2" fill="none"/>
|
|
<path d="M50 20 Q20 60, 50 100 Q80 140, 50 180" stroke="#00d4ff" stroke-width="1.5" fill="none" opacity="0.6"/>
|
|
</svg>
|
|
|
|
<!-- Right decorative signal wave -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 200" width="80" height="200" style="position:absolute;right:30px;top:150px;opacity:0.15;z-index:2;">
|
|
<path d="M40 0 Q80 50, 40 100 Q0 150, 40 200" stroke="#00d4ff" stroke-width="2" fill="none"/>
|
|
<path d="M30 20 Q60 60, 30 100 Q0 140, 30 180" stroke="#00d4ff" stroke-width="1.5" fill="none" opacity="0.6"/>
|
|
</svg>
|
|
|
|
<div class="inline-logo" style="position:relative;z-index:3;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="160" height="160" style="filter:drop-shadow(0 0 30px rgba(0,212,255,0.15));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:3;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:80px;font-weight:800;letter-spacing:-2px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:14px;color:rgba(0,212,255,0.4);letter-spacing:4px;margin-top:12px;">SIGNAL INTELLIGENCE PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
4. GITHUB ASSETS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="github">
|
|
<h2 class="section-title">GitHub Assets</h2>
|
|
<p class="section-desc">Social preview (OG image) and README banner</p>
|
|
<div class="asset-grid">
|
|
|
|
<!-- Social preview -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Social Preview / OG Image</div>
|
|
<div class="asset-dimensions">1280 x 640</div>
|
|
<div class="asset-canvas" style="overflow-x:auto;">
|
|
<div class="asset-base" style="width:1280px;height:640px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;gap:40px;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:500px;height:500px;background:#00d4ff;top:-150px;right:-50px;opacity:0.06;"></div>
|
|
<div class="a-blob" style="width:350px;height:350px;background:#00ff88;bottom:-100px;left:-50px;opacity:0.04;"></div>
|
|
<div class="a-corner tl" style="top:24px;left:24px;"></div>
|
|
<div class="a-corner tr" style="top:24px;right:24px;"></div>
|
|
<div class="a-corner bl" style="bottom:24px;left:24px;"></div>
|
|
<div class="a-corner br" style="bottom:24px;right:24px;"></div>
|
|
|
|
<div style="position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;">
|
|
<div class="inline-logo" style="margin-bottom:24px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="140" height="140" style="filter:drop-shadow(0 0 30px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:84px;font-weight:800;letter-spacing:-2px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:24px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:16px;letter-spacing:0.5px;">Web-Based Signal Intelligence Platform</div>
|
|
<div style="display:flex;gap:24px;margin-top:28px;">
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,212,255,0.5);letter-spacing:2px;">SDR</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,0.15);">|</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,212,255,0.5);letter-spacing:2px;">RF ANALYSIS</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,0.15);">|</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,212,255,0.5);letter-spacing:2px;">34 MODES</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,0.15);">|</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(0,212,255,0.5);letter-spacing:2px;">OPEN SOURCE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- README banner -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">README Banner</div>
|
|
<div class="asset-dimensions">1200 x 300</div>
|
|
<div class="asset-canvas" style="overflow-x:auto;">
|
|
<div class="asset-base" style="width:1200px;height:300px;background:#0a0a0f;display:flex;align-items:center;justify-content:center;gap:32px;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:400px;height:400px;background:#00d4ff;top:-180px;right:100px;opacity:0.05;"></div>
|
|
<div class="a-blob" style="width:300px;height:300px;background:#00ff88;bottom:-180px;left:200px;opacity:0.03;"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" style="filter:drop-shadow(0 0 20px rgba(0,212,255,0.15));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:64px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:18px;font-weight:300;color:rgba(255,255,255,0.35);margin-top:8px;">Web-Based Signal Intelligence Platform</div>
|
|
</div>
|
|
<div style="position:relative;z-index:2;margin-left:auto;margin-right:60px;display:flex;flex-direction:column;gap:6px;">
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(0,212,255,0.4);letter-spacing:1.5px;display:flex;align-items:center;gap:8px;"><span style="width:4px;height:4px;border-radius:50%;background:#00ff88;opacity:0.6;"></span>34 Signal Modes</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(0,212,255,0.4);letter-spacing:1.5px;display:flex;align-items:center;gap:8px;"><span style="width:4px;height:4px;border-radius:50%;background:#00ff88;opacity:0.6;"></span>Multi-SDR Support</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(0,212,255,0.4);letter-spacing:1.5px;display:flex;align-items:center;gap:8px;"><span style="width:4px;height:4px;border-radius:50%;background:#00ff88;opacity:0.6;"></span>Open Source</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
5. WALLPAPERS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="wallpapers">
|
|
<h2 class="section-title">Wallpapers</h2>
|
|
<p class="section-desc">Desktop and mobile wallpapers — rendered at scale, screenshot at full resolution</p>
|
|
<div class="asset-grid">
|
|
|
|
<!-- Desktop 1920x1080 -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Desktop Wallpaper</div>
|
|
<div class="asset-dimensions">1920 x 1080 (shown at 50%)</div>
|
|
<div class="asset-canvas" style="overflow:auto;">
|
|
<div style="transform:scale(0.5);transform-origin:top left;width:1920px;height:1080px;">
|
|
<div class="asset-base" style="width:1920px;height:1080px;background:radial-gradient(ellipse at 30% 40%, #0e1420 0%, #0a0a0f 60%);display:flex;align-items:center;justify-content:center;">
|
|
<div class="a-grid" style="background-size:60px 60px;"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:800px;height:800px;background:#00d4ff;top:-300px;right:-100px;opacity:0.04;"></div>
|
|
<div class="a-blob" style="width:600px;height:600px;background:#00ff88;bottom:-200px;left:100px;opacity:0.03;"></div>
|
|
<div class="a-blob" style="width:400px;height:400px;background:#00d4ff;top:400px;left:600px;opacity:0.02;"></div>
|
|
|
|
<!-- Large centered logo -->
|
|
<div style="position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;">
|
|
<div class="inline-logo" style="margin-bottom:32px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200" style="filter:drop-shadow(0 0 40px rgba(0,212,255,0.15));opacity:0.8;">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:96px;font-weight:800;letter-spacing:-3px;color:#fff;line-height:1;opacity:0.9;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:14px;color:rgba(0,212,255,0.3);letter-spacing:6px;margin-top:16px;">SIGNAL INTELLIGENCE PLATFORM</div>
|
|
</div>
|
|
|
|
<!-- Bottom decorative bar -->
|
|
<div style="position:absolute;bottom:40px;left:60px;right:60px;display:flex;justify-content:space-between;z-index:3;">
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(0,212,255,0.15);letter-spacing:2px;">SDR // RF ANALYSIS // SIGINT</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(0,212,255,0.15);letter-spacing:2px;">github.com/smittix/intercept</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile 1080x1920 -->
|
|
<div class="asset-item">
|
|
<div class="asset-label">Mobile Wallpaper</div>
|
|
<div class="asset-dimensions">1080 x 1920 (shown at 35%)</div>
|
|
<div class="asset-canvas" style="overflow:auto;">
|
|
<div style="transform:scale(0.35);transform-origin:top left;width:1080px;height:1920px;">
|
|
<div class="asset-base" style="width:1080px;height:1920px;background:radial-gradient(ellipse at 50% 35%, #0e1420 0%, #0a0a0f 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;">
|
|
<div class="a-grid" style="background-size:50px 50px;"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:600px;height:600px;background:#00d4ff;top:-150px;right:-150px;opacity:0.05;"></div>
|
|
<div class="a-blob" style="width:500px;height:500px;background:#00ff88;bottom:200px;left:-150px;opacity:0.03;"></div>
|
|
|
|
<div style="position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;">
|
|
<div class="inline-logo" style="margin-bottom:40px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="260" height="260" style="filter:drop-shadow(0 0 50px rgba(0,212,255,0.15));opacity:0.8;">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:80px;font-weight:800;letter-spacing:-2px;color:#fff;line-height:1;opacity:0.9;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(0,212,255,0.3);letter-spacing:5px;margin-top:16px;">SIGINT PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
6. STICKERS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="stickers">
|
|
<h2 class="section-title">Stickers & Badges</h2>
|
|
<p class="section-desc">Print-ready sticker designs for die-cut and circular formats</p>
|
|
<div class="asset-grid" style="display:flex;flex-direction:row;flex-wrap:wrap;gap:32px;">
|
|
|
|
<!-- Circle sticker -->
|
|
<div class="asset-item" style="flex:1;min-width:300px;">
|
|
<div class="asset-label">Circle Sticker</div>
|
|
<div class="asset-dimensions">500 x 500</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:500px;height:500px;display:flex;align-items:center;justify-content:center;background:transparent;">
|
|
<div style="width:460px;height:460px;border-radius:50%;background:linear-gradient(135deg,#0a0a0f 0%,#111827 100%);border:3px solid rgba(0,212,255,0.3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,212,255,0.1);">
|
|
<div class="a-noise" style="border-radius:50%;"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="140" height="140" style="filter:drop-shadow(0 0 15px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;text-align:center;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:32px;font-weight:800;letter-spacing:-0.5px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(0,212,255,0.4);letter-spacing:3px;margin-top:6px;">SIGINT PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hex badge -->
|
|
<div class="asset-item" style="flex:1;min-width:300px;">
|
|
<div class="asset-label">Hex Badge</div>
|
|
<div class="asset-dimensions">500 x 500</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:500px;height:500px;display:flex;align-items:center;justify-content:center;background:transparent;">
|
|
<svg viewBox="0 0 500 500" width="500" height="500">
|
|
<defs>
|
|
<clipPath id="hex-clip">
|
|
<polygon points="250,30 450,145 450,355 250,470 50,355 50,145"/>
|
|
</clipPath>
|
|
</defs>
|
|
<!-- Hex background -->
|
|
<polygon points="250,30 450,145 450,355 250,470 50,355 50,145" fill="#0a0a0f" stroke="#00d4ff" stroke-width="2.5" opacity="1"/>
|
|
<polygon points="250,30 450,145 450,355 250,470 50,355 50,145" fill="none" stroke="rgba(0,212,255,0.1)" stroke-width="1" stroke-dasharray="4,4"/>
|
|
<!-- Logo -->
|
|
<g transform="translate(185, 120)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="130" height="130">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</g>
|
|
<!-- Text -->
|
|
<text x="250" y="310" text-anchor="middle" font-family="Outfit,sans-serif" font-size="36" font-weight="800" fill="white" letter-spacing="-0.5">iNTERCEPT</text>
|
|
<text x="250" y="340" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="10" fill="rgba(0,212,255,0.4)" letter-spacing="3">SIGINT</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rectangular badge -->
|
|
<div class="asset-item" style="flex:1;min-width:300px;">
|
|
<div class="asset-label">Badge Sticker</div>
|
|
<div class="asset-dimensions">500 x 200</div>
|
|
<div class="asset-canvas">
|
|
<div class="asset-base" style="width:500px;height:200px;background:#0a0a0f;border:2px solid rgba(0,212,255,0.25);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:20px;box-shadow:0 0 30px rgba(0,212,255,0.08);">
|
|
<div class="a-noise" style="border-radius:14px;"></div>
|
|
<div class="inline-logo" style="position:relative;z-index:2;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="90" height="90" style="filter:drop-shadow(0 0 12px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position:relative;z-index:2;">
|
|
<div style="font-family:'Outfit',sans-serif;font-size:44px;font-weight:800;letter-spacing:-1px;color:#fff;line-height:1;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(0,212,255,0.4);letter-spacing:3px;margin-top:6px;">SIGNAL INTELLIGENCE PLATFORM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
7. RELEASE TEMPLATE
|
|
════════════════════════════════════════════════ -->
|
|
<div class="section" id="release">
|
|
<h2 class="section-title">Release Announcement Template</h2>
|
|
<p class="section-desc">Reusable release card — edit the version, subtitle, and features for each release</p>
|
|
<div class="asset-grid">
|
|
|
|
<div class="asset-item">
|
|
<div class="asset-label">Release Card</div>
|
|
<div class="asset-dimensions">1200 x 675 (Twitter/X optimal)</div>
|
|
<div class="asset-canvas" style="overflow-x:auto;">
|
|
<div class="asset-base" style="width:1200px;height:675px;background:#0a0a0f;display:flex;flex-direction:column;">
|
|
<div class="a-grid"></div>
|
|
<div class="a-scanlines"></div>
|
|
<div class="a-noise"></div>
|
|
<div class="a-blob" style="width:500px;height:500px;background:#00d4ff;top:-180px;right:-100px;opacity:0.07;"></div>
|
|
<div class="a-blob" style="width:350px;height:350px;background:#00ff88;bottom:-100px;left:-50px;opacity:0.05;"></div>
|
|
<div class="a-blob" style="width:250px;height:250px;background:#00d4ff;bottom:80px;right:250px;opacity:0.03;"></div>
|
|
<div class="a-corner tl" style="top:20px;left:20px;width:28px;height:28px;"></div>
|
|
<div class="a-corner tr" style="top:20px;right:20px;width:28px;height:28px;"></div>
|
|
<div class="a-corner bl" style="bottom:20px;left:20px;width:28px;height:28px;"></div>
|
|
<div class="a-corner br" style="bottom:20px;right:20px;width:28px;height:28px;"></div>
|
|
|
|
<!-- Side line -->
|
|
<div style="position:absolute;right:48px;top:140px;bottom:120px;width:1px;background:linear-gradient(180deg,transparent,rgba(0,212,255,0.12) 30%,rgba(0,212,255,0.12) 70%,transparent);z-index:3;"></div>
|
|
|
|
<div style="position:relative;z-index:4;padding:52px 64px 44px;flex:1;display:flex;flex-direction:column;">
|
|
<!-- Top bar -->
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:rgba(0,212,255,0.5);display:flex;align-items:center;gap:8px;">
|
|
<span style="width:6px;height:6px;background:#00ff88;border-radius:50%;box-shadow:0 0 8px #00ff88,0 0 20px rgba(0,255,136,0.3);"></span>
|
|
Signal Intelligence Platform
|
|
</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:1.5px;">2026-03-12</div>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<div style="margin-top:20px;margin-bottom:36px;display:flex;align-items:flex-start;gap:28px;">
|
|
<div class="inline-logo" style="flex-shrink:0;margin-top:2px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="120" height="120" style="filter:drop-shadow(0 0 20px rgba(0,212,255,0.2));">
|
|
<path d="M15 30 Q5 50, 15 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M22 35 Q14 50, 22 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M29 40 Q23 50, 29 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<path d="M85 30 Q95 50, 85 70" stroke="#00d4ff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M78 35 Q86 50, 78 65" stroke="#00d4ff" stroke-width="3.5" fill="none" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M71 40 Q77 50, 71 60" stroke="#00d4ff" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="50" cy="22" r="7" fill="#00ff88"/>
|
|
<rect x="43" y="35" width="14" height="45" rx="2" fill="#00d4ff"/>
|
|
<rect x="36" y="35" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
<rect x="36" y="75" width="28" height="5" rx="1" fill="#00d4ff"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:68px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1;margin-bottom:4px;">
|
|
<span class="brand-i"><svg viewBox="36 14 28 68" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="20" r="6" fill="#00ff88"/><rect x="44" y="33" width="12" height="45" rx="2" fill="#00d4ff"/><rect x="38" y="33" width="24" height="4" rx="1" fill="#00d4ff"/><rect x="38" y="74" width="24" height="4" rx="1" fill="#00d4ff"/></svg></span>NTERCEPT
|
|
<span style="font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:#00d4ff;letter-spacing:2px;margin-left:6px;text-shadow:0 0 20px rgba(0,212,255,0.3);">v2.25.0</span>
|
|
</div>
|
|
<div style="font-family:'Outfit',sans-serif;font-size:22px;font-weight:300;color:rgba(255,255,255,0.45);margin-top:10px;letter-spacing:0.5px;">UI/UX Overhaul</div>
|
|
<div style="width:64px;height:2px;background:linear-gradient(90deg,#00d4ff,transparent);margin-top:16px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features -->
|
|
<div style="display:flex;flex-wrap:wrap;gap:10px 12px;flex:1;align-content:flex-start;">
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>SSE Connection Manager</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>Accessibility Improvements</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>Confirmation Modals</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>CSS Variable Adoption</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>Mobile UX Polish</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>Loading Button States</div>
|
|
<div style="display:flex;align-items:center;gap:8px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:6px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:0.3px;"><span style="width:5px;height:5px;border-radius:50%;background:#00d4ff;opacity:0.7;"></span>Error Reporting</div>
|
|
</div>
|
|
|
|
<!-- Bottom bar -->
|
|
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:28px;">
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,0.22);letter-spacing:0.5px;">github.com/smittix/intercept</div>
|
|
<div style="font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:rgba(0,212,255,0.2);">Open Source SIGINT</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab switching script -->
|
|
<script>
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
document.getElementById(tab.dataset.tab).classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|