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)
674 lines
23 KiB
HTML
674 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SYNTAXIS Logo Animado - Galería Completa</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 40px 20px;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
padding: 40px;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #2C5F8E;
|
|
margin-bottom: 10px;
|
|
font-size: 3em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #6B7280;
|
|
margin-bottom: 20px;
|
|
font-size: 1.3em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.intro {
|
|
color: #4b5563;
|
|
max-width: 800px;
|
|
margin: 20px auto 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
padding: 40px;
|
|
margin-bottom: 40px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.section h2 {
|
|
color: #2C5F8E;
|
|
margin-bottom: 15px;
|
|
font-size: 2em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.section h2::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 40px;
|
|
background: linear-gradient(to bottom, #D97706, #2C5F8E);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.section-description {
|
|
color: #6B7280;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.animation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.animation-card {
|
|
background: #f9fafb;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 2px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.animation-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 24px rgba(44, 95, 142, 0.15);
|
|
border-color: #2C5F8E;
|
|
}
|
|
|
|
.animation-preview {
|
|
background: white;
|
|
padding: 40px;
|
|
min-height: 250px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.animation-preview.dark {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.animation-info {
|
|
padding: 25px;
|
|
}
|
|
|
|
.animation-info h3 {
|
|
color: #2C5F8E;
|
|
font-size: 1.3em;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.animation-info .badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
background: #D97706;
|
|
color: white;
|
|
border-radius: 12px;
|
|
font-size: 0.7em;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.animation-info .description {
|
|
color: #4b5563;
|
|
margin-bottom: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.animation-info .use-cases {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.animation-info .use-cases strong {
|
|
color: #2C5F8E;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.animation-info .use-cases ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.animation-info .use-cases li {
|
|
padding: 4px 0;
|
|
color: #6B7280;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.animation-info .use-cases li::before {
|
|
content: "→ ";
|
|
color: #D97706;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: 2px solid #2C5F8E;
|
|
background: white;
|
|
color: #2C5F8E;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #2C5F8E;
|
|
color: white;
|
|
}
|
|
|
|
.comparison-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.comparison-card {
|
|
background: #f9fafb;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
border: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.comparison-card h4 {
|
|
color: #2C5F8E;
|
|
margin-bottom: 15px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.comparison-preview {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.comparison-preview.dark {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.code-block {
|
|
background: #1e293b;
|
|
color: #e2e8f0;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.85em;
|
|
overflow-x: auto;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.code-block code {
|
|
display: block;
|
|
white-space: pre;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: linear-gradient(135deg, #2C5F8E 0%, #3B7CB8 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(44, 95, 142, 0.3);
|
|
}
|
|
|
|
.feature-card h4 {
|
|
font-size: 1.2em;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.feature-card p {
|
|
opacity: 0.9;
|
|
line-height: 1.5;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.comparison-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
.download-section {
|
|
background: linear-gradient(135deg, #2C5F8E 0%, #3B7CB8 100%);
|
|
color: white;
|
|
padding: 40px;
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.download-section h3 {
|
|
font-size: 1.8em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.download-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.download-btn {
|
|
padding: 15px 25px;
|
|
background: white;
|
|
color: #2C5F8E;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
display: block;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🎨 SYNTAXIS Logo Animado</h1>
|
|
<p class="subtitle">Systematic Orchestration, Perfectly Arranged</p>
|
|
<p class="intro">
|
|
Colección completa de logos animados para SYNTAXIS. Cada animación está diseñada
|
|
para comunicar organización sistemática, precisión y orquestación perfecta.
|
|
Todos los archivos SVG están optimizados para web y son completamente escalables.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Características -->
|
|
<div class="section">
|
|
<h2>✨ Características de las Animaciones</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4><span class="icon">🎯</span> Propósito Claro</h4>
|
|
<p>Cada animación está diseñada para un caso de uso específico: carga, hover, introducción, etc.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4><span class="icon">⚡</span> Alto Rendimiento</h4>
|
|
<p>Animaciones CSS optimizadas que no afectan el rendimiento de tu sitio web.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4><span class="icon">📱</span> Responsive</h4>
|
|
<p>Funcionan perfectamente en todos los dispositivos y tamaños de pantalla.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4><span class="icon">🎨</span> Personalizables</h4>
|
|
<p>Fácil de modificar colores, duración y efectos mediante CSS.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animaciones de Entrada -->
|
|
<div class="section">
|
|
<h2>🚀 Animaciones de Entrada</h2>
|
|
<p class="section-description">
|
|
Perfectas para presentaciones, páginas de carga o cuando el logo aparece por primera vez.
|
|
</p>
|
|
|
|
<div class="animation-grid">
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-icon-animated.svg" width="180" alt="Animated Assembly">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Ensamblaje Secuencial <span class="badge">Popular</span></h3>
|
|
<p class="description">
|
|
Las piezas geométricas aparecen en secuencia, ensamblándose desde los bordes
|
|
hacia el centro con rotación. El triángulo dorado aparece al final como punto focal.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Página de inicio / Hero section</li>
|
|
<li>Splash screens de aplicaciones</li>
|
|
<li>Presentaciones corporativas</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-icon-animated.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-icon-construction.svg" width="180" alt="Construction Animation">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Construcción Sistemática</h3>
|
|
<p class="description">
|
|
Las piezas se deslizan desde todas las direcciones (arriba, abajo, izquierda, derecha)
|
|
hacia sus posiciones finales, creando un efecto de construcción organizada.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Videos de producto</li>
|
|
<li>Animaciones de intro</li>
|
|
<li>Secciones "Cómo funciona"</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-icon-construction.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-horizontal-animated.svg" width="300" alt="Horizontal Animated">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Logo Horizontal Completo <span class="badge">Recomendado</span></h3>
|
|
<p class="description">
|
|
El icono se ensambla primero, seguido por el deslizamiento del texto "SYNTAXIS"
|
|
y finalmente aparece el tagline. Secuencia completa de branding.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Headers de sitio web</li>
|
|
<li>Intro de videos corporativos</li>
|
|
<li>Presentaciones de marca</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-horizontal-animated.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animaciones Continuas -->
|
|
<div class="section">
|
|
<h2>♾️ Animaciones Continuas</h2>
|
|
<p class="section-description">
|
|
Loops sutiles perfectos para elementos de UI que necesitan indicar actividad o vida.
|
|
</p>
|
|
|
|
<div class="animation-grid">
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-icon-pulse.svg" width="180" alt="Pulse Animation">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Pulso Focal</h3>
|
|
<p class="description">
|
|
El triángulo central pulsa suavemente con un efecto de brillo,
|
|
atrayendo la atención hacia el núcleo del sistema sin ser intrusivo.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Indicadores de estado activo</li>
|
|
<li>Call-to-action buttons</li>
|
|
<li>Dashboard headers</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-icon-pulse.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-loading.svg" width="180" alt="Loading Spinner">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Loading Spinner <span class="badge">Funcional</span></h3>
|
|
<p class="description">
|
|
Los diamantes orbitan alrededor del triángulo central mientras los cuadrados
|
|
rotan, creando un indicador de carga elegante y distintivo.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Spinners de carga</li>
|
|
<li>Procesamiento de tareas</li>
|
|
<li>Estados "thinking"</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-loading.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-icon-ambient.svg" width="180" alt="Ambient Animation">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Respiración Ambiental</h3>
|
|
<p class="description">
|
|
Animación muy sutil de "respiración" donde las capas del logo se expanden
|
|
y contraen suavemente, creando un efecto orgánico y vivo.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Elementos decorativos</li>
|
|
<li>Headers de sección</li>
|
|
<li>Fondos animados sutiles</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-icon-ambient.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animaciones Interactivas -->
|
|
<div class="section">
|
|
<h2>🖱️ Animaciones Interactivas</h2>
|
|
<p class="section-description">
|
|
Responden a la interacción del usuario, perfectas para elementos clickeables o navegación.
|
|
</p>
|
|
|
|
<div class="animation-grid">
|
|
<div class="animation-card">
|
|
<div class="animation-preview">
|
|
<img src="syntaxis-logo-icon-hover.svg" width="180" alt="Hover Effects">
|
|
</div>
|
|
<div class="animation-info">
|
|
<h3>Efectos Hover <span class="badge">Interactivo</span></h3>
|
|
<p class="description">
|
|
Al pasar el mouse, cada forma geométrica crece y cambia ligeramente de color.
|
|
El triángulo tiene un efecto especial con sombra brillante.
|
|
</p>
|
|
<div class="use-cases">
|
|
<strong>Mejor para:</strong>
|
|
<ul>
|
|
<li>Logos en navbar clickeables</li>
|
|
<li>Botones de acción</li>
|
|
<li>Links de navegación</li>
|
|
</ul>
|
|
</div>
|
|
<div class="controls">
|
|
<a href="syntaxis-logo-icon-hover.svg" class="btn" download>Descargar SVG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparación de Uso -->
|
|
<div class="section">
|
|
<h2>🎬 Guía de Implementación</h2>
|
|
<p class="section-description">
|
|
Ejemplos de código para integrar las animaciones en tu proyecto.
|
|
</p>
|
|
|
|
<div class="comparison-grid">
|
|
<div class="comparison-card">
|
|
<h4>Implementación HTML Simple</h4>
|
|
<div class="code-block"><code><!-- Animación de entrada -->
|
|
<img src="syntaxis-logo-icon-animated.svg"
|
|
alt="SYNTAXIS"
|
|
width="200">
|
|
|
|
<!-- Logo con hover -->
|
|
<a href="/">
|
|
<img src="syntaxis-logo-icon-hover.svg">
|
|
</a>
|
|
|
|
<!-- Loading spinner -->
|
|
<div class="loading">
|
|
<img src="syntaxis-logo-loading.svg">
|
|
</div></code></div>
|
|
</div>
|
|
|
|
<div class="comparison-card">
|
|
<h4>React Component</h4>
|
|
<div class="code-block"><code>import Logo from './syntaxis-logo-icon-animated.svg';
|
|
|
|
function Header() {
|
|
return (
|
|
<header>
|
|
<img
|
|
src={Logo}
|
|
alt="SYNTAXIS"
|
|
className="logo"
|
|
/>
|
|
</header>
|
|
);
|
|
}</code></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-card" style="margin-top: 30px;">
|
|
<h4>CSS Personalización</h4>
|
|
<div class="code-block"><code>/* Ajustar velocidad de animación */
|
|
.logo svg {
|
|
animation-duration: 2s !important; /* Más lento */
|
|
}
|
|
|
|
/* Pausar animación en hover */
|
|
.logo:hover svg * {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* Cambiar colores */
|
|
.logo svg path[fill="#2C5F8E"] {
|
|
fill: #yourCustomColor;
|
|
}</code></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Descarga -->
|
|
<div class="download-section">
|
|
<h3>📦 Descargar Todos los Archivos</h3>
|
|
<p style="margin-bottom: 20px; opacity: 0.9;">
|
|
Descarga la colección completa de logos animados y estáticos
|
|
</p>
|
|
<div class="download-grid">
|
|
<a href="syntaxis-logo-icon-animated.svg" class="download-btn" download>
|
|
Ensamblaje Secuencial
|
|
</a>
|
|
<a href="syntaxis-logo-icon-construction.svg" class="download-btn" download>
|
|
Construcción Sistemática
|
|
</a>
|
|
<a href="syntaxis-logo-icon-pulse.svg" class="download-btn" download>
|
|
Pulso Focal
|
|
</a>
|
|
<a href="syntaxis-logo-loading.svg" class="download-btn" download>
|
|
Loading Spinner
|
|
</a>
|
|
<a href="syntaxis-logo-icon-ambient.svg" class="download-btn" download>
|
|
Respiración Ambiental
|
|
</a>
|
|
<a href="syntaxis-logo-icon-hover.svg" class="download-btn" download>
|
|
Efectos Hover
|
|
</a>
|
|
<a href="syntaxis-logo-horizontal-animated.svg" class="download-btn" download>
|
|
Logo Horizontal
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="text-align: center; margin-top: 40px;">
|
|
<p style="color: #6B7280; font-size: 0.9em;">
|
|
syntaxis.dev | Systematic Orchestration, Perfectly Arranged<br>
|
|
Todos los logos © 2024 SYNTAXIS | Archivos SVG optimizados para producción
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|