1591 lines
50 KiB
HTML
1591 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>SecretumVault Branding Assets</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--sv-primary: #1a2744;
|
||
--sv-secondary: #2a3f6a;
|
||
--sv-cyan: #00d9ff;
|
||
--sv-gold: #ffd700;
|
||
--sv-purple: #8b5cf6;
|
||
|
||
/* Light mode */
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #f8f9fa;
|
||
--text-primary: #1f2937;
|
||
--text-secondary: #6b7280;
|
||
--border-color: #e5e7eb;
|
||
--card-bg: #ffffff;
|
||
--card-shadow: rgba(26, 39, 68, 0.15);
|
||
}
|
||
|
||
body.dark-mode {
|
||
--bg-primary: #0f0f1e;
|
||
--bg-secondary: #0a0a14;
|
||
--text-primary: #f1f5f9;
|
||
--text-secondary: #cbd5e1;
|
||
--border-color: #404040;
|
||
--card-bg: #1a1a2e;
|
||
--card-shadow: rgba(0, 217, 255, 0.2);
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
transition:
|
||
background 0.3s ease,
|
||
color 0.3s ease;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 40px;
|
||
padding: 30px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--sv-primary) 0%,
|
||
var(--sv-secondary) 100%
|
||
);
|
||
color: white;
|
||
border-radius: 12px;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2rem;
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
header p {
|
||
opacity: 0.9;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.theme-toggle {
|
||
padding: 10px 20px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||
color: white;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
color: var(--sv-cyan);
|
||
margin: 40px 0 20px 0;
|
||
padding-bottom: 10px;
|
||
border-bottom: 3px solid var(--sv-gold);
|
||
}
|
||
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 25px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--card-bg);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: 0 12px 24px var(--card-shadow);
|
||
transform: translateY(-6px);
|
||
border-color: var(--sv-cyan);
|
||
}
|
||
|
||
.card-preview {
|
||
background: var(--bg-secondary);
|
||
padding: 30px;
|
||
height: 280px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-preview img {
|
||
max-width: 90%;
|
||
max-height: 90%;
|
||
width: auto;
|
||
height: auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.card-info {
|
||
padding: 20px;
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: var(--sv-cyan);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.card-label {
|
||
display: inline-block;
|
||
background: rgba(0, 217, 255, 0.15);
|
||
color: var(--sv-cyan);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
width: fit-content;
|
||
}
|
||
|
||
.card-specs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin: 15px 0;
|
||
padding: 15px 0;
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-grow: 1;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.spec-label {
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.spec-value {
|
||
color: var(--sv-cyan);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.file-name-row {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.file-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
padding: 6px 10px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
color: var(--text-secondary);
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
background: rgba(0, 217, 255, 0.05);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.file-name:hover {
|
||
background: rgba(0, 217, 255, 0.15);
|
||
color: var(--sv-cyan);
|
||
}
|
||
|
||
.copy-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.file-name:hover .copy-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
.file-name.copied {
|
||
background: rgba(139, 95, 246, 0.2);
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 10px 16px;
|
||
background: rgba(0, 217, 255, 0.2);
|
||
border: 2px solid var(--sv-cyan);
|
||
color: var(--sv-cyan);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: rgba(0, 217, 255, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.scalability-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 15px;
|
||
padding: 20px;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.scalability-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.scalability-item:hover {
|
||
border-color: var(--sv-cyan);
|
||
box-shadow: 0 4px 12px var(--card-shadow);
|
||
}
|
||
|
||
.scalability-item img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.scalability-label {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.color-palette {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.color-swatch {
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.color-swatch:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.color-sample {
|
||
height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.color-info {
|
||
padding: 12px;
|
||
background: var(--card-bg);
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.color-name {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.color-codes {
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.color-code-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
border-radius: 3px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.color-code-item:hover {
|
||
color: var(--sv-cyan);
|
||
background: rgba(0, 217, 255, 0.05);
|
||
}
|
||
|
||
.color-code-item .copy-icon {
|
||
width: 12px;
|
||
height: 12px;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.color-code-item:hover .copy-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
.copy-tooltip {
|
||
position: absolute;
|
||
bottom: 120%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--sv-cyan);
|
||
color: #000;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 0.7rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.color-code-item.copied .copy-tooltip {
|
||
opacity: 1;
|
||
}
|
||
|
||
.typography-showcase {
|
||
padding: 30px;
|
||
background: var(--card-bg);
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.font-sample {
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.font-sample:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.font-title {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: var(--sv-cyan);
|
||
margin-bottom: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.font-display {
|
||
font-family: "Space Grotesk", sans-serif;
|
||
color: var(--text-primary);
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.font-display.large {
|
||
font-size: 3rem;
|
||
line-height: 1.2;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.font-display.medium {
|
||
font-size: 1.8rem;
|
||
line-height: 1.3;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.font-display.small {
|
||
font-size: 1.2rem;
|
||
line-height: 1.4;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.font-meta {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
padding: 15px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.font-meta-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.font-meta-label {
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.font-meta-value {
|
||
color: var(--sv-cyan);
|
||
font-weight: 600;
|
||
font-family: "Courier New", monospace;
|
||
}
|
||
|
||
.code-container {
|
||
position: relative;
|
||
margin: 10px 0;
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.code-container code {
|
||
flex: 1;
|
||
background: var(--bg-secondary);
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.code-copy-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 12px;
|
||
background: var(--sv-cyan);
|
||
color: #000;
|
||
border: none;
|
||
border-radius: 0 4px 4px 0;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.code-copy-btn:hover {
|
||
background: var(--sv-gold);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.code-copy-btn.copied {
|
||
background: var(--sv-purple);
|
||
}
|
||
|
||
.code-copy-btn.copied::after {
|
||
content: " ✓";
|
||
}
|
||
|
||
footer {
|
||
margin-top: 60px;
|
||
padding-top: 20px;
|
||
border-top: 2px solid var(--border-color);
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
header {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.scalability-grid {
|
||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||
}
|
||
|
||
.color-palette {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div>
|
||
<h1>🔐 SecretumVault</h1>
|
||
<p style="margin-left: 3em; margin-top: 0.5em">
|
||
Post-Quantum Cryptographic Secrets Management
|
||
</p>
|
||
</div>
|
||
<button class="theme-toggle" onclick="toggleTheme()">
|
||
🌙 Dark Mode
|
||
</button>
|
||
</header>
|
||
|
||
<!-- Logo Variants Section -->
|
||
<section>
|
||
<h2 class="section-title">Logo Variants</h2>
|
||
<div class="gallery">
|
||
<!-- Vertical Animated -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img src="secretumvault-logo.svg" alt="Vertical Logo" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Vertical</div>
|
||
<div class="card-label">Animated</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×280 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Hero Sections</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">Yes</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-logo.svg')"
|
||
>
|
||
secretumvault-logo.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-logo.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Horizontal Animated -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img src="secretumvault-logo-h.svg" alt="Horizontal Logo" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Horizontal</div>
|
||
<div class="card-label">Animated</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">400×120 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Headers & Nav</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">Yes</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-logo-h.svg')"
|
||
>
|
||
secretumvault-logo-h.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-logo-h.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertical Static -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img src="secretumvault-logo-s.svg" alt="Vertical Static Logo" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Vertical Static</div>
|
||
<div class="card-label">Static</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×280 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Static Layouts</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">No</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-logo-s.svg')"
|
||
>
|
||
secretumvault-logo-s.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-logo-s.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Horizontal Static -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img
|
||
src="secretumvault-logo-h-s.svg"
|
||
alt="Horizontal Static Logo"
|
||
/>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Horizontal Static</div>
|
||
<div class="card-label">Static</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">400×120 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Static Headers</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">No</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-logo-h-s.svg')"
|
||
>
|
||
secretumvault-logo-h-s.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-logo-h-s.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Icon & Monogram Section -->
|
||
<section>
|
||
<h2 class="section-title">Icon & Monogram</h2>
|
||
<div class="gallery">
|
||
<!-- Icon Animated -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img src="secretumvault-icon.svg" alt="Icon Animated" width="200" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Icon Monogram</div>
|
||
<div class="card-label">Animated</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×200 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Favicons, Avatars</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">Yes</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-icon.svg')"
|
||
>
|
||
secretumvault-icon.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-icon.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Icon Static -->
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<img src="secretumvault-icon-s.svg" alt="Icon Static" width="200" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Icon Monogram</div>
|
||
<div class="card-label">Static</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×200 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Static Icons</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">No</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-icon-s.svg')"
|
||
>
|
||
secretumvault-icon-s.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-icon-s.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Text Only Section -->
|
||
<section>
|
||
<h2 class="section-title">Text Only</h2>
|
||
<div class="gallery">
|
||
<div class="card">
|
||
<div
|
||
class="card-preview"
|
||
style="
|
||
font-family: "Space Grotesk", sans-serif;
|
||
font-size: 3.5rem;
|
||
font-weight: 700;
|
||
color: var(--sv-cyan);
|
||
"
|
||
>
|
||
SecretumVault
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Logo Text</div>
|
||
<div class="card-label">Typography</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Font</span>
|
||
<span class="spec-value">Space Grotesk</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Weight</span>
|
||
<span class="spec-value">Bold (700)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Color</span>
|
||
<span class="spec-value">#00D9FF</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Tracking</span>
|
||
<span class="spec-value">Normal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Black & White Versions Section -->
|
||
<section>
|
||
<h2 class="section-title">Black & White Versions</h2>
|
||
<div class="gallery">
|
||
<!-- Logo B&W -->
|
||
<div class="card">
|
||
<div class="card-preview" style="background: transparent">
|
||
<img src="secretumvault-logo-bn.svg" alt="Logo Black & White" width="200" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Logo Monochrome</div>
|
||
<div class="card-label">Grayscale</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×200 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Print & B&W</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">No</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-logo-bn.svg')"
|
||
>
|
||
secretumvault-logo-bn.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-logo-bn.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Icon B&W -->
|
||
<div class="card">
|
||
<div class="card-preview" style="background: transparent">
|
||
<img src="secretumvault-icon-bn.svg" alt="Icon Black & White" width="200" />
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-title">Icon Monochrome</div>
|
||
<div class="card-label">Grayscale</div>
|
||
<div class="card-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-label">Size</span>
|
||
<span class="spec-value">200×200 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Use Case</span>
|
||
<span class="spec-value">Print & B&W</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">No</span>
|
||
</div>
|
||
</div>
|
||
<div class="file-name-row">
|
||
<span
|
||
class="file-name"
|
||
onclick="copyToClipboard(this, 'secretumvault-icon-bn.svg')"
|
||
>
|
||
secretumvault-icon-bn.svg
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<a
|
||
href="secretumvault-icon-bn.svg"
|
||
class="btn"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>Open in new tab</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Scalability & Icon Sizes Section -->
|
||
<section>
|
||
<h2 class="section-title">Scalability & Icon Sizes</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 20px">
|
||
Icons scale beautifully from 16px to 512px
|
||
</p>
|
||
<div class="scalability-grid">
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="16px"
|
||
style="width: 16px; height: 16px"
|
||
/>
|
||
<span class="scalability-label">16px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="24px"
|
||
style="width: 24px; height: 24px"
|
||
/>
|
||
<span class="scalability-label">24px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="32px"
|
||
style="width: 32px; height: 32px"
|
||
/>
|
||
<span class="scalability-label">32px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="48px"
|
||
style="width: 48px; height: 48px"
|
||
/>
|
||
<span class="scalability-label">48px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="64px"
|
||
style="width: 64px; height: 64px"
|
||
/>
|
||
<span class="scalability-label">64px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="128px"
|
||
style="width: 128px; height: 128px"
|
||
/>
|
||
<span class="scalability-label">128px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="256px"
|
||
style="width: 256px; height: 256px"
|
||
/>
|
||
<span class="scalability-label">256px</span>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<img
|
||
src="secretumvault-icon.svg"
|
||
alt="512px"
|
||
style="width: 512px; height: 512px"
|
||
/>
|
||
<span class="scalability-label">512px</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette Section -->
|
||
<section>
|
||
<h2 class="section-title">Color Palette</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 20px">
|
||
Click any color code to copy to clipboard
|
||
</p>
|
||
<div class="color-palette">
|
||
<div class="color-swatch">
|
||
<div class="color-sample" style="background-color: #0a1929">
|
||
0a1929
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Deep Vault</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#0a1929')"
|
||
>
|
||
#0a1929
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(10, 25, 41)')"
|
||
>
|
||
rgb(10, 25, 41)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-sample" style="background-color: #1a2744">
|
||
1a2744
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Primary</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#1a2744')"
|
||
>
|
||
#1a2744
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(26, 39, 68)')"
|
||
>
|
||
rgb(26, 39, 68)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-sample" style="background-color: #2a3f6a">
|
||
2a3f6a
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Secondary</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#2a3f6a')"
|
||
>
|
||
#2a3f6a
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(42, 63, 106)')"
|
||
>
|
||
rgb(42, 63, 106)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div
|
||
class="color-sample"
|
||
style="background-color: #00d9ff; color: #000"
|
||
>
|
||
00d9ff
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Quantum Cyan</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#00d9ff')"
|
||
>
|
||
#00d9ff
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(0, 217, 255)')"
|
||
>
|
||
rgb(0, 217, 255)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div
|
||
class="color-sample"
|
||
style="background-color: #ffd700; color: #000"
|
||
>
|
||
ffd700
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Gold Accent</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#ffd700')"
|
||
>
|
||
#ffd700
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(255, 215, 0)')"
|
||
>
|
||
rgb(255, 215, 0)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-sample" style="background-color: #8b5cf6">
|
||
8b5cf6
|
||
</div>
|
||
<div class="color-info">
|
||
<div class="color-name">Purple</div>
|
||
<div class="color-codes">
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, '#8b5cf6')"
|
||
>
|
||
#8b5cf6
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
<div
|
||
class="color-code-item"
|
||
onclick="copyColor(this, 'rgb(139, 92, 246)')"
|
||
>
|
||
rgb(139, 92, 246)
|
||
<svg
|
||
class="copy-icon"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path
|
||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||
></path>
|
||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
||
</svg>
|
||
<span class="copy-tooltip">Copied!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography Section -->
|
||
<section>
|
||
<h2 class="section-title">Typography</h2>
|
||
<div class="typography-showcase">
|
||
<div class="font-sample">
|
||
<div class="font-title">Primary Font - Space Grotesk</div>
|
||
<div class="font-display large">The quick brown fox</div>
|
||
<div class="font-display medium">Display Heading</div>
|
||
<div class="font-display small">Body Text</div>
|
||
<div class="font-meta">
|
||
<div class="font-meta-item">
|
||
<span class="font-meta-label">Font Family</span>
|
||
<span class="font-meta-value">Space Grotesk</span>
|
||
</div>
|
||
<div class="font-meta-item">
|
||
<span class="font-meta-label">Weights</span>
|
||
<span class="font-meta-value">600, 700</span>
|
||
</div>
|
||
<div class="font-meta-item">
|
||
<span class="font-meta-label">Category</span>
|
||
<span class="font-meta-value">Sans Serif</span>
|
||
</div>
|
||
<div class="font-meta-item">
|
||
<span class="font-meta-label">License</span>
|
||
<span class="font-meta-value">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 15px">
|
||
<p
|
||
style="
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 10px;
|
||
"
|
||
>
|
||
<strong>Import from Google Fonts:</strong>
|
||
</p>
|
||
<div class="code-container">
|
||
<code
|
||
><link
|
||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap"
|
||
rel="stylesheet"></code
|
||
>
|
||
<button
|
||
class="code-copy-btn"
|
||
onclick="copyCode(this, '@import url(\'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap\');')"
|
||
>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<div class="code-container">
|
||
<code>font-family: 'Space Grotesk', sans-serif;</code>
|
||
<button
|
||
class="code-copy-btn"
|
||
onclick="copyCode(this, 'font-family: \'Space Grotesk\', sans-serif;')"
|
||
>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>
|
||
© 2025 <b>SecretumVault</b> Post-quantum cryptographic secrets vault
|
||
for modern infrastructure
|
||
</p>
|
||
<p>Made with ❤️ • Built in Rust</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// Theme Toggle
|
||
function toggleTheme() {
|
||
document.body.classList.toggle("dark-mode");
|
||
localStorage.setItem(
|
||
"theme",
|
||
document.body.classList.contains("dark-mode") ? "dark" : "light",
|
||
);
|
||
}
|
||
|
||
// Load saved theme preference
|
||
if (localStorage.getItem("theme") === "dark") {
|
||
document.body.classList.add("dark-mode");
|
||
}
|
||
|
||
// Copy to Clipboard - File Names
|
||
function copyToClipboard(element, text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
element.classList.add("copied");
|
||
setTimeout(() => element.classList.remove("copied"), 2000);
|
||
});
|
||
}
|
||
|
||
// Copy to Clipboard - Color Codes
|
||
function copyColor(element, color) {
|
||
navigator.clipboard.writeText(color).then(() => {
|
||
element.classList.add("copied");
|
||
setTimeout(() => element.classList.remove("copied"), 2000);
|
||
});
|
||
}
|
||
|
||
// Copy to Clipboard - Code Blocks
|
||
function copyCode(button, code) {
|
||
navigator.clipboard.writeText(code).then(() => {
|
||
button.classList.add("copied");
|
||
setTimeout(() => button.classList.remove("copied"), 2000);
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|