website/og-card.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&family=Space+Grotesk:wght@400;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 2400px;
height: 1260px;
overflow: hidden;
font-family: 'Space Grotesk', sans-serif;
}
.card {
width: 2400px;
height: 1260px;
background: linear-gradient(135deg, #1c1917 0%, #292524 40%, #44403c 100%);
display: flex;
align-items: center;
padding: 0 80px;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at 25% 50%, rgba(249,115,22,0.15) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(234,88,12,0.08) 0%, transparent 50%);
}
.logo {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 800px;
height: 800px;
margin-right: 60px;
}
.logo img { width: 100%; height: 100%; }
.content {
position: relative;
z-index: 1;
flex: 1;
}
.title {
font-family: 'Outfit', sans-serif;
font-size: 240px;
font-weight: 700;
color: white;
line-height: 1;
margin-bottom: 24px;
}
.subtitle {
font-size: 90px;
color: #d6d3d1;
font-weight: 400;
margin-bottom: 44px;
line-height: 1.3;
}
.subtitle em {
font-style: normal;
color: #fb923c;
}
.tags {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.tag {
font-family: 'JetBrains Mono', monospace;
font-size: 36px;
color: #fdba74;
background: rgba(249,115,22,0.12);
border: 2px solid rgba(249,115,22,0.25);
border-radius: 14px;
padding: 12px 24px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.tag svg {
flex-shrink: 0;
width: 30px;
height: 30px;
stroke: #fdba74;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.url {
position: absolute;
bottom: 40px;
right: 80px;
z-index: 1;
font-size: 64px;
font-weight: 600;
color: #fb923c;
}
</style>
</head>
<body>
<div class="card">
<div class="logo">
<img src="favicon-512.svg" alt="Moltis">
</div>
<div class="content">
<div class="title">Moltis</div>
<div class="subtitle">A secure persistent personal <em>agent server in Rust</em></div>
<div class="tags">
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
single binary
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg>
multi-provider LLMs
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
streaming
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
memory
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
skills
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
hooks
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
MCP
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
sandbox
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
voice
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
passkeys
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
self-extension
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
multi-channel
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
heartbeats
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
cron
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
Telegram
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><polyline points="9 17 9 12 15 12 15 17"/><line x1="12" y1="12" x2="12" y2="8"/></svg>
1-click deploy
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
OpenTelemetry
</span>
<span class="tag">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
MIT licensed
</span>
</div>
</div>
<div class="url">moltis.org</div>
</div>
</body>
</html>