mirror of
https://github.com/ancsemi/Haven
synced 2026-04-21 13:37:41 +00:00
1912 lines
92 KiB
HTML
1912 lines
92 KiB
HTML
<!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; }
|
|
}
|
|
|
|
/* ============================================
|
|
COMMUNITY SERVER BANNER
|
|
============================================ */
|
|
.community-banner {
|
|
background: linear-gradient(135deg, #43b581 0%, #7c5cfc 50%, #82aaff 100%);
|
|
padding: 2px;
|
|
position: relative;
|
|
}
|
|
.community-banner-inner {
|
|
background: var(--bg-deep);
|
|
padding: 48px 24px;
|
|
text-align: center;
|
|
}
|
|
.community-banner h2 {
|
|
color: #fff;
|
|
font-size: clamp(1.5rem, 3vw, 2.2rem);
|
|
margin-bottom: 12px;
|
|
}
|
|
.community-banner .community-accent { color: var(--green); }
|
|
.community-banner p {
|
|
color: var(--text-muted);
|
|
font-size: 1.05rem;
|
|
max-width: 600px;
|
|
margin: 0 auto 24px;
|
|
line-height: 1.7;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.community-banner-inner { padding: 32px 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="#community">Try Haven</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 & 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 — 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="#community" class="btn btn-secondary" style="border-color: var(--green); color: var(--green);">
|
|
<span class="icon">▶</span> Try it Live
|
|
</a>
|
|
<a href="https://github.com/ancsemi/Haven" target="_blank" class="btn btn-secondary">
|
|
<span class="icon">⛭</span> View Source
|
|
</a>
|
|
</div>
|
|
<p class="hero-note">
|
|
<strong>Only the host downloads Haven.</strong> Friends join from their web browser — 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>
|
|
|
|
<!-- ===== COMMUNITY SERVER BANNER ===== -->
|
|
<section class="community-banner fade-in" id="community">
|
|
<div class="community-banner-inner">
|
|
<div class="container">
|
|
<h2>🌐 Try Haven — <span class="community-accent">No Download Required</span></h2>
|
|
<p>
|
|
Want to see what Haven feels like before hosting your own? Jump into the community server
|
|
and explore — chat, voice, themes, the works.
|
|
</p>
|
|
<div style="margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
|
|
<a href="https://haven.moviethingy.xyz/" target="_blank" class="btn btn-primary" style="padding: 14px 32px; font-size: 1.05rem; background: var(--green); box-shadow: 0 4px 24px var(--green-glow);">
|
|
<span class="icon">▶</span> Join Community Server
|
|
</a>
|
|
</div>
|
|
<div style="margin-top: 24px; background: rgba(67, 181, 129, 0.08); border: 1px solid rgba(67, 181, 129, 0.25); border-radius: 12px; padding: 20px 28px; max-width: 480px; margin-left: auto; margin-right: auto;">
|
|
<p style="font-size: 0.95rem; color: var(--text); margin-bottom: 8px; font-weight: 600;">🔑 After signing up, enter this channel code to join:</p>
|
|
<code style="display: inline-block; background: rgba(67, 181, 129, 0.18); padding: 8px 20px; border-radius: 6px; color: var(--green); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em;">da0b9be7</code>
|
|
</div>
|
|
<p style="margin-top: 16px; font-size: 0.8rem; color: var(--text-dim); font-style: italic;">
|
|
Volunteer-hosted community server — thanks MutantRabbit!
|
|
</p>
|
|
</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 — Import your <span class="discord-blue">Discord</span> history</h2>
|
|
<p>
|
|
Leaving Discord? Bring everything with you. Haven v2.0 imports your entire server —
|
|
every channel, thread, forum post, reaction, pin, attachment, and avatar —
|
|
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 & 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 — <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 — 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 & 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.3.0/Haven-Setup-1.3.0.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.3.0/Haven-1.3.0.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.3.0/haven-desktop_1.3.0_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">⛭</span> View on GitHub
|
|
</a>
|
|
</div>
|
|
<p style="margin-top: 16px; font-size: 0.85rem; color: var(--text-dim);">
|
|
⚠️ Beta release — feedback & 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>📱 <span class="android-accent">Amni-Haven!</span> — Now on Google Play</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 — available now 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 style="margin-top:20px;text-align:center">
|
|
<a href="https://play.google.com/store/apps/details?id=com.havenapp.mobile" target="_blank" rel="noopener" style="display:inline-block">
|
|
<img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" style="height:60px">
|
|
</a>
|
|
</div>
|
|
<p class="android-credit">Built with ❤️ by <strong>Amnibro</strong> — 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 — no app download required. The interface adapts automatically to any screen size.</p>
|
|
<p>Full chat, channels, direct messages, voice chat, and the sidebar — 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 & 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 & 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 — 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 — 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 — 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> — <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 — 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 — 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 — 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 & 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 — 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 — not even the server host can read them. Haven doesn't phone home — 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 — 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 — 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 — Games, Flash emulation & 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 — 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 — 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 — 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 & Video Streaming</h3>
|
|
<p>Spotify, YouTube, and SoundCloud Listen Together with synced playback and seek bar. Share audio files or screen-share a movie — 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 & /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 — 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 & 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">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>No account with a company</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>End-to-end encrypted DMs</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Voice chat</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="meh">Paid</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Screen sharing</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="meh">Paid</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Open source</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="check">✓</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">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Group channels</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>No email/phone required</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Free forever (no paid tier)</td>
|
|
<td><span class="check">✓</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">✓</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Friends join with zero install</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Works on mobile browsers</td>
|
|
<td><span class="check">✓</span></td>
|
|
<td><span class="check">✓</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">✓</span></td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td>—</td>
|
|
<td><span class="cross">✗</span></td>
|
|
<td><span class="cross">✗</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 — v3.5.0</h2>
|
|
<p class="download-version">Latest stable release · Windows, macOS & Linux · ~5 MB</p>
|
|
|
|
<div class="download-btn-group">
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.5.0.zip" class="btn btn-primary download-main">
|
|
<span class="icon">⬇</span> Download v3.5.0 (.zip)
|
|
</a>
|
|
<div class="download-alt-links">
|
|
<a href="https://github.com/ancsemi/Haven" target="_blank">⛭ 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">v3.5.0</span><span class="v-tag latest">Latest</span></div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.5.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.4.0</span> — Quote/edit UX, bot API upgrades, SSO quality fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.4.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.3.0</span> — Last read indicator, per-event volume sliders, server list sync improvements</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.3.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.2.0</span> — Mark as Read, pinned message jump, iOS Safari fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.2.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.1.1</span> — Status bar toggle, server URL display, mobile fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.1.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.1.0</span> — Server banners, server icon sync</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.1.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v3.0.0</span> — SSO registration, advanced search filters, reply notifications</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v3.0.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.9</span> — Encrypted server list sync, jump-to-bottom, edit-mode emoji picker</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.9.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.8</span> — Read-only channels, server-relayed mic illumination, role display picker</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.8.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.7</span> — Open-source STUN servers, STUN_URLS env var</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.7.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.6</span> — Custom Terms of Service, unpin fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.6.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.5</span> — License changed to AGPL-3.0</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.5.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.4</span> — Bot webhook callbacks, community server</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.4.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.3</span> — Android popup refresh, Desktop naming fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.2</span> — Per-app audio CSP fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.1</span> — View All Members permission fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.9.0</span> — Temp voice channels, voice permission fix, AFK idle fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.9.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.9</span> — Voice presence fixes, channel organize, collapsed sub badges</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.9.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.8</span> — Voice AFK presence fix, video thumbnails</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.8.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.7</span> — Donor & sponsor list update</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.7.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.6</span> — Heart/donate button position fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.6.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.5</span> — Noise gate, screen share rejoin, setup script fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.5.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.4</span> — AFK voice channel rework, video embed fullscreen fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.4.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.3</span> — Bulk emoji upload, TTS permission, Shippy popout fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.2</span> — Camera device selector, TTS abuse fixes, E2E spoiler fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.1</span> — Camera selector, TTS fixes, channel sort sync, spoiler in E2E DMs</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.8.0</span> — Expanded permissions, deleted users list, configurable voice bitrate</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.8.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.9</span> — Custom login title, reset roles, Desktop push notif fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.9.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.8</span> — Upload progress bar, view all members, stream reopen, Docker fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.8.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.7</span> — Temporary channels, members list privacy, URL @ fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.7.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.6</span> — Per-feature channel toggles, popout menu</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.6.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.5</span> — Keyboard nav, dynamic sort, scroll fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.5.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.4</span> — Account recovery codes, admin panel fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.4.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.3</span> — Video fullscreen, PiP seek bar, stream tile fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.2</span> — Scroll-to-bottom fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.1</span> — Media toggle, channel functions polish, voice fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.7.0</span> — Performance overhaul, RGB freeze fix, app modularization</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.7.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.6.0</span> — Android beta sign-up, auto-accept streams</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.6.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.8</span> — Auto-accept streams setting</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.8.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.7</span> — Submenu overflow fix; email @mention false-tag fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.7.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.6</span> — 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 →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.5</span> — Settings layout hotfix; TOTP 2FA fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.5.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.4</span> — 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 →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.3</span> — Built-in AOL sounds bundled with every server</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.2</span> — manage_soundboard permission; fxtwitter, Pixiv & oEmbed autodiscovery fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.5.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.1</span> — 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 →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.5.0</span> — 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 →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.4.0</span> — Emoji upload crop/zoom editor, jumbo emoji messages</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.4.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.9</span> — Two-factor authentication (TOTP), native OS notifications</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.9.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.8</span> — Private channel code visibility, Docker healthcheck fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.8.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.7</span> — Private channel invite lockdown, creator auto-mod role</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.7.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.4</span> — Right-click voice users, donor tier styling</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.4.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.3</span> — Member list DM/nickname, sidebar members, admin recovery</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.2</span> — Sound Manager, kick channel revoke, font scaling</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.1</span> — Plugin CSP fix, health check 404 fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.3.0</span> — Webcam video, plugins, font size, channel invites</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.3.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.5</span> — Security fixes, desktop code removed</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.5.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.4</span> — Security hardening, SSRF fix, JWT verification</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.4.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.3</span> — Screen share fixes, role save UX</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.3.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.2</span> — FORCE_HTTP, auto-assign roles, Docker ARM fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.1</span> — 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 →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.2.0</span> — CRT vignette, YouTube embeds, emoji flip</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.2.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.1.0</span> — E2E multi-device sync, channel organizer fix</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.1.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.0.1</span> — Security fix (installer removal)</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.0.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v2.0.0</span> — Discord import, E2E key fix, ARM64 Docker</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v2.0.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.9.2</span> — Image lightbox, emoji autocomplete, GIF avatars</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.9.1</span> — Auto-cleanup fix, server branding, emoji modal</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.9.0</span> — Custom emojis, emoji quickbar, JWT security</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.9.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.8.2</span> — PiP revert, YouTube playlists, bot fixes</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.2.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.8.1</span> — Upload limits, mobile refresh, E2E sync</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.1.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.8.0</span> — E2E encryption, Flash games, seek bar</div>
|
|
<a href="https://github.com/ancsemi/Haven/archive/refs/tags/v1.8.0.zip">Download →</a>
|
|
</div>
|
|
<div class="version-item">
|
|
<div><span class="v-name">v1.7.0</span> — 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> — 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> — 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> — 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> — 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> — 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> — 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> — v1.1.4</h2>
|
|
<p class="download-version">Latest beta release · Windows & Linux · 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">⛭ 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> — feedback & 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 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>📱 Amni-Haven Android <span class="closed-beta-badge-inline" style="background: #3ddc84; color: #1a1a2e;">RELEASED</span></h2>
|
|
<p class="download-version">Available now · Android · Google Play</p>
|
|
|
|
<div style="margin-top:20px;text-align:center">
|
|
<a href="https://play.google.com/store/apps/details?id=com.havenapp.mobile&gl=US" target="_blank" rel="noopener" style="display:inline-block">
|
|
<img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" style="height:60px">
|
|
</a>
|
|
</div>
|
|
|
|
<p style="font-size: 0.85rem; color: var(--text-dim); margin-top: 16px; font-style: italic;">
|
|
Built with ❤️ by <strong>Amnibro</strong> — thank you for your incredible work building the Amni-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 & 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 — 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 & 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>
|