diff --git a/website/hightube/assets/hightube-icon.png b/website/hightube/assets/hightube-icon.png deleted file mode 100644 index 5337445..0000000 Binary files a/website/hightube/assets/hightube-icon.png and /dev/null differ diff --git a/website/hightube/index.html b/website/hightube/index.html deleted file mode 100644 index e77f263..0000000 --- a/website/hightube/index.html +++ /dev/null @@ -1,395 +0,0 @@ - - - - - - - Hightube | Open Source Live Streaming Platform - - - - -
- - - Hightube - - -
- - -
-
- -
-
-
-

Flutter + Go live streaming stack

-

Hightube

-

- An open source live streaming platform designed for creators, - private communities, classrooms, labs, and self-hosted media - services. -

-
- Download builds - - View source - -
-
-
-
-
- - - -
-
-
LIVE
-
-
-
-
- Flutter - Client UI -
-
- Go - Backend API -
-
- RTMP - Streaming -
-
- Open - Source -
-
-
-
-
- -
-
-

Architecture

-

Built with Flutter clients and a Go streaming backend

-

- Hightube separates a portable client experience from a compact, - self-hostable backend, keeping deployment simple while leaving room - for native desktop, mobile, and web clients. -

-
-
-
-
- Flutter -
-

Flutter frontends

-

- One UI technology stack targets Linux, Android, Web, and future - desktop builds with consistent interaction patterns. -

-
-
-
- Go -
-

Go backend

-

- The server handles API requests, authentication, live room state, - RTMP publishing, HTTP-FLV playback, chat, and monitoring. -

-
-
-
- Gitea -
-

Self-hosted streaming

-

- Deploy the server on your own Linux host and connect compatible - broadcasters such as OBS through standard RTMP workflows. -

-
-
-
- -
-
-

Project highlights

-

Open, free, and cross-platform by design

-
-
-
-
- -
-

Open source freedom

-

- Read, modify, build, and deploy the platform from source without - vendor lock-in. -

-
-
-
- -
-

Cross-platform clients

-

- Current builds include Linux, Web, and Android client packages, - with Windows builds planned later. -

-
-
-
- -
-

Practical live features

-

- Live rooms, RTMP publishing, HTTP-FLV playback, multi-quality - transcoding, chat, danmaku-style messages, and admin monitoring. -

-
-
-
- -
-

Small deployment surface

-

- The Go server uses a lightweight runtime model and can be deployed - as a single Linux server component. -

-
-
-
- -
-
-

Downloads

-

Get the current executable builds

-

- All builds are distributed through the project release page. Apple - device builds are not provided at this time. -

-
-
- - - -
- Available -
- Android -
-

Android client

-

ARM64 Android APK build for mobile viewing and interaction.

- - Download Android APK - -
- - -
- Available -
- Web -
-

Web client

-

Static web build archive for hosting the Flutter web frontend.

- - Download Web archive - -
-
-
- -
-
-

Source code

-

Build it, audit it, host it your way

-

- Hightube is developed as an open source project. Clone the source, - inspect the Flutter and Go code, build your own binaries, and adapt - it for your own live platform. -

-
- - Open repository - -
-
- - - - - diff --git a/website/hightube/styles.css b/website/hightube/styles.css deleted file mode 100644 index 44af7b2..0000000 --- a/website/hightube/styles.css +++ /dev/null @@ -1,804 +0,0 @@ -:root { - color-scheme: light dark; - --primary: #0b57d0; - --on-primary: #ffffff; - --primary-container: #d7e3ff; - --on-primary-container: #001b3f; - --secondary: #565f71; - --tertiary: #705575; - --surface: #fbfcff; - --surface-rgb: 251 252 255; - --surface-container: #eef3fb; - --surface-container-high: #e5ebf5; - --outline: #727782; - --outline-rgb: 114 119 130; - --text: #191c20; - --muted: #42474f; - --success: #146c2e; - --warning: #7a5900; - --shadow: 0 24px 60px rgba(11, 87, 208, 0.16); - --topbar-bg: rgba(251, 252, 255, 0.68); - --topbar-border: rgba(114, 119, 130, 0.18); - --topbar-shadow: 0 12px 36px rgba(11, 87, 208, 0.08); - --grid-divider: rgba(114, 119, 130, 0.24); - --card-border: rgba(114, 119, 130, 0.24); - --device-border: rgba(114, 119, 130, 0.32); - --status-available-bg: rgba(20, 108, 46, 0.12); - --status-planned-bg: rgba(122, 89, 0, 0.12); -} - -/* ---- Dark theme: forced ---- */ -[data-theme="dark"] { - --primary: #a8c7ff; - --on-primary: #001b3f; - --primary-container: #003a7a; - --on-primary-container: #d7e3ff; - --secondary: #bcc7db; - --tertiary: #d7bde0; - --surface: #111318; - --surface-rgb: 17 19 24; - --surface-container: #1a1d25; - --surface-container-high: #21242d; - --outline: #8b909c; - --outline-rgb: 139 144 156; - --text: #e3e3e8; - --muted: #b0b3bd; - --success: #81c784; - --warning: #ffe08a; - --shadow: 0 24px 60px rgba(0, 0, 0, 0.4); - --topbar-bg: rgba(17, 19, 24, 0.72); - --topbar-border: rgba(139, 144, 156, 0.18); - --topbar-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); - --grid-divider: rgba(139, 144, 156, 0.2); - --card-border: rgba(139, 144, 156, 0.2); - --device-border: rgba(139, 144, 156, 0.28); - --status-available-bg: rgba(129, 199, 132, 0.15); - --status-planned-bg: rgba(255, 224, 138, 0.15); -} - -/* ---- Dark theme: auto (system preference, no manual override) ---- */ -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --primary: #a8c7ff; - --on-primary: #001b3f; - --primary-container: #003a7a; - --on-primary-container: #d7e3ff; - --secondary: #bcc7db; - --tertiary: #d7bde0; - --surface: #111318; - --surface-rgb: 17 19 24; - --surface-container: #1a1d25; - --surface-container-high: #21242d; - --outline: #8b909c; - --outline-rgb: 139 144 156; - --text: #e3e3e8; - --muted: #b0b3bd; - --success: #81c784; - --warning: #ffe08a; - --shadow: 0 24px 60px rgba(0, 0, 0, 0.4); - --topbar-bg: rgba(17, 19, 24, 0.72); - --topbar-border: rgba(139, 144, 156, 0.18); - --topbar-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); - --grid-divider: rgba(139, 144, 156, 0.2); - --card-border: rgba(139, 144, 156, 0.2); - --device-border: rgba(139, 144, 156, 0.28); - --status-available-bg: rgba(129, 199, 132, 0.15); - --status-planned-bg: rgba(255, 224, 138, 0.15); - } -} - -* { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - min-width: 320px; - background: var(--surface); - color: var(--text); - font-family: - Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - sans-serif; - line-height: 1.6; - transition: background-color 300ms ease, color 300ms ease; -} - -a { - color: inherit; -} - -.topbar { - position: sticky; - top: 0; - z-index: 10; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - padding: 14px clamp(20px, 5vw, 72px); - background: var(--topbar-bg); - border-bottom: 1px solid var(--topbar-border); - box-shadow: var(--topbar-shadow); - -webkit-backdrop-filter: blur(22px) saturate(160%); - backdrop-filter: blur(22px) saturate(160%); -} - -.brand { - display: inline-flex; - align-items: center; - gap: 10px; - color: var(--text); - font-weight: 800; - text-decoration: none; -} - -.brand img { - width: 36px; - height: 36px; - border-radius: 10px; -} - -.nav { - display: flex; - align-items: center; - gap: 6px; -} - -.nav a { - min-height: 40px; - padding: 8px 14px; - border-radius: 20px; - color: var(--muted); - font-size: 0.94rem; - font-weight: 650; - text-decoration: none; -} - -.nav a:hover { - background: var(--surface-container); - color: var(--primary); -} - -/* 立即尝试 CTA button in nav */ -.nav-cta { - background: var(--primary) !important; - color: var(--on-primary) !important; - margin-left: 8px; - font-weight: 800 !important; - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); - transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; -} - -.nav-cta:hover { - filter: brightness(0.88); - transform: translateY(-1px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26); -} - -/* Hamburger menu button — hidden on desktop */ -.hamburger { - display: none; - flex-direction: column; - justify-content: center; - gap: 5px; - width: 40px; - height: 40px; - padding: 8px; - border: none; - border-radius: 10px; - background: transparent; - cursor: pointer; - z-index: 20; -} - -.hamburger span { - display: block; - width: 100%; - height: 2.5px; - border-radius: 2px; - background: var(--text); - transition: transform 200ms ease, opacity 200ms ease; -} - -.hamburger[aria-expanded="true"] span:nth-child(1) { - transform: translateY(7.5px) rotate(45deg); -} - -.hamburger[aria-expanded="true"] span:nth-child(2) { - opacity: 0; -} - -.hamburger[aria-expanded="true"] span:nth-child(3) { - transform: translateY(-7.5px) rotate(-45deg); -} - -/* Right-side controls group (theme + hamburger) */ -.topbar-actions { - display: flex; - align-items: center; - gap: 4px; - flex-shrink: 0; -} - -/* Theme toggle button */ -.theme-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - padding: 0; - border: none; - border-radius: 50%; - background: transparent; - color: var(--text); - font-size: 1.25rem; - cursor: pointer; - transition: background 200ms ease, transform 200ms ease; - flex-shrink: 0; -} - -.theme-toggle:hover { - background: var(--surface-container); - transform: scale(1.08); -} - -.theme-toggle:active { - transform: scale(0.94); -} - -.theme-toggle svg { - width: 22px; - height: 22px; - fill: none; - stroke: currentColor; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; -} - -/* hide all icons by default, show based on data-state */ -.theme-toggle .icon-sun, -.theme-toggle .icon-moon, -.theme-toggle .icon-auto { - display: none; -} - -.theme-toggle[data-state="light"] .icon-sun { - display: block; -} - -.theme-toggle[data-state="dark"] .icon-moon { - display: block; -} - -.theme-toggle[data-state="auto"] .icon-auto { - display: block; -} - -.hero { - display: grid; - grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); - gap: clamp(28px, 6vw, 84px); - align-items: center; - min-height: calc(100vh - 68px); - padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 72px); -} - -.hero-copy { - max-width: 680px; -} - -.eyebrow { - margin: 0 0 12px; - color: var(--primary); - font-size: 0.85rem; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -h1, -h2, -h3, -p { - overflow-wrap: anywhere; -} - -h1 { - margin: 0; - color: var(--text); - font-size: clamp(3.5rem, 11vw, 8rem); - line-height: 0.9; - letter-spacing: 0; -} - -h2 { - margin: 0; - font-size: clamp(2rem, 4vw, 3.5rem); - line-height: 1.05; - letter-spacing: 0; -} - -h3 { - margin: 0; - font-size: 1.2rem; - line-height: 1.2; - letter-spacing: 0; -} - -.lead { - max-width: 620px; - margin: 28px 0 0; - color: var(--muted); - font-size: clamp(1.1rem, 2vw, 1.35rem); -} - -.actions { - display: flex; - flex-wrap: wrap; - gap: 12px; - margin-top: 34px; -} - -.button, -.download-link { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 48px; - padding: 12px 22px; - border-radius: 24px; - font-weight: 800; - text-decoration: none; - transition: - transform 160ms ease, - box-shadow 160ms ease, - background 160ms ease; -} - -.button:hover, -.download-link:hover { - transform: translateY(-1px); -} - -.primary { - background: var(--primary); - color: var(--on-primary); - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); -} - -.secondary { - background: var(--primary-container); - color: var(--on-primary-container); -} - -.hero-panel { - display: flex; - justify-content: center; -} - -.device-window { - width: min(100%, 560px); - overflow: hidden; - border: 1px solid var(--device-border); - border-radius: 28px; - background: var(--surface-container); - box-shadow: var(--shadow); -} - -.window-bar { - display: flex; - gap: 8px; - padding: 16px 18px; - border-bottom: 1px solid var(--card-border); -} - -.window-bar span { - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--outline); -} - -.window-bar span:first-child { - background: #ba1a1a; -} - -.window-bar span:nth-child(2) { - background: #a46700; -} - -.window-bar span:nth-child(3) { - background: #146c2e; -} - -.stream-preview { - position: relative; - display: grid; - min-height: 280px; - place-items: center; - background: - linear-gradient(135deg, rgba(11, 87, 208, 0.94), rgba(112, 85, 117, 0.9)), - radial-gradient(circle at 30% 30%, #d7e3ff, transparent 32%); -} - -.live-badge { - position: absolute; - top: 18px; - left: 18px; - padding: 6px 12px; - border-radius: 16px; - background: #ba1a1a; - color: #ffffff; - font-size: 0.8rem; - font-weight: 900; -} - -.play-symbol { - width: 86px; - height: 86px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.88); - clip-path: polygon(28% 18%, 28% 82%, 82% 50%); -} - -.stats-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1px; - background: var(--grid-divider); -} - -.stats-grid div { - min-width: 0; - padding: 18px 14px; - background: var(--surface); -} - -.stats-grid strong, -.stats-grid span { - display: block; -} - -.stats-grid strong { - color: var(--primary); - font-size: 1.02rem; -} - -.stats-grid span { - color: var(--muted); - font-size: 0.88rem; -} - -.section { - padding: clamp(64px, 8vw, 112px) clamp(20px, 5vw, 72px); -} - -.section-heading { - max-width: 820px; - margin-bottom: 32px; -} - -.section-heading p:not(.eyebrow) { - max-width: 760px; - color: var(--muted); - font-size: 1.06rem; -} - -.architecture-grid, -.download-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; -} - -.architecture-card, -.download-card { - min-width: 0; - padding: 24px; - border: 1px solid var(--card-border); - border-radius: 24px; - background: var(--surface-container); -} - -.architecture-card .icon { - display: grid; - width: 48px; - height: 48px; - margin-bottom: 20px; - place-items: center; - border-radius: 16px; - background: var(--primary); - color: var(--on-primary); -} - -.architecture-card .icon svg { - width: 26px; - height: 26px; -} - -.architecture-card p, -.download-card p, -.feature-item p, -.source-section p { - color: var(--muted); -} - -.feature-band { - background: var(--surface-container); -} - -.feature-list { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1px; - overflow: hidden; - border: 1px solid var(--card-border); - border-radius: 28px; - background: var(--grid-divider); -} - -.feature-item { - min-width: 0; - padding: 28px; - background: var(--surface); -} - -.feature-icon { - width: 36px; - height: 36px; - margin-bottom: 14px; - color: var(--primary); -} - -.feature-icon svg { - width: 100%; - height: 100%; - display: block; -} - -.download-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.download-card { - display: flex; - min-height: 240px; - flex-direction: column; - align-items: flex-start; -} - -.download-icon { - width: 32px; - height: 32px; - margin-bottom: 14px; - color: var(--muted); -} - -.download-icon svg { - width: 100%; - height: 100%; - display: block; -} - -.status { - margin-bottom: 18px; - padding: 5px 10px; - border-radius: 14px; - background: var(--status-available-bg); - color: var(--success); - font-size: 0.78rem; - font-weight: 850; -} - -.status.muted { - background: var(--status-planned-bg); - color: var(--warning); -} - -.download-link { - margin-top: auto; - background: var(--primary); - color: var(--on-primary); -} - -.planned { - background: var(--surface-container-high); -} - -.source-section { - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - background: #001b3f; - color: #ffffff; -} - -.source-section .eyebrow, -.source-section p { - color: #d7e3ff; -} - -.source-section div { - max-width: 820px; -} - -.footer { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - gap: 16px; - padding: 28px clamp(20px, 5vw, 72px); - background: #001533; - color: #d7e3ff; - font-size: 0.92rem; -} - -.footer span:nth-child(2) { - text-align: center; -} - -.footer span:last-child { - text-align: right; -} - -@media (max-width: 900px) { - .topbar { - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - } - - .hamburger { - display: flex; - } - - .nav { - display: none; - width: 100%; - flex-direction: column; - gap: 2px; - padding: 8px 0 4px; - border-top: 1px solid var(--topbar-border); - margin-top: 10px; - } - - .nav.open { - display: flex; - } - - .nav a { - width: 100%; - padding: 12px 16px; - border-radius: 14px; - font-size: 1rem; - } - - .nav-cta { - margin-left: 0 !important; - margin-top: 6px; - text-align: center; - } - - .hero { - grid-template-columns: 1fr; - min-height: auto; - } - - .architecture-grid, - .download-grid { - grid-template-columns: 1fr 1fr; - } - - .stats-grid { - grid-template-columns: repeat(2, 1fr); - } - - .source-section { - align-items: flex-start; - flex-direction: column; - } -} - -@media (max-width: 640px) { - .topbar { - padding: 10px 16px; - } - - .hero, - .section { - padding-right: 16px; - padding-left: 16px; - } - - .hero { - padding-top: 32px; - padding-bottom: 32px; - gap: 24px; - } - - h1 { - font-size: clamp(2.8rem, 10vw, 4rem); - } - - h2 { - font-size: clamp(1.6rem, 5vw, 2.4rem); - } - - .lead { - font-size: 1rem; - margin-top: 16px; - } - - .hero-panel { - width: 100%; - } - - .device-window { - width: 100%; - border-radius: 20px; - } - - .stream-preview { - min-height: 180px; - } - - .play-symbol { - width: 60px; - height: 60px; - } - - .architecture-grid, - .download-grid, - .feature-list { - grid-template-columns: 1fr; - } - - .architecture-card, - .download-card { - padding: 20px; - border-radius: 18px; - } - - .feature-item { - padding: 20px; - } - - .actions { - flex-direction: column; - } - - .button, - .download-link { - width: 100%; - justify-content: center; - } - - .nav a { - min-height: 48px; - padding: 14px 16px; - font-size: 1.05rem; - } - - .nav-cta { - min-height: 50px; - font-size: 1.05rem; - } - - .footer { - grid-template-columns: 1fr; - gap: 8px; - padding: 24px 16px; - } - - .footer-hide-mobile { - display: none; - } -} diff --git a/website/index.html b/website/index.html index 7725c7c..e77f263 100644 --- a/website/index.html +++ b/website/index.html @@ -104,7 +104,9 @@
-
F
+
+ Flutter +

Flutter frontends

One UI technology stack targets Linux, Android, Web, and future @@ -112,7 +114,9 @@

-
G
+
+ Go +

Go backend

The server handles API requests, authentication, live room state, @@ -120,7 +124,9 @@

-
S
+
+ Gitea +

Self-hosted streaming

Deploy the server on your own Linux host and connect compatible @@ -137,6 +143,9 @@

+
+ +

Open source freedom

Read, modify, build, and deploy the platform from source without @@ -144,6 +153,9 @@

+
+ +

Cross-platform clients

Current builds include Linux, Web, and Android client packages, @@ -151,6 +163,9 @@

+
+ +

Practical live features

Live rooms, RTMP publishing, HTTP-FLV playback, multi-quality @@ -158,6 +173,9 @@

+
+ +

Small deployment surface

The Go server uses a lightweight runtime model and can be deployed @@ -179,6 +197,9 @@

Available +
+ Linux +

Linux server

Backend service for self-hosted streaming deployments.

- - -
- Available +
+ Windows +

Windows server

Server executable for Windows environments.

+
+ Available +
+ Android +
+

Android client

+

ARM64 Android APK build for mobile viewing and interaction.

+ + Download Android APK + +
+ +
+ Available +
+ Windows +

Windows client

Desktop client build for Windows users.

-
+ +
diff --git a/website/styles.css b/website/styles.css index ad42d7c..44af7b2 100644 --- a/website/styles.css +++ b/website/styles.css @@ -515,7 +515,11 @@ h3 { border-radius: 16px; background: var(--primary); color: var(--on-primary); - font-weight: 900; +} + +.architecture-card .icon svg { + width: 26px; + height: 26px; } .architecture-card p, @@ -545,6 +549,19 @@ h3 { background: var(--surface); } +.feature-icon { + width: 36px; + height: 36px; + margin-bottom: 14px; + color: var(--primary); +} + +.feature-icon svg { + width: 100%; + height: 100%; + display: block; +} + .download-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -556,6 +573,19 @@ h3 { align-items: flex-start; } +.download-icon { + width: 32px; + height: 32px; + margin-bottom: 14px; + color: var(--muted); +} + +.download-icon svg { + width: 100%; + height: 100%; + display: block; +} + .status { margin-bottom: 18px; padding: 5px 10px;