Elgato_dark/Haven
1
0
Fork 0
mirror of https://github.com/ancsemi/Haven synced 2026-04-21 13:37:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
Haven/docs/index_clean.html
ancsemi 45ddb27d84 v2.9.5: License changed to AGPL-3.0 
- Replaced custom MIT-NC license with GNU Affero General Public License v3
- Haven is now truly open source under an OSI-approved license
- AGPL copyleft ensures forks deployed as network services must release source
- Updated all license references across README, package.json, docs, website, and TOS
- Fixed bot/webhook pinned messages showing raw username instead of [BOT] prefix
2026-04-06 22:21:47 -04:00

1749 lines
82 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haven — Private Chat That Lives On Your Machine</title>
<meta name="description" content="Haven is a free, open-source private chat server you run on your own computer. Voice chat, screen sharing, 25+ themes, sub-channels, direct messages, file sharing, and more. Only the host downloads — friends join from their browser.">
<meta name="keywords" content="private chat, self-hosted, discord alternative, open source, voice chat, screen sharing, encrypted, no cloud, mobile compatible">
<!-- Open Graph -->
<meta property="og:title" content="Haven — Private Chat That Lives On Your Machine">
<meta property="og:description" content="Free, open-source private chat with voice, screen sharing, and 25+ themes. Only the host downloads — friends join from their browser.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ancsemi.github.io/Haven/">
<meta property="og:image" content="https://github.com/user-attachments/assets/a3205eb4-7011-4b7b-825e-7aba76aa5c11">
<link rel="canonical" href="https://ancsemi.github.io/Haven/">
<meta name="theme-color" content="#191b28">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Haven — Private Chat That Lives On Your Machine">
<meta name="twitter:description" content="Free, open-source private chat. Voice, streaming, 25+ themes. Only the host downloads.">
<meta name="twitter:image" content="https://github.com/user-attachments/assets/a3205eb4-7011-4b7b-825e-7aba76aa5c11">
<meta name="twitter:site" content="@ancsemi">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⬡</text></svg>">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17950126697"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-17950126697');
</script>
<style>
/* ============================================
RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-deep: #15172a;
--bg-card: #1c1e33;
--bg-card-hover: #252840;
--bg-surface: #191b28;
--bg-hover: #2c2f4a;
--bg-active: #333660;
--bg-input: #15172a;
--accent: #7c5cfc;
--accent-bright: #9478ff;
--accent-dim: #5a3fd4;
--accent-glow: rgba(124, 92, 252, 0.25);
--accent-glow-strong: rgba(124, 92, 252, 0.45);
--green: #43b581;
--green-glow: rgba(67, 181, 129, 0.35);
--danger: #f04747;
--warning: #faa61a;
--pink: #fd79a8;
--text: #e2e4f0;
--text-muted: #9498b3;
--text-dim: #5d6180;
--text-link: #82aaff;
--border: #2d3050;
--border-light: #383b5e;
--radius: 8px;
--radius-lg: 16px;
--font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg-deep);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; }
p { color: var(--text-muted); font-size: 1.1rem; }
a { color: var(--text-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-bright); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }
/* ============================================
NAV
============================================ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(21, 23, 42, 0.85);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 0 24px; transition: background 0.3s;
}
.nav-inner {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: #fff; }
.nav-brand .hex { font-size: 1.6rem; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); text-shadow: 0 0 12px var(--accent-glow); }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
background: var(--accent); color: #fff !important; padding: 8px 20px;
border-radius: var(--radius); font-weight: 600; font-size: 0.9rem;
transition: all 0.15s ease; box-shadow: 0 0 16px var(--accent-glow);
}
.nav-cta:hover { background: var(--accent-bright); transform: translateY(-1px); box-shadow: 0 0 24px var(--accent-glow-strong); }
.nav-mobile-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 4px; }
/* ============================================
HERO
============================================ */
.hero {
min-height: 100vh; display: flex; align-items: center;
position: relative; overflow: hidden; padding-top: 64px;
}
.hero::before {
content: ''; position: absolute; top: -20%; left: -10%;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(124, 92, 252, 0.18) 0%, transparent 70%);
animation: floatOrb 15s ease-in-out infinite; pointer-events: none;
}
.hero::after {
content: ''; position: absolute; bottom: -10%; right: -10%;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(67, 181, 129, 0.12) 0%, transparent 70%);
animation: floatOrb 18s ease-in-out infinite reverse; pointer-events: none;
}
@keyframes floatOrb {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(30px, -40px); }
66% { transform: translate(-20px, 30px); }
}
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; margin: 0 auto; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(124, 92, 252, 0.12); border: 1px solid rgba(124, 92, 252, 0.3);
padding: 6px 16px; border-radius: 999px; font-size: 0.85rem;
color: var(--accent-bright); margin-bottom: 24px; font-weight: 500;
}
.hero-badge .dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 .gradient-text {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 40%, var(--text-link) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle { font-size: clamp(1.1rem, 2.5vw, 1.35rem); color: var(--text-muted); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 32px; border-radius: var(--radius); font-weight: 600;
font-size: 1.05rem; transition: all 0.15s ease; cursor: pointer; border: none; text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 24px var(--accent-glow), 0 0 0 1px rgba(124, 92, 252, 0.3); }
.btn-primary:hover { background: var(--accent-bright); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 36px var(--accent-glow-strong), 0 0 0 1px rgba(148, 120, 255, 0.5); }
.btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); }
.btn .icon { font-size: 1.2rem; }
.hero-note { font-size: 0.85rem; color: var(--text-dim); }
.hero-note strong { color: var(--text-muted); }
/* ============================================
DISCORD IMPORT BANNER
============================================ */
.discord-banner {
background: linear-gradient(135deg, #5865f2 0%, #7c5cfc 50%, #43b581 100%);
padding: 2px;
position: relative;
}
.discord-banner-inner {
background: var(--bg-deep);
padding: 64px 24px;
text-align: center;
}
.discord-banner h2 {
color: #fff;
font-size: clamp(1.8rem, 4vw, 2.8rem);
margin-bottom: 16px;
}
.discord-banner h2 .discord-blue { color: #5865f2; }
.discord-banner p {
color: var(--text-muted);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto 32px;
line-height: 1.7;
}
.discord-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
max-width: 800px;
margin: 0 auto;
}
.discord-feat {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(88, 101, 242, 0.12);
border: 1px solid rgba(88, 101, 242, 0.3);
padding: 8px 18px;
border-radius: 999px;
font-size: 0.9rem;
color: var(--text);
font-weight: 500;
}
@media (max-width: 768px) {
.discord-banner-inner { padding: 40px 16px; }
.discord-feat { font-size: 0.8rem; padding: 6px 14px; }
}
/* ============================================
DESKTOP APP BANNER
============================================ */
.desktop-banner {
background: linear-gradient(135deg, #7c5cfc 0%, #43b581 50%, #82aaff 100%);
padding: 2px;
position: relative;
}
.desktop-banner-inner {
background: var(--bg-deep);
padding: 64px 24px;
text-align: center;
}
.desktop-banner h2 {
color: #fff;
font-size: clamp(1.8rem, 4vw, 2.8rem);
margin-bottom: 16px;
}
.desktop-banner .desktop-accent { color: var(--accent-bright); }
.desktop-banner p {
color: var(--text-muted);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto 32px;
line-height: 1.7;
}
.beta-badge-inline {
display: inline-block;
background: rgba(250, 166, 26, 0.2);
color: var(--warning);
font-size: 0.55em;
font-weight: 700;
padding: 4px 12px;
border-radius: 6px;
border: 1px solid rgba(250, 166, 26, 0.4);
vertical-align: middle;
letter-spacing: 0.08em;
}
.closed-beta-badge-inline {
display: inline-block;
background: rgba(61, 220, 132, 0.15);
color: #3ddc84;
font-size: 0.55em;
font-weight: 700;
padding: 4px 12px;
border-radius: 6px;
border: 1px solid rgba(61, 220, 132, 0.4);
vertical-align: middle;
letter-spacing: 0.08em;
}
/* Android banner */
.android-banner {
background: linear-gradient(135deg, #3ddc84 0%, #2bb55e 50%, #82aaff 100%);
padding: 2px;
position: relative;
}
.android-banner-inner {
background: var(--bg-deep);
padding: 64px 24px;
text-align: center;
}
.android-banner h2 {
color: #fff;
font-size: clamp(1.8rem, 4vw, 2.8rem);
margin-bottom: 16px;
}
.android-banner .android-accent { color: #3ddc84; }
.android-banner p {
color: var(--text-muted);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto 32px;
line-height: 1.7;
}
.android-beta-email-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.android-beta-email-form input[type="email"] {
padding: 12px 18px;
font-size: 1rem;
border-radius: 8px;
border: 1px solid var(--border-light);
background: var(--bg-card);
color: var(--text);
width: 100%;
max-width: 360px;
outline: none;
transition: border-color 0.15s;
}
.android-beta-email-form input[type="email"]:focus {
border-color: #3ddc84;
box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.2);
}
.android-beta-email-form .btn-android {
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
background: linear-gradient(135deg, #3ddc84, #2bb55e);
color: #fff;
border: none;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.15s;
}
.android-beta-email-form .btn-android:hover {
transform: scale(1.03);
box-shadow: 0 4px 20px rgba(61, 220, 132, 0.35);
}
.android-credit {
margin-top: 20px;
font-size: 0.9rem;
color: var(--text-dim);
font-style: italic;
}
@media (max-width: 768px) {
.android-banner-inner { padding: 40px 16px; }
}
@media (max-width: 768px) {
.desktop-banner-inner { padding: 40px 16px; }
}
.hero-screenshot {
position: relative; z-index: 2; max-width: 1000px; margin: 0 auto;
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border), 0 0 60px var(--accent-glow);
aspect-ratio: 1920 / 948; /* fixed ratio prevents layout shift during carousel */
}
.hero-screenshot img {
width: 100%; height: 100%; object-fit: cover; display: block;
position: absolute; top: 0; left: 0;
opacity: 0; transition: opacity 1s ease-in-out;
}
.hero-screenshot img.active { opacity: 1; }
/* ============================================
PLATFORM SHOWCASE (Desktop + Mobile)
============================================ */
.platform-showcase {
background: var(--bg-surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.showcase-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.showcase-text h2 { color: #fff; margin-bottom: 16px; }
.showcase-text p { margin-bottom: 20px; }
.platform-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.platform-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 999px;
font-size: 0.85rem;
color: var(--text);
font-weight: 500;
}
.platform-tag .ptag-icon { font-size: 1rem; }
/* Phone Mockup Frames */
.phone-mockups {
display: flex;
gap: 24px;
justify-content: center;
align-items: flex-start;
}
.phone-frame {
position: relative;
width: 220px;
background: #000;
border-radius: 28px;
padding: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 40px var(--accent-glow);
}
.phone-frame::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 20px;
background: #000;
border-radius: 0 0 12px 12px;
z-index: 5;
}
.phone-frame img {
width: 100%;
height: auto;
border-radius: 20px;
display: block;
}
.phone-frame .phone-label {
text-align: center;
font-size: 0.75rem;
color: var(--text-dim);
margin-top: 10px;
padding-bottom: 2px;
}
.phone-frame:nth-child(2) {
margin-top: 40px;
}
/* ============================================
SCREENSHOT GALLERY (Desktop views)
============================================ */
.screenshot-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 48px;
}
.screenshot-item {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
transition: all 0.3s ease;
position: relative;
}
.screenshot-item:hover {
border-color: rgba(124, 92, 252, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow);
transform: translateY(-4px);
}
.screenshot-item img {
width: 100%;
height: auto;
display: block;
}
.screenshot-item .ss-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
font-size: 0.85rem;
color: #fff;
font-weight: 500;
}
/* Single wide screenshot */
.screenshot-wide {
grid-column: span 2;
}
/* ============================================
HOW IT WORKS
============================================ */
.how-it-works {
background: var(--bg-surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section-header { text-align: center; margin-bottom: 64px; }
.section-header .overline {
display: inline-block; font-size: 0.8rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.15em;
color: var(--accent); margin-bottom: 12px;
}
.section-header h2 { color: #fff; margin-bottom: 16px; }
.section-header p { max-width: 560px; margin: 0 auto; font-size: 1.1rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps::before {
content: ''; position: absolute; top: 48px;
left: calc(16.66% + 48px); right: calc(16.66% + 48px);
height: 2px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 50%, var(--green) 100%);
opacity: 0.3;
}
.step { text-align: center; position: relative; }
.step-number {
width: 96px; height: 96px; border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
border: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; font-size: 2.5rem; position: relative; z-index: 2;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.step h3 { color: #fff; margin-bottom: 8px; font-size: 1.15rem; }
.step p { font-size: 0.95rem; max-width: 280px; margin: 0 auto; }
/* ============================================
KEY SELLING POINTS
============================================ */
.selling-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; }
.sell-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 36px;
transition: all 0.15s ease; position: relative; overflow: hidden;
}
.sell-card:hover {
border-color: rgba(124, 92, 252, 0.35); transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow);
}
.sell-card.highlight {
grid-column: span 2;
background: linear-gradient(135deg, rgba(124, 92, 252, 0.08) 0%, rgba(67, 181, 129, 0.04) 100%);
border-color: rgba(124, 92, 252, 0.2);
}
.sell-card .card-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.sell-card h3 { color: #fff; margin-bottom: 10px; font-size: 1.25rem; }
.sell-card p { font-size: 1rem; line-height: 1.7; }
.sell-card .highlight-tag {
display: inline-block; background: rgba(67, 181, 129, 0.15); color: var(--green);
padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; margin-bottom: 16px;
}
/* ============================================
FEATURES GRID
============================================ */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px; transition: all 0.15s ease;
}
.feature-card:hover {
border-color: rgba(124, 92, 252, 0.3); background: var(--bg-card-hover);
transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.feature-card .f-icon { font-size: 1.6rem; margin-bottom: 14px; display: block; }
.feature-card h3 { color: #fff; font-size: 1rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }
/* ============================================
THEMES SHOWCASE
============================================ */
.themes-showcase {
margin-top: 48px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 40px var(--accent-glow);
}
.themes-showcase img { width: 100%; height: auto; display: block; }
/* ============================================
COMPARISON
============================================ */
.comparison-section {
background: var(--bg-surface);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.comparison-table {
width: 100%; border-collapse: collapse; background: var(--bg-card);
border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
}
.comparison-table thead th {
background: var(--bg-active); padding: 18px 24px; text-align: left;
font-weight: 600; font-size: 0.95rem; color: #fff; border-bottom: 1px solid var(--border);
}
.comparison-table thead th:first-child { color: var(--text-muted); }
.comparison-table thead th.haven-col { color: var(--accent-bright); }
.comparison-table tbody td {
padding: 14px 24px; border-bottom: 1px solid var(--border);
font-size: 0.9rem; color: var(--text-muted);
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody td:first-child { font-weight: 500; color: var(--text); }
.check { color: var(--green); font-size: 1.2rem; font-weight: 700; }
.cross { color: var(--danger); font-size: 1.2rem; }
.meh { color: var(--warning); font-size: 0.85rem; }
/* ============================================
DOWNLOAD
============================================ */
.download-section { text-align: center; }
.download-card {
max-width: 640px; margin: 0 auto; background: var(--bg-card);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 48px; position: relative; overflow: hidden;
}
.download-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-bright), var(--green));
box-shadow: 0 0 12px var(--accent-glow);
}
.download-version { font-size: 0.85rem; color: var(--text-dim); margin-top: 4px; margin-bottom: 24px; }
.download-card h2 { color: #fff; margin-bottom: 4px; font-size: 1.6rem; }
.download-btn-group { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 32px; }
.download-main { width: 100%; max-width: 400px; justify-content: center; font-size: 1.1rem; padding: 16px 32px; }
.download-alt-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.download-alt-links a { font-size: 0.85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.download-alt-links a:hover { color: var(--accent-bright); }
/* Version History */
.version-history { margin-top: 40px; text-align: left; }
.version-toggle {
background: none; border: 1px solid var(--border); color: var(--text-muted);
padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
width: 100%; display: flex; align-items: center; justify-content: space-between;
transition: all 0.2s; font-family: var(--font);
}
.version-toggle:hover { border-color: var(--accent); color: var(--text); }
.version-toggle .arrow { transition: transform 0.3s; }
.version-toggle.open .arrow { transform: rotate(180deg); }
.version-list { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.version-list.open { max-height: 600px; }
.version-list-inner { padding-top: 12px; }
.version-item {
display: flex; align-items: baseline; justify-content: space-between;
padding: 10px 16px; border-radius: 8px; transition: background 0.15s;
}
.version-item:hover { background: rgba(255, 255, 255, 0.03); }
.version-item .v-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.version-item .v-date { font-size: 0.8rem; color: var(--text-dim); }
.version-item .v-tag {
display: inline-block; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px;
background: rgba(124, 92, 252, 0.15); color: var(--accent-bright); margin-left: 8px;
}
.version-item .v-tag.latest { background: rgba(67, 181, 129, 0.15); color: var(--green); }
.version-item a { font-size: 0.8rem; }
/* ============================================
SETUP STEPS
============================================ */
.setup-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.setup-step {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px; display: flex; gap: 16px; align-items: flex-start;
}
.setup-step .s-num {
flex-shrink: 0; width: 36px; height: 36px; background: var(--accent);
color: #fff; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 0.95rem;
}
.setup-step h4 { color: #fff; font-size: 1rem; margin-bottom: 4px; }
.setup-step p { font-size: 0.9rem; color: var(--text-muted); }
/* ============================================
SUPPORT / DONATE
============================================ */
.support-section { text-align: center; }
.support-card {
max-width: 560px; margin: 0 auto;
background: linear-gradient(135deg, rgba(124, 92, 252, 0.08) 0%, rgba(67, 181, 129, 0.06) 100%);
border: 1px solid rgba(124, 92, 252, 0.25);
border-radius: var(--radius-lg); padding: 48px;
}
.support-card .heart { font-size: 3rem; margin-bottom: 16px; display: block; }
.support-card h2 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; }
.support-card p { margin-bottom: 24px; max-width: 420px; margin-left: auto; margin-right: auto; }
.btn-donate {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
color: #fff; box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-donate:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow-strong); }
.support-note { margin-top: 16px; font-size: 0.8rem !important; color: var(--text-dim) !important; }
/* ============================================
FOOTER
============================================ */
footer { border-top: 1px solid var(--border); padding: 48px 0; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: 12px; }
.footer-brand .hex { font-size: 1.4rem; color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
footer p { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 16px; }
.footer-links { display: flex; justify-content: center; gap: 24px; list-style: none; }
.footer-links a { color: var(--text-muted); font-size: 0.85rem; }
.footer-links a:hover { color: #fff; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.selling-points { grid-template-columns: 1fr; }
.sell-card.highlight { grid-column: span 1; }
.showcase-layout { grid-template-columns: 1fr; gap: 48px; }
.phone-mockups { justify-content: center; }
.screenshot-gallery { grid-template-columns: 1fr; }
.screenshot-wide { grid-column: span 1; }
}
@media (max-width: 768px) {
section { padding: 64px 0; }
.nav-links { display: none; }
.nav-links.open {
display: flex; flex-direction: column; position: absolute;
top: 64px; left: 0; right: 0;
background: rgba(21, 23, 42, 0.97); backdrop-filter: blur(20px);
padding: 24px; gap: 20px; border-bottom: 1px solid var(--border);
}
.nav-mobile-toggle { display: block; }
.steps { grid-template-columns: 1fr; gap: 40px; }
.steps::before { display: none; }
.features-grid { grid-template-columns: 1fr; }
.setup-steps { grid-template-columns: 1fr; }
.comparison-table { font-size: 0.85rem; }
.comparison-table thead th, .comparison-table tbody td { padding: 10px 12px; }
.hero-actions { flex-direction: column; }
.btn { width: 100%; max-width: 320px; justify-content: center; }
.download-card { padding: 32px 24px; }
.phone-frame { width: 160px; border-radius: 22px; padding: 6px; }
.phone-frame img { border-radius: 16px; }
.phone-frame::before { width: 60px; height: 16px; top: 6px; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
h1 { font-size: 2rem; }
.hero-subtitle { font-size: 1rem; }
.phone-mockups { gap: 12px; }
.phone-frame { width: 140px; border-radius: 18px; }
}
/* ============================================
ANIMATIONS
============================================ */
.fade-in {
opacity: 0; transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.25s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.3s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.35s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.4s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.45s; }
.stagger.visible > *:nth-child(9) { transition-delay: 0.5s; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>
<!-- ===== NAV ===== -->
<nav>
<div class="nav-inner">
<div class="nav-brand"><span class="hex">⬡</span> HAVEN</div>
<button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle menu">☰</button>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#compare">Compare</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#desktop">Desktop App</a></li>
<li><a href="#android">Android App</a></li>
<li><a href="#support">Support</a></li>
<li><a href="https://github.com/ancsemi/Haven" target="_blank" class="nav-cta">GitHub</a></li>
</ul>
</div>
</nav>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<span class="dot"></span>
Open Source &amp; Free Forever
</div>
<h1>Free private chat that<br><span class="gradient-text">lives on your machine</span></h1>
<p class="hero-subtitle">
Haven is a full-featured chat server you host yourself. Voice chat, screen sharing, 25+ themes, GIFs, sub-channels, direct messages, file sharing, and more &mdash; no cloud, no Big Tech accounts, no one reading your messages.
</p>
<div class="hero-actions">
<a href="#download" class="btn btn-primary">
<span class="icon">⬇</span> Download Haven
</a>
<a href="https://github.com/ancsemi/Haven" target="_blank" class="btn btn-secondary">
<span class="icon">&#9965;</span> View Source
</a>
</div>
<p class="hero-note">
<strong>Only the host downloads Haven.</strong> Friends join from their web browser &mdash; no download necessary.
</p>
</div>
<!-- Hero image carousel -->
<div class="hero-screenshot fade-in" style="margin-top: 48px;">
<img src="https://github.com/user-attachments/assets/a3205eb4-7011-4b7b-825e-7aba76aa5c11"
alt="Haven login screen with theme selection" class="active" loading="eager">
<img src="https://github.com/user-attachments/assets/4103f3b8-547a-4508-b4d7-07fb321118e4"
alt="Haven chat interface with voice chat" loading="lazy">
<img src="https://github.com/user-attachments/assets/ac18c642-0410-4900-ba88-52f925cde982"
alt="Haven themed chat view" loading="lazy">
<img src="https://github.com/user-attachments/assets/47bfe39d-4fb2-4923-bf75-cc781e8d57a7"
alt="Haven desktop with channels and sidebar" loading="lazy">
<img src="https://github.com/user-attachments/assets/f745a6b8-ed7a-4f2f-a073-61c001cfda61"
alt="Haven screen sharing and streaming" loading="lazy">
<img src="https://github.com/user-attachments/assets/a6da197e-66df-4df6-a2a8-c215bf02ac10"
alt="Haven theme gallery showcase" loading="lazy">
</div>
</div>
</section>
<!-- ===== DISCORD IMPORT BANNER ===== -->
<section class="discord-banner fade-in" id="discord-import">
<div class="discord-banner-inner">
<div class="container">
<h2>🚀 NEW &mdash; Import your <span class="discord-blue">Discord</span> history</h2>
<p>
Leaving Discord? Bring everything with you. Haven&nbsp;v2.0 imports your entire server &mdash;
every channel, thread, forum post, reaction, pin, attachment, and avatar &mdash;
directly from the app. No external tools. No command line. Just paste your token, pick a server, and go.
</p>
<div class="discord-features">
<span class="discord-feat">💬 Text channels</span>
<span class="discord-feat">📢 Announcements</span>
<span class="discord-feat">💬 Forums &amp; tags</span>
<span class="discord-feat">🧵 Threads</span>
<span class="discord-feat">😀 Reactions</span>
<span class="discord-feat">📌 Pins</span>
<span class="discord-feat">📎 Attachments</span>
<span class="discord-feat">🖼️ Avatars</span>
<span class="discord-feat">↩️ Replies</span>
</div>
</div>
</div>
</section>
<!-- ===== DESKTOP APP BANNER ===== -->
<section class="desktop-banner fade-in" id="desktop">
<div class="desktop-banner-inner">
<div class="container">
<h2>🖥️ NEW &mdash; <span class="desktop-accent">Haven Desktop</span> <span class="beta-badge-inline">BETA</span></h2>
<p>
A native desktop app that connects to any Haven server &mdash; with features that go beyond the browser.
Per-app audio sharing, device switching mid-call, native notifications, system tray, and a one-click installer.
</p>
<div class="discord-features">
<span class="discord-feat">🎵 Per-App Audio</span>
<span class="discord-feat">🎧 Device Switching</span>
<span class="discord-feat">🔔 Native Notifications</span>
<span class="discord-feat">📌 System Tray</span>
<span class="discord-feat">âš¡ One-Click Install</span>
<span class="discord-feat">🖥️ Windows &amp; Linux</span>
</div>
<div style="margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
<a href="https://github.com/ancsemi/Haven-Desktop/releases/download/v1.1.4/Haven-Setup-1.1.4.exe" class="btn btn-primary" style="padding: 12px 24px; font-size: 1rem;">
<span class="icon">⬇</span> Windows Installer
</a>
<a href="https://github.com/ancsemi/Haven-Desktop/releases/download/v1.1.4/Haven-1.1.4.AppImage" class="btn btn-primary" style="padding: 12px 24px; font-size: 1rem;">
<span class="icon">⬇</span> Linux AppImage
</a>
<a href="https://github.com/ancsemi/Haven-Desktop/releases/download/v1.1.4/haven-desktop_1.1.4_amd64.deb" class="btn btn-primary" style="padding: 12px 24px; font-size: 1rem;">
<span class="icon">⬇</span> Linux .deb
</a>
</div>
<div style="margin-top: 12px;">
<a href="https://github.com/ancsemi/Haven-Desktop" target="_blank" class="btn btn-secondary" style="padding: 10px 24px; font-size: 0.95rem;">
<span class="icon">&#9965;</span> View on GitHub
</a>
</div>
<p style="margin-top: 16px; font-size: 0.85rem; color: var(--text-dim);">
⚠️ Beta release &mdash; feedback &amp; bug reports are greatly appreciated. <strong>Requires a <a href="https://github.com/ancsemi/Haven" style="color: var(--accent-bright);">Haven server</a></strong> to connect to.
</p>
</div>
</div>
</section>
<!-- ===== ANDROID APP BANNER ===== -->
<section class="android-banner fade-in" id="android">
<div class="android-banner-inner">
<div class="container">
<h2>📱 NEW &mdash; <span class="android-accent">Haven Android</span> <span class="closed-beta-badge-inline">CLOSED BETA</span></h2>
<p>
A native Android app for Haven, built from the ground up. Full chat and voice support,
push notifications, and a true mobile-native experience &mdash; now in closed beta on Google Play.
</p>
<div class="discord-features">
<span class="discord-feat">📱 Native Android</span>
<span class="discord-feat">🔔 Push Notifications</span>
<span class="discord-feat">💬 Full Chat Support</span>
<span class="discord-feat">🎙️ Voice Chat</span>
<span class="discord-feat">🚀 Built for Haven</span>
</div>
<div class="android-beta-email-form">
<p style="font-size: 0.95rem; color: var(--text-muted); margin: 0;">Enter your email to request access to the closed beta:</p>
<input type="email" id="website-android-beta-email" placeholder="your@email.com" maxlength="120">
<button class="btn-android" onclick="(function(){
var e=document.getElementById('website-android-beta-email');
var v=e.value.trim();
if(!v||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)){e.style.borderColor='#f04747';e.focus();return;}
var s=encodeURIComponent('Haven Android Beta - Opt-in Request');
var b=encodeURIComponent('Hi Amnibro,\n\nI\'d like to opt-in to the Haven Android closed beta on Google Play.\n\nMy email: '+v+'\n\nThanks!');
window.open('mailto:amnibro7@gmail.com?subject='+s+'&body='+b,'_blank');
e.value='';e.style.borderColor='';
alert('Your email client should open with a pre-filled message. Just hit Send!');
})()">🚀 Sign Up for Beta</button>
</div>
<p class="android-credit">Built with ❤️ by <strong>Amnibro</strong> &mdash; thank you for your incredible work building the Haven Android app from the ground up.</p>
</div>
</div>
</section>
<!-- ===== WORKS EVERYWHERE ===== -->
<section class="platform-showcase" id="mobile">
<div class="container">
<div class="showcase-layout fade-in">
<div class="showcase-text">
<span class="section-header" style="margin-bottom: 0; text-align: left;">
<span class="overline">Works Everywhere</span>
</span>
<h2>Desktop, tablet, and phone</h2>
<p>Haven isn't just for desktop. Friends can join from their phone's browser &mdash; no app download required. The interface adapts automatically to any screen size.</p>
<p>Full chat, channels, direct messages, voice chat, and the sidebar &mdash; all fully functional on mobile. Just open the link and go.</p>
<div class="platform-tags">
<span class="platform-tag"><span class="ptag-icon">🖥️</span> Windows</span>
<span class="platform-tag"><span class="ptag-icon">🍎</span> macOS</span>
<span class="platform-tag"><span class="ptag-icon">🐧</span> Linux</span>
<span class="platform-tag"><span class="ptag-icon">📱</span> iOS Safari</span>
<span class="platform-tag"><span class="ptag-icon">🤖</span> Android</span>
<span class="platform-tag"><span class="ptag-icon">🌐</span> Any Browser</span>
</div>
</div>
<div class="phone-mockups">
<!-- Phone 1: Welcome / Channel view -->
<div class="phone-frame">
<img src="https://github.com/user-attachments/assets/e03573f7-da20-4a8c-bfae-d6f88d2c5e73"
alt="Haven mobile view — Welcome screen with channel selection"
loading="lazy">
<div class="phone-label">Welcome view</div>
</div>
<!-- Phone 2: Sidebar with channels & DMs -->
<div class="phone-frame">
<img src="https://github.com/user-attachments/assets/74bcf6af-4313-42de-a83e-0e1955f1af2b"
alt="Haven mobile view — Sidebar showing channels, DMs, and user profile"
loading="lazy">
<div class="phone-label">Channels &amp; DMs</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== HOW IT WORKS ===== -->
<section class="how-it-works" id="how-it-works">
<div class="container">
<div class="section-header fade-in">
<span class="overline">Dead Simple</span>
<h2>Up and running in 3 steps</h2>
<p>No terminal commands, no config files. Just double-click. (Docker supported too!)</p>
</div>
<div class="steps stagger">
<div class="step">
<div class="step-number">📥</div>
<h3>Download &amp; unzip</h3>
<p>Download the .zip from GitHub and unzip it anywhere. Desktop is fine.</p>
</div>
<div class="step">
<div class="step-number">▶️</div>
<h3>Double-click to start</h3>
<p>Run <strong>Start Haven.bat</strong> (Windows) or <strong>start.sh</strong> (Mac/Linux). It handles everything.</p>
</div>
<div class="step">
<div class="step-number">🔗</div>
<h3>Share the link</h3>
<p>Send your friends your IP address. They open it in their browser &mdash; that's it. No download for them.</p>
</div>
</div>
<div class="setup-steps stagger">
<div class="setup-step">
<div class="s-num">?</div>
<div>
<h4>What's a "self-hosted" server?</h4>
<p>It means the chat runs on YOUR computer, not a company's server. Your messages never leave your machine &mdash; you're the cloud.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">!</div>
<div>
<h4>Do my friends need to download anything?</h4>
<p>Nope. They open a link in Chrome, Firefox, Edge, Safari &mdash; any modern browser. Zero installs on their end. Works on phones too.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">🔒</div>
<div>
<h4>Is it secure?</h4>
<p>HTTPS encryption, bcrypt passwords, JWT auth, rate limiting, CSP headers, and more. Check the <a href="https://github.com/ancsemi/Haven" target="_blank">source code</a> yourself.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">💻</div>
<div>
<h4>What do I need?</h4>
<p>Windows, Mac, or Linux. <a href="https://nodejs.org/" target="_blank">Node.js</a> (free, 2-click install). About 50 MB disk space. That's everything. Or use <strong>Docker</strong> &mdash; <code>docker compose up -d</code> and you're done.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== KEY SELLING POINTS ===== -->
<section id="features">
<div class="container">
<div class="section-header fade-in">
<span class="overline">Why Haven</span>
<h2>Everything you need, nothing you don't</h2>
<p>A Discord-like experience that's completely private, completely free, and yours to control.</p>
</div>
<div class="selling-points stagger">
<div class="sell-card highlight">
<span class="highlight-tag">Key Differentiator</span>
<span class="card-icon">🌐</span>
<h3>Only the host downloads &mdash; friends join from any browser</h3>
<p>One person runs Haven on their computer. Everyone else just opens a link. No apps to install, no accounts to create with some company, no app stores. Your non-tech friends can join in 30 seconds &mdash; from their laptop or phone.</p>
</div>
<div class="sell-card">
<span class="card-icon">🎤</span>
<h3>Crystal-clear voice chat</h3>
<p>Peer-to-peer voice that goes directly between users &mdash; not through a middleman server. Per-user volume sliders, mute, deafen, talking indicators, join/leave sounds, and sound effects.</p>
</div>
<div class="sell-card">
<span class="card-icon">🖥️</span>
<h3>Screen sharing &amp; streaming</h3>
<p>Share your screen with anyone in the voice channel. Multiple people can stream at once in a tiled grid. Perfect for watch parties, co-working, or showing gameplay.</p>
</div>
<div class="sell-card">
<span class="card-icon">🔒</span>
<h3>Truly private &mdash; with E2E encrypted DMs</h3>
<p>No cloud. No telemetry. No analytics. No data collection. Messages live on YOUR computer. Direct messages are end-to-end encrypted with AES-256-GCM &mdash; not even the server host can read them. Haven doesn't phone home &mdash; ever.</p>
</div>
<div class="sell-card">
<span class="card-icon">📱</span>
<h3>Mobile-ready out of the box</h3>
<p>Fully responsive design that works on any phone or tablet. Channels, DMs, voice chat, and file sharing &mdash; all from your mobile browser. No app store needed.</p>
</div>
</div>
</div>
</section>
<!-- ===== SCREENSHOTS ===== -->
<section id="screenshots" style="padding-top: 0;">
<div class="container">
<div class="section-header fade-in">
<span class="overline">See It In Action</span>
<h2>Screenshots</h2>
<p>Haven running with different themes. Every pixel is customizable.</p>
</div>
<div class="screenshot-gallery stagger">
<div class="screenshot-item">
<img src="https://github.com/user-attachments/assets/a2acb368-0cd2-46ab-818e-b2a0785fe2de"
alt="Haven desktop — default Haven theme with voice chat, channels, and DMs"
loading="lazy">
<div class="ss-caption">Haven Theme &mdash; Full desktop chat</div>
</div>
<div class="screenshot-item">
<img src="https://github.com/user-attachments/assets/b4d7fd0d-92a1-48f5-a961-574af969cc36"
alt="Haven desktop — activities, games, Flash emulation, and themes"
loading="lazy">
<div class="ss-caption">Activities &mdash; Games, Flash emulation &amp; more</div>
</div>
<div class="screenshot-item screenshot-wide">
<img src="https://github.com/user-attachments/assets/b39edb2e-753f-4e38-8522-496a1d5b9dde"
alt="Haven desktop — screen sharing with voice chat, multi-stream, and Win95 theme"
loading="lazy">
<div class="ss-caption">Screen Sharing &mdash; Voice chat with multi-stream</div>
</div>
</div>
</div>
</section>
<!-- ===== ALL FEATURES ===== -->
<section style="padding-top: 0;">
<div class="container">
<div class="section-header fade-in">
<span class="overline">Packed</span>
<h2>All the features</h2>
<p>Haven isn't a toy &mdash; it's a full-featured chat platform.</p>
</div>
<div class="features-grid stagger">
<div class="feature-card">
<span class="f-icon">📥</span>
<h3>Discord Import</h3>
<p>Import your entire Discord server's history directly from Haven &mdash; channels, threads, forums, reactions, pins, attachments, and avatars. Paste your token, pick a server, done.</p>
</div>
<div class="feature-card">
<span class="f-icon">🎵</span>
<h3>Music &amp; Video Streaming</h3>
<p>Spotify, YouTube, and SoundCloud Listen Together with synced playback and seek bar. Share audio files or screen-share a movie &mdash; everyone hears and sees it together in real time.</p>
</div>
<div class="feature-card">
<span class="f-icon">💬</span>
<h3>Rich Chat</h3>
<p>Real-time messaging, image uploads, typing indicators, message editing, replies, emoji reactions, @mentions, and editable channel names with collapsible sub-channels.</p>
</div>
<div class="feature-card">
<span class="f-icon">🎙️</span>
<h3>Voice Chat</h3>
<p>Peer-to-peer audio. Per-user volume sliders. Mute, deafen, noise suppression. Talking indicators.</p>
</div>
<div class="feature-card">
<span class="f-icon">🖥️</span>
<h3>Screen Sharing</h3>
<p>Multi-stream support. Tiled grid layout. Resizable viewer. Share screens simultaneously.</p>
</div>
<div class="feature-card">
<span class="f-icon">🔐</span>
<h3>Encrypted Direct Messages</h3>
<p>End-to-end encrypted DMs using ECDH + AES-256-GCM. Keys sync across devices via password wrapping. Not even the server host can read them.</p>
</div>
<div class="feature-card">
<span class="f-icon">🎨</span>
<h3>25+ Themes</h3>
<p>Haven, Discord, Matrix, Tron, HALO, LoTR, Cyberpunk, Dark Souls, Elden Ring, Minecraft, Scripture, Chapel, Gospel, FFX, Zelda, Fallout, CRT, Win95, RGB, and more.</p>
</div>
<div class="feature-card">
<span class="f-icon">🎞️</span>
<h3>GIF Search &amp; /gif Command</h3>
<p>Search and send GIFs inline, powered by GIPHY. Use the <code>/gif</code> slash command for quick access. One-click admin setup.</p>
</div>
<div class="feature-card">
<span class="f-icon">📁</span>
<h3>File Sharing</h3>
<p>Share PDFs, docs, audio, video, archives up to 1.5 GB (admin-configurable). Inline audio/video players.</p>
</div>
<div class="feature-card">
<span class="f-icon">🔗</span>
<h3>Link Previews</h3>
<p>Automatic OpenGraph previews for shared URLs with title, description, and thumbnail.</p>
</div>
<div class="feature-card">
<span class="f-icon">⌨️</span>
<h3>Slash Commands</h3>
<p>/shrug, /tableflip, /roll, /flip, /me, /tts &mdash; with autocomplete and descriptions.</p>
</div>
<div class="feature-card">
<span class="f-icon">🔍</span>
<h3>Message Search</h3>
<p>Ctrl+F to search any channel. Results with highlighted matches and jump-to-message.</p>
</div>
<div class="feature-card">
<span class="f-icon">📌</span>
<h3>Pinned Messages</h3>
<p>Admins can pin important messages. Dedicated panel to browse all pins in a channel.</p>
</div>
<div class="feature-card">
<span class="f-icon">🛡️</span>
<h3>Moderation Tools</h3>
<p>Kick, mute (timed), ban, delete users, manage channels, auto-cleanup old messages.</p>
</div>
<div class="feature-card">
<span class="f-icon">🌐</span>
<h3>Multi-Server</h3>
<p>Add friends' Haven servers to your sidebar. Live online/offline status indicators.</p>
</div>
<div class="feature-card">
<span class="f-icon">🔔</span>
<h3>Notification Sounds</h3>
<p>5 distinct tones. Per-channel volume. Enable/disable per channel. Unread badges persist.</p>
</div>
<div class="feature-card">
<span class="f-icon">🎮</span>
<h3>Games &amp; Activities</h3>
<p>Shippy Container, Flight, Learn to Fly 3, Bubble Tanks 3, Tanks, Super Smash Flash 2, and .io games. Server-wide leaderboards. Flash games via Ruffle emulator.</p>
</div>
</div>
</div>
</section>
<!-- ===== COMPARISON ===== -->
<section class="comparison-section" id="compare">
<div class="container">
<div class="section-header fade-in">
<span class="overline">Honest Comparison</span>
<h2>Haven vs. the incumbents</h2>
</div>
<div class="fade-in">
<table class="comparison-table">
<thead>
<tr>
<th></th>
<th class="haven-col">Haven</th>
<th>Fluxer</th>
<th>Discord</th>
<th>Slack</th>
<th>Signal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Self-hosted (you own the data)</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>No account with a company</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>End-to-end encrypted DMs</td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="check">&#10003;</span></td>
</tr>
<tr>
<td>Voice chat</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="meh">Paid</span></td>
<td><span class="check">&#10003;</span></td>
</tr>
<tr>
<td>Screen sharing</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="meh">Paid</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>Open source</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="check">&#10003;</span></td>
</tr>
<tr>
<td>Themes / customization</td>
<td><span class="check">25+</span></td>
<td><span class="check">CSS</span></td>
<td><span class="meh">Limited</span></td>
<td><span class="meh">Limited</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>Group channels</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
</tr>
<tr>
<td>No email/phone required</td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>Free forever (no paid tier)</td>
<td><span class="check">&#10003;</span></td>
<td><span class="meh">Freemium</span></td>
<td><span class="meh">Freemium</span></td>
<td><span class="meh">Freemium</span></td>
<td><span class="check">&#10003;</span></td>
</tr>
<tr>
<td>Friends join with zero install</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
<tr>
<td>Works on mobile browsers</td>
<td><span class="check">&#10003;</span></td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">App only</span></td>
<td><span class="cross">App only</span></td>
<td><span class="cross">App only</span></td>
</tr>
<tr>
<td>Import history from Discord</td>
<td><span class="check">&#10003;</span></td>
<td><span class="cross">&#10007;</span></td>
<td>&mdash;</td>
<td><span class="cross">&#10007;</span></td>
<td><span class="cross">&#10007;</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- ===== DOWNLOAD ===== -->
<section class="download-section" id="download">
<div class="container">
<div class="section-header fade-in">
<span class="overline">Get Started</span>
<h2>Download Haven</h2>
<p>One zip file. Unzip, double-click, done.</p>
</div>
<div class="download-card fade-in">
<h2>⬡ Haven Server &mdash; v2.7.5</h2>
<p class="download-version">Latest stable release &middot; Windows, macOS &amp; Linux &middot; ~5 MB</p>
<div class="download-btn-group">
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.5.zip" class="btn btn-primary download-main">
<span class="icon">⬇</span> Download v2.7.5 (.zip)
</a>
<div class="download-alt-links">
<a href="https://github.com/ancsemi/Haven" target="_blank">&#9965; View on GitHub</a>
<a href="https://github.com/ancsemi/Haven/blob/main/GUIDE.md" target="_blank">📖 Setup Guide</a>
<a href="https://github.com/ancsemi/Haven/blob/main/CHANGELOG.md" target="_blank">📋 Full Changelog</a>
</div>
</div>
<div class="version-history">
<button class="version-toggle" onclick="this.classList.toggle('open'); this.nextElementSibling.classList.toggle('open');">
<span>Version History</span>
<span class="arrow">â–¼</span>
</button>
<div class="version-list">
<div class="version-list-inner">
<div class="version-item">
<div><span class="v-name">v2.7.5</span><span class="v-tag latest">Latest</span></div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.5.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.7.4</span> &mdash; Account recovery codes, admin panel fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.4.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.7.3</span> &mdash; Video fullscreen, PiP seek bar, stream tile fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.3.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.7.2</span> &mdash; Scroll-to-bottom fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.7.1</span> &mdash; Media toggle, channel functions polish, voice fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.7.0</span> &mdash; Performance overhaul, RGB freeze fix, app modularization</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.6.0</span> &mdash; Android beta sign-up, auto-accept streams</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.6.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.8</span> &mdash; Auto-accept streams setting</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.8.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.7</span> &mdash; Submenu overflow fix; email @mention false-tag fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.7.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.6</span> &mdash; Channel re-parenting, modal resize/expand, organize drill-down</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.6.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.5</span> &mdash; Settings layout hotfix; TOTP 2FA fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.5.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.4</span> &mdash; Link preview fixes: Reddit JSON API, fxtwitter image fallback, HTML entity decoding</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.4.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.3</span> &mdash; Built-in AOL sounds bundled with every server</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.3.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.2</span> &mdash; manage_soundboard permission; fxtwitter, Pixiv &amp; oEmbed autodiscovery fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.1</span> &mdash; Bug fixes: image upload race, DM reply encryption, voice reconnect; manage_emojis permission</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.5.0</span> &mdash; One-click installer, FCM push notifications, admin update banner</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.4.0</span> &mdash; Emoji upload crop/zoom editor, jumbo emoji messages</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.4.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.9</span> &mdash; Two-factor authentication (TOTP), native OS notifications</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.9.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.8</span> &mdash; Private channel code visibility, Docker healthcheck fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.8.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.7</span> &mdash; Private channel invite lockdown, creator auto-mod role</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.7.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.4</span> &mdash; Right-click voice users, donor tier styling</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.4.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.3</span> &mdash; Member list DM/nickname, sidebar members, admin recovery</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.3.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.2</span> &mdash; Sound Manager, kick channel revoke, font scaling</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.1</span> &mdash; Plugin CSP fix, health check 404 fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.3.0</span> &mdash; Webcam video, plugins, font size, channel invites</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.5</span> &mdash; Security fixes, desktop code removed</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.5.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.4</span> &mdash; Security hardening, SSRF fix, JWT verification</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.4.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.3</span> &mdash; Screen share fixes, role save UX</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.3.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.2</span> &mdash; FORCE_HTTP, auto-assign roles, Docker ARM fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.1</span> &mdash; Mobile UI fixes, TURN credential fix, file upload fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.2.0</span> &mdash; CRT vignette, YouTube embeds, emoji flip</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.1.0</span> &mdash; E2E multi-device sync, channel organizer fix</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.1.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.0.1</span> &mdash; Security fix (installer removal)</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.0.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v2.0.0</span> &mdash; Discord import, E2E key fix, ARM64 Docker</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.0.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.9.2</span> &mdash; Image lightbox, emoji autocomplete, GIF avatars</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.9.1</span> &mdash; Auto-cleanup fix, server branding, emoji modal</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.9.0</span> &mdash; Custom emojis, emoji quickbar, JWT security</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.8.2</span> &mdash; PiP revert, YouTube playlists, bot fixes</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.2.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.8.1</span> &mdash; Upload limits, mobile refresh, E2E sync</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.1.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.8.0</span> &mdash; E2E encryption, Flash games, seek bar</div>
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.0.zip">Download &rarr;</a>
</div>
<div class="version-item">
<div><span class="v-name">v1.7.0</span> &mdash; Role inheritance, voice dot colors</div>
<span class="v-date">Feb 16, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.6.0</span> &mdash; Roles, voice controls, admin transfer</div>
<span class="v-date">Feb 15, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.5.0</span> &mdash; Push notifications, emoji search</div>
<span class="v-date">Feb 14, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.7</span></div>
<span class="v-date">Feb 13, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.6</span></div>
<span class="v-date">Feb 13, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.5</span></div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.2</span></div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.1</span></div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.4.0</span> &mdash; Display names, mobile voice</div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.3.0</span> &mdash; DMs, user status, file sharing</div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.2.0</span> &mdash; Voice UX, pinning, link previews</div>
<span class="v-date">Feb 12, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.1.0</span> &mdash; Data isolation</div>
<span class="v-date">Feb 11, 2026</span>
</div>
<div class="version-item">
<div><span class="v-name">v1.0.0</span><span class="v-tag">First Release</span></div>
<a href="https://github.com/ancsemi/Haven/releases/tag/v1.0.0" target="_blank">Release notes →</a>
</div>
</div>
</div>
</div>
</div>
<!-- Desktop App Download Card -->
<div class="download-card fade-in" style="margin-top: 32px; border-color: rgba(250, 166, 26, 0.25);">
<div style="position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-dim), var(--warning), var(--green)); box-shadow: 0 0 12px rgba(250, 166, 26, 0.3);"></div>
<h2>🖥️ Haven Desktop <span class="beta-badge-inline">BETA</span> &mdash; v1.1.4</h2>
<p class="download-version">Latest beta release &middot; Windows &amp; Linux &middot; Standalone installer</p>
<div class="download-btn-group">
<a href="https://github.com/ancsemi/Haven-Desktop/releases/latest" class="btn btn-primary download-main" style="background: var(--warning); box-shadow: 0 4px 24px rgba(250, 166, 26, 0.25), 0 0 0 1px rgba(250, 166, 26, 0.3);">
<span class="icon">⬇</span> Download Desktop v1.1.4
</a>
<div class="download-alt-links">
<a href="https://github.com/ancsemi/Haven-Desktop" target="_blank">&#9965; View on GitHub</a>
<a href="https://github.com/ancsemi/Haven-Desktop/blob/main/README.md" target="_blank">📖 README</a>
<a href="https://github.com/ancsemi/Haven-Desktop/issues" target="_blank">🐛 Report a Bug</a>
</div>
</div>
<p style="font-size: 0.85rem; color: var(--text-dim); margin-top: 16px;">
⚠️ <strong>Beta software</strong> &mdash; feedback &amp; bug reports are greatly appreciated.<br>
The desktop app is a client. You still need a <a href="https://github.com/ancsemi/Haven" style="color: var(--accent-bright);">Haven server</a> to connect to.
</p>
</div>
<!-- Android App Beta Card -->
<div class="download-card fade-in" style="margin-top: 32px; border-color: rgba(61, 220, 132, 0.25);">
<div style="position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #3ddc84, #2bb55e, #82aaff); box-shadow: 0 0 12px rgba(61, 220, 132, 0.3);"></div>
<h2>📱 Haven Android <span class="closed-beta-badge-inline">CLOSED BETA</span></h2>
<p class="download-version">Closed beta &middot; Android &middot; Google Play</p>
<div class="android-beta-email-form">
<p style="font-size: 0.95rem; color: var(--text-muted); margin: 0;">Enter your email to sign up for the closed beta:</p>
<input type="email" id="download-android-beta-email" placeholder="your@email.com" maxlength="120">
<button class="btn-android" onclick="(function(){
var e=document.getElementById('download-android-beta-email');
var v=e.value.trim();
if(!v||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)){e.style.borderColor='#f04747';e.focus();return;}
var s=encodeURIComponent('Haven Android Beta - Opt-in Request');
var b=encodeURIComponent('Hi Amnibro,\n\nI\'d like to opt-in to the Haven Android closed beta on Google Play.\n\nMy email: '+v+'\n\nThanks!');
window.open('mailto:amnibro7@gmail.com?subject='+s+'&body='+b,'_blank');
e.value='';e.style.borderColor='';
alert('Your email client should open with a pre-filled message. Just hit Send!');
})()">🚀 Sign Up for Beta</button>
</div>
<p style="font-size: 0.85rem; color: var(--text-dim); margin-top: 16px; font-style: italic;">
Built with ❤️ by <strong>Amnibro</strong> &mdash; thank you for your incredible work building the Haven Android app from the ground up.
</p>
</div>
<div class="setup-steps stagger" style="margin-top: 48px;">
<div class="setup-step">
<div class="s-num">1</div>
<div>
<h4>Install Node.js</h4>
<p>Download from <a href="https://nodejs.org/" target="_blank">nodejs.org</a> (click the big green LTS button). Restart your PC after installing.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">2</div>
<div>
<h4>Unzip Haven</h4>
<p>Extract the zip anywhere. Desktop, Documents, wherever you like. It creates one folder.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">3</div>
<div>
<h4>Double-click Start Haven.bat</h4>
<p>A terminal opens, does its thing, and your browser opens automatically. First boot takes ~30 seconds.</p>
</div>
</div>
<div class="setup-step">
<div class="s-num">4</div>
<div>
<h4>Create an account &amp; invite friends</h4>
<p>Register as admin, create channels, and share your IP + channel code. Friends open the link in their browser.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== SUPPORT ===== -->
<section class="support-section" id="support">
<div class="container">
<div class="support-card fade-in">
<span class="heart">❤️</span>
<h2>Support Haven</h2>
<p>Haven is built by one person in their spare time and will always be free. If it's useful to you, a small donation helps keep development going.</p>
<a href="https://ko-fi.com/ancsemi" target="_blank" class="btn btn-donate">
☕ Buy me a coffee on Ko-fi
</a>
<p class="support-note">Ko-fi takes zero fees &mdash; 100% goes to the developer. No account required to donate.</p>
</div>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer>
<div class="container">
<div class="footer-brand"><span class="hex">⬡</span> HAVEN</div>
<p>Your server. Your rules. No cloud. No one reading your messages.</p>
<ul class="footer-links">
<li><a href="https://github.com/ancsemi/Haven" target="_blank">GitHub (Server)</a></li>
<li><a href="https://github.com/ancsemi/Haven-Desktop" target="_blank">GitHub (Desktop)</a></li>
<li><a href="https://github.com/ancsemi/Haven/blob/main/GUIDE.md" target="_blank">Setup Guide</a></li>
<li><a href="https://github.com/ancsemi/Haven/blob/main/CHANGELOG.md" target="_blank">Changelog</a></li>
<li><a href="mailto:help.havenapp@gmail.com?subject=Haven%20Bug%20Report">Report a Bug</a></li>
<li><a href="https://ancsemi.github.io/Haven/support.html" target="_blank">Help &amp; Support</a></li>
<li><a href="https://github.com/ancsemi/Haven/blob/main/LICENSE" target="_blank">AGPL-3.0 License</a></li>
</ul>
</div>
</footer>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.fade-in, .stagger').forEach(el => observer.observe(el));
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => document.querySelector('.nav-links').classList.remove('open'));
});
window.addEventListener('scroll', () => {
document.querySelector('nav').style.background = window.scrollY > 100 ? 'rgba(21, 23, 42, 0.97)' : 'rgba(21, 23, 42, 0.85)';
});
// Hero image carousel
(() => {
const imgs = document.querySelectorAll('.hero-screenshot img');
if (imgs.length < 2) return;
let current = 0;
setInterval(() => {
imgs[current].classList.remove('active');
current = (current + 1) % imgs.length;
imgs[current].classList.add('active');
}, 4000);
})();
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink