<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>MEET.SPF.LAT — Private Meetings</title>
<meta name="description" content="Zero-log, end-to-end private video conferencing." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#07111f;
--card:#0c1a2e;
--card-inner:#071019;
--accent:#2496ED;
--accent-hover:#1a7fcc;
--accent-active:#1570b8;
--accent-glow:rgba(36,150,237,0.35);
--text:#e8f4fd;
--text-dim:rgba(232,244,253,0.55);
--text-fade:rgba(232,244,253,0.35);
--text-ghost:rgba(232,244,253,0.18);
--border:rgba(36,150,237,0.22);
--border-soft:rgba(36,150,237,0.13);
--border-ghost:rgba(36,150,237,0.18);
--status:#1d9e75;
--font-mono:'Space Mono',monospace;
--font-sans:'DM Sans',system-ui,sans-serif;
}
html,body{height:100%}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-sans);
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}

/* ── Background ── */
.page{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:2rem;
position:relative;
overflow:hidden;
}
.bg-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(36,150,237,0.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(36,150,237,0.035) 1px,transparent 1px);
background-size:44px 44px;
pointer-events:none;
animation:gridDrift 60s linear infinite;
}
@keyframes gridDrift{
from{background-position:0 0}
to{background-position:44px 44px}
}
.bg-glow-main{
position:absolute;
width:800px;height:800px;
border-radius:50%;
background:radial-gradient(circle,rgba(36,150,237,0.09) 0%,transparent 65%);
top:50%;left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
animation:mainPulse 9s ease-in-out infinite;
}
@keyframes mainPulse{
0%,100%{opacity:0.7;transform:translate(-50%,-50%) scale(1)}
50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
.bg-glow-top{
position:absolute;
width:400px;height:300px;
border-radius:50%;
background:radial-gradient(circle,rgba(36,150,237,0.06) 0%,transparent 70%);
top:-80px;left:50%;
transform:translateX(-50%);
pointer-events:none;
animation:topPulse 7s ease-in-out infinite 2s;
}
@keyframes topPulse{
0%,100%{opacity:0.5}
50%{opacity:1}
}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{
position:absolute;
width:2px;height:2px;
border-radius:50%;
background:var(--accent);
opacity:0;
animation:floatUp linear infinite;
}
@keyframes floatUp{
0%{opacity:0;transform:translateY(0) scale(0)}
10%{opacity:0.6}
90%{opacity:0.15}
100%{opacity:0;transform:translateY(-80vh) scale(1.5)}
}

/* ── Card ── */
.card{
position:relative;
background:var(--card);
border:0.5px solid var(--border);
border-radius:18px;
padding:3rem 2.5rem 2.5rem;
width:100%;
max-width:490px;
box-shadow:
0 0 0 1px rgba(36,150,237,0.04),
0 25px 70px rgba(0,0,0,0.5),
0 0 60px rgba(36,150,237,0.06);
backdrop-filter:blur(12px);
animation:cardIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardIn{
from{opacity:0;transform:translateY(24px) scale(0.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.card-top-bar{
position:absolute;top:0;left:2.5rem;right:2.5rem;
height:2px;
background:linear-gradient(90deg,transparent 0%,var(--accent) 40%,rgba(36,150,237,0.4) 70%,transparent 100%);
border-radius:0 0 2px 2px;
box-shadow:0 0 12px var(--accent-glow);
}
.version-tag{
position:absolute;
top:1rem;right:1.25rem;
font-size:10px;
color:rgba(36,150,237,0.35);
letter-spacing:0.6px;
font-weight:400;
font-family:var(--font-mono);
}

/* ── Logo ── */
.logo-wrap{
display:flex;flex-direction:column;
align-items:center;
margin-bottom:1.25rem;
gap:8px;
}
.logo-svg{
width:130px;height:90px;
filter:drop-shadow(0 0 14px rgba(36,150,237,0.32));
animation:logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-5px)}
}
.rec-light{animation:recBlink 1.8s ease-in-out infinite}
@keyframes recBlink{
0%,45%,55%,100%{opacity:1;filter:drop-shadow(0 0 5px #1d9e75)}
49%,51%{opacity:0;filter:none}
}
.lens-scan{animation:lensScan 3.5s ease-in-out infinite}
@keyframes lensScan{
0%,100%{opacity:0.15;transform:translateY(-5px)}
50%{opacity:0.8;transform:translateY(5px)}
}
.brand{
font-family:var(--font-mono);
font-size:12px;font-weight:700;
letter-spacing:4px;
color:var(--text);
}

/* ── Tagline ── */
.tagline{
text-align:center;
font-size:12.5px;
color:var(--text-dim);
letter-spacing:0.4px;
margin-bottom:1.75rem;
font-weight:300;
line-height:1.5;
}
.tagline em{color:var(--accent);font-style:normal;font-weight:500}

/* ── Divider ── */
.divider{
height:0.5px;
background:linear-gradient(90deg,transparent,var(--border-soft),transparent);
margin-bottom:1.75rem;
}

/* ── Input ── */
.field-label{
display:block;
font-size:10.5px;color:var(--text-dim);
margin-bottom:8px;
letter-spacing:0.6px;text-transform:uppercase;
font-weight:500;font-family:var(--font-mono);
}
.input-row{display:flex;gap:8px;margin-bottom:1.25rem}
.room-input{
flex:1;
background:var(--card-inner);
border:0.5px solid var(--border-ghost);
border-radius:9px;
padding:12px 14px;
font-size:13.5px;
color:var(--text);outline:none;
transition:border-color 0.2s,box-shadow 0.2s;
font-family:var(--font-mono);font-weight:400;
letter-spacing:0.5px;
}
.room-input:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(36,150,237,0.12),0 0 20px rgba(36,150,237,0.08);
}
.room-input::placeholder{color:var(--text-ghost);font-family:var(--font-mono);letter-spacing:0.3px}
.btn{
background:linear-gradient(135deg,var(--accent) 0%,#1a6fc4 100%);
border:none;border-radius:9px;
padding:12px 18px;
font-size:12.5px;font-weight:600;color:#fff;
cursor:pointer;transition:all 0.2s;
font-family:var(--font-sans);letter-spacing:0.3px;
white-space:nowrap;display:flex;align-items:center;gap:7px;
box-shadow:0 4px 20px rgba(36,150,237,0.25),0 0 0 1px rgba(36,150,237,0.1);
position:relative;overflow:hidden;
}
.btn::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent);
pointer-events:none;
}
.btn:hover{
background:linear-gradient(135deg,#1a7fcc 0%,#1460a8 100%);
box-shadow:0 6px 28px rgba(36,150,237,0.4),0 0 0 1px rgba(36,150,237,0.2);
transform:translateY(-1px);
}
.btn:active{transform:translateY(0) scale(0.98);box-shadow:0 2px 10px rgba(36,150,237,0.2)}
.btn svg{width:13px;height:13px;flex-shrink:0}

/* ── Chips ── */
.privacy-chips{
display:flex;gap:6px;flex-wrap:wrap;
justify-content:center;margin-bottom:1.75rem;
}
.chip{
display:inline-flex;align-items:center;gap:5px;
padding:5px 11px;
background:rgba(36,150,237,0.07);
border:0.5px solid var(--border-soft);
border-radius:20px;
font-size:10.5px;color:var(--text-dim);
letter-spacing:0.3px;font-weight:500;
transition:all 0.2s;
}
.chip:hover{
background:rgba(36,150,237,0.14);
border-color:rgba(36,150,237,0.3);
color:var(--text);
}
.chip-dot{
width:5px;height:5px;border-radius:50%;
background:var(--status);
box-shadow:0 0 6px rgba(29,158,117,0.8);
animation:chipBlink 2.5s ease-in-out infinite;
}
@keyframes chipBlink{0%,100%{opacity:1}50%{opacity:0.3}}
.chip-icon{width:10px;height:10px;stroke:var(--accent);fill:none;stroke-width:1.8}

/* ── Footer ── */
.footer-row{
display:flex;align-items:center;
justify-content:space-between;
flex-wrap:wrap;gap:8px;
padding-top:1.25rem;
border-top:0.5px solid var(--border-soft);
}
.status-group{display:flex;align-items:center;gap:6px}
.status-dot{
width:6px;height:6px;border-radius:50%;
background:var(--status);
box-shadow:0 0 10px rgba(29,158,117,0.7);
animation:statusPulse 2.2s ease-in-out infinite;
}
@keyframes statusPulse{
0%,100%{opacity:1;box-shadow:0 0 10px rgba(29,158,117,0.7)}
50%{opacity:0.5;box-shadow:0 0 4px rgba(29,158,117,0.3)}
}
.status-text{font-size:11px;color:var(--text-fade);letter-spacing:0.3px;font-family:var(--font-mono)}
.footer-links{display:flex;gap:10px;align-items:center}
.footer-sep{color:rgba(36,150,237,0.3);font-size:11px}
.privacy-link{
font-size:11px;color:rgba(36,150,237,0.65);
cursor:pointer;letter-spacing:0.3px;
background:none;border:none;
font-family:var(--font-mono);
transition:color 0.15s;padding:0;
}
.privacy-link:hover{color:var(--accent)}

/* ── Boxes ── */
.privacy-box{
margin-top:1rem;padding:1rem;
background:var(--card-inner);
border:0.5px solid var(--border-soft);
border-radius:9px;
font-size:12px;color:var(--text-dim);
line-height:1.7;display:none;
animation:boxIn 0.2s ease both;
}
@keyframes boxIn{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
.privacy-box.open{display:block}
.privacy-box strong{color:var(--accent);font-weight:600}
.tos-title{font-weight:600;color:var(--accent);margin-bottom:0.75rem;font-size:12px;letter-spacing:0.3px}
.tos-scroll{
max-height:200px;overflow-y:scroll;
scrollbar-width:thin;
scrollbar-color:rgba(36,150,237,0.4) rgba(9,21,37,0.8);
line-height:1.75;white-space:pre-wrap;
font-family:var(--font-sans);font-size:12px;color:var(--text-dim);
}
.tos-scroll::-webkit-scrollbar{width:4px}
.tos-scroll::-webkit-scrollbar-track{background:rgba(9,21,37,0.8);border-radius:2px}
.tos-scroll::-webkit-scrollbar-thumb{background:rgba(36,150,237,0.4);border-radius:2px}

/* ── Scanline overlay ── */
.scanline{
position:fixed;inset:0;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
pointer-events:none;z-index:999;
}

@media(max-width:520px){
.card{padding:2.5rem 1.5rem 2rem}
.card-top-bar{left:1.5rem;right:1.5rem}
.input-row{flex-direction:column}
.btn{justify-content:center}
}
</style>
</head>
<body>
<div class="scanline"></div>
<div class="page">
<div class="bg-grid"></div>
<div class="bg-glow-main"></div>
<div class="bg-glow-top"></div>
<div class="particles" id="particles"></div>

<div class="card">
<div class="card-top-bar"></div>
<div class="version-tag">v1.0</div>

<div class="logo-wrap">
<svg class="logo-svg" viewBox="0 0 130 90" xmlns="http://www.w3.org/2000/svg" fill="none">
<rect x="22" y="22" width="56" height="38" rx="7" stroke="#2496ED" stroke-width="1.5"/>
<circle cx="50" cy="41" r="13" stroke="#2496ED" stroke-width="1.2"/>
<circle cx="50" cy="41" r="7.5" fill="rgba(36,150,237,0.12)" stroke="#2496ED" stroke-width="0.9"/>
<line class="lens-scan" x1="42" y1="41" x2="58" y2="41" stroke="#2496ED" stroke-width="0.8" stroke-linecap="round" opacity="0.5"/>
<circle cx="47.5" cy="38.5" r="2" fill="#2496ED" opacity="0.5"/>
<rect x="65" y="46" width="9" height="7" rx="1.2" stroke="#2496ED" stroke-width="1" fill="rgba(36,150,237,0.12)"/>
<path d="M67 46 V44.5 a2.5 2.5 0 0 1 5 0 V46" stroke="#2496ED" stroke-width="1" stroke-linecap="round"/>
<circle class="rec-light" cx="69" cy="26" r="2.2" fill="#1d9e75"/>
<text x="73" y="29" font-family="monospace" font-size="5" fill="rgba(29,158,117,0.7)" letter-spacing="0.5">REC</text>
<path d="M78 30 L96 22 L96 60 L78 52 Z" stroke="#2496ED" stroke-width="1.5" fill="rgba(36,150,237,0.07)" stroke-linejoin="round"/>
<path d="M16 41 Q11 41 11 36" stroke="#2496ED" stroke-width="1" stroke-linecap="round" opacity="0.45"/>
<path d="M20 41 Q13 41 13 32" stroke="#2496ED" stroke-width="1" stroke-linecap="round" opacity="0.28"/>
<path d="M96 41 Q104 41 104 46" stroke="#2496ED" stroke-width="1" stroke-linecap="round" opacity="0.45"/>
<path d="M96 41 Q107 41 107 52" stroke="#2496ED" stroke-width="1" stroke-linecap="round" opacity="0.28"/>
<text x="65" y="80" text-anchor="middle" font-family="Space Mono,monospace" font-size="9.5" font-weight="700" fill="#e8f4fd" letter-spacing="3.5">MEET.SPF.LAT</text>
</svg>
</div>

<p class="tagline">Ephemeral meetings. Nothing stored. <em>Nothing seen.</em></p>

<div class="divider"></div>

<label class="field-label" for="roomName">Channel Name</label>
<div class="input-row">
<input id="roomName" class="room-input" type="text" placeholder="e.g. quiet-falcon-42" autocomplete="off" spellcheck="false" />
<button class="btn" onclick="openChannel()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
Open Secure Channel
</button>
</div>

<div class="privacy-chips">
<span class="chip">
<svg class="chip-icon" viewBox="0 0 24 24"><path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/></svg>
End-to-End Encrypted
</span>
<span class="chip"><span class="chip-dot"></span>Zero Logs</span>
<span class="chip">
<svg class="chip-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
Self-Hosted
</span>
<span class="chip">
<svg class="chip-icon" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
No Tracking
</span>
</div>

<div class="footer-row">
<div class="status-group">
<span class="status-dot"></span>
<span class="status-text">systems nominal</span>
</div>
<div class="footer-links">
<button class="privacy-link" onclick="togglePrivacy()">Privacy Policy</button>
<span class="footer-sep">|</span>
<button class="privacy-link" onclick="toggleTOS()">Terms of Service</button>
</div>
</div>

<div id="privacyBox" class="privacy-box">
<strong>Privacy Policy — No Logs, No Records</strong><br/><br/>
We keep <strong>0 logs</strong> and prioritize privacy. No metadata, no chat history, no attendance records. Rooms dissolve the moment the last participant leaves. Nothing stored. Nothing seen. Nothing to subpoena.<br/><br/>
<a href="https://spf.lat/our_mission/" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;font-size:12px;letter-spacing:0.3px;">Learn more about our mission at spf.lat/our_mission/ ↗</a>
</div>

<div id="tosBox" class="privacy-box">
<div class="tos-title">Terms of Service</div>
<div class="tos-scroll" id="tosScroll">
Paste your full Terms of Service here. This box scrolls automatically when content exceeds the visible area. Replace this placeholder text with your actual Terms of Service document. No special formatting required — plain text works perfectly.
</div>
</div>

</div>
</div>

<script>
(function(){
const c=document.getElementById('particles');
for(let i=0;i<28;i++){
const p=document.createElement('div');
p.className='particle';
p.style.left=Math.random()*100+'vw';
p.style.bottom='-10px';
p.style.animationDuration=(12+Math.random()*20)+'s';
p.style.animationDelay=(Math.random()*18)+'s';
p.style.width=p.style.height=(1+Math.random()*2)+'px';
c.appendChild(p);
}
})();

function slugify(v){
return v.trim().toLowerCase()
.replace(/[^a-z0-9\s-]/g,'')
.replace(/\s+/g,'-').replace(/-+/g,'-').replace(/^-|-$/g,'');
}
function randomRoom(){
const a=['quiet','swift','dark','silent','hidden','cobalt','vivid','lunar','amber','shadow','hollow','cryptic','sealed','remote','cipher'];
const n=['falcon','vault','signal','prism','echo','delta','orbit','fern','quartz','raven','mist','nexus','forge','drift','hollow'];
return a[Math.floor(Math.random()*a.length)]+'-'+n[Math.floor(Math.random()*n.length)]+'-'+Math.floor(Math.random()*90+10);
}
function openChannel(){
const inp=document.getElementById('roomName');
let r=slugify(inp.value);
if(!r) r=randomRoom();
closeAll();
window.location.href='/'+encodeURIComponent(r);
}
document.getElementById('roomName').addEventListener('keydown',function(e){if(e.key==='Enter')openChannel()});
function closeAll(){
document.getElementById('privacyBox').classList.remove('open');
document.getElementById('tosBox').classList.remove('open');
document.getElementById('tosScroll').scrollTop=0;
}
function togglePrivacy(){
const pp=document.getElementById('privacyBox');
const tos=document.getElementById('tosBox');
tos.classList.remove('open');
document.getElementById('tosScroll').scrollTop=0;
pp.classList.toggle('open');
}
function toggleTOS(){
const pp=document.getElementById('privacyBox');
const tos=document.getElementById('tosBox');
pp.classList.remove('open');
const wasOpen=tos.classList.contains('open');
tos.classList.toggle('open');
if(!wasOpen) document.getElementById('tosScroll').scrollTop=0;
}
</script>
</body>
</html>