1067 lines
40 KiB
HTML
1067 lines
40 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 - Animated Logos Showcase</title>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="assets/header-shared.css">
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
--syntaxis-blue: #2C5F8E;
|
|||
|
|
--syntaxis-gray: #757773;
|
|||
|
|
--syntaxis-gold: #D97706;
|
|||
|
|
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
background: #ffffff;
|
|||
|
|
color: #1F2937;
|
|||
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
color: #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
background: var(--syntaxis-blue);
|
|||
|
|
color: white;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode header {
|
|||
|
|
background: linear-gradient(135deg, var(--syntaxis-blue) 0%, #1E3A5F 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header p {
|
|||
|
|
opacity: 0.9;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px 40px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-btn {
|
|||
|
|
background: var(--syntaxis-blue);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: background 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-btn:hover {
|
|||
|
|
background: #1E3A5F;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .toggle-btn {
|
|||
|
|
background: #60A5FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .toggle-btn:hover {
|
|||
|
|
background: #3B82F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 30px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: white;
|
|||
|
|
border: 2px solid #E5E7EB;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card {
|
|||
|
|
background: #252525;
|
|||
|
|
border-color: #404040;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover {
|
|||
|
|
box-shadow: 0 8px 16px rgba(44, 95, 142, 0.15);
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
border-color: var(--syntaxis-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview {
|
|||
|
|
background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
height: 250px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-preview {
|
|||
|
|
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview.dark {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-preview svg {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Monochrome logos invert in dark mode */
|
|||
|
|
body.dark-mode .card-preview svg[data*="_bn"],
|
|||
|
|
body.dark-mode .card-preview svg[data*="_bn_"],
|
|||
|
|
body.dark-mode .card-preview object[data*="_bn"],
|
|||
|
|
body.dark-mode .card-preview object[data*="_bn_"],
|
|||
|
|
body.dark-mode .main-logo-preview object[data*="_bn"],
|
|||
|
|
body.dark-mode .main-logo-preview object[data*="_bn_"] {
|
|||
|
|
filter: invert(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-info {
|
|||
|
|
padding: 20px;
|
|||
|
|
border-top: 1px solid #E5E7EB;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-info {
|
|||
|
|
border-top-color: #404040;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-title {
|
|||
|
|
color: #60A5FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-type {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-weight: 600;
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--syntaxis-gold);
|
|||
|
|
padding: 4px 8px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-type {
|
|||
|
|
background: transparent;
|
|||
|
|
color: #d4a574;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Category Labels (Logo galleries) */
|
|||
|
|
.category-label {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-family: 'Courier New', monospace;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--syntaxis-gold);
|
|||
|
|
padding: 0.25rem 0.5rem;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-label.static {
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-label.animated {
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--syntaxis-purple);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-description {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: #6B7280;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-description {
|
|||
|
|
color: #9CA3AF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-meta {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
padding: 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
color: #6B7280;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
font-family: 'Courier New', monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-meta {
|
|||
|
|
background: #404040;
|
|||
|
|
color: #CBD5E1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-meta-filename {
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
display: inline-block;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-meta-filename:hover {
|
|||
|
|
background: rgba(44, 95, 142, 0.15);
|
|||
|
|
color: #2C5F8E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-meta-filename:hover {
|
|||
|
|
background: rgba(96, 165, 250, 0.15);
|
|||
|
|
color: #60a5fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-meta-filename:hover::after {
|
|||
|
|
content: "Click to copy";
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 100%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background: #2C5F8E;
|
|||
|
|
color: white;
|
|||
|
|
padding: 0.4rem 0.8rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
font-family: 'Source Sans Pro', sans-serif;
|
|||
|
|
z-index: 1000;
|
|||
|
|
animation: tooltipIn 0.2s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-meta-filename:hover::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 100%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
border: 5px solid transparent;
|
|||
|
|
border-top-color: #2C5F8E;
|
|||
|
|
margin-bottom: -10px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-meta-filename:hover::after {
|
|||
|
|
background: #60a5fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .card-meta-filename:hover::before {
|
|||
|
|
border-top-color: #60a5fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes tooltipIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(-50%) translateY(5px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateX(-50%) translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 60px;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-restart {
|
|||
|
|
flex: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
flex: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-status {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: #6B7280;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .action-status {
|
|||
|
|
color: #9CA3AF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-status.playing {
|
|||
|
|
color: var(--syntaxis-gold);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
border: 2px solid var(--syntaxis-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
background: #E5E7EB;
|
|||
|
|
box-shadow: 0 4px 8px rgba(44, 95, 142, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-primary {
|
|||
|
|
background: #3a4555;
|
|||
|
|
color: #9ab8d9;
|
|||
|
|
border-color: #9ab8d9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-primary:hover {
|
|||
|
|
background: #4a5a75;
|
|||
|
|
color: #b0d0f0;
|
|||
|
|
border-color: #b0d0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-restart {
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
color: var(--syntaxis-gold);
|
|||
|
|
border: 2px solid var(--syntaxis-gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-restart:hover {
|
|||
|
|
background: #E5E7EB;
|
|||
|
|
box-shadow: 0 4px 8px rgba(217, 119, 6, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-restart {
|
|||
|
|
background: #3a4555;
|
|||
|
|
color: #d4a574;
|
|||
|
|
border-color: #d4a574;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-restart:hover {
|
|||
|
|
background: #4a5a75;
|
|||
|
|
color: #e8bf8f;
|
|||
|
|
border-color: #e8bf8f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary {
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
border: 2px solid var(--syntaxis-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-secondary {
|
|||
|
|
background: #3a4555;
|
|||
|
|
color: #8fa5be;
|
|||
|
|
border-color: #8fa5be;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary:hover {
|
|||
|
|
background: #E5E7EB;
|
|||
|
|
box-shadow: 0 4px 8px rgba(44, 95, 142, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .btn-secondary:hover {
|
|||
|
|
background: #4a5a75;
|
|||
|
|
color: #afc5dd;
|
|||
|
|
border-color: #afc5dd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-restart:hover {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animation-container {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.animation-info {
|
|||
|
|
background: #DFF2F1;
|
|||
|
|
border-left: 4px solid var(--syntaxis-blue);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .animation-info {
|
|||
|
|
background: #0F3F3F;
|
|||
|
|
color: #A0F9F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
margin-top: 40px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-bottom: 3px solid var(--syntaxis-gold);
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .section-title {
|
|||
|
|
color: #60A5FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box {
|
|||
|
|
background: transparent;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-left: 4px solid var(--syntaxis-blue);
|
|||
|
|
color: #6B7280;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .info-box {
|
|||
|
|
background: transparent;
|
|||
|
|
color: #9CA3AF;
|
|||
|
|
border-left-color: #60A5FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box strong {
|
|||
|
|
color: #6B7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .info-box strong {
|
|||
|
|
color: #9CA3AF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Scalability Test */
|
|||
|
|
.scalability-container {
|
|||
|
|
background: transparent;
|
|||
|
|
padding: 2rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-item {
|
|||
|
|
text-align: center;
|
|||
|
|
background: transparent;
|
|||
|
|
padding: 1rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scalability-icon,
|
|||
|
|
.scalability-logo {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
background: white;
|
|||
|
|
border: 2px solid #E5E7EB;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .scalability-icon,
|
|||
|
|
body.dark-mode .scalability-logo {
|
|||
|
|
background: #252525;
|
|||
|
|
border-color: #404040;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Reset animation on reload */
|
|||
|
|
.restart-animation {
|
|||
|
|
animation: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Make SVG preview clickable */
|
|||
|
|
.logo-preview,
|
|||
|
|
.main-logo-preview {
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-preview:hover,
|
|||
|
|
.main-logo-preview:hover {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Toggleable Note */
|
|||
|
|
.info-note {
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
border: 1px solid #E5E7EB;
|
|||
|
|
border-left: 4px solid var(--syntaxis-blue);
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .info-note {
|
|||
|
|
background: #1E293B;
|
|||
|
|
border-color: #334155;
|
|||
|
|
border-left-color: #60A5FA;
|
|||
|
|
color: #E5E7EB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-note.visible {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-note strong {
|
|||
|
|
color: var(--syntaxis-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .info-note strong {
|
|||
|
|
color: #60A5FA;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-note-btn {
|
|||
|
|
background: var(--syntaxis-blue);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-family: var(--font-primary);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-note-btn:hover {
|
|||
|
|
background: #1E3A5F;
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 2px 8px rgba(44, 95, 142, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .toggle-note-btn {
|
|||
|
|
background: #3d5a7d;
|
|||
|
|
border-color: #3d5a7d;
|
|||
|
|
color: #9ab8d9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body.dark-mode .toggle-note-btn:hover {
|
|||
|
|
background: #4a6b94;
|
|||
|
|
border-color: #4a6b94;
|
|||
|
|
color: #b0d0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.gallery {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header h1 {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toggle-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="shared-header">
|
|||
|
|
<div class="header-content">
|
|||
|
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: 2rem; justify-content: center;">
|
|||
|
|
<h1 class="header-title">
|
|||
|
|
<div class="header-logo">
|
|||
|
|
<object data="syntax_logo_a.svg" type="image/svg+xml"></object>
|
|||
|
|
</div>
|
|||
|
|
</h1>
|
|||
|
|
<div style="text-align: left; border-left: 2px solid #9CA3AF; padding-left: 2rem;">
|
|||
|
|
<h2 style="margin: 0; font-size: 1.2rem; font-weight: 600; color: #9CA3AF;">🎬 Animated Logos</h2>
|
|||
|
|
<p style="margin: 0.5rem 0 0 0; font-size: 0.8rem; color: #9CA3AF;">CSS Animations & Effects</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<p style="margin: 0; font-size: 0.9rem; color: #9CA3AF;">Systematic Orchestration, Perfectly Arranged</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-nav">
|
|||
|
|
<a class="nav-btn" data-nav-button="branding" href="syntaxis-branding-showcase.html">🎨 Static Gallery</a>
|
|||
|
|
<a class="nav-btn active" data-nav-button="animated" href="syntaxis-animated-showcase.html">🎬 Animated Gallery</a>
|
|||
|
|
<button class="header-btn" data-toggle="dark-mode" onclick="toggleDarkMode()">🌙 Dark Mode</button>
|
|||
|
|
<a href="syntaxis-palette-fonts.html" target="_blank" class="header-btn" style="text-decoration: none; display: inline-flex; align-items: center;">🎨 Palette & Fonts</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
|
|||
|
|
<!-- Toggleable Note -->
|
|||
|
|
<button class="toggle-note-btn" onclick="toggleInfoNote()">💡 Show Animations Note</button>
|
|||
|
|
<div class="info-note" id="info-note">
|
|||
|
|
<strong>💡 Quick Tips:</strong> Entry animations can be replayed with the restart button. Loop animations run continuously. Click any preview to open the SVG in a new tab.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Main Logo Showcase Section -->
|
|||
|
|
<section class="main-logo-showcase">
|
|||
|
|
<h2>🎯 Main Logos - Quick Access</h2>
|
|||
|
|
|
|||
|
|
<!-- Primary Logo Variations -->
|
|||
|
|
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Primary Logo Variations</h3>
|
|||
|
|
<div class="main-logo-grid" style="grid-template-columns: repeat(4, 1fr);">
|
|||
|
|
<!-- Full Logo Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_logo_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntax_logo_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Horizontal Lockup</div>
|
|||
|
|
<div class="main-logo-description">Complete logo with animated icon and static text. Perfect for hero sections and splash screens.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_logo_a.svg • 800×200px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_logo_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Compact Logo Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntaxis_logo_c_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntaxis_logo_c_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Compact Horizontal</div>
|
|||
|
|
<div class="main-logo-description">Horizontal logo without tagline with animated icon. Ideal for toolbars and navigation.</div>
|
|||
|
|
<div class="main-logo-meta">syntaxis_logo_c_a.svg • 400×100px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntaxis_logo_c_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Vertical Stack Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_logo_vertical_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntax_logo_vertical_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Vertical Stack</div>
|
|||
|
|
<div class="main-logo-description">Animated icon stacked above text. Perfect for social profiles and mobile app headers.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_logo_vertical_a.svg • 250×380px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Compact Vertical Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_logo_vertical_c_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntax_logo_vertical_c_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Compact Vertical</div>
|
|||
|
|
<div class="main-logo-description">Animated vertical logo without tagline for compact spaces. Ideal for icons and app headers.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_logo_vertical_c_a.svg • 200×280px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical_c_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Icon & Monogram -->
|
|||
|
|
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Icon & Monogram</h3>
|
|||
|
|
<div class="main-logo-grid" style="grid-template-columns: repeat(2, 1fr);">
|
|||
|
|
<!-- Main Icon -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_icon_a.svg" target="_blank" class="main-logo-preview" style="background: transparent;">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Main Icon</div>
|
|||
|
|
<div class="main-logo-description">Animated geometric icon with assembly, breathing, and disassembly phases. Perfect for loading states.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_icon_a.svg • 200×200px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_icon_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Favicon Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_favicon_a.svg" target="_blank" class="main-logo-preview" style="background: transparent;">
|
|||
|
|
<object data="syntax_favicon_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Favicon</div>
|
|||
|
|
<div class="main-logo-description">Animated icon for browser tabs and bookmarks. Available in SVG, and in ICO (32×32, 16×16) and PNG formats upon request.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_favicon_a.svg • 200×200px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_favicon_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Monochrome Versions -->
|
|||
|
|
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Monochrome Versions</h3>
|
|||
|
|
<div class="main-logo-grid">
|
|||
|
|
<!-- Horizontal Lockup - Blanco y Negro Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_logo_bn_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntax_logo_bn_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Horizontal Lockup (B&W)</div>
|
|||
|
|
<div class="main-logo-description">Complete logo in black and white with animated icon. Perfect for print-ready monochrome applications.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_logo_bn_a.svg • 800×200px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_logo_bn_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Compact - Blanco y Negro Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntaxis_logo_bn_c_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntaxis_logo_bn_c_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Compact Horizontal (B&W)</div>
|
|||
|
|
<div class="main-logo-description">Horizontal logo without tagline in black and white with animated icon. Ideal for monochrome applications.</div>
|
|||
|
|
<div class="main-logo-meta">syntaxis_logo_bn_c_a.svg • 400×100px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntaxis_logo_bn_c_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Vertical Stack - Blanco y Negro Animated -->
|
|||
|
|
<div class="main-logo-card">
|
|||
|
|
<a href="syntax_logo_vertical_bn_a.svg" target="_blank" class="main-logo-preview">
|
|||
|
|
<object data="syntax_logo_vertical_bn_a.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
|||
|
|
</a>
|
|||
|
|
<div class="main-logo-info">
|
|||
|
|
<span class="main-logo-badge">ANIMATED</span>
|
|||
|
|
<div class="main-logo-title">Vertical Stack (B&W)</div>
|
|||
|
|
<div class="main-logo-description">Stacked layout in black and white with animated icon. Perfect for square spaces and monochrome layouts.</div>
|
|||
|
|
<div class="main-logo-meta">syntax_logo_vertical_bn_a.svg • 250×380px</div>
|
|||
|
|
<div class="main-logo-action">
|
|||
|
|
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical_bn_a.svg', '_blank')">
|
|||
|
|
🔗 Open SVG
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Scalability Test -->
|
|||
|
|
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Scalability Test</h3>
|
|||
|
|
<div class="scalability-container">
|
|||
|
|
<p style="margin-bottom: 1rem; color: #9CA3AF; font-weight: 600;">Icon Scalability</p>
|
|||
|
|
<p style="margin-bottom: 1.5rem; color: #9CA3AF;">The animated icon maintains clarity and proportions at various sizes. Recommended minimum: 32px.</p>
|
|||
|
|
<div style="display: flex; gap: 2rem; align-items: flex-end; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem;">
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" class="scalability-icon" style="width: 16px; height: 16px;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">16×16px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" class="scalability-icon" style="width: 32px; height: 32px;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">32×32px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" class="scalability-icon" style="width: 64px; height: 64px;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">64×64px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" class="scalability-icon" style="width: 128px; height: 128px;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">128×128px</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_icon_a.svg" type="image/svg+xml" class="scalability-icon" style="width: 256px; height: 256px;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">256×256px</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p style="margin-bottom: 1rem; color: #9CA3AF; font-weight: 600;">Full Logo Scalability</p>
|
|||
|
|
<p style="margin-bottom: 1.5rem; color: #9CA3AF;">The horizontal full logo displays well at various aspect ratios with responsive scaling.</p>
|
|||
|
|
<div style="display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: center;">
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_logo_a.svg" type="image/svg+xml" class="scalability-logo" style="width: 200px; height: auto;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">Small (200px)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scalability-item">
|
|||
|
|
<object data="syntax_logo_a.svg" type="image/svg+xml" class="scalability-logo" style="width: 400px; height: auto;"></object>
|
|||
|
|
<div style="font-size: 0.75rem; color: #9CA3AF;">Medium (400px)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Entry Animations Section -->
|
|||
|
|
<h2 class="section-title">🚀 Entry Animations (One-Time)</h2>
|
|||
|
|
<p style="margin-bottom: 20px; color: #6B7280;">These animations run once when the page loads. Reload (Cmd+R or Ctrl+R) to see them again.</p>
|
|||
|
|
|
|||
|
|
<div class="gallery" id="entryGallery">
|
|||
|
|
<!-- Filled by JavaScript -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Loop Animations Section -->
|
|||
|
|
<h2 class="section-title">♾️ Loop Animations (Continuous)</h2>
|
|||
|
|
<p style="margin-bottom: 20px; color: #6B7280;">These animations run continuously in an infinite loop.</p>
|
|||
|
|
|
|||
|
|
<div class="gallery" id="loopGallery">
|
|||
|
|
<!-- Filled by JavaScript -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Interactive Animations Section -->
|
|||
|
|
<h2 class="section-title">🖱️ Interactive Animations</h2>
|
|||
|
|
<p style="margin-bottom: 20px; color: #6B7280;">These animations respond to user interaction (hover, click).</p>
|
|||
|
|
|
|||
|
|
<div class="gallery" id="interactiveGallery">
|
|||
|
|
<!-- Filled by JavaScript -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Toggle Info Note
|
|||
|
|
function toggleInfoNote() {
|
|||
|
|
const infoNote = document.getElementById('info-note');
|
|||
|
|
const toggleBtn = document.querySelector('.toggle-note-btn');
|
|||
|
|
infoNote.classList.toggle('visible');
|
|||
|
|
if (infoNote.classList.contains('visible')) {
|
|||
|
|
toggleBtn.textContent = '💡 Hide Animations Note';
|
|||
|
|
} else {
|
|||
|
|
toggleBtn.textContent = '💡 Show Animations Note';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ANIMATIONS = {
|
|||
|
|
entry: [
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-icon-animated.svg',
|
|||
|
|
title: 'Icon Assembly',
|
|||
|
|
description: 'Pieces appear from center, rotating into position',
|
|||
|
|
duration: '~1.2s (one-time)',
|
|||
|
|
use: 'Splash screens, hero sections, intros',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-icon-construction.svg',
|
|||
|
|
title: 'Construction Flow',
|
|||
|
|
description: 'Pieces slide in from top, bottom, left, and right',
|
|||
|
|
duration: '~1.4s (one-time)',
|
|||
|
|
use: 'Videos, how-to sections, onboarding',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-horizontal-animated.svg',
|
|||
|
|
title: 'Full Logo Animated',
|
|||
|
|
description: 'Icon assembles → text appears → tagline fades in',
|
|||
|
|
duration: '~1.4s (one-time)',
|
|||
|
|
use: 'Web headers, intros, presentations',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
loop: [
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-icon-pulse.svg',
|
|||
|
|
title: 'Pulse Effect',
|
|||
|
|
description: 'Central triangle pulses and glows softly',
|
|||
|
|
duration: '2s infinite loop',
|
|||
|
|
use: 'Active state, CTAs, widgets',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-loading.svg',
|
|||
|
|
title: 'Loading Spinner',
|
|||
|
|
description: 'Diamonds orbit, squares rotate',
|
|||
|
|
duration: '3s loop (orbital)',
|
|||
|
|
use: 'Loading indicator, processing',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-icon-ambient.svg',
|
|||
|
|
title: 'Ambient Breathing',
|
|||
|
|
description: 'Subtle expansion/contraction + floating',
|
|||
|
|
duration: '4-6s infinite loop',
|
|||
|
|
use: 'Decorative, section headers',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
interactive: [
|
|||
|
|
{
|
|||
|
|
name: 'syntaxis-logo-icon-hover.svg',
|
|||
|
|
title: 'Hover Interactive',
|
|||
|
|
description: 'Shapes grow and change color on hover',
|
|||
|
|
duration: '0.3s transition',
|
|||
|
|
use: 'Clickable logos, buttons, links',
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function renderGallery(animationType, containerId) {
|
|||
|
|
const container = document.getElementById(containerId);
|
|||
|
|
container.innerHTML = ANIMATIONS[animationType].map((anim, index) => {
|
|||
|
|
const animId = `anim-${animationType}-${index}`;
|
|||
|
|
const isEntryAnimation = animationType === 'entry';
|
|||
|
|
|
|||
|
|
return `
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-preview animation-container" id="${animId}-container">
|
|||
|
|
<object data="syntax_logos_anim/${anim.name}" type="image/svg+xml" style="width: 100%; max-height: 200px;" id="${animId}-obj"></object>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-info">
|
|||
|
|
<div class="card-type">${animationType === 'entry' ? 'ENTRY' : animationType === 'loop' ? 'LOOP' : 'INTERACTIVE'}</div>
|
|||
|
|
<div class="card-title">${anim.title}</div>
|
|||
|
|
<div class="card-description">${anim.description}</div>
|
|||
|
|
<div class="card-meta">⏱️ ${anim.duration}</div>
|
|||
|
|
<div class="card-meta">💡 ${anim.use}</div>
|
|||
|
|
<div class="card-meta card-meta-filename" data-filepath="syntax_logos_anim/${anim.name}">📄 ${anim.name}</div>
|
|||
|
|
<div class="card-actions">
|
|||
|
|
${isEntryAnimation ? `<button class="btn btn-restart" onclick="restartAnimation('${animId}', '${anim.name}')">🔄 Restart</button>` : ''}
|
|||
|
|
<button class="btn btn-primary" onclick="openInNewTab('syntax_logos_anim/${anim.name}')">
|
|||
|
|
Open in Tab
|
|||
|
|
</button>
|
|||
|
|
${isEntryAnimation ? `<div class="action-status" id="${animId}-status"></div>` : ''}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
}).join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function restartAnimation(animId, fileName) {
|
|||
|
|
const container = document.getElementById(animId + '-container');
|
|||
|
|
const obj = document.getElementById(animId + '-obj');
|
|||
|
|
const status = document.getElementById(animId + '-status');
|
|||
|
|
|
|||
|
|
if (status) {
|
|||
|
|
status.textContent = '▶️ Playing...';
|
|||
|
|
status.classList.add('playing');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Force SVG reload
|
|||
|
|
const newObj = document.createElement('object');
|
|||
|
|
newObj.setAttribute('data', `syntax_logos_anim/${fileName}?t=${Date.now()}`);
|
|||
|
|
newObj.setAttribute('type', 'image/svg+xml');
|
|||
|
|
newObj.setAttribute('style', 'width: 100%; max-height: 200px;');
|
|||
|
|
newObj.id = animId + '-obj';
|
|||
|
|
|
|||
|
|
obj.parentNode.replaceChild(newObj, obj);
|
|||
|
|
|
|||
|
|
// Calculate duration based on file
|
|||
|
|
let duration = 1200; // default
|
|||
|
|
if (fileName.includes('construction')) duration = 1400;
|
|||
|
|
else if (fileName.includes('horizontal')) duration = 1400;
|
|||
|
|
|
|||
|
|
if (status) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
status.textContent = '✓ Done';
|
|||
|
|
status.classList.remove('playing');
|
|||
|
|
}, duration);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openInNewTab(path) {
|
|||
|
|
window.open(path, '_blank');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// Render galleries
|
|||
|
|
renderGallery('entry', 'entryGallery');
|
|||
|
|
renderGallery('loop', 'loopGallery');
|
|||
|
|
renderGallery('interactive', 'interactiveGallery');
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="assets/header-shared.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|