595 lines
No EOL
18 KiB
HTML
595 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Systems Provisioning - Rust Meetup Poster</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #0a0a0a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.poster {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #0f1419 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Background patterns */
|
|
.circuit-pattern {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.05;
|
|
background-image:
|
|
repeating-linear-gradient(0deg, transparent, transparent 35px, #4ECDC4 35px, #4ECDC4 36px),
|
|
repeating-linear-gradient(90deg, transparent, transparent 35px, #4ECDC4 35px, #4ECDC4 36px);
|
|
}
|
|
|
|
.network-nodes {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(206, 66, 43, 0.1) 0%, transparent 25%),
|
|
radial-gradient(circle at 80% 70%, rgba(78, 205, 196, 0.1) 0%, transparent 25%),
|
|
radial-gradient(circle at 60% 20%, rgba(44, 62, 80, 0.1) 0%, transparent 30%);
|
|
}
|
|
|
|
/* Animated data flow lines */
|
|
.data-flow {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.flow-line {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #4ECDC4, transparent);
|
|
animation: flowData 8s linear infinite;
|
|
}
|
|
|
|
.flow-line:nth-child(1) { top: 20%; width: 300px; animation-delay: 0s; }
|
|
.flow-line:nth-child(2) { top: 50%; width: 250px; animation-delay: 2s; }
|
|
.flow-line:nth-child(3) { top: 80%; width: 350px; animation-delay: 4s; }
|
|
|
|
@keyframes flowData {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(calc(1920px + 100%)); }
|
|
}
|
|
|
|
/* Main content container */
|
|
.content {
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 80px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Header with logo space */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.logo-space {
|
|
width: 300px;
|
|
height: 80px;
|
|
border: 2px dashed rgba(255, 255, 255, 0.3);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 14px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.rust-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px 25px;
|
|
background: rgba(206, 66, 43, 0.1);
|
|
border: 1px solid rgba(206, 66, 43, 0.3);
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.ferris-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #CE422B;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.ferris-icon::before {
|
|
content: "🦀";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.rust-badge-text {
|
|
color: #CE422B;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Main title section */
|
|
.title-section {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 80px;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 92px;
|
|
font-weight: 900;
|
|
color: #CE422B;
|
|
letter-spacing: -2px;
|
|
line-height: 0.95;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 4px 20px rgba(206, 66, 43, 0.3);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 36px;
|
|
color: white;
|
|
font-weight: 300;
|
|
margin-bottom: 40px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.tagline {
|
|
display: flex;
|
|
gap: 30px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.tag-item {
|
|
padding: 12px 24px;
|
|
background: rgba(78, 205, 196, 0.1);
|
|
border: 1px solid rgba(78, 205, 196, 0.3);
|
|
border-radius: 30px;
|
|
color: #4ECDC4;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tag-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.2), transparent);
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* Event details */
|
|
.event-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px 30px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.detail-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #CE422B, #4ECDC4);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.detail-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 22px;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tech stack icons */
|
|
.tech-stack {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.tech-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tech-icon:hover {
|
|
background: rgba(206, 66, 43, 0.1);
|
|
border-color: rgba(206, 66, 43, 0.3);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
/* Side graphics */
|
|
.side-graphics {
|
|
width: 500px;
|
|
position: relative;
|
|
}
|
|
|
|
.infrastructure-visual {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.server-stack {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 400px;
|
|
}
|
|
|
|
.server {
|
|
position: absolute;
|
|
width: 280px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.4));
|
|
border: 2px solid rgba(78, 205, 196, 0.5);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.server:nth-child(1) { top: 0; }
|
|
.server:nth-child(2) { top: 100px; }
|
|
.server:nth-child(3) { top: 200px; }
|
|
.server:nth-child(4) { top: 300px; }
|
|
|
|
.server-led {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #4ECDC4;
|
|
border-radius: 50%;
|
|
animation: blink 2s infinite;
|
|
}
|
|
|
|
.server:nth-child(2) .server-led { animation-delay: 0.5s; }
|
|
.server:nth-child(3) .server-led { animation-delay: 1s; }
|
|
.server:nth-child(4) .server-led { animation-delay: 1.5s; }
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; box-shadow: 0 0 10px #4ECDC4; }
|
|
}
|
|
|
|
.server-bars {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.bar {
|
|
width: 40px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Floating tech labels */
|
|
.floating-label {
|
|
position: absolute;
|
|
padding: 8px 16px;
|
|
background: rgba(206, 66, 43, 0.9);
|
|
color: white;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.floating-label:nth-child(1) { top: 10%; right: 10%; animation-delay: 0s; }
|
|
.floating-label:nth-child(2) { top: 40%; right: 5%; animation-delay: 1s; }
|
|
.floating-label:nth-child(3) { top: 70%; right: 15%; animation-delay: 2s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.speaker-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 20px 30px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.speaker-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, #CE422B, #4ECDC4);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.speaker-details {
|
|
color: white;
|
|
}
|
|
|
|
.speaker-role {
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.speaker-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.metrics-highlight {
|
|
padding: 20px 30px;
|
|
background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(78, 205, 196, 0.05));
|
|
border: 2px solid #4ECDC4;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
color: #4ECDC4;
|
|
text-shadow: 0 2px 10px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 14px;
|
|
color: white;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.qr-placeholder {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1a1a2e;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Responsive scaling */
|
|
@media (max-width: 1920px) {
|
|
.poster {
|
|
transform: scale(0.75);
|
|
transform-origin: top left;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1440px) {
|
|
.poster {
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.poster {
|
|
transform: scale(0.35);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="poster">
|
|
<!-- Background effects -->
|
|
<div class="circuit-pattern"></div>
|
|
<div class="network-nodes"></div>
|
|
<div class="data-flow">
|
|
<div class="flow-line"></div>
|
|
<div class="flow-line"></div>
|
|
<div class="flow-line"></div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="content">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="logo-space">provisioning.systems logo</div>
|
|
<div class="rust-badge">
|
|
<div class="ferris-icon"></div>
|
|
<span class="rust-badge-text">RUST MEETUP 2025</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title section -->
|
|
<div class="title-section">
|
|
<div class="main-content">
|
|
<h1 class="main-title">SYSTEMS<br>PROVISIONING</h1>
|
|
<h2 class="subtitle">Infrastructure Automation with Rust</h2>
|
|
|
|
<div class="tagline">
|
|
<div class="tag-item">AI-Enhanced</div>
|
|
<div class="tag-item">Type-Safe</div>
|
|
<div class="tag-item">Universal</div>
|
|
</div>
|
|
|
|
<div class="event-details">
|
|
<div class="detail-item">
|
|
<div class="detail-icon">📅</div>
|
|
<div class="detail-text">
|
|
<div class="detail-label">Fecha</div>
|
|
<div class="detail-value">[FECHA]</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-icon">📍</div>
|
|
<div class="detail-text">
|
|
<div class="detail-label">Lugar</div>
|
|
<div class="detail-value">[LUGAR]</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-stack">
|
|
<div class="tech-icon">⚙️</div>
|
|
<div class="tech-icon">☁️</div>
|
|
<div class="tech-icon">🔧</div>
|
|
<div class="tech-icon">📊</div>
|
|
<div class="tech-icon">🔌</div>
|
|
<div class="tech-icon">🖥️</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="side-graphics">
|
|
<div class="infrastructure-visual">
|
|
<div class="server-stack">
|
|
<div class="server">
|
|
<div class="server-led"></div>
|
|
<div class="server-bars">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="server">
|
|
<div class="server-led"></div>
|
|
<div class="server-bars">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="server">
|
|
<div class="server-led"></div>
|
|
<div class="server-bars">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="server">
|
|
<div class="server-led"></div>
|
|
<div class="server-bars">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="floating-label">ARM</div>
|
|
<div class="floating-label">x86</div>
|
|
<div class="floating-label">RISC-V</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<div class="speaker-info">
|
|
<div class="speaker-avatar">👤</div>
|
|
<div class="speaker-details">
|
|
<div class="speaker-role">Ponente</div>
|
|
<div class="speaker-name">Jesús Pérez Lorenzo</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metrics-highlight">
|
|
<div class="metric-value">70%</div>
|
|
<div class="metric-label">Faster Deployments</div>
|
|
</div>
|
|
|
|
<div class="qr-placeholder">QR REGISTRO</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |