510 lines
16 KiB
HTML
510 lines
16 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 - Animación Combinada</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: Inter, -apple-system, sans-serif;
|
|||
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero h1 {
|
|||
|
|
font-size: 3em;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
background: linear-gradient(135deg, #3B7CB8 0%, #D97706 100%);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero .tagline {
|
|||
|
|
color: #94a3b8;
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-demo {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 24px;
|
|||
|
|
padding: 60px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-container {
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 40px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|||
|
|
transition: background 0.4s ease, box-shadow 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-container.dark-mode {
|
|||
|
|
background: #0f172a;
|
|||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border: 2px solid #3B7CB8;
|
|||
|
|
background: rgba(59, 124, 184, 0.1);
|
|||
|
|
color: #3B7CB8;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 1em;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn:hover {
|
|||
|
|
background: #3B7CB8;
|
|||
|
|
color: white;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 8px 20px rgba(59, 124, 184, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn.active {
|
|||
|
|
background: #D97706;
|
|||
|
|
border-color: #D97706;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-header h2 {
|
|||
|
|
font-size: 1.8em;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-track {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 30px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phases {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr 2fr;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 20px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg, transparent, var(--phase-color), transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase.assembly {
|
|||
|
|
--phase-color: #3B7CB8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase.ambient {
|
|||
|
|
--phase-color: #757773;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase.loading {
|
|||
|
|
--phase-color: #D97706;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase h3 {
|
|||
|
|
font-size: 1.2em;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: var(--phase-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase .duration {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 0.85em;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase .description {
|
|||
|
|
color: #cbd5e1;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
font-size: 0.95em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phase .loop-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 15px;
|
|||
|
|
right: 15px;
|
|||
|
|
background: #D97706;
|
|||
|
|
color: white;
|
|||
|
|
padding: 4px 10px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 0.75em;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card h3 {
|
|||
|
|
font-size: 1.3em;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card .icon {
|
|||
|
|
font-size: 1.5em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card ul {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card li {
|
|||
|
|
padding: 8px 0;
|
|||
|
|
color: #cbd5e1;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card li::before {
|
|||
|
|
content: "→ ";
|
|||
|
|
color: #D97706;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-section {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 25px;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-section h3 {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
font-size: 1.3em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-block {
|
|||
|
|
background: #0f172a;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
font-family: 'Courier New', monospace;
|
|||
|
|
font-size: 0.9em;
|
|||
|
|
color: #e2e8f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.phases {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero h1 {
|
|||
|
|
font-size: 2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-demo {
|
|||
|
|
padding: 30px 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 6px;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #3B7CB8, #757773, #D97706);
|
|||
|
|
width: 0%;
|
|||
|
|
animation: progress 6s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes progress {
|
|||
|
|
0% { width: 0%; }
|
|||
|
|
33% { width: 33%; background: #3B7CB8; }
|
|||
|
|
50% { width: 50%; background: #757773; }
|
|||
|
|
100% { width: 100%; background: #D97706; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="hero">
|
|||
|
|
<h1>SYNTAXIS</h1>
|
|||
|
|
<p class="tagline">Systematic Orchestration, Perfectly Arranged</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="main-demo">
|
|||
|
|
<div class="logo-container" id="logoContainer">
|
|||
|
|
<img id="mainLogo" src="syntaxis-logo-combined-animation.svg" width="300" alt="SYNTAXIS Combined Animation">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="controls">
|
|||
|
|
<button class="btn" onclick="restartAnimation()">🔄 Reiniciar Animación</button>
|
|||
|
|
<button class="btn" onclick="toggleBackground()" id="bgToggleBtn">🌙 Fondo Oscuro</button>
|
|||
|
|
<button class="btn" onclick="showCode()">📝 Ver Código</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="text-align: center; margin-top: 20px; color: #94a3b8;">
|
|||
|
|
<p><strong style="color: white;">Loop Infinito:</strong> Ensamblaje (4s) → Respiración (8s) → Desensamblaje (4s) → ∞</p>
|
|||
|
|
<p style="font-size: 0.9em; margin-top: 5px;">Ciclo completo: 16 segundos</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="timeline">
|
|||
|
|
<div class="timeline-header">
|
|||
|
|
<h2>⏱️ Secuencia de Animación</h2>
|
|||
|
|
<p style="color: #94a3b8; margin-top: 10px;">La animación se desarrolla en tres fases coordinadas</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="timeline-track">
|
|||
|
|
<div class="phases">
|
|||
|
|
<div class="phase assembly">
|
|||
|
|
<h3>1️⃣ Ensamblaje</h3>
|
|||
|
|
<div class="duration">0s - 4s</div>
|
|||
|
|
<div class="loop-badge">LOOP ∞</div>
|
|||
|
|
<p class="description">
|
|||
|
|
Las piezas geométricas aparecen secuencialmente desde el centro con rotación 180°.
|
|||
|
|
Más lento y cinematográfico (4 segundos completos). Cada pieza tiene un delay
|
|||
|
|
escalonado para crear un efecto de construcción sistemática.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="phase ambient">
|
|||
|
|
<h3>2️⃣ Respiración Ambiental</h3>
|
|||
|
|
<div class="duration">4s - 12s (8 segundos)</div>
|
|||
|
|
<div class="loop-badge">LOOP ∞</div>
|
|||
|
|
<p class="description">
|
|||
|
|
El logo permanece ensamblado y "respira" durante 8 segundos completos.
|
|||
|
|
Las capas se expanden y contraen sutilmente en diferentes ritmos.
|
|||
|
|
El triángulo central flota verticalmente. Efecto orgánico y vivo.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="phase loading">
|
|||
|
|
<h3>3️⃣ Desensamblaje</h3>
|
|||
|
|
<div class="duration">12s - 16s</div>
|
|||
|
|
<div class="loop-badge">LOOP ∞</div>
|
|||
|
|
<p class="description">
|
|||
|
|
Las piezas desaparecen con rotación inversa (-180°), volviendo al punto de partida.
|
|||
|
|
Después de completar el desensamblaje, el ciclo completo se reinicia automáticamente.
|
|||
|
|
<strong style="color: #D97706;">Loop infinito de 16 segundos.</strong>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-grid">
|
|||
|
|
<div class="info-card">
|
|||
|
|
<h3><span class="icon">🎯</span> Casos de Uso</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Splash screen de aplicación</li>
|
|||
|
|
<li>Landing page hero section</li>
|
|||
|
|
<li>Estados de carga con marca</li>
|
|||
|
|
<li>Presentaciones corporativas</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-card">
|
|||
|
|
<h3><span class="icon">⚡</span> Características</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Loop infinito de 16 segundos</li>
|
|||
|
|
<li>Ensamblaje cinematográfico (4s)</li>
|
|||
|
|
<li>Respiración ambiental (8s)</li>
|
|||
|
|
<li>Desensamblaje suave (4s)</li>
|
|||
|
|
<li>Solo 5.8KB de tamaño</li>
|
|||
|
|
<li>GPU-accelerated (60fps)</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-card">
|
|||
|
|
<h3><span class="icon">🎨</span> Personalizable</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ajustar duración vía CSS</li>
|
|||
|
|
<li>Pausar/reproducir con JS</li>
|
|||
|
|
<li>Cambiar colores fácilmente</li>
|
|||
|
|
<li>Funciona en todos los navegadores</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="code-section" id="codeSection" style="display: none;">
|
|||
|
|
<h3>💻 Implementación</h3>
|
|||
|
|
<div class="code-block">
|
|||
|
|
<code><!-- HTML Simple -->
|
|||
|
|
<div class="app-loading">
|
|||
|
|
<img src="syntaxis-logo-combined-animation.svg"
|
|||
|
|
width="300"
|
|||
|
|
alt="Cargando SYNTAXIS">
|
|||
|
|
<p>Inicializando sistema...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.app-loading {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #0f172a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.app-loading p {
|
|||
|
|
color: #94a3b8;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
font-size: 1.1em;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- React Component -->
|
|||
|
|
<script>
|
|||
|
|
function LoadingScreen() {
|
|||
|
|
return (
|
|||
|
|
<div className="splash-screen">
|
|||
|
|
<img
|
|||
|
|
src="/syntaxis-logo-combined-animation.svg"
|
|||
|
|
width={300}
|
|||
|
|
alt="SYNTAXIS Loading"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script></code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function restartAnimation() {
|
|||
|
|
const logo = document.getElementById('mainLogo');
|
|||
|
|
const src = logo.src;
|
|||
|
|
logo.src = '';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
logo.src = src + '?' + new Date().getTime();
|
|||
|
|
}, 10);
|
|||
|
|
|
|||
|
|
// Visual feedback
|
|||
|
|
const btn = event.target;
|
|||
|
|
btn.textContent = '✓ Reiniciado';
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
btn.textContent = '🔄 Reiniciar Animación';
|
|||
|
|
btn.classList.remove('active');
|
|||
|
|
}, 1500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleBackground() {
|
|||
|
|
const container = document.getElementById('logoContainer');
|
|||
|
|
const btn = document.getElementById('bgToggleBtn');
|
|||
|
|
|
|||
|
|
container.classList.toggle('dark-mode');
|
|||
|
|
|
|||
|
|
if (container.classList.contains('dark-mode')) {
|
|||
|
|
btn.textContent = '☀️ Fondo Claro';
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
} else {
|
|||
|
|
btn.textContent = '🌙 Fondo Oscuro';
|
|||
|
|
btn.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showCode() {
|
|||
|
|
const codeSection = document.getElementById('codeSection');
|
|||
|
|
const btn = event.target;
|
|||
|
|
|
|||
|
|
if (codeSection.style.display === 'none') {
|
|||
|
|
codeSection.style.display = 'block';
|
|||
|
|
btn.textContent = '✕ Ocultar Código';
|
|||
|
|
btn.classList.add('active');
|
|||
|
|
codeSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|||
|
|
} else {
|
|||
|
|
codeSection.style.display = 'none';
|
|||
|
|
btn.textContent = '📝 Ver Código';
|
|||
|
|
btn.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|