添加产品介绍网页

2026-06-23 19:01:54 +08:00
parent ebded5057f
commit ddb2a01d93
7 changed files with 750 additions and 0 deletions
--- a/website/assets/hightube-icon.png
+++ b/website/assets/hightube-icon.png
--- a/website/index.html
+++ b/website/index.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Hightube is an open source, cross-platform live streaming platform built with Flutter and Go."
+    />
+    <title>Hightube | Open Source Live Streaming Platform</title>
+    <link rel="icon" href="assets/hightube-icon.png" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="#home" aria-label="Hightube home">
+        <img src="assets/hightube-icon.png" alt="" />
+        <span>Hightube</span>
+      </a>
+      <nav class="nav" aria-label="Primary navigation">
+        <a href="#architecture">Architecture</a>
+        <a href="#features">Features</a>
+        <a href="#downloads">Downloads</a>
+        <a href="#source">Source</a>
+      </nav>
+    </header>
+
+    <main id="home">
+      <section class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow">Flutter + Go live streaming stack</p>
+          <h1>Hightube</h1>
+          <p class="lead">
+            An open source live streaming platform designed for creators,
+            private communities, classrooms, labs, and self-hosted media
+            services.
+          </p>
+          <div class="actions">
+            <a class="button primary" href="#downloads">Download builds</a>
+            <a
+              class="button secondary"
+              href="https://git.nudt.space/Highground-Soft/Hightube.git"
+              rel="noopener"
+            >
+              View source
+            </a>
+          </div>
+        </div>
+        <div class="hero-panel" aria-label="Hightube platform overview">
+          <div class="device-window">
+            <div class="window-bar">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="stream-preview">
+              <div class="live-badge">LIVE</div>
+              <div class="play-symbol"></div>
+            </div>
+            <div class="stats-grid">
+              <div>
+                <strong>Flutter</strong>
+                <span>Client UI</span>
+              </div>
+              <div>
+                <strong>Go</strong>
+                <span>Backend API</span>
+              </div>
+              <div>
+                <strong>RTMP</strong>
+                <span>Streaming</span>
+              </div>
+              <div>
+                <strong>Open</strong>
+                <span>Source</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="architecture" class="section">
+        <div class="section-heading">
+          <p class="eyebrow">Architecture</p>
+          <h2>Built with Flutter clients and a Go streaming backend</h2>
+          <p>
+            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.
+          </p>
+        </div>
+        <div class="architecture-grid">
+          <article class="architecture-card">
+            <div class="icon">F</div>
+            <h3>Flutter frontends</h3>
+            <p>
+              One UI technology stack targets Linux, Android, Web, and future
+              desktop builds with consistent interaction patterns.
+            </p>
+          </article>
+          <article class="architecture-card">
+            <div class="icon">G</div>
+            <h3>Go backend</h3>
+            <p>
+              The server handles API requests, authentication, live room state,
+              RTMP publishing, HTTP-FLV playback, chat, and monitoring.
+            </p>
+          </article>
+          <article class="architecture-card">
+            <div class="icon">S</div>
+            <h3>Self-hosted streaming</h3>
+            <p>
+              Deploy the server on your own Linux host and connect compatible
+              broadcasters such as OBS through standard RTMP workflows.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <section id="features" class="section feature-band">
+        <div class="section-heading">
+          <p class="eyebrow">Project highlights</p>
+          <h2>Open, free, and cross-platform by design</h2>
+        </div>
+        <div class="feature-list">
+          <div class="feature-item">
+            <h3>Open source freedom</h3>
+            <p>
+              Read, modify, build, and deploy the platform from source without
+              vendor lock-in.
+            </p>
+          </div>
+          <div class="feature-item">
+            <h3>Cross-platform clients</h3>
+            <p>
+              Current builds include Linux, Web, and Android client packages,
+              with Windows builds planned later.
+            </p>
+          </div>
+          <div class="feature-item">
+            <h3>Practical live features</h3>
+            <p>
+              Live rooms, RTMP publishing, HTTP-FLV playback, multi-quality
+              transcoding, chat, danmaku-style messages, and admin monitoring.
+            </p>
+          </div>
+          <div class="feature-item">
+            <h3>Small deployment surface</h3>
+            <p>
+              The Go server uses a lightweight runtime model and can be deployed
+              as a single Linux server component.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="downloads" class="section">
+        <div class="section-heading">
+          <p class="eyebrow">Downloads</p>
+          <h2>Get the current executable builds</h2>
+          <p>
+            These files are hosted in the local website resources directory.
+            Windows server and client builds will be added later. Apple device
+            builds are not provided at this time.
+          </p>
+        </div>
+        <div class="download-grid">
+          <article class="download-card available">
+            <span class="status">Available</span>
+            <h3>Linux server</h3>
+            <p>Backend service for self-hosted streaming deployments.</p>
+            <a
+              class="download-link"
+              href="resources/hightube-server/hightube-server_amd64_v1.0.0"
+              download
+            >
+              Download Linux server
+            </a>
+          </article>
+          <article class="download-card available">
+            <span class="status">Available</span>
+            <h3>Linux client</h3>
+            <p>Desktop Flutter client packaged as an AppImage.</p>
+            <a
+              class="download-link"
+              href="resources/hightube-client/hightube-linux-amd64-v1.0.0.AppImage"
+              download
+            >
+              Download Linux AppImage
+            </a>
+          </article>
+          <article class="download-card available">
+            <span class="status">Available</span>
+            <h3>Android client</h3>
+            <p>ARM64 Android APK build for mobile viewing and interaction.</p>
+            <a
+              class="download-link"
+              href="resources/hightube-client/hightube-android-arm64-v8a-v1.0.0.apk"
+              download
+            >
+              Download Android APK
+            </a>
+          </article>
+          <article class="download-card available">
+            <span class="status">Available</span>
+            <h3>Web client</h3>
+            <p>Static web build archive for hosting the Flutter web frontend.</p>
+            <a
+              class="download-link"
+              href="resources/hightube-client/hightube-web-v1.0.0.tar.gz"
+              download
+            >
+              Download Web archive
+            </a>
+          </article>
+          <article class="download-card planned">
+            <span class="status muted">Coming later</span>
+            <h3>Windows server</h3>
+            <p>Planned server executable for Windows environments.</p>
+          </article>
+          <article class="download-card planned">
+            <span class="status muted">Coming later</span>
+            <h3>Windows client</h3>
+            <p>Planned desktop client build for Windows users.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="source" class="section source-section">
+        <div>
+          <p class="eyebrow">Source code</p>
+          <h2>Build it, audit it, host it your way</h2>
+          <p>
+            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.
+          </p>
+        </div>
+        <a
+          class="button primary"
+          href="https://git.nudt.space/Highground-Soft/Hightube.git"
+          rel="noopener"
+        >
+          Open repository
+        </a>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <span>Hightube</span>
+      <span>Built with ❤️ by HighGround-soft 2026</span>
+      <span>Open Source Live Platform</span>
+    </footer>
+  </body>
+</html>
--- a/website/resources/hightube-client/hightube-android-arm64-v8a-v1.0.0.apk
+++ b/website/resources/hightube-client/hightube-android-arm64-v8a-v1.0.0.apk
--- a/website/resources/hightube-client/hightube-linux-amd64-v1.0.0.AppImage
+++ b/website/resources/hightube-client/hightube-linux-amd64-v1.0.0.AppImage
--- a/website/resources/hightube-client/hightube-web-v1.0.0.tar.gz
+++ b/website/resources/hightube-client/hightube-web-v1.0.0.tar.gz
--- a/website/resources/hightube-server/hightube-server_amd64_v1.0.0
+++ b/website/resources/hightube-server/hightube-server_amd64_v1.0.0
--- a/website/styles.css
+++ b/website/styles.css
@@ -0,0 +1,495 @@
+:root {
+  color-scheme: light;
+  --primary: #0b57d0;
+  --on-primary: #ffffff;
+  --primary-container: #d7e3ff;
+  --secondary: #565f71;
+  --tertiary: #705575;
+  --surface: #fbfcff;
+  --surface-container: #eef3fb;
+  --surface-container-high: #e5ebf5;
+  --outline: #727782;
+  --text: #191c20;
+  --muted: #42474f;
+  --success: #146c2e;
+  --warning: #7a5900;
+  --shadow: 0 24px 60px rgba(11, 87, 208, 0.16);
+}
+
+* {
+  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;
+}
+
+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: rgba(251, 252, 255, 0.68);
+  border-bottom: 1px solid rgba(114, 119, 130, 0.18);
+  box-shadow: 0 12px 36px rgba(11, 87, 208, 0.08);
+  -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);
+}
+
+.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(11, 87, 208, 0.22);
+}
+
+.secondary {
+  background: var(--primary-container);
+  color: #001b3f;
+}
+
+.hero-panel {
+  display: flex;
+  justify-content: center;
+}
+
+.device-window {
+  width: min(100%, 560px);
+  overflow: hidden;
+  border: 1px solid rgba(114, 119, 130, 0.32);
+  border-radius: 28px;
+  background: var(--surface-container);
+  box-shadow: var(--shadow);
+}
+
+.window-bar {
+  display: flex;
+  gap: 8px;
+  padding: 16px 18px;
+  border-bottom: 1px solid rgba(114, 119, 130, 0.24);
+}
+
+.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: rgba(114, 119, 130, 0.24);
+}
+
+.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 rgba(114, 119, 130, 0.24);
+  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);
+  font-weight: 900;
+}
+
+.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 rgba(114, 119, 130, 0.24);
+  border-radius: 28px;
+  background: rgba(114, 119, 130, 0.24);
+}
+
+.feature-item {
+  min-width: 0;
+  padding: 28px;
+  background: var(--surface);
+}
+
+.download-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.download-card {
+  display: flex;
+  min-height: 240px;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.status {
+  margin-bottom: 18px;
+  padding: 5px 10px;
+  border-radius: 14px;
+  background: rgba(20, 108, 46, 0.12);
+  color: var(--success);
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.status.muted {
+  background: rgba(122, 89, 0, 0.12);
+  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 {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .nav {
+    width: 100%;
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+
+  .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) {
+  .hero,
+  .section {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .architecture-grid,
+  .download-grid,
+  .feature-list {
+    grid-template-columns: 1fr;
+  }
+
+  .actions,
+  .button,
+  .download-link {
+    width: 100%;
+  }
+
+  .stream-preview {
+    min-height: 220px;
+  }
+
+  .footer {
+    grid-template-columns: 1fr;
+  }
+
+  .footer span,
+  .footer span:last-child {
+    text-align: left;
+  }
+}