selfrelease
39e52f69d3
- 移除描述文字，只保留图标、标题、标签 - 采用不对称布局：图标左上+标签右上，标题底部 - 添加"打开应用"引导链接，悬停渐显 - 优化卡片阴影、圆角、间距 - 修复动态生成卡片的 CSS 样式不生效问题 - 补充缺失的 Tailwind 类（leading-tight等） Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2150 lines
74 KiB
HTML
2150 lines
74 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AI 应用门户</title>
|
|
<meta name="description" content="企业 AI Agent 统一门户，一站式访问所有智能应用" />
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%236366f1'/%3E%3Cstop offset='100%25' style='stop-color:%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='6' fill='url(%23a)'/%3E%3Cpath d='M8 16c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8zm8-6c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z' fill='white' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='2' fill='white'/%3E%3C/svg%3E" />
|
|
<style>
|
|
/* ===== Professional Investor-Grade Design System ===== */
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--glass-blur: 24px;
|
|
--glass-saturate: 1.8;
|
|
--transition-theme: background 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
|
|
--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
|
|
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
|
/* Professional Color System - Investor Grade */
|
|
--bg-primary: oklch(0.08 0.012 250);
|
|
--bg-secondary: oklch(0.12 0.015 260);
|
|
--bg-card: oklch(0.11 0.014 258);
|
|
--bg-card-hover: oklch(0.14 0.018 262);
|
|
|
|
/* Brand Colors - Trust & Technology */
|
|
--brand-primary: oklch(0.70 0.16 235);
|
|
--brand-secondary: oklch(0.65 0.18 265);
|
|
--brand-accent: oklch(0.72 0.14 195);
|
|
--brand-glow: oklch(0.70 0.18 235 / 0.25);
|
|
|
|
/* Text Hierarchy */
|
|
--text-primary: oklch(0.95 0.008 250);
|
|
--text-secondary: oklch(0.70 0.015 250);
|
|
--text-muted: oklch(0.50 0.012 250);
|
|
--text-heading: oklch(0.98 0.005 250);
|
|
|
|
/* Borders & Dividers */
|
|
--border-subtle: oklch(0.30 0.02 260 / 0.3);
|
|
--border-default: oklch(0.35 0.025 265 / 0.4);
|
|
--border-accent: oklch(0.50 0.05 235 / 0.5);
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 2px 8px oklch(0 0 0 / 0.15);
|
|
--shadow-md: 0 8px 24px oklch(0 0 0 / 0.2);
|
|
--shadow-lg: 0 16px 48px oklch(0 0 0 / 0.25);
|
|
--shadow-glow: 0 0 40px var(--brand-glow);
|
|
}
|
|
|
|
/* ===== Base Styles ===== */
|
|
* { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
|
|
html { font-size: 110%; scroll-behavior: smooth; }
|
|
body {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
color: var(--text-primary);
|
|
background:
|
|
radial-gradient(ellipse 120% 60% at 50% -10%, oklch(0.20 0.08 265 / 0.4), transparent 60%),
|
|
radial-gradient(ellipse 80% 50% at 80% 100%, oklch(0.18 0.06 210 / 0.3), transparent 50%),
|
|
var(--bg-primary);
|
|
transition: var(--transition-theme);
|
|
}
|
|
|
|
/* Subtle Grid Pattern */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(var(--border-subtle) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
|
|
z-index: 0;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ===== Typography System ===== */
|
|
.text-display {
|
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
color: var(--text-heading);
|
|
}
|
|
.text-headline {
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.text-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.text-body {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
}
|
|
.text-caption {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
}
|
|
.text-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== Gradient Text ===== */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary), var(--brand-accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
.header {
|
|
background: oklch(0.10 0.012 260 / 0.8);
|
|
border: 1px solid var(--border-default);
|
|
box-shadow: var(--shadow-md);
|
|
backdrop-filter: blur(20px) saturate(1.5);
|
|
-webkit-backdrop-filter: blur(20px) saturate(1.5);
|
|
border-radius: 1rem;
|
|
}
|
|
.brand-logo {
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
.header-status {
|
|
background: oklch(0.15 0.01 260 / 0.5);
|
|
border: 1px solid var(--border-subtle);
|
|
color: var(--text-secondary);
|
|
}
|
|
.status-dot {
|
|
background: oklch(0.72 0.18 150);
|
|
box-shadow: 0 0 12px oklch(0.72 0.18 150 / 0.6);
|
|
}
|
|
|
|
/* ===== Buttons ===== */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: 0.625rem;
|
|
transition: all 0.3s var(--ease-smooth);
|
|
cursor: pointer;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
.btn-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.btn-ghost {
|
|
background: oklch(0.12 0.012 260 / 0.6);
|
|
border: 1px solid var(--border-default);
|
|
color: var(--text-secondary);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: oklch(0.15 0.015 265 / 0.8);
|
|
border-color: var(--border-accent);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
|
|
color: white;
|
|
box-shadow: 0 4px 16px oklch(0.70 0.16 235 / 0.3);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px oklch(0.70 0.16 235 / 0.4);
|
|
}
|
|
|
|
/* ===== Hero Section ===== */
|
|
.hero {
|
|
padding: 5rem 0 4rem;
|
|
text-align: center;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.875rem;
|
|
background: oklch(0.15 0.015 260 / 0.6);
|
|
border: 1px solid var(--border-accent);
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--brand-primary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.hero-badge-dot {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
background: var(--brand-primary);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(0.9); }
|
|
}
|
|
.hero-title {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.hero-subtitle {
|
|
max-width: 48rem;
|
|
margin: 0 auto 2.5rem;
|
|
font-size: 1.125rem;
|
|
line-height: 1.7;
|
|
color: var(--text-secondary);
|
|
}
|
|
.hero-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 3rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 3rem;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ===== Section Styles ===== */
|
|
.section {
|
|
padding: 4rem 0;
|
|
}
|
|
.section-header {
|
|
margin-bottom: 3rem;
|
|
}
|
|
.section-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
background: oklch(0.15 0.015 260 / 0.5);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--brand-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.section-title {
|
|
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-heading);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.section-desc {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
max-width: 40rem;
|
|
}
|
|
|
|
/* ===== Card System - Professional ===== */
|
|
.card {
|
|
position: relative;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: 1.25rem;
|
|
padding: 1.75rem;
|
|
transition: all 0.4s var(--ease-smooth);
|
|
overflow: hidden;
|
|
}
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, var(--brand-glow), transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
.card:hover {
|
|
background: var(--bg-card-hover);
|
|
border-color: var(--border-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
|
}
|
|
.card:hover::before {
|
|
opacity: 0.5;
|
|
}
|
|
.card > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Card Icon */
|
|
.card-icon {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
background: linear-gradient(135deg, var(--accent-color), var(--accent-color-2));
|
|
box-shadow: 0 8px 24px color-mix(in oklch, var(--accent-color) 30%, transparent);
|
|
color: white;
|
|
transition: transform 0.4s var(--ease-spring);
|
|
}
|
|
.card:hover .card-icon {
|
|
transform: scale(1.05);
|
|
}
|
|
.card-icon svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
/* Card Content */
|
|
.card-tag {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.625rem;
|
|
background: color-mix(in oklch, var(--accent-color) 15%, transparent);
|
|
border: 1px solid color-mix(in oklch, var(--accent-color) 25%, transparent);
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.card-title {
|
|
font-size: 1.0625rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.card-subtitle {
|
|
font-size: 0.8125rem;
|
|
color: var(--accent-color);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.card-desc {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Card Action */
|
|
.card-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--accent-color);
|
|
margin-top: 1rem;
|
|
transition: gap 0.3s ease;
|
|
}
|
|
.card-action svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.card:hover .card-action svg {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
|
|
/* ===== Grid Layouts ===== */
|
|
.grid-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.25rem;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.grid-cards { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.grid-cards { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ===== Group Header ===== */
|
|
.group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.group-title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
color: var(--text-muted);
|
|
}
|
|
.group-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--border-subtle), transparent);
|
|
}
|
|
|
|
/* ===== Carousel ===== */
|
|
.carousel-wrapper {
|
|
position: relative;
|
|
overflow: visible;
|
|
width: 100%;
|
|
padding: 0 3rem;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.carousel-wrapper { padding: 0 1rem; display: none; }
|
|
}
|
|
.carousel-viewport {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.carousel-track {
|
|
display: flex;
|
|
width: 100%;
|
|
transition: transform 0.6s var(--ease-smooth);
|
|
}
|
|
.carousel-page {
|
|
flex: 0 0 100%;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.carousel-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-default);
|
|
cursor: pointer;
|
|
transition: all 0.3s var(--ease-smooth);
|
|
}
|
|
.carousel-btn:hover:not(:disabled) {
|
|
background: var(--bg-card-hover);
|
|
border-color: var(--border-accent);
|
|
color: var(--text-primary);
|
|
}
|
|
.carousel-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
.carousel-btn.prev { left: 0; }
|
|
.carousel-btn.next { right: 0; }
|
|
.carousel-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.carousel-dot {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
background: var(--border-default);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
.carousel-dot.active {
|
|
background: var(--brand-primary);
|
|
width: 1.5rem;
|
|
}
|
|
|
|
/* ===== Mobile List ===== */
|
|
.mobile-app-list { display: none; }
|
|
@media (max-width: 768px) {
|
|
.mobile-app-list { display: block; }
|
|
}
|
|
.mobile-group-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
padding: 1.5rem 0 0.75rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.mobile-app-list .card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ===== Footer ===== */
|
|
.footer {
|
|
padding: 2rem 0;
|
|
border-top: 1px solid var(--border-subtle);
|
|
text-align: center;
|
|
}
|
|
.footer-text {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.visitor-counter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.visitor-counter svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
color: var(--brand-primary);
|
|
}
|
|
|
|
/* ===== Modals ===== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: oklch(0.04 0.005 255 / 0.7);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.modal-content {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-default);
|
|
box-shadow: var(--shadow-lg);
|
|
max-width: 48rem;
|
|
width: 100%;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
border-radius: 1.25rem;
|
|
padding: 1.5rem;
|
|
transform: translateY(20px) scale(0.97);
|
|
transition: transform 0.3s var(--ease-smooth);
|
|
}
|
|
.modal-overlay.active .modal-content {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.modal-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
}
|
|
|
|
/* ===== Help Table ===== */
|
|
.help-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.8125rem;
|
|
}
|
|
.help-table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.help-table th {
|
|
background: oklch(0.15 0.012 260 / 0.5);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 0.625rem 0.875rem;
|
|
border-bottom: 1px solid var(--border-default);
|
|
white-space: nowrap;
|
|
}
|
|
.help-table td {
|
|
padding: 0.5rem 0.875rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
color: var(--text-primary);
|
|
}
|
|
.help-table td.copy-cell {
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.help-table td.copy-cell:hover {
|
|
color: var(--brand-primary);
|
|
}
|
|
.help-table tr:last-child td { border-bottom: none; }
|
|
|
|
/* ===== Contact Section ===== */
|
|
.contact-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.contact-qr {
|
|
border-radius: 0.75rem;
|
|
border: 2px solid var(--border-default);
|
|
object-fit: contain;
|
|
}
|
|
.contact-name {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== Visitor Toast ===== */
|
|
.visitor-toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(120%);
|
|
z-index: 90;
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-accent);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
|
opacity: 0;
|
|
transition: transform 0.5s var(--ease-bounce), opacity 0.4s ease;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
.visitor-toast.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
.visitor-toast-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
|
|
color: white;
|
|
margin-right: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
.visitor-toast-icon svg {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
|
|
/* ===== Animations ===== */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeInUp 0.6s var(--ease-spring) forwards;
|
|
opacity: 0;
|
|
}
|
|
.reveal-pending {
|
|
opacity: 0;
|
|
transform: translateY(32px);
|
|
transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
|
|
}
|
|
.reveal-pending.reveal-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ===== Reduced Motion ===== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ===== Responsive ===== */
|
|
@media (max-width: 768px) {
|
|
.hero { padding: 3rem 0 2rem; }
|
|
.hero-stats { gap: 2rem; }
|
|
.stat-value { font-size: 2rem; }
|
|
.section { padding: 3rem 0; }
|
|
.card { padding: 1.25rem; }
|
|
.modal-content { padding: 1rem; }
|
|
}
|
|
|
|
/* ===== Utility Classes ===== */
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.items-start { align-items: flex-start; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.gap-3 { gap: 0.75rem; }
|
|
.gap-4 { gap: 1rem; }
|
|
.mb-1 { margin-bottom: 0.25rem; }
|
|
.mb-2 { margin-bottom: 0.5rem; }
|
|
.mb-3 { margin-bottom: 0.75rem; }
|
|
.mb-4 { margin-bottom: 1rem; }
|
|
.mb-6 { margin-bottom: 1.5rem; }
|
|
.mb-8 { margin-bottom: 2rem; }
|
|
.mt-1 { margin-top: 0.25rem; }
|
|
.mt-2 { margin-top: 0.5rem; }
|
|
.mt-4 { margin-top: 1rem; }
|
|
.mt-8 { margin-top: 2rem; }
|
|
.ml-2 { margin-left: 0.5rem; }
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
.p-4 { padding: 1rem; }
|
|
.p-5 { padding: 1.25rem; }
|
|
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
|
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
|
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
|
.pt-5 { padding-top: 1.25rem; }
|
|
.text-center { text-align: center; }
|
|
.text-white { color: white; }
|
|
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
|
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
.font-extrabold { font-weight: 800; }
|
|
.tracking-tight { letter-spacing: -0.025em; }
|
|
.leading-tight { line-height: 1.25; }
|
|
.w-full { width: 100%; }
|
|
.max-w-5xl { max-width: 64rem; }
|
|
.relative { position: relative; }
|
|
.hidden { display: none; }
|
|
.block { display: block; }
|
|
.shrink-0 { flex-shrink: 0; }
|
|
.overflow-hidden { overflow: hidden; }
|
|
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
|
|
@media (min-width: 640px) { .container { max-width: 640px; } }
|
|
@media (min-width: 768px) { .container { max-width: 768px; } }
|
|
@media (min-width: 1024px) { .container { max-width: 1024px; } }
|
|
@media (min-width: 1280px) { .container { max-width: 1280px; } }
|
|
.border-t { border-top-width: 1px; }
|
|
.border-white\/10 { border-color: oklch(0 0 0 / 0.08); }
|
|
.rounded-full { border-radius: 9999px; }
|
|
.space-y-3 > * + * { margin-top: 0.75rem; }
|
|
</style>
|
|
<style>
|
|
/* ===== Professional Light Mode Support ===== */
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
--bg-primary: oklch(0.97 0.003 260);
|
|
--bg-secondary: oklch(0.95 0.005 262);
|
|
--bg-card: oklch(0.98 0.004 260);
|
|
--bg-card-hover: oklch(1 0 0);
|
|
|
|
--brand-primary: oklch(0.50 0.20 235);
|
|
--brand-secondary: oklch(0.52 0.22 265);
|
|
--brand-accent: oklch(0.55 0.16 195);
|
|
--brand-glow: oklch(0.50 0.20 235 / 0.15);
|
|
|
|
--text-primary: oklch(0.20 0.01 260);
|
|
--text-secondary: oklch(0.40 0.015 260);
|
|
--text-muted: oklch(0.55 0.012 260);
|
|
--text-heading: oklch(0.15 0.008 260);
|
|
|
|
--border-subtle: oklch(0.80 0.01 265 / 0.4);
|
|
--border-default: oklch(0.75 0.015 265 / 0.5);
|
|
--border-accent: oklch(0.55 0.15 235 / 0.6);
|
|
|
|
--shadow-sm: 0 2px 8px oklch(0 0 0 / 0.06);
|
|
--shadow-md: 0 8px 24px oklch(0 0 0 / 0.08);
|
|
--shadow-lg: 0 16px 48px oklch(0 0 0 / 0.1);
|
|
--shadow-glow: 0 0 40px var(--brand-glow);
|
|
}
|
|
|
|
:root[data-theme="light"] .card {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
:root[data-theme="light"] .card:hover {
|
|
box-shadow: var(--shadow-md), 0 0 30px var(--brand-glow);
|
|
}
|
|
:root[data-theme="light"] .header {
|
|
background: oklch(0.98 0.004 260 / 0.9);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
:root[data-theme="light"] .hero-badge {
|
|
background: oklch(0.92 0.02 235 / 0.3);
|
|
border-color: oklch(0.60 0.15 235 / 0.4);
|
|
}
|
|
:root[data-theme="light"] .section-label {
|
|
background: oklch(0.92 0.02 235 / 0.2);
|
|
border-color: oklch(0.60 0.15 235 / 0.3);
|
|
}
|
|
:root[data-theme="light"] .btn-ghost {
|
|
background: oklch(0.95 0.005 260 / 0.8);
|
|
border-color: oklch(0.75 0.015 265 / 0.5);
|
|
}
|
|
:root[data-theme="light"] .btn-ghost:hover {
|
|
background: oklch(0.90 0.008 260 / 0.9);
|
|
border-color: oklch(0.55 0.15 235 / 0.6);
|
|
}
|
|
:root[data-theme="light"] body::before {
|
|
opacity: 0.3;
|
|
}
|
|
:root[data-theme="light"] .carousel-btn {
|
|
background: var(--bg-card);
|
|
border-color: var(--border-default);
|
|
}
|
|
:root[data-theme="light"] .carousel-dot {
|
|
background: var(--border-default);
|
|
}
|
|
:root[data-theme="light"] .modal-overlay {
|
|
background: oklch(0.97 0.003 260 / 0.8);
|
|
}
|
|
:root[data-theme="light"] .help-table th {
|
|
background: oklch(0.94 0.005 260 / 0.8);
|
|
}
|
|
:root[data-theme="light"] .header-status {
|
|
background: oklch(0.95 0.005 260 / 0.7);
|
|
border-color: var(--border-subtle);
|
|
}
|
|
|
|
/* ===== Investor-Grade Footer ===== */
|
|
.footer {
|
|
padding: 2.5rem 0 2rem;
|
|
border-top: 1px solid var(--border-subtle);
|
|
text-align: center;
|
|
}
|
|
.footer-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
.footer-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.footer-logo {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.5rem;
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
.footer-logo svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
.footer-name {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
}
|
|
.footer-tagline {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.footer-divider {
|
|
width: 4rem;
|
|
height: 1px;
|
|
background: var(--border-subtle);
|
|
}
|
|
.footer-copyright {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.visitor-counter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 9999px;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
.visitor-counter svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
color: var(--brand-primary);
|
|
}
|
|
.visitor-counter strong {
|
|
color: var(--brand-primary);
|
|
font-weight: 600;
|
|
}
|
|
.visitor-num {
|
|
display: inline-block;
|
|
font-variant-numeric: tabular-nums;
|
|
transition: transform 0.6s var(--ease-bounce), color 0.4s ease;
|
|
}
|
|
.visitor-num.bump {
|
|
transform: scale(1.4);
|
|
color: var(--brand-primary);
|
|
}
|
|
@keyframes visitorPulse {
|
|
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand-primary) 40%, transparent); }
|
|
100% { box-shadow: 0 0 0 12px transparent; }
|
|
}
|
|
.visitor-counter-pulse {
|
|
animation: visitorPulse 0.8s ease-out;
|
|
}
|
|
|
|
/* ===== Toast Notification ===== */
|
|
.visitor-toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(150%);
|
|
z-index: 90;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-accent);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
|
opacity: 0;
|
|
transition: transform 0.5s var(--ease-bounce), opacity 0.4s ease;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
.visitor-toast.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
.visitor-toast-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
|
|
color: white;
|
|
margin-right: 0.625rem;
|
|
vertical-align: middle;
|
|
}
|
|
.visitor-toast-icon svg {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
|
|
/* ===== Modal Styles ===== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: oklch(0.04 0.005 255 / 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.modal-content {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-default);
|
|
box-shadow: var(--shadow-lg);
|
|
max-width: 52rem;
|
|
width: 100%;
|
|
max-height: 88vh;
|
|
overflow-y: auto;
|
|
border-radius: 1.5rem;
|
|
padding: 2rem;
|
|
transform: translateY(24px) scale(0.96);
|
|
transition: transform 0.4s var(--ease-smooth);
|
|
}
|
|
.modal-overlay.active .modal-content {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.modal-content::-webkit-scrollbar { width: 6px; }
|
|
.modal-content::-webkit-scrollbar-track { background: transparent; }
|
|
.modal-content::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.modal-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-heading);
|
|
}
|
|
|
|
/* ===== Help Content ===== */
|
|
.help-section {
|
|
padding: 1.25rem;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.help-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.help-section-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.help-section-subtitle {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: -0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.help-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.8125rem;
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
.help-table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.help-table th {
|
|
background: oklch(0.15 0.012 260 / 0.5);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 0.625rem 0.875rem;
|
|
border-bottom: 1px solid var(--border-default);
|
|
white-space: nowrap;
|
|
}
|
|
.help-table td {
|
|
padding: 0.5rem 0.875rem;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
color: var(--text-primary);
|
|
}
|
|
.help-table td.copy-cell {
|
|
cursor: pointer;
|
|
transition: color 0.2s ease, background 0.2s ease;
|
|
}
|
|
.help-table td.copy-cell:hover {
|
|
color: var(--brand-primary);
|
|
background: color-mix(in oklch, var(--brand-primary) 8%, transparent);
|
|
}
|
|
.copy-feedback {
|
|
color: var(--brand-primary) !important;
|
|
}
|
|
.help-table tr:last-child td { border-bottom: none; }
|
|
|
|
/* ===== Contact Modal ===== */
|
|
.contact-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.contact-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.contact-qr {
|
|
border-radius: 1rem;
|
|
border: 2px solid var(--border-default);
|
|
object-fit: contain;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.contact-qr:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.contact-name {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
.contact-role {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ===== Value Props Section ===== */
|
|
.value-props {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1.5rem;
|
|
margin-top: 3rem;
|
|
padding-top: 3rem;
|
|
border-top: 1px solid var(--border-subtle);
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.value-props { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.value-props { grid-template-columns: 1fr; }
|
|
}
|
|
.value-prop {
|
|
text-align: center;
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
.value-prop-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin: 0 auto 1rem;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
|
|
color: white;
|
|
}
|
|
.value-prop-icon svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
.value-prop-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-heading);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.value-prop-desc {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===== Architecture Diagram ===== */
|
|
.arch-diagram {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
}
|
|
.arch-layer {
|
|
padding: 1.25rem 1.5rem;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.arch-layer-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
}
|
|
.arch-layer-content {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
.arch-layer-1 {
|
|
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
|
|
color: white;
|
|
}
|
|
.arch-layer-2 {
|
|
background: oklch(0.15 0.015 260 / 0.6);
|
|
border: 1px solid var(--border-accent);
|
|
color: var(--text-heading);
|
|
}
|
|
.arch-layer-3 {
|
|
background: oklch(0.12 0.012 260 / 0.6);
|
|
border: 1px solid var(--border-default);
|
|
color: var(--text-secondary);
|
|
}
|
|
.arch-layer-4 {
|
|
background: oklch(0.10 0.01 260 / 0.6);
|
|
border: 1px solid var(--border-subtle);
|
|
color: var(--text-muted);
|
|
}
|
|
.arch-arrow {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
}
|
|
.arch-arrow svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased relative">
|
|
<!-- Header -->
|
|
<header class="header sticky top-3 z-50 mx-auto max-w-5xl mt-3">
|
|
<div class="px-4 h-12 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="brand-logo w-9 h-9 rounded-xl flex items-center justify-center">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7.5 4.25v8.5L12 20l-7.5-4.25v-8.5L12 3z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-bold tracking-tight" style="color: var(--text-heading);">All by AI</div>
|
|
<div class="text-label hidden sm:block">all8ai.top</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="header-status hidden md:inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium">
|
|
<span class="status-dot h-1.5 w-1.5 rounded-full"></span>
|
|
20 个智能应用在线
|
|
</span>
|
|
<button class="btn btn-ghost btn-icon" onclick="toggleTheme()" aria-label="切换主题">
|
|
<svg class="moon-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
<svg class="sun-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-icon" onclick="toggleHelpModal(true)" aria-label="帮助">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18v-3"/><circle cx="12" cy="12" r="9"/><path d="M8.5 8.5a3.5 3.5 0 1 1 5 3c-1 .5-1.5 1-1.5 2"/></svg>
|
|
</button>
|
|
<button class="btn btn-primary btn-icon" onclick="toggleContactModal(true)" aria-label="联系方式">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><circle cx="9.5" cy="7" r="4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11h4M19 9v4"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto max-w-6xl px-4 py-8 md:py-12">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="text-center mb-12 md:mb-16">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
<span>20 个智能应用已上线</span>
|
|
</div>
|
|
<h1 class="text-display tracking-tight mb-4">
|
|
<span class="gradient-text">All by AI</span>
|
|
</h1>
|
|
<p class="text-lg leading-relaxed mb-8" style="color: var(--text-secondary); max-width: 36rem; margin-left: auto; margin-right: auto;">
|
|
以边缘算力硬件为底座、HR AI全链路为核心的企业AI服务供应商<br>
|
|
<span style="color: var(--text-muted);">为国企、政府及企事业单位提供"数据不出域"的AI落地解决方案</span>
|
|
</p>
|
|
|
|
<!-- Value Props -->
|
|
<div class="value-props">
|
|
<div class="value-prop">
|
|
<div class="value-prop-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
|
|
</div>
|
|
<div class="value-prop-title">软硬一体</div>
|
|
<div class="value-prop-desc">唯一同时具备边缘算力硬件 + AI应用的HR领域供应商</div>
|
|
</div>
|
|
<div class="value-prop">
|
|
<div class="value-prop-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2zm0 0V9a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v10m-6 0a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2m0 0V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v14a2 2 0 0 0-2 2h-2a2 2 0 0 0-2-2z"/></svg>
|
|
</div>
|
|
<div class="value-prop-title">垂直深度</div>
|
|
<div class="value-prop-desc">9个产品覆盖HR全生命周期，竞品只做1-2个单点</div>
|
|
</div>
|
|
<div class="value-prop">
|
|
<div class="value-prop-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5m-4 0h4"/></svg>
|
|
</div>
|
|
<div class="value-prop-title">政府场景</div>
|
|
<div class="value-prop-desc">GovAI已完成政务场景适配，具备先发优势</div>
|
|
</div>
|
|
<div class="value-prop">
|
|
<div class="value-prop-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0 1 12 2.944a11.955 11.955 0 0 1-8.618 3.04A12.02 12.02 0 0 0 3 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
|
|
</div>
|
|
<div class="value-prop-title">产品就绪</div>
|
|
<div class="value-prop-desc">20个AI产品已跑通，可交付的生产级产品</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="hero-stats mt-10">
|
|
<div class="stat-item">
|
|
<div class="stat-value">20+</div>
|
|
<div class="stat-label">AI 应用产品</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">9</div>
|
|
<div class="stat-label">HR 全链路覆盖</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">3+</div>
|
|
<div class="stat-label">行业场景验证</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- App Grid -->
|
|
<section class="carousel-wrapper" id="carouselWrapper">
|
|
<button class="carousel-btn prev" id="carouselPrev" aria-label="上一页" onclick="changePage(-1)">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18l-6-6 6-6"/></svg>
|
|
</button>
|
|
<div class="carousel-viewport">
|
|
<div class="carousel-track" id="carouselTrack"></div>
|
|
</div>
|
|
<button class="carousel-btn next" id="carouselNext" aria-label="下一页" onclick="changePage(1)">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 18l6-6-6-6"/></svg>
|
|
</button>
|
|
<div class="carousel-dots" id="carouselDots"></div>
|
|
</section>
|
|
|
|
<!-- Mobile App List -->
|
|
<section class="mobile-app-list" id="mobileAppList"></section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer mt-12">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l7.5 4.25v8.5L12 20l-7.5-4.25v-8.5L12 3z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="footer-name">All by AI</div>
|
|
<div class="footer-tagline">企业AI服务供应商</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-divider"></div>
|
|
<div class="footer-copyright">
|
|
<p>2026 All by AI. All rights reserved.</p>
|
|
</div>
|
|
<div id="visitorCount" class="visitor-counter" style="opacity: 0;">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
<span>本站已被访问</span>
|
|
<strong id="visitorCountNum" class="visitor-num">--</strong>
|
|
<span>次</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- 实时访问通知气泡 -->
|
|
<div class="visitor-toast" id="visitorToast">
|
|
<span class="toast-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 19V5M5 12l7-7 7 7"/></svg>
|
|
</span>
|
|
<span id="visitorToastText">有新访客到来！</span>
|
|
</div>
|
|
|
|
<!-- Help Modal -->
|
|
<div class="help-overlay" id="helpOverlay" onclick="if(event.target===this)toggleHelpModal(false)">
|
|
<div class="help-modal p-5 md:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-extrabold text-slate-100">测试账号帮助 / Test Account Guide</h2>
|
|
<button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleHelpModal(false)" aria-label="关闭 / Close">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M6 18L18 6"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-3" id="helpContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Modal -->
|
|
<div class="help-overlay" id="contactOverlay" onclick="if(event.target===this)toggleContactModal(false)">
|
|
<div class="help-modal p-4 md:p-6" style="max-width: 28rem;">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-extrabold text-slate-100">联系方式 / Contact</h2>
|
|
<button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleContactModal(false)" aria-label="关闭 / Close">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M6 18L18 6"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-row items-start justify-center gap-3 md:gap-4">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<img src="gx.jpg" alt="高欣 / Sidney" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
|
|
<p class="text-[10px] text-slate-400">高欣 / Sidney</p>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<img src="wlg1.jpg" alt="王立刚 / Wang Ligang" class="contact-qr bg-white" style="width: 130px; height: 180px; object-fit: contain;" />
|
|
<p class="text-[10px] text-slate-400">王立刚 / Wang Ligang</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const saved = localStorage.getItem('portal-theme');
|
|
const theme = saved || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
})();
|
|
|
|
const iconPaths = {
|
|
chart: '<path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 16v-5"/><path d="M12 16V8"/><path d="M16 16v-8"/>',
|
|
network: '<path d="M12 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/><path d="M5.5 17a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/><path d="M18.5 17a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/><path d="M10.2 10.4 6.8 17"/><path d="m13.8 10.4 3.4 6.6"/>',
|
|
clipboard: '<path d="M9 5h6"/><path d="M9 3h6a1 1 0 0 1 1 1v2H8V4a1 1 0 0 1 1-1z"/><path d="M7 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-1"/><path d="m8 14 2.2 2.2L16 10.5"/>',
|
|
users: '<path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/><path d="M9.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M21 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
|
brain: '<path d="M9 3a3 3 0 0 0-3 3v1.2A3.8 3.8 0 0 0 4 14a4 4 0 0 0 4 4h1"/><path d="M15 3a3 3 0 0 1 3 3v1.2A3.8 3.8 0 0 1 20 14a4 4 0 0 1-4 4h-1"/><path d="M9 3v18"/><path d="M15 3v18"/><path d="M9 8H7"/><path d="M15 8h2"/><path d="M9 14H6"/><path d="M15 14h3"/>',
|
|
search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-4.2-4.2"/><path d="M8.5 11h5"/><path d="M11 8.5v5"/>',
|
|
briefcase: '<path d="M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1"/><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M3 12h18"/><path d="M10 12v2h4v-2"/>',
|
|
shield: '<path d="M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3z"/><path d="m9 12 2 2 4-5"/>',
|
|
landmark: '<path d="M3 21h18"/><path d="M5 10h14"/><path d="M6 10v8"/><path d="M10 10v8"/><path d="M14 10v8"/><path d="M18 10v8"/><path d="M4 10l8-6 8 6"/>'
|
|
};
|
|
|
|
const appGroups = [
|
|
{
|
|
title: '人力资源 / Human Resources',
|
|
apps: [
|
|
{
|
|
name: 'TalentMatrix',
|
|
subtitle: '绩效管理 / Performance',
|
|
desc: '智能绩效管理系统，助力企业高效评估与发展 · Intelligent performance management for efficient evaluation and growth',
|
|
url: 'https://p.hr8ai.top/',
|
|
icon: 'chart',
|
|
accent: 'oklch(0.58 0.22 255)',
|
|
accent2: 'oklch(0.68 0.17 205)',
|
|
tag: '绩效 / HR'
|
|
},
|
|
{
|
|
name: 'TurboTalent',
|
|
subtitle: '人才管理 · 盘点 · 发展 / Talent Management',
|
|
desc: '全方位人才管理平台，覆盖盘点与发展全流程 · Full-cycle talent management platform for review and development',
|
|
url: 'http://62.234.107.180:9002/',
|
|
icon: 'network',
|
|
accent: 'oklch(0.56 0.25 290)',
|
|
accent2: 'oklch(0.64 0.22 315)',
|
|
tag: '人才 / Talent'
|
|
},
|
|
{
|
|
name: 'TurboTalent 测评 / Assessment',
|
|
subtitle: '在线测评中心 / Online Assessment',
|
|
desc: '专业人才测评系统，科学评估能力与潜力 · Professional assessment system for scientific capability evaluation',
|
|
url: 'https://ce.all8ai.top/',
|
|
icon: 'clipboard',
|
|
accent: 'oklch(0.62 0.18 160)',
|
|
accent2: 'oklch(0.66 0.16 190)',
|
|
tag: '测评 / Test'
|
|
},
|
|
{
|
|
name: 'TalentMentor',
|
|
subtitle: '企业招聘 · 人才发展 / Recruiting & Development',
|
|
desc: '智能化招聘与人才发展双引擎平台 · Dual-engine platform for smart recruiting and talent development',
|
|
url: 'https://m.hr8ai.top/',
|
|
icon: 'users',
|
|
accent: 'oklch(0.66 0.2 55)',
|
|
accent2: 'oklch(0.74 0.18 82)',
|
|
tag: '招聘 / Recruit'
|
|
},
|
|
{
|
|
name: 'HRBP 智能分析 / HRBP Analytics',
|
|
subtitle: 'HR 业务伙伴 / HR Business Partner',
|
|
desc: 'AI 驱动的 HR 智能分析与决策支持系统 · AI-powered HR analytics and decision support system',
|
|
url: 'https://hrbp.all8ai.top/',
|
|
icon: 'brain',
|
|
accent: 'oklch(0.62 0.24 18)',
|
|
accent2: 'oklch(0.66 0.22 345)',
|
|
tag: '分析 / Analytics'
|
|
},
|
|
{
|
|
name: '猎头 Agent / Headhunt Agent',
|
|
subtitle: '智能猎头助手 / Smart Headhunting',
|
|
desc: 'AI 猎头 Agent，自动化人才寻访与匹配 · AI headhunting agent for automated talent sourcing and matching',
|
|
url: 'https://h2agent.opc8ai.com/',
|
|
icon: 'search',
|
|
accent: 'oklch(0.56 0.24 265)',
|
|
accent2: 'oklch(0.61 0.2 230)',
|
|
tag: '猎头 / Search'
|
|
},
|
|
{
|
|
name: '美雇 / MeiGu',
|
|
subtitle: '劳动关系管理 / Labor Relations',
|
|
desc: '企业用工权与劳动关系管理平台，合规高效管理雇佣关系 · Enterprise labor relations and employment rights management platform',
|
|
url: 'https://www.uumeigu.com/',
|
|
icon: 'briefcase',
|
|
accent: 'oklch(0.64 0.18 210)',
|
|
accent2: 'oklch(0.69 0.16 235)',
|
|
tag: '劳资 / Labor'
|
|
},
|
|
{
|
|
name: 'SmartResume',
|
|
subtitle: '人岗匹配 / Resume-Job Matching',
|
|
desc: '智能人岗匹配系统，精准对接简历与岗位 · Smart resume-to-job matching system for precise talent positioning',
|
|
url: 'http://62.234.107.180:9005/',
|
|
icon: 'search',
|
|
accent: 'oklch(0.6 0.2 145)',
|
|
accent2: 'oklch(0.68 0.16 170)',
|
|
tag: '匹配 / Match'
|
|
},
|
|
{
|
|
name: '技能工人胜任力管理 / Skill Competency',
|
|
subtitle: '技能工人胜任力管理 / Skill Worker Competency',
|
|
desc: '技能工人胜任力全流程管理平台，评估·发展·认证 · Full-cycle skill worker competency management platform',
|
|
url: 'https://stc.hr8ai.top/',
|
|
icon: 'clipboard',
|
|
accent: 'oklch(0.58 0.2 200)',
|
|
accent2: 'oklch(0.65 0.18 225)',
|
|
tag: '技能 / Skill'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '企业管理 / Enterprise Management',
|
|
apps: [
|
|
{
|
|
name: '项目风险管控 / Risk Control',
|
|
subtitle: '风险管理系统 / Risk Management',
|
|
desc: '项目风险智能识别与管控平台 · Intelligent project risk identification and control platform',
|
|
url: 'https://pm.hr8ai.top/',
|
|
icon: 'shield',
|
|
accent: 'oklch(0.6 0.22 30)',
|
|
accent2: 'oklch(0.69 0.18 55)',
|
|
tag: '风控 / Risk'
|
|
},
|
|
{
|
|
name: '法时时 / FaShiShi',
|
|
subtitle: '法律服务平台 / Legal Services',
|
|
desc: '专业法律服务平台，随时获取法律咨询与支持 · Professional legal services platform for on-demand advice',
|
|
url: 'http://www.fashishi.cn',
|
|
icon: 'briefcase',
|
|
accent: 'oklch(0.55 0.16 30)',
|
|
accent2: 'oklch(0.62 0.14 55)',
|
|
tag: '法律 / Legal'
|
|
},
|
|
{
|
|
name: '软件开发项目管理 / Dev PM',
|
|
subtitle: '软件项目管理 / Software Project Management',
|
|
desc: '软件开发项目全流程管理，需求·任务·缺陷跟踪 · Full-cycle software project management with requirement, task and defect tracking',
|
|
url: 'https://pm.all8ai.top/',
|
|
icon: 'clipboard',
|
|
accent: 'oklch(0.6 0.22 255)',
|
|
accent2: 'oklch(0.68 0.18 235)',
|
|
tag: '研发 / Dev'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: 'AI应用中心 / AI Application Center',
|
|
apps: [
|
|
{
|
|
name: '政务AI应用中心 / Gov AI Hub',
|
|
subtitle: '政务智能服务 / Gov AI Services',
|
|
desc: '政务场景 AI 应用统一入口与服务中心 · Unified portal for government AI applications and services',
|
|
url: 'https://gov.opc8ai.com',
|
|
icon: 'landmark',
|
|
accent: 'oklch(0.47 0.07 255)',
|
|
accent2: 'oklch(0.56 0.08 235)',
|
|
tag: '政务 / Gov'
|
|
},
|
|
{
|
|
name: 'K12AI应用中心 / K12 AI Hub',
|
|
subtitle: 'K12 AI 教育应用 / K12 AI Education',
|
|
desc: 'K12 场景 AI 应用统一入口，涵盖管理、家长、课堂多端 · Unified K12 AI education portal for admin, parents and classrooms',
|
|
url: 'http://101.96.196.218',
|
|
icon: 'users',
|
|
accent: 'oklch(0.62 0.2 80)',
|
|
accent2: 'oklch(0.68 0.18 105)',
|
|
tag: 'K12 / Edu'
|
|
},
|
|
{
|
|
name: '医科大学AI学习中心 / Med AI Center',
|
|
subtitle: '医学AI学习平台 / Medical AI Learning',
|
|
desc: '医科大学 AI 学习平台，助力医学教育与智能训练 · Medical university AI learning center for smart education',
|
|
url: 'http://101.96.196.218:4100/login',
|
|
icon: 'brain',
|
|
accent: 'oklch(0.58 0.18 200)',
|
|
accent2: 'oklch(0.65 0.16 225)',
|
|
tag: '医学 / Med'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '文创 / Culture & Creative',
|
|
apps: [
|
|
{
|
|
name: '故宫雅游 / Palace Tour',
|
|
subtitle: '故宫文化探索 / Forbidden City Culture',
|
|
desc: '故宫文化智能游览平台，沉浸式探索历史瑰宝 · Intelligent palace culture tour platform for immersive exploration',
|
|
url: 'https://gg.all8ai.top/',
|
|
icon: 'landmark',
|
|
accent: 'oklch(0.55 0.15 25)',
|
|
accent2: 'oklch(0.62 0.13 50)',
|
|
tag: '文创 / Culture'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '工具 / Tools',
|
|
apps: [
|
|
{
|
|
name: 'Markdown 编辑 / Markdown Editor',
|
|
subtitle: '在线 Markdown 编辑器 / Online Markdown Editor',
|
|
desc: '轻量级在线 Markdown 编辑器，实时预览与导出 · Lightweight online Markdown editor with live preview and export',
|
|
url: 'https://mdedit.all8ai.top/',
|
|
icon: 'clipboard',
|
|
accent: 'oklch(0.58 0.16 200)',
|
|
accent2: 'oklch(0.65 0.14 225)',
|
|
tag: '工具 / Tool'
|
|
},
|
|
{
|
|
name: 'SVG 编辑 / SVG Editor',
|
|
subtitle: '在线 SVG 编辑器 / Online SVG Editor',
|
|
desc: '在线 SVG 矢量图编辑工具，轻松创作与编辑 · Online SVG vector editor for easy creation and editing',
|
|
url: 'https://svgedit.all8ai.top/',
|
|
icon: 'chart',
|
|
accent: 'oklch(0.6 0.18 160)',
|
|
accent2: 'oklch(0.66 0.16 190)',
|
|
tag: '工具 / Tool'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '个人 / Personal',
|
|
apps: [
|
|
{
|
|
name: '八字系统 / BaZi System',
|
|
subtitle: '传统命理分析 / Traditional Fortune Analysis',
|
|
desc: '传统八字命理智能分析系统 · Traditional BaZi fortune analysis system',
|
|
url: 'https://wnote.top',
|
|
icon: 'brain',
|
|
accent: 'oklch(0.56 0.2 290)',
|
|
accent2: 'oklch(0.64 0.18 315)',
|
|
tag: '命理 / Fortune'
|
|
},
|
|
{
|
|
name: '对话交流 / Chat',
|
|
subtitle: 'AI 对话平台 / AI Chat Platform',
|
|
desc: '智能对话交流平台，随时与 AI 互动 · Intelligent chat platform for AI interaction anytime',
|
|
url: 'https://y.all8ai.top',
|
|
icon: 'search',
|
|
accent: 'oklch(0.6 0.2 255)',
|
|
accent2: 'oklch(0.68 0.16 235)',
|
|
tag: '对话 / Chat'
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const grid = document.getElementById('carouselTrack');
|
|
let currentPage = 0;
|
|
const totalPages = appGroups.length;
|
|
|
|
/**
|
|
* 生成统一的专业线性 SVG 图标，保持门户卡片视觉一致性。
|
|
*/
|
|
function getIcon(name) {
|
|
return `<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">${iconPaths[name]}</svg>`;
|
|
}
|
|
|
|
function getHostname(url) {
|
|
try {
|
|
return new URL(url).hostname || '示例';
|
|
} catch (e) {
|
|
return '示例';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 渲染单个应用入口卡片
|
|
*/
|
|
function createAppCard(app, i) {
|
|
const card = document.createElement('a');
|
|
card.href = app.url;
|
|
card.target = '_blank';
|
|
card.rel = 'noopener noreferrer';
|
|
card.className = 'card animate-fade-in';
|
|
card.style.cssText = `--accent-color: ${app.accent}; --accent-color-2: ${app.accent2}; animation-delay: ${i * 0.06}s;`;
|
|
card.innerHTML = `
|
|
<div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem;">
|
|
<div class="card-icon">
|
|
${getIcon(app.icon)}
|
|
</div>
|
|
<span class="card-tag">${app.tag}</span>
|
|
</div>
|
|
<h3 class="card-title">${app.name}</h3>
|
|
<p class="card-subtitle">${app.subtitle}</p>
|
|
<p class="card-desc">${app.desc}</p>
|
|
<div class="card-action">
|
|
<span>打开应用</span>
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M7 17 17 7M9 7h8v8"/></svg>
|
|
</div>
|
|
`;
|
|
return card;
|
|
}
|
|
|
|
/**
|
|
* 渲染手机端竖向列表，所有分组和应用平铺。
|
|
*/
|
|
function renderMobileList() {
|
|
const container = document.getElementById('mobileAppList');
|
|
container.innerHTML = '';
|
|
appGroups.forEach((group) => {
|
|
const titleEl = document.createElement('div');
|
|
titleEl.className = 'mobile-group-title';
|
|
titleEl.textContent = group.title;
|
|
container.appendChild(titleEl);
|
|
group.apps.forEach((app, i) => {
|
|
container.appendChild(createAppCard(app, i));
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 渲染分页轮播，每组一页，带分组标题。
|
|
*/
|
|
function renderCarousel() {
|
|
grid.innerHTML = '';
|
|
appGroups.forEach((group) => {
|
|
const pageDiv = document.createElement('div');
|
|
pageDiv.className = 'carousel-page';
|
|
pageDiv.style.display = 'block';
|
|
|
|
// Group header
|
|
const headerEl = document.createElement('div');
|
|
headerEl.className = 'group-header';
|
|
headerEl.innerHTML = `
|
|
<span class="group-title">${group.title}</span>
|
|
<span class="group-line"></span>
|
|
`;
|
|
pageDiv.appendChild(headerEl);
|
|
|
|
// Cards grid
|
|
const innerGrid = document.createElement('div');
|
|
innerGrid.className = 'grid-cards';
|
|
group.apps.forEach((app, i) => {
|
|
innerGrid.appendChild(createAppCard(app, i));
|
|
});
|
|
pageDiv.appendChild(innerGrid);
|
|
grid.appendChild(pageDiv);
|
|
});
|
|
renderDots();
|
|
updateCarousel();
|
|
}
|
|
|
|
/**
|
|
* 渲染分页指示点。
|
|
*/
|
|
function renderDots() {
|
|
const dotsContainer = document.getElementById('carouselDots');
|
|
dotsContainer.innerHTML = '';
|
|
for (let i = 0; i < totalPages; i++) {
|
|
const dot = document.createElement('button');
|
|
dot.className = 'carousel-dot' + (i === currentPage ? ' active' : '');
|
|
dot.onclick = () => goToPage(i);
|
|
dotsContainer.appendChild(dot);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 更新轮播位置和按钮状态。
|
|
*/
|
|
function updateCarousel() {
|
|
grid.style.transform = `translateX(-${currentPage * 100}%)`;
|
|
document.getElementById('carouselPrev').disabled = currentPage === 0;
|
|
document.getElementById('carouselNext').disabled = currentPage === totalPages - 1;
|
|
document.querySelectorAll('.carousel-dot').forEach((d, i) => {
|
|
d.classList.toggle('active', i === currentPage);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 翻页：direction 为 -1（上一页）或 1（下一页）。
|
|
*/
|
|
function changePage(direction) {
|
|
const next = currentPage + direction;
|
|
if (next >= 0 && next < totalPages) {
|
|
currentPage = next;
|
|
updateCarousel();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 跳转到指定页。
|
|
*/
|
|
function goToPage(page) {
|
|
currentPage = page;
|
|
updateCarousel();
|
|
}
|
|
|
|
renderCarousel();
|
|
renderMobileList();
|
|
|
|
const revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('reveal-in');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
document.querySelectorAll('.carousel-wrapper, .mobile-app-list, .contact-section').forEach((el) => {
|
|
el.classList.add('reveal-pending');
|
|
revealObserver.observe(el);
|
|
});
|
|
|
|
/**
|
|
* 调用第三方计数 API 获取并递增全局访问量，更新页脚显示。
|
|
* 之后定时轮询 get 接口（不递增），检测新访客并艺术化提示。
|
|
*/
|
|
let _lastCount = null;
|
|
let _toastTimer = null;
|
|
|
|
function updateVisitorCount() {
|
|
const countKey = 'all8ai-portal-visits-2026';
|
|
const hitUrl = `https://countapi.mileshilliard.com/api/v1/hit/${countKey}`;
|
|
fetch(hitUrl)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data && data.value !== undefined) {
|
|
const count = Number(data.value);
|
|
_lastCount = count;
|
|
const numEl = document.getElementById('visitorCountNum');
|
|
if (numEl) numEl.textContent = count.toLocaleString();
|
|
const wrapEl = document.getElementById('visitorCount');
|
|
if (wrapEl) wrapEl.style.opacity = '1';
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function pollVisitorCount() {
|
|
const countKey = 'all8ai-portal-visits-2026';
|
|
const getUrl = `https://countapi.mileshilliard.com/api/v1/get/${countKey}`;
|
|
fetch(getUrl)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data && data.value !== undefined) {
|
|
const count = Number(data.value);
|
|
if (_lastCount !== null && count > _lastCount) {
|
|
const diff = count - _lastCount;
|
|
_lastCount = count;
|
|
animateVisitorCount(count, diff);
|
|
} else if (_lastCount !== null && count < _lastCount) {
|
|
_lastCount = count;
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function animateVisitorCount(count, diff) {
|
|
const numEl = document.getElementById('visitorCountNum');
|
|
const wrapEl = document.getElementById('visitorCount');
|
|
if (!numEl) return;
|
|
|
|
numEl.classList.add('bump');
|
|
if (wrapEl) wrapEl.classList.add('visitor-pulse');
|
|
setTimeout(() => {
|
|
numEl.textContent = count.toLocaleString();
|
|
}, 200);
|
|
setTimeout(() => {
|
|
numEl.classList.remove('bump');
|
|
if (wrapEl) wrapEl.classList.remove('visitor-pulse');
|
|
}, 800);
|
|
|
|
const toast = document.getElementById('visitorToast');
|
|
const toastText = document.getElementById('visitorToastText');
|
|
if (toast && toastText) {
|
|
toastText.textContent = `✨ 新访客 +${diff} · 当前 ${count.toLocaleString()} 次`;
|
|
toast.classList.add('show');
|
|
if (_toastTimer) clearTimeout(_toastTimer);
|
|
_toastTimer = setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
}, 4000);
|
|
}
|
|
}
|
|
|
|
updateVisitorCount();
|
|
setInterval(pollVisitorCount, 10000);
|
|
|
|
/**
|
|
* 帮助弹窗的测试账号数据，中英双语展示。
|
|
*/
|
|
const helpData = [
|
|
{
|
|
title: 'TalentMatrix',
|
|
subtitle: '绩效管理 / Performance Management',
|
|
url: 'https://p.hr8ai.top/',
|
|
type: 'table',
|
|
headers: ['角色 / Role', '姓名 / Name', '用户名 / Username', '租户编码 / Tenant', '密码 / Password'],
|
|
rows: [
|
|
['总经理 / GM', '王明', 'wangming', 'xinwang', '123456'],
|
|
['副总/HRD / VP-HRD', '刘伟', 'liuwei', 'xinwang', '123456'],
|
|
['咨询总监 / Consulting Dir.', '陈杰', 'chenjie', 'xinwang', '123456'],
|
|
['RPO总监 / RPO Dir.', '吴刚', 'wugang', 'xinwang', '123456'],
|
|
['HRBP', '何俊', 'hejun', 'xinwang', '123456'],
|
|
['高级顾问 / Sr. Consultant', '刘燕', 'liuyan', 'xinwang', '123456']
|
|
]
|
|
},
|
|
{
|
|
title: 'TurboTalent',
|
|
subtitle: '人才管理 · 盘点 · 发展 / Talent Management',
|
|
url: 'http://62.234.107.180:9002/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: 'TurboTalent 测评 / Assessment',
|
|
subtitle: '在线测评中心 / Online Assessment Center',
|
|
url: 'https://ce.all8ai.top/',
|
|
type: 'table',
|
|
headers: ['角色 / Role', '手机号 / Phone', '密码 / Password', '权限 / Permission'],
|
|
rows: [
|
|
['管理员 / Admin', '13800000000', 'admin123', '全权限 / Full access'],
|
|
['HR 张三 / HR Zhang', '13900001111', '123456', '建团队/导入/分析 / Team/Import/Analytics'],
|
|
['用户 李四 / User Li', '13900002222', '123456', '普通用户 / Standard user'],
|
|
['用户 王五 / User Wang', '13900003333', '123456', '普通用户 / Standard user']
|
|
]
|
|
},
|
|
{
|
|
title: 'TalentMentor',
|
|
subtitle: '企业招聘 · 人才发展 / Recruiting & Talent Development',
|
|
url: 'https://m.hr8ai.top/',
|
|
type: 'text',
|
|
content: '用户可注册测试 / Users can self-register for testing'
|
|
},
|
|
{
|
|
title: 'HRBP 智能分析 / HRBP Analytics',
|
|
subtitle: 'HR 业务伙伴 / HR Business Partner',
|
|
url: 'https://hrbp.all8ai.top/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: '猎头 Agent / Headhunt Agent',
|
|
subtitle: '智能猎头助手 / Smart Headhunting',
|
|
url: 'https://h2agent.opc8ai.com/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: '美雇 / MeiGu',
|
|
subtitle: '劳动关系管理 / Labor Relations Management',
|
|
url: 'https://www.uumeigu.com/',
|
|
type: 'text',
|
|
content: '用户可注册测试 / Users can self-register for testing'
|
|
},
|
|
{
|
|
title: 'SmartResume',
|
|
subtitle: '人岗匹配 / Resume-Job Matching',
|
|
url: 'http://62.234.107.180:9005/',
|
|
type: 'table',
|
|
headers: ['账号 / Account', '密码 / Password'],
|
|
rows: [
|
|
['freedak@163.com', '123456']
|
|
]
|
|
},
|
|
{
|
|
title: '项目风险管控 / Risk Control',
|
|
subtitle: '风险管理系统 / Risk Management System',
|
|
url: 'https://pm.hr8ai.top/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: '政务AI应用中心 / Gov AI Hub',
|
|
subtitle: '政务智能服务 / Government AI Services',
|
|
url: 'https://gov.opc8ai.com/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: 'MaxCount',
|
|
subtitle: '财务记账 / Finance & Accounting',
|
|
url: 'http://62.234.107.180:9001/',
|
|
type: 'text',
|
|
content: 'Login 页面有测试用户 / Test users available on the login page'
|
|
},
|
|
{
|
|
title: '法时时 / FaShiShi',
|
|
subtitle: '法律服务平台 / Legal Services',
|
|
url: 'http://www.fashishi.cn',
|
|
type: 'table',
|
|
headers: ['账号 / Account', '密码 / Password'],
|
|
rows: [
|
|
['13911908280', 'Ruichi888']
|
|
]
|
|
},
|
|
{
|
|
title: '技能人才胜任力 / Skills Assessment',
|
|
subtitle: '技能胜任力评估 / Competency Assessment',
|
|
url: 'https://lianxingtest.feihec.com/',
|
|
type: 'table',
|
|
headers: ['角色 / Role', '账号 / Account', '密码 / Password'],
|
|
rows: [
|
|
['手机号 / Phone', '18811111111', '123321'],
|
|
['管理员 / Admin', 'admin', '123321']
|
|
]
|
|
},
|
|
{
|
|
title: 'K12AI应用中心 / K12 AI Hub',
|
|
subtitle: 'K12 AI 教育应用 / K12 AI Education',
|
|
url: 'http://k12.all8ai.top/',
|
|
type: 'table',
|
|
headers: ['端 / Portal', '地址 / URL'],
|
|
rows: [
|
|
['管理后台 / Admin', 'http://101.96.196.218'],
|
|
['家长端 / Parent', 'http://101.96.196.218:3002'],
|
|
['互动课堂 / Classroom', 'http://101.96.196.218:3001']
|
|
]
|
|
},
|
|
{
|
|
title: '医科大学AI学习中心 / Med AI Center',
|
|
subtitle: '医学AI学习平台 / Medical AI Learning',
|
|
url: 'http://mc.all8ai.top/',
|
|
type: 'text',
|
|
content: '登录地址 / Login URL: http://101.96.196.218:4100/login'
|
|
}
|
|
];
|
|
|
|
/**
|
|
* 渲染帮助弹窗内容，支持表格和文本两种格式。
|
|
*/
|
|
function renderHelpContent() {
|
|
const container = document.getElementById('helpContent');
|
|
container.innerHTML = helpData.map(item => {
|
|
let bodyHtml = '';
|
|
if (item.type === 'table') {
|
|
const thead = item.headers.map(h => `<th>${h}</th>`).join('');
|
|
const tbody = item.rows.map(r =>
|
|
`<tr>${r.map(c => `<td class="copy-cell" onclick="copyToClipboard(this,'${c.replace(/'/g,"\\'")}')">${c}</td>`).join('')}</tr>`
|
|
).join('');
|
|
bodyHtml = `<div class="help-table-wrap"><table class="help-table"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table></div>`;
|
|
} else if (item.type === 'image') {
|
|
bodyHtml = `<div class="flex flex-col items-center gap-2 py-2"><img src="${item.image}" alt="${item.title}" class="contact-qr" /><p class="text-[11px] text-slate-400">${item.content}</p></div>`;
|
|
} else {
|
|
bodyHtml = `<p class="text-[11px] text-slate-400 px-3 py-2">${item.content}</p>`;
|
|
}
|
|
return `
|
|
<div class="help-section overflow-hidden">
|
|
<div class="px-3 py-2 flex items-center justify-between border-b border-white/5">
|
|
<div>
|
|
<span class="text-xs font-bold text-slate-100">${item.title}</span>
|
|
<span class="text-[10px] text-slate-500 ml-2">${item.subtitle}</span>
|
|
</div>
|
|
<a href="${item.url}" target="_blank" rel="noopener noreferrer" class="help-link text-[10px] font-medium">${getHostname(item.url)}</a>
|
|
</div>
|
|
<div class="p-2">${bodyHtml}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
/**
|
|
* 点击复制单元格内容到剪贴板，并显示复制成功反馈。
|
|
*/
|
|
function copyToClipboard(td, text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
const orig = td.textContent;
|
|
td.classList.add('copy-feedback');
|
|
td.textContent = '已复制 / Copied!';
|
|
setTimeout(() => {
|
|
td.classList.remove('copy-feedback');
|
|
td.textContent = orig;
|
|
}, 1200);
|
|
}).catch(() => {});
|
|
}
|
|
|
|
/**
|
|
* 打开或关闭帮助弹窗。
|
|
*/
|
|
function toggleHelpModal(show) {
|
|
const overlay = document.getElementById('helpOverlay');
|
|
const aurora = document.querySelector('.aurora');
|
|
if (show) {
|
|
renderHelpContent();
|
|
overlay.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
if (aurora) aurora.classList.add('aurora-paused');
|
|
document.body.classList.add('gpu-off');
|
|
} else {
|
|
overlay.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
if (aurora) aurora.classList.remove('aurora-paused');
|
|
document.body.classList.remove('gpu-off');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') { toggleHelpModal(false); toggleContactModal(false); }
|
|
});
|
|
|
|
/**
|
|
* 打开或关闭联系方式弹窗。
|
|
*/
|
|
function toggleContactModal(show) {
|
|
const overlay = document.getElementById('contactOverlay');
|
|
const aurora = document.querySelector('.aurora');
|
|
if (show) {
|
|
overlay.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
if (aurora) aurora.classList.add('aurora-paused');
|
|
document.body.classList.add('gpu-off');
|
|
} else {
|
|
overlay.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
if (aurora) aurora.classList.remove('aurora-paused');
|
|
document.body.classList.remove('gpu-off');
|
|
}
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme');
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('portal-theme', next);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|