jesus/syntaxis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
syntaxis/assets/showcases/palette-modal.html
Jesús Pérez 9cef9b8d57 refactor: consolidate configuration directories 
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)
2025-12-26 18:36:23 +00:00

169 lines
9.4 KiB
HTML
Raw Permalink Blame History

<!-- Palette Modal Content - To be loaded in both galleries -->
<div id="palette-modal">
<div class="palette-modal-content">
<div class="palette-modal-header">
<h2>Color Palette & Typography</h2>
<button class="palette-modal-close" onclick="closePaletteModal()">✕</button>
</div>
<!-- Color Palette Section -->
<div class="palette-section">
<h3>🎨 Color Palette - SYNTAXIS System</h3>
<p style="color: #6B7280; margin-bottom: 1.5rem;">Primary colors and their usage in the brand system</p>
<div class="color-grid">
<!-- SYNTAXIS Blue -->
<div class="color-card">
<div class="color-sample" style="background: #2C5F8E;"></div>
<div class="color-info">
<div class="color-name">SYNTAXIS Blue</div>
<div class="color-code" onclick="copyToClipboard('#2C5F8E')">#2C5F8E</div>
<div class="color-code" onclick="copyToClipboard('44, 95, 142')">RGB: 44, 95, 142</div>
<div class="color-code" onclick="copyToClipboard('69%, 33%, 0%, 44%')">CMYK: 69%, 33%, 0%, 44%</div>
<div style="font-size: 0.75rem; color: #9CA3AF; margin-top: 0.5rem;">Primary color for UI elements and headers</div>
</div>
</div>
<!-- Balanced Gray -->
<div class="color-card">
<div class="color-sample" style="background: #757773;"></div>
<div class="color-info">
<div class="color-name">Balanced Gray</div>
<div class="color-code" onclick="copyToClipboard('#757773')">#757773</div>
<div class="color-code" onclick="copyToClipboard('117, 119, 115')">RGB: 117, 119, 115</div>
<div class="color-code" onclick="copyToClipboard('38%, 25%, 29%, 26%')">CMYK: 38%, 25%, 29%, 26%</div>
<div style="font-size: 0.75rem; color: #9CA3AF; margin-top: 0.5rem;">Secondary color for text and accents</div>
</div>
</div>
<!-- Arrangement Gold -->
<div class="color-card">
<div class="color-sample" style="background: #D97706;"></div>
<div class="color-info">
<div class="color-name">Arrangement Gold</div>
<div class="color-code" onclick="copyToClipboard('#D97706')">#D97706</div>
<div class="color-code" onclick="copyToClipboard('217, 119, 6')">RGB: 217, 119, 6</div>
<div class="color-code" onclick="copyToClipboard('0%, 45%, 97%, 15%')">CMYK: 0%, 45%, 97%, 15%</div>
<div style="font-size: 0.75rem; color: #9CA3AF; margin-top: 0.5rem;">Accent color for highlights and emphasis</div>
</div>
</div>
<!-- System Green -->
<div class="color-card">
<div class="color-sample" style="background: #059669;"></div>
<div class="color-info">
<div class="color-name">System Green</div>
<div class="color-code" onclick="copyToClipboard('#059669')">#059669</div>
<div class="color-code" onclick="copyToClipboard('5, 150, 105')">RGB: 5, 150, 105</div>
<div class="color-code" onclick="copyToClipboard('97%, 0%, 30%, 41%')">CMYK: 97%, 0%, 30%, 41%</div>
<div style="font-size: 0.75rem; color: #9CA3AF; margin-top: 0.5rem;">Success state and positive feedback</div>
</div>
</div>
<!-- Order Purple -->
<div class="color-card">
<div class="color-sample" style="background: #7C3AED;"></div>
<div class="color-info">
<div class="color-name">Order Purple</div>
<div class="color-code" onclick="copyToClipboard('#7C3AED')">#7C3AED</div>
<div class="color-code" onclick="copyToClipboard('124, 58, 237')">RGB: 124, 58, 237</div>
<div class="color-code" onclick="copyToClipboard('48%, 76%, 0%, 7%')">CMYK: 48%, 76%, 0%, 7%</div>
<div style="font-size: 0.75rem; color: #9CA3AF; margin-top: 0.5rem;">AI features and special elements</div>
</div>
</div>
</div>
</div>
<!-- Typography Section -->
<div class="palette-section">
<h3>📝 Typography System</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" onclick="copyToClipboard(\"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\")">
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
</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" onclick="copyToClipboard(\"'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\")">
'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
</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" onclick="copyToClipboard(\"'JetBrains Mono', 'Fira Code', monospace\")">
'JetBrains Mono', 'Fira Code', monospace
</div>
<div style="font-size: 0.7rem; color: #9CA3AF; margin-top: 0.75rem;">Weights: 400, 500</div>
</div>
</div>
</div>
<!-- Google Fonts Import -->
<div class="palette-section" style="background: #F9FAFB; padding: 1rem; border-radius: 6px; border-left: 4px solid var(--syntaxis-blue);">
<div style="color: #6B7280; font-size: 0.85rem;">
<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.5rem; word-break: break-all;">
&lt;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"&gt;
</code>
</div>
</div>
</div>
</div>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
// Visual feedback
const tempDiv = document.createElement('div');
tempDiv.textContent = 'Copied!';
tempDiv.style.cssText = `
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: fadeOut 2s ease-out forwards;
`;
document.body.appendChild(tempDiv);
setTimeout(() => tempDiv.remove(), 2000);
});
}
// Add animation
const style = document.createElement('style');
style.textContent = `
@keyframes fadeOut {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
`;
document.head.appendChild(style);
</script>
Reference in New Issue View Git Blame Copy Permalink