jesus/TypeDialog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
TypeDialog/assets/index.html

616 lines
20 KiB
HTML
Raw Normal View History

chore: add imgs
2025-12-18 01:09:39 +00:00
<!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&amp;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>
chore: new projet folders structure
2025-12-24 03:11:32 +00:00
<p>© 2025 <b>TypeDialog</b> Typed dialogs for inputs, forms and schemas you can trust.</p>
chore: add imgs
2025-12-18 01:09:39 +00:00
<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>
Reference in New Issue Copy Permalink