616 lines
20 KiB
HTML
616 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>TypeDialog Logos</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--td-primary: #3a3a50;
|
||
--td-accent: #4f46e5;
|
||
--td-white: #ffffff;
|
||
--td-text-dark: #1f2937;
|
||
--td-bg-light: #f9fafb;
|
||
--td-border: #e5e7eb;
|
||
|
||
/* Light mode */
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: #f9fafb;
|
||
--text-primary: #1f2937;
|
||
--text-secondary: #6b7280;
|
||
--border-color: #e5e7eb;
|
||
--card-bg: #ffffff;
|
||
--card-shadow: rgba(58, 58, 80, 0.1);
|
||
}
|
||
|
||
body.dark-mode {
|
||
--bg-primary: #0f0f1e;
|
||
--bg-secondary: #0a0a14;
|
||
--text-primary: #f1f5f9;
|
||
--text-secondary: #cbd5e1;
|
||
--border-color: #404040;
|
||
--card-bg: #1a1a2e;
|
||
--card-shadow: rgba(79, 70, 229, 0.2);
|
||
}
|
||
|
||
body {
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
transition: background 0.3s ease, color 0.3s ease;
|
||
padding: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 50px;
|
||
padding: 40px;
|
||
background: linear-gradient(135deg, var(--td-primary) 0%, var(--td-accent) 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 2.5rem;
|
||
font-weight: 600;
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
header p {
|
||
opacity: 0.9;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.header-left {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.theme-toggle {
|
||
padding: 12px 24px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||
color: white;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-color: white;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.75rem;
|
||
margin-bottom: 30px;
|
||
color: var(--td-accent);
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid var(--border-color);
|
||
}
|
||
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 8px var(--card-shadow);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 16px var(--card-shadow);
|
||
}
|
||
|
||
.card-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 200px;
|
||
margin-bottom: 20px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.card-preview svg {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
.card-preview object {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.card-info {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.card-filename {
|
||
font-family: "Monaco", "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
word-break: break-all;
|
||
padding: 8px 12px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.card-filename:hover {
|
||
background: var(--border-color);
|
||
}
|
||
|
||
.card-meta {
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
transition: all 0.2s ease;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--td-accent);
|
||
color: white;
|
||
border-color: var(--td-accent);
|
||
}
|
||
|
||
.scalability-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.scalability-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.scalability-item-display {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
margin-bottom: 15px;
|
||
height: 200px;
|
||
}
|
||
|
||
.color-palette {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.color-swatch {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 8px var(--card-shadow);
|
||
}
|
||
|
||
.color-box {
|
||
width: 100%;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
margin-bottom: 15px;
|
||
border: 1px solid var(--border-color);
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.color-box:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.color-code {
|
||
font-family: "Monaco", "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
word-break: break-all;
|
||
padding: 8px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.color-code:hover {
|
||
background: var(--border-color);
|
||
}
|
||
|
||
.color-label {
|
||
font-weight: 600;
|
||
margin-top: 10px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
color: var(--text-secondary);
|
||
border-top: 1px solid var(--border-color);
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.notification {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: var(--td-primary);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 8px;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: all 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.notification.show {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-left">
|
||
<h1>🎨 TypeDialog Logos</h1>
|
||
<p>Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||
</div>
|
||
<button class="theme-toggle" onclick="toggleTheme()">🌙 Dark Mode</button>
|
||
</header>
|
||
|
||
<!-- Logo Variants -->
|
||
<section>
|
||
<h2>📋 Logo Variants</h2>
|
||
<div class="gallery">
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_logo.svg" type="image/svg+xml" width="150"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo.svg')">typedialog_logo.svg</div>
|
||
<div class="card-meta">Vertical • Animated • Full Color</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_logo.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_logo_h.svg" type="image/svg+xml" width="200" height="64"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h.svg')">typedialog_logo_h.svg</div>
|
||
<div class="card-meta">Horizontal • Animated • Full Color</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_logo_h.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_logo_s.svg" type="image/svg+xml" width="150"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_s.svg')">typedialog_logo_s.svg</div>
|
||
<div class="card-meta">Vertical • Static • Full Color</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_logo_s.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_logo_h_s.svg" type="image/svg+xml" width="200" height="64"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h_s.svg')">typedialog_logo_h_s.svg</div>
|
||
<div class="card-meta">Horizontal • Static • Full Color</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_logo_h_s.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Icon & Mark -->
|
||
<section>
|
||
<h2>🎯 Icon & Mark</h2>
|
||
<div class="gallery">
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_icon.svg" type="image/svg+xml" width="120"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon.svg')">typedialog_icon.svg</div>
|
||
<div class="card-meta">64×64 • Animated • App Icon</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_icon.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="120"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon_s.svg')">typedialog_icon_s.svg</div>
|
||
<div class="card-meta">64×64 • Static • Favicon</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_icon_s.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Text Only -->
|
||
<section>
|
||
<h2>✍️ Typography</h2>
|
||
<div class="gallery">
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_text.svg" type="image/svg+xml" width="200"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_text.svg')">typedialog_text.svg</div>
|
||
<div class="card-meta">Text • Animated • Wordmark</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_text.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview">
|
||
<object data="typedialog_text_s.svg" type="image/svg+xml" width="200"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_text_s.svg')">typedialog_text_s.svg</div>
|
||
<div class="card-meta">Text • Static • Wordmark</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_text_s.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Black & White -->
|
||
<section>
|
||
<h2>⚫ Black & White</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 20px;">For print, stamping, and monochrome contexts</p>
|
||
<div class="gallery">
|
||
<div class="card">
|
||
<div class="card-preview" style="background-color: #f5f5f5;">
|
||
<object data="typedialog_icon_bn.svg" type="image/svg+xml" width="120"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon_bn.svg')">typedialog_icon_bn.svg</div>
|
||
<div class="card-meta">Icon • Monochrome • Print</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_icon_bn.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-preview" style="background-color: #f5f5f5;">
|
||
<object data="typedialog_logo_h_bn.svg" type="image/svg+xml" width="200" height="64"></object>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h_bn.svg')">typedialog_logo_h_bn.svg</div>
|
||
<div class="card-meta">Horizontal • Monochrome • Print</div>
|
||
</div>
|
||
<div class="card-actions">
|
||
<button class="btn" onclick="downloadSvg('typedialog_logo_h_bn.svg')">Download</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Scalability -->
|
||
<section>
|
||
<h2>📏 Scalability Test</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 30px;">Icon clarity at different sizes</p>
|
||
<div class="scalability-grid">
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="16" height="16"></object>
|
||
</div>
|
||
<div style="font-weight: 600; color: var(--text-primary);">16×16</div>
|
||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Favicon</div>
|
||
</div>
|
||
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="32" height="32"></object>
|
||
</div>
|
||
<div style="font-weight: 600; color: var(--text-primary);">32×32</div>
|
||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Browser tab</div>
|
||
</div>
|
||
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="64" height="64"></object>
|
||
</div>
|
||
<div style="font-weight: 600; color: var(--text-primary);">64×64</div>
|
||
<div style="font-size: 0.9rem; color: var(--text-secondary);">App icon</div>
|
||
</div>
|
||
|
||
<div class="scalability-item">
|
||
<div class="scalability-item-display">
|
||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="128" height="128"></object>
|
||
</div>
|
||
<div style="font-weight: 600; color: var(--text-primary);">128×128</div>
|
||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Apple touch</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section>
|
||
<h2>🎨 Color Palette</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 20px;">Official TypeDialog brand colors (click to copy)</p>
|
||
<div class="color-palette">
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #3a3a50;" onclick="copyToClipboard('#3a3a50')"></div>
|
||
<div class="color-label">Primary Gray</div>
|
||
<div class="color-code" onclick="copyToClipboard('#3a3a50')">#3a3a50</div>
|
||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Bubble, primary text</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #4f46e5;" onclick="copyToClipboard('#4f46e5')"></div>
|
||
<div class="color-label">Accent Indigo</div>
|
||
<div class="color-code" onclick="copyToClipboard('#4f46e5')">#4f46e5</div>
|
||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Cursor, interactive</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #8f96a3;" onclick="copyToClipboard('#8f96a3')"></div>
|
||
<div class="color-label">Secondary Gray</div>
|
||
<div class="color-code" onclick="copyToClipboard('#8f96a3')">#8f96a3</div>
|
||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Text, secondary elements</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-box" style="background: #ffffff; border: 2px solid #e5e7eb;" onclick="copyToClipboard('#ffffff')"></div>
|
||
<div class="color-label">White</div>
|
||
<div class="color-code" onclick="copyToClipboard('#ffffff')">#ffffff</div>
|
||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Brackets, accents</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography -->
|
||
<section>
|
||
<h2>✏️ Typography</h2>
|
||
<div style="background: var(--card-bg); padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px var(--card-shadow);">
|
||
<div style="margin-bottom: 30px;">
|
||
<div style="font-family: Inter, sans-serif; font-size: 2rem; font-weight: 600; margin-bottom: 10px;">TypeDialog</div>
|
||
<div style="font-size: 0.95rem; color: var(--text-secondary);">Font: Inter • Weight: 500 • Size: 16-20px</div>
|
||
</div>
|
||
<div style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.8;">
|
||
<p><strong>Usage:</strong> Inter is used for all typography in TypeDialog branding. The font is clean, modern, and highly readable at all sizes.</p>
|
||
<p style="margin-top: 15px;"><strong>Import:</strong> <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');</code></p>
|
||
<p style="margin-top: 15px;"><strong>Font-family:</strong> <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;</code></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2025 TypeDialog. Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||
<p style="margin-top: 10px; font-size: 0.9rem;">Made with <span style="color: var(--td-accent);">❤️</span> • Built in Rust</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<div class="notification" id="notification"></div>
|
||
|
||
<script>
|
||
// Theme toggle
|
||
function toggleTheme() {
|
||
const isDark = document.body.classList.toggle('dark-mode');
|
||
localStorage.setItem('typedialog-theme', isDark ? 'dark' : 'light');
|
||
updateThemeButton();
|
||
}
|
||
|
||
function updateThemeButton() {
|
||
const btn = document.querySelector('.theme-toggle');
|
||
const isDark = document.body.classList.contains('dark-mode');
|
||
btn.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
|
||
}
|
||
|
||
// Load theme preference
|
||
if (localStorage.getItem('typedialog-theme') === 'dark') {
|
||
document.body.classList.add('dark-mode');
|
||
}
|
||
updateThemeButton();
|
||
|
||
// Copy to clipboard
|
||
function copyToClipboard(text) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
showNotification('Copied: ' + text);
|
||
});
|
||
}
|
||
|
||
function downloadSvg(filename) {
|
||
showNotification('Download: ' + filename);
|
||
// In a real app, this would trigger a download
|
||
}
|
||
|
||
function showNotification(message) {
|
||
const notification = document.getElementById('notification');
|
||
notification.textContent = message;
|
||
notification.classList.add('show');
|
||
setTimeout(() => {
|
||
notification.classList.remove('show');
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|