701 lines
20 KiB
HTML
701 lines
20 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
background: #0a0a0a;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 20px;
|
||
|
|
gap: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Main Poster - Landscape */
|
||
|
|
.poster-main {
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
background: linear-gradient(135deg, #2C3E50 0%, #1A1A1A 100%);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hexagonal Pattern Overlay */
|
||
|
|
.hex-pattern {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0.03;
|
||
|
|
background-image:
|
||
|
|
repeating-linear-gradient(30deg, transparent, transparent 40px, #4ECDC4 40px, #4ECDC4 41px),
|
||
|
|
repeating-linear-gradient(-30deg, transparent, transparent 40px, #4ECDC4 40px, #4ECDC4 41px),
|
||
|
|
repeating-linear-gradient(90deg, transparent, transparent 40px, #4ECDC4 40px, #4ECDC4 41px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Circuit patterns in corners */
|
||
|
|
.circuit-corner {
|
||
|
|
position: absolute;
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
opacity: 0.1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner::before,
|
||
|
|
.circuit-corner::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
background: #4ECDC4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.top-left {
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.top-left::before {
|
||
|
|
width: 100px;
|
||
|
|
height: 2px;
|
||
|
|
top: 50px;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.top-left::after {
|
||
|
|
width: 2px;
|
||
|
|
height: 100px;
|
||
|
|
top: 0;
|
||
|
|
left: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.bottom-right {
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
background: linear-gradient(-45deg, rgba(78, 205, 196, 0.2), transparent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.bottom-right::before {
|
||
|
|
width: 100px;
|
||
|
|
height: 2px;
|
||
|
|
bottom: 50px;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit-corner.bottom-right::after {
|
||
|
|
width: 2px;
|
||
|
|
height: 100px;
|
||
|
|
bottom: 0;
|
||
|
|
right: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Split Layout Container */
|
||
|
|
.split-container {
|
||
|
|
position: relative;
|
||
|
|
z-index: 5;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Left Side - Infrastructure Diagram */
|
||
|
|
.left-side {
|
||
|
|
flex: 1;
|
||
|
|
padding: 80px 60px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Infrastructure Visual */
|
||
|
|
.infrastructure-diagram {
|
||
|
|
position: relative;
|
||
|
|
height: 600px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Server Elements */
|
||
|
|
.server-element {
|
||
|
|
position: absolute;
|
||
|
|
width: 120px;
|
||
|
|
height: 60px;
|
||
|
|
background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.6));
|
||
|
|
border: 2px solid #4ECDC4;
|
||
|
|
border-radius: 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
box-shadow: 0 10px 30px rgba(78, 205, 196, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.server-element::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
background: #4ECDC4;
|
||
|
|
border-radius: 50%;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.7); }
|
||
|
|
50% { opacity: 0.5; box-shadow: 0 0 0 10px rgba(78, 205, 196, 0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.server1 { top: 20%; left: 10%; }
|
||
|
|
.server2 { top: 50%; left: 5%; }
|
||
|
|
.server3 { top: 80%; left: 15%; }
|
||
|
|
|
||
|
|
/* Cloud Element */
|
||
|
|
.cloud-element {
|
||
|
|
position: absolute;
|
||
|
|
top: 10%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 180px;
|
||
|
|
height: 100px;
|
||
|
|
background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(78, 205, 196, 0.05));
|
||
|
|
border: 2px solid #4ECDC4;
|
||
|
|
border-radius: 50px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #4ECDC4;
|
||
|
|
font-size: 48px;
|
||
|
|
box-shadow: 0 20px 40px rgba(78, 205, 196, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Edge Devices */
|
||
|
|
.edge-device {
|
||
|
|
position: absolute;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background: rgba(206, 66, 43, 0.1);
|
||
|
|
border: 2px solid #CE422B;
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #CE422B;
|
||
|
|
font-size: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edge1 { top: 35%; right: 10%; }
|
||
|
|
.edge2 { top: 55%; right: 5%; }
|
||
|
|
.edge3 { top: 75%; right: 15%; }
|
||
|
|
|
||
|
|
/* Flowing Data Lines */
|
||
|
|
.data-line {
|
||
|
|
position: absolute;
|
||
|
|
stroke: #4ECDC4;
|
||
|
|
stroke-width: 2;
|
||
|
|
fill: none;
|
||
|
|
opacity: 0.6;
|
||
|
|
stroke-dasharray: 10, 5;
|
||
|
|
animation: flowPath 3s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flowPath {
|
||
|
|
0% { stroke-dashoffset: 0; }
|
||
|
|
100% { stroke-dashoffset: -15; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-lines-svg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Right Side - Content */
|
||
|
|
.right-side {
|
||
|
|
flex: 1;
|
||
|
|
padding: 80px 80px 80px 40px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Logo */
|
||
|
|
.logo-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 60px;
|
||
|
|
left: 60px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-placeholder {
|
||
|
|
width: 240px;
|
||
|
|
height: 60px;
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
border-radius: 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #1A1A1A;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 16px;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Rust Crab with Gears */
|
||
|
|
.rust-crab-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
right: 100px;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rust-crab {
|
||
|
|
position: relative;
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
margin: 50px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.crab-body {
|
||
|
|
position: absolute;
|
||
|
|
width: 150px;
|
||
|
|
height: 100px;
|
||
|
|
background: linear-gradient(135deg, #CE422B, #E85D3D);
|
||
|
|
border-radius: 50%;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
box-shadow: 0 20px 40px rgba(206, 66, 43, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.crab-body::before {
|
||
|
|
content: '🦀';
|
||
|
|
position: absolute;
|
||
|
|
font-size: 80px;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Rotating Gears */
|
||
|
|
.gear {
|
||
|
|
position: absolute;
|
||
|
|
border: 3px solid rgba(78, 205, 196, 0.5);
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: rotate 10s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear::before {
|
||
|
|
content: '⚙️';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
font-size: inherit;
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear1 {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear2 {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
font-size: 24px;
|
||
|
|
animation-direction: reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gear3 {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
top: 20px;
|
||
|
|
right: 10px;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Main Title */
|
||
|
|
.main-title {
|
||
|
|
font-size: 86px;
|
||
|
|
font-weight: 900;
|
||
|
|
color: #CE422B;
|
||
|
|
line-height: 0.9;
|
||
|
|
letter-spacing: -2px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
text-shadow: 0 8px 30px rgba(206, 66, 43, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 32px;
|
||
|
|
color: white;
|
||
|
|
font-weight: 300;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
opacity: 0.95;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meetup-badge {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #4ECDC4;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Event Details */
|
||
|
|
.event-info {
|
||
|
|
font-size: 24px;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-info span {
|
||
|
|
color: #4ECDC4;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Feature Points */
|
||
|
|
.feature-points {
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-point {
|
||
|
|
padding: 8px 16px;
|
||
|
|
background: rgba(78, 205, 196, 0.1);
|
||
|
|
border: 1px solid rgba(78, 205, 196, 0.3);
|
||
|
|
border-radius: 20px;
|
||
|
|
color: #4ECDC4;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tech Icons Row */
|
||
|
|
.tech-icons {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
margin-top: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-icon {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 24px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-icon:hover {
|
||
|
|
background: rgba(206, 66, 43, 0.2);
|
||
|
|
border-color: #CE422B;
|
||
|
|
transform: translateY(-5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* QR Code Section */
|
||
|
|
.qr-section {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 60px;
|
||
|
|
right: 80px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-code {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 60px;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-text {
|
||
|
|
color: white;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.streaming-text {
|
||
|
|
color: #4ECDC4;
|
||
|
|
font-size: 12px;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Social Media Version - Square */
|
||
|
|
.poster-social {
|
||
|
|
width: 1080px;
|
||
|
|
height: 1080px;
|
||
|
|
background: linear-gradient(135deg, #2C3E50 0%, #1A1A1A 100%);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 5;
|
||
|
|
height: 100%;
|
||
|
|
padding: 60px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-logo {
|
||
|
|
width: 200px;
|
||
|
|
height: 50px;
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-crab {
|
||
|
|
font-size: 80px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
filter: drop-shadow(0 10px 20px rgba(206, 66, 43, 0.4));
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-title {
|
||
|
|
font-size: 64px;
|
||
|
|
font-weight: 900;
|
||
|
|
color: #CE422B;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
text-shadow: 0 8px 30px rgba(206, 66, 43, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-subtitle {
|
||
|
|
font-size: 24px;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-highlights {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight-badge {
|
||
|
|
padding: 12px 20px;
|
||
|
|
background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(78, 205, 196, 0.1));
|
||
|
|
border: 2px solid #4ECDC4;
|
||
|
|
border-radius: 25px;
|
||
|
|
color: #4ECDC4;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-event-info {
|
||
|
|
font-size: 20px;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-qr {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Toggle Button */
|
||
|
|
.toggle-view {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
z-index: 100;
|
||
|
|
padding: 12px 24px;
|
||
|
|
background: #CE422B;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-view:hover {
|
||
|
|
background: #E85D3D;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Show/Hide based on state */
|
||
|
|
body.show-social .poster-main { display: none; }
|
||
|
|
body.show-social .poster-social { display: block; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button class="toggle-view" onclick="document.body.classList.toggle('show-social')">
|
||
|
|
Toggle Social/Main View
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Main Poster - Landscape -->
|
||
|
|
<div class="poster-main">
|
||
|
|
<!-- Background Elements -->
|
||
|
|
<div class="hex-pattern"></div>
|
||
|
|
<div class="circuit-corner top-left"></div>
|
||
|
|
<div class="circuit-corner bottom-right"></div>
|
||
|
|
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="logo-container">
|
||
|
|
<div class="logo-placeholder">provisioning.systems</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Split Container -->
|
||
|
|
<div class="split-container">
|
||
|
|
<!-- Left Side - Infrastructure Diagram -->
|
||
|
|
<div class="left-side">
|
||
|
|
<div class="infrastructure-diagram">
|
||
|
|
<!-- Servers -->
|
||
|
|
<div class="server-element server1">BARE METAL</div>
|
||
|
|
<div class="server-element server2">CONTAINER</div>
|
||
|
|
<div class="server-element server3">VIRTUAL</div>
|
||
|
|
|
||
|
|
<!-- Cloud -->
|
||
|
|
<div class="cloud-element">☁️</div>
|
||
|
|
|
||
|
|
<!-- Edge Devices -->
|
||
|
|
<div class="edge-device edge1">📱</div>
|
||
|
|
<div class="edge-device edge2">🖥️</div>
|
||
|
|
<div class="edge-device edge3">⚡</div>
|
||
|
|
|
||
|
|
<!-- Flowing Data Lines SVG -->
|
||
|
|
<svg class="data-lines-svg">
|
||
|
|
<path class="data-line" d="M 100,150 Q 300,100 400,150" />
|
||
|
|
<path class="data-line" d="M 80,300 Q 250,250 420,280" />
|
||
|
|
<path class="data-line" d="M 120,450 Q 300,400 450,420" />
|
||
|
|
<path class="data-line" d="M 400,200 L 500,250" />
|
||
|
|
<path class="data-line" d="M 420,350 L 520,380" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Side - Content -->
|
||
|
|
<div class="right-side">
|
||
|
|
<!-- Rust Crab with Gears -->
|
||
|
|
<div class="rust-crab-container">
|
||
|
|
<div class="rust-crab">
|
||
|
|
<div class="crab-body"></div>
|
||
|
|
<div class="gear gear1"></div>
|
||
|
|
<div class="gear gear2"></div>
|
||
|
|
<div class="gear gear3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<h1 class="main-title">SYSTEMS<br>PROVISIONING</h1>
|
||
|
|
<h2 class="subtitle">Infrastructure Automation with Rust</h2>
|
||
|
|
<div class="meetup-badge">RUST MEETUP 2025</div>
|
||
|
|
|
||
|
|
<div class="event-info">
|
||
|
|
<span>[FECHA]</span> • <span>[LUGAR]</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-points">
|
||
|
|
<div class="feature-point">AI</div>
|
||
|
|
<div class="feature-point">DataFrames</div>
|
||
|
|
<div class="feature-point">Dashboards</div>
|
||
|
|
<div class="feature-point">ROI 70%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tech-icons">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- QR Code -->
|
||
|
|
<div class="qr-section">
|
||
|
|
<div class="qr-code">📱</div>
|
||
|
|
<div class="qr-text">RSVP Required</div>
|
||
|
|
<div class="streaming-text">Streaming Available</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Social Media Version - Square -->
|
||
|
|
<div class="poster-social">
|
||
|
|
<div class="hex-pattern"></div>
|
||
|
|
|
||
|
|
<div class="social-content">
|
||
|
|
<div class="social-logo">provisioning.systems</div>
|
||
|
|
|
||
|
|
<div class="social-crab">🦀</div>
|
||
|
|
|
||
|
|
<h1 class="social-title">SYSTEMS<br>PROVISIONING</h1>
|
||
|
|
<h2 class="social-subtitle">Infrastructure Automation with Rust</h2>
|
||
|
|
|
||
|
|
<div class="social-highlights">
|
||
|
|
<div class="highlight-badge">AI-Enhanced</div>
|
||
|
|
<div class="highlight-badge">Type-Safe</div>
|
||
|
|
<div class="highlight-badge">70% Faster</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-event-info">
|
||
|
|
<strong>RUST MEETUP 2025</strong><br>
|
||
|
|
[FECHA] • [LUGAR]
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="social-qr">📱</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|