9cef9b8d57
Merge _configs/ into config/ for single configuration directory. Update all path references. Changes: - Move _configs/* to config/ - Update .gitignore for new patterns - No code references to _configs/ found Impact: -1 root directory (layout_conventions.md compliance)
947 lines
36 KiB
HTML
947 lines
36 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SYNTAXIS - Color Palette & Typography</title>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="assets/header-shared.css" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--syntaxis-blue: #2c5f8e;
|
|
--syntaxis-gray: #757773;
|
|
--syntaxis-gold: #d97706;
|
|
--syntaxis-green: #059669;
|
|
--syntaxis-purple: #7c3aed;
|
|
--font-primary:
|
|
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
sans-serif;
|
|
--font-secondary:
|
|
"Source Sans Pro", -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-secondary);
|
|
background: #ffffff;
|
|
color: #1f2937;
|
|
transition:
|
|
background 0.3s ease,
|
|
color 0.3s ease;
|
|
}
|
|
|
|
body.dark-mode {
|
|
background: #1a1a1a;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem 3rem 2rem;
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section h2 {
|
|
font-family: var(--font-primary);
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--syntaxis-blue);
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.01em;
|
|
border-bottom: 3px solid var(--syntaxis-gold);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
body.dark-mode .section h2 {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* Color Grid */
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.color-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
body.dark-mode .color-card {
|
|
background: #1e293b;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.color-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 100%;
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.color-details {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.color-name {
|
|
font-family: var(--font-primary);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--syntaxis-blue);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
body.dark-mode .color-name {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.color-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
background: #f9fafb;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid var(--syntaxis-blue);
|
|
}
|
|
|
|
body.dark-mode .color-code {
|
|
background: #334155;
|
|
border-left-color: #60a5fa;
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.color-code-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.color-code-line:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.color-label {
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
}
|
|
|
|
body.dark-mode .color-label {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.color-value {
|
|
font-weight: 600;
|
|
color: var(--syntaxis-blue);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
body.dark-mode .color-value {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* Typography */
|
|
.typography-showcase {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.typography-item {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
body.dark-mode .typography-item {
|
|
background: #252525;
|
|
border-color: #404040;
|
|
}
|
|
|
|
.typography-item h3 {
|
|
font-family: var(--font-primary);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--syntaxis-gold);
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
|
|
body.dark-mode .typography-item h3 {
|
|
border-bottom-color: #334155;
|
|
}
|
|
|
|
.typography-example {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.typography-example.headline {
|
|
font-family: var(--font-primary);
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.01em;
|
|
color: var(--syntaxis-blue);
|
|
}
|
|
|
|
body.dark-mode .typography-example.headline {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.typography-example.body {
|
|
font-family: var(--font-secondary);
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
color: #4b5563;
|
|
}
|
|
|
|
body.dark-mode .typography-example.body {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.typography-example.code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
color: #7c3aed;
|
|
background: #f9fafb;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
body.dark-mode .typography-example.code {
|
|
background: #334155;
|
|
color: #a78bfa;
|
|
}
|
|
|
|
.font-stack {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #f9fafb;
|
|
border-radius: 4px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
body.dark-mode .font-stack {
|
|
background: #334155;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* Google Fonts Box Dark Mode */
|
|
body.dark-mode [style*="background: #F9FAFB"] {
|
|
background: #1e293b !important;
|
|
border-left-color: #60a5fa !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
body.dark-mode [style*="background: #F9FAFB"] strong {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
body.dark-mode [style*="background: #F9FAFB"] code {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
/* Copy-able Elements */
|
|
.copyable {
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.copyable:hover {
|
|
background: rgba(44, 95, 142, 0.1);
|
|
color: var(--syntaxis-blue);
|
|
}
|
|
|
|
body.dark-mode .copyable:hover {
|
|
background: rgba(96, 165, 250, 0.1);
|
|
color: #60a5fa;
|
|
}
|
|
|
|
/* For block-level copyable elements like code */
|
|
.font-stack.copyable {
|
|
display: block;
|
|
}
|
|
|
|
.font-stack.copyable:hover {
|
|
background: rgba(44, 95, 142, 0.15);
|
|
}
|
|
|
|
body.dark-mode .font-stack.copyable:hover {
|
|
background: rgba(96, 165, 250, 0.15);
|
|
}
|
|
|
|
/* For code copyable elements */
|
|
code.copyable {
|
|
display: block;
|
|
}
|
|
|
|
code.copyable:hover {
|
|
background: rgba(44, 95, 142, 0.1) !important;
|
|
}
|
|
|
|
body.dark-mode code.copyable:hover {
|
|
background: rgba(96, 165, 250, 0.1) !important;
|
|
}
|
|
|
|
.copy-icon {
|
|
display: none;
|
|
position: relative;
|
|
font-size: 0.8rem;
|
|
opacity: 0.6;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.copyable:hover .copy-icon {
|
|
display: inline;
|
|
}
|
|
|
|
.copyable-value {
|
|
margin-right: 1.2rem;
|
|
}
|
|
|
|
/* Google Fonts Copy Button */
|
|
.google-fonts-btn {
|
|
margin-top: 1rem;
|
|
background: var(--syntaxis-blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-family: var(--font-secondary);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.google-fonts-btn:hover {
|
|
background: #1e3a5f;
|
|
box-shadow: 0 4px 12px rgba(44, 95, 142, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
body.dark-mode .google-fonts-btn {
|
|
background: #3d5a7d;
|
|
border-color: #3d5a7d;
|
|
color: #9ab8d9;
|
|
}
|
|
|
|
body.dark-mode .google-fonts-btn:hover {
|
|
background: #4a6b94;
|
|
border-color: #4a6b94;
|
|
color: #b0d0f0;
|
|
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
/* Toast notification */
|
|
.copy-toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: var(--syntaxis-blue);
|
|
color: white;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
z-index: 2000;
|
|
animation:
|
|
slideIn 0.3s ease-out,
|
|
slideOut 0.3s ease-out 2.7s forwards;
|
|
box-shadow: 0 4px 12px rgba(44, 95, 142, 0.3);
|
|
}
|
|
|
|
body.dark-mode .copy-toast {
|
|
background: #60a5fa;
|
|
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 0 1rem 2rem 1rem;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.color-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.typography-showcase {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shared-header">
|
|
<div class="header-content">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<h1 class="header-title">
|
|
<div class="header-logo">
|
|
<object
|
|
data="syntax_logo_a.svg"
|
|
type="image/svg+xml"
|
|
></object>
|
|
</div>
|
|
</h1>
|
|
<div
|
|
style="
|
|
text-align: left;
|
|
border-left: 2px solid #9ca3af;
|
|
padding-left: 2rem;
|
|
"
|
|
>
|
|
<h2
|
|
style="
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #9ca3af;
|
|
"
|
|
>
|
|
🎨 Palette & Fonts
|
|
</h2>
|
|
<p
|
|
style="
|
|
margin: 0.5rem 0 0 0;
|
|
font-size: 0.8rem;
|
|
color: #9ca3af;
|
|
"
|
|
>
|
|
Colors & Typography System
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<p style="margin: 0; font-size: 0.9rem; color: #9ca3af">
|
|
Systematic Orchestration, Perfectly Arranged
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="header-nav">
|
|
<a
|
|
class="nav-btn"
|
|
data-nav-button="branding"
|
|
href="syntaxis-branding-showcase.html"
|
|
>🎨 Static Gallery</a
|
|
>
|
|
<a
|
|
class="nav-btn"
|
|
data-nav-button="animated"
|
|
href="syntaxis-animated-showcase.html"
|
|
>🎬 Animated Gallery</a
|
|
>
|
|
<button
|
|
class="header-btn"
|
|
data-toggle="dark-mode"
|
|
onclick="toggleDarkMode()"
|
|
>
|
|
🌙 Dark Mode
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container">
|
|
<!-- Color Palette Section -->
|
|
<section class="section">
|
|
<h2>🎨 Color Palette - SYNTAXIS System</h2>
|
|
<div class="color-grid" id="colorGrid">
|
|
<!-- Colores se cargarán dinámicamente -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography Section -->
|
|
<section class="section">
|
|
<h2>📝 Typography System</h2>
|
|
<div class="typography-showcase" id="typographyShowcase">
|
|
<!-- Tipografía se cargará dinámicamente -->
|
|
</div>
|
|
|
|
<!-- Google Fonts Import -->
|
|
<div
|
|
style="
|
|
background: #f9fafb;
|
|
padding: 1.5rem;
|
|
border-radius: 6px;
|
|
border-left: 4px solid var(--syntaxis-blue);
|
|
margin-top: 2rem;
|
|
"
|
|
>
|
|
<div style="color: #6b7280; font-size: 0.9rem">
|
|
<strong style="color: var(--syntaxis-blue)"
|
|
>Google Fonts Link:</strong
|
|
><br />
|
|
<code
|
|
style="
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
display: block;
|
|
margin-top: 0.75rem;
|
|
word-break: break-all;
|
|
line-height: 1.6;
|
|
padding: 0.5rem;
|
|
"
|
|
>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet">
|
|
</code>
|
|
<button
|
|
class="google-fonts-btn"
|
|
onclick="copyGoogleFontsLink()"
|
|
>
|
|
📋 Copy Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="section" style="margin-top: 2em">
|
|
<h3>📝 Use cases</h3>
|
|
<p style="color: #6b7280; margin-bottom: 1.5rem">
|
|
Font families and complete font stacks for web
|
|
implementation
|
|
</p>
|
|
|
|
<div class="font-grid">
|
|
<!-- Inter -->
|
|
<div class="font-card">
|
|
<div class="font-preview">
|
|
<div
|
|
class="font-name"
|
|
style="
|
|
font-family:
|
|
"Inter", sans-serif;
|
|
font-size: 1.5rem;
|
|
"
|
|
>
|
|
Headlines
|
|
</div>
|
|
<div
|
|
style="
|
|
font-family:
|
|
"Inter", sans-serif;
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.5rem;
|
|
"
|
|
>
|
|
Perfect for bold, modern headlines and
|
|
titles
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-bottom: 0.5rem;
|
|
"
|
|
>
|
|
Font Stack:
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif', 'Font Stack')">
|
|
<span class="copyable-value">'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
margin-top: 0.75rem;
|
|
"
|
|
>
|
|
Weights: 400, 500, 600, 700
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source Sans Pro -->
|
|
<div class="font-card">
|
|
<div class="font-preview">
|
|
<div
|
|
class="font-name"
|
|
style="
|
|
font-family:
|
|
"Source Sans Pro",
|
|
sans-serif;
|
|
font-size: 1.1rem;
|
|
"
|
|
>
|
|
Body Text
|
|
</div>
|
|
<div
|
|
style="
|
|
font-family:
|
|
"Source Sans Pro",
|
|
sans-serif;
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.5rem;
|
|
"
|
|
>
|
|
Excellent readability for body copy
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-bottom: 0.5rem;
|
|
"
|
|
>
|
|
Font Stack:
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('\'Source Sans Pro\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif', 'Font Stack')">
|
|
<span class="copyable-value">'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
margin-top: 0.75rem;
|
|
"
|
|
>
|
|
Weights: 400, 500, 600
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JetBrains Mono -->
|
|
<div class="font-card">
|
|
<div class="font-preview">
|
|
<div
|
|
class="font-name"
|
|
style="
|
|
font-family:
|
|
"JetBrains Mono",
|
|
monospace;
|
|
font-size: 0.95rem;
|
|
"
|
|
>
|
|
Code / Meta
|
|
</div>
|
|
<div
|
|
style="
|
|
font-family:
|
|
"JetBrains Mono",
|
|
monospace;
|
|
color: #6b7280;
|
|
font-size: 0.85rem;
|
|
margin-top: 0.5rem;
|
|
"
|
|
>
|
|
const palette = {...}
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-bottom: 0.5rem;
|
|
"
|
|
>
|
|
Font Stack:
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('\'JetBrains Mono\', \'Fira Code\', monospace', 'Font Stack')">
|
|
<span class="copyable-value">'JetBrains Mono', 'Fira Code', monospace</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 0.7rem;
|
|
color: #9ca3af;
|
|
margin-top: 0.75rem;
|
|
"
|
|
>
|
|
Weights: 400, 500
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const COLORS = [
|
|
{
|
|
name: "SYNTAXIS Blue",
|
|
hex: "#2C5F8E",
|
|
rgb: "44, 95, 142",
|
|
cmyk: "69%, 33%, 0%, 44%",
|
|
usage: "Primary color - Headers, CTAs, primary buttons",
|
|
symbol: "Phases, professionalism, trust",
|
|
},
|
|
{
|
|
name: "Balanced Gray",
|
|
hex: "#757773",
|
|
rgb: "117, 119, 115",
|
|
cmyk: "27%, 19%, 28%, 53%",
|
|
usage: "Secondary color - Text, borders, secondary elements",
|
|
symbol: "Architecture, neutrality, hierarchy",
|
|
new: true,
|
|
},
|
|
{
|
|
name: "Arrangement Gold",
|
|
hex: "#D97706",
|
|
rgb: "217, 119, 6",
|
|
cmyk: "0%, 45%, 97%, 15%",
|
|
usage: "Accent - Hover states, selections, achievements",
|
|
symbol: "Excellence, achievement, classic gold",
|
|
},
|
|
{
|
|
name: "System Green",
|
|
hex: "#059669",
|
|
rgb: "5, 150, 105",
|
|
cmyk: "97%, 0%, 30%, 41%",
|
|
usage: "Success - Success messages, completed tasks",
|
|
symbol: "Progress, completion, positive",
|
|
},
|
|
{
|
|
name: "Order Purple",
|
|
hex: "#7C3AED",
|
|
rgb: "124, 58, 237",
|
|
cmyk: "48%, 76%, 0%, 7%",
|
|
usage: "Special - VAPORA integration, AI features",
|
|
symbol: "Intelligence, innovation, special features",
|
|
},
|
|
];
|
|
|
|
const TYPOGRAPHY = [
|
|
{
|
|
name: "Headlines (Inter)",
|
|
font: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
weights: "700 (Bold), 600 (Semibold)",
|
|
example: "Headline Example",
|
|
type: "headline",
|
|
sizes: "H1: 48px • H2: 36px • H3: 24px",
|
|
},
|
|
{
|
|
name: "Body Text (Source Sans Pro)",
|
|
font: "'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
weights: "400 (Regular), 500 (Medium)",
|
|
example:
|
|
"The quick brown fox jumps over the lazy dog. Perfect for readable, professional body text.",
|
|
type: "body",
|
|
sizes: "Body: 16px • Small: 14px",
|
|
},
|
|
{
|
|
name: "Code (JetBrains Mono)",
|
|
font: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
|
|
weights: "400 (Regular)",
|
|
example: "function orchestrate() { /* Code here */ }",
|
|
type: "code",
|
|
sizes: "Code: 14px",
|
|
},
|
|
];
|
|
|
|
function rgbToCmyk(r, g, b) {
|
|
if (r === 255 && g === 255 && b === 255)
|
|
return "0%, 0%, 0%, 0%";
|
|
const c = 1 - r / 255;
|
|
const m = 1 - g / 255;
|
|
const y = 1 - b / 255;
|
|
const k = Math.min(c, m, y);
|
|
const cmyk = [
|
|
Math.round(((c - k) / (1 - k)) * 100),
|
|
Math.round(((m - k) / (1 - k)) * 100),
|
|
Math.round(((y - k) / (1 - k)) * 100),
|
|
Math.round(k * 100),
|
|
];
|
|
return cmyk.map((v) => v + "%").join(", ");
|
|
}
|
|
|
|
function copyToClipboard(text, label) {
|
|
navigator.clipboard
|
|
.writeText(text)
|
|
.then(() => {
|
|
const toast = document.createElement("div");
|
|
toast.className = "copy-toast";
|
|
toast.textContent = `✓ ${label} copied!`;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
})
|
|
.catch(() => {
|
|
const toast = document.createElement("div");
|
|
toast.className = "copy-toast";
|
|
toast.style.background = "#EF4444";
|
|
toast.textContent = "✗ Error copying";
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
});
|
|
}
|
|
|
|
function copyGoogleFontsLink() {
|
|
const link = '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">';
|
|
navigator.clipboard
|
|
.writeText(link)
|
|
.then(() => {
|
|
const toast = document.createElement("div");
|
|
toast.className = "copy-toast";
|
|
toast.textContent = "✓ Google Fonts Link copied!";
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
})
|
|
.catch(() => {
|
|
const toast = document.createElement("div");
|
|
toast.className = "copy-toast";
|
|
toast.style.background = "#EF4444";
|
|
toast.textContent = "✗ Error copying";
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3000);
|
|
});
|
|
}
|
|
|
|
function renderColors() {
|
|
const grid = document.getElementById("colorGrid");
|
|
grid.innerHTML = COLORS.map((color) => {
|
|
const rgb = color.rgb
|
|
.split(",")
|
|
.map((v) => parseInt(v.trim()));
|
|
const cmyk = rgbToCmyk(...rgb);
|
|
|
|
return `
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background: ${color.hex};">
|
|
${color.hex}
|
|
</div>
|
|
<div class="color-details">
|
|
<div class="color-name">
|
|
${color.name}
|
|
${color.new ? '<span style="background: var(--syntaxis-gold); color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; margin-left: 8px;">✨ NEW</span>' : ""}
|
|
</div>
|
|
<div class="color-code">
|
|
<div class="color-code-line">
|
|
<span class="color-label">HEX:</span>
|
|
<span class="color-value copyable" onclick="copyToClipboard('${color.hex}', 'HEX')"><span class="copyable-value">${color.hex}</span><span class="copy-icon">📋</span></span>
|
|
</div>
|
|
<div class="color-code-line">
|
|
<span class="color-label">RGB:</span>
|
|
<span class="color-value copyable" onclick="copyToClipboard('${color.rgb}', 'RGB')"><span class="copyable-value">${color.rgb}</span><span class="copy-icon">📋</span></span>
|
|
</div>
|
|
<div class="color-code-line">
|
|
<span class="color-label">CMYK:</span>
|
|
<span class="color-value copyable" onclick="copyToClipboard('${cmyk}', 'CMYK')"><span class="copyable-value">${cmyk}</span><span class="copy-icon">📋</span></span>
|
|
</div>
|
|
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.1);">
|
|
<div style="font-size: 0.8rem; line-height: 1.4; opacity: 0.9;">${color.usage}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
function renderTypography() {
|
|
const showcase = document.getElementById("typographyShowcase");
|
|
showcase.innerHTML = TYPOGRAPHY.map(
|
|
(typo) => `
|
|
<div class="typography-item">
|
|
<h3>${typo.name}</h3>
|
|
<div class="typography-example ${typo.type}" style="font-family: ${typo.font}">
|
|
${typo.example}
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('${typo.font}', 'Font Stack')">
|
|
<strong>Font:</strong> <span class="copyable-value">${typo.font}</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('${typo.weights}', 'Weights')">
|
|
<strong>Weights:</strong> <span class="copyable-value">${typo.weights}</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
<div class="font-stack copyable" onclick="copyToClipboard('${typo.sizes}', 'Sizes')">
|
|
<strong>Sizes:</strong> <span class="copyable-value">${typo.sizes}</span><span class="copy-icon">📋</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
).join("");
|
|
}
|
|
|
|
// Initialize
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
renderColors();
|
|
renderTypography();
|
|
});
|
|
</script>
|
|
|
|
<script src="assets/header-shared.js"></script>
|
|
</body>
|
|
</html>
|