selfrelease
e76ed2d57e
- 应用按6个分组显示：人力资源、企业管理、AI应用中心、文创、工具、个人 - 新增SmartResume人岗匹配应用 - AI图标改为联系人图标，弹窗展示高欣/王立刚两张二维码 - Header品牌改为All by AI / all8ai.top - 手机端取消轮播，改为竖向列表 - 帮助弹窗表格点击复制、手机端横向滚动 - 副标题手机端中英文换行 - 轮播按钮裁切修复
1208 lines
48 KiB
HTML
1208 lines
48 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 统一门户，一站式访问所有智能应用" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--radius: 0.625rem;
|
|
color-scheme: dark;
|
|
}
|
|
* { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
|
|
html { font-size: 110%; }
|
|
body {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
color: oklch(0.92 0.01 260);
|
|
background:
|
|
radial-gradient(circle at 15% 8%, oklch(0.28 0.08 275 / 0.55), transparent 32rem),
|
|
radial-gradient(circle at 85% 10%, oklch(0.25 0.07 210 / 0.5), transparent 34rem),
|
|
radial-gradient(circle at 50% 88%, oklch(0.22 0.06 170 / 0.4), transparent 34rem),
|
|
linear-gradient(160deg, oklch(0.14 0.02 265), oklch(0.1 0.015 260) 60%, oklch(0.08 0.01 255));
|
|
}
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(oklch(0.65 0.05 265 / 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.65 0.05 265 / 0.06) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
mask-image: radial-gradient(circle at 50% 20%, black, transparent 78%);
|
|
z-index: 0;
|
|
}
|
|
.aurora {
|
|
position: fixed;
|
|
inset: -30%;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at 22% 20%, oklch(0.5 0.2 275 / 0.28), transparent 24rem),
|
|
radial-gradient(circle at 78% 18%, oklch(0.48 0.16 210 / 0.24), transparent 28rem),
|
|
radial-gradient(circle at 54% 72%, oklch(0.5 0.15 165 / 0.2), transparent 28rem);
|
|
filter: blur(60px) saturate(1.3);
|
|
animation: auroraShift 18s ease-in-out infinite alternate;
|
|
z-index: 0;
|
|
}
|
|
main {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.glass-header {
|
|
background: oklch(0.1 0.015 260 / 0.95);
|
|
border-bottom: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
box-shadow: 0 10px 34px oklch(0 0 0 / 0.4);
|
|
}
|
|
.brand-mark {
|
|
position: relative;
|
|
background: linear-gradient(135deg, oklch(0.62 0.24 275), oklch(0.66 0.18 230));
|
|
box-shadow: 0 8px 24px oklch(0.55 0.2 265 / 0.3);
|
|
}
|
|
.brand-mark::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -6px;
|
|
border-radius: 0.9rem;
|
|
background: inherit;
|
|
filter: blur(14px);
|
|
opacity: 0.3;
|
|
z-index: -1;
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, oklch(0.72 0.18 275), oklch(0.68 0.16 235), oklch(0.7 0.14 185));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.hero-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid oklch(0.32 0.04 265 / 0.55);
|
|
background: linear-gradient(145deg, oklch(0.16 0.02 265 / 0.7), oklch(0.12 0.015 260 / 0.5));
|
|
box-shadow: 0 24px 70px oklch(0 0 0 / 0.35), inset 0 1px 0 oklch(0.4 0.03 265 / 0.4);
|
|
backdrop-filter: blur(20px) saturate(1.2);
|
|
}
|
|
.hero-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
background: conic-gradient(from 160deg at 50% 50%, transparent, oklch(0.6 0.2 275 / 0.22), transparent, oklch(0.6 0.16 200 / 0.16), transparent);
|
|
opacity: 0.7;
|
|
animation: spinGlow 12s linear infinite;
|
|
}
|
|
.hero-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.stat-pill {
|
|
background: oklch(0.18 0.02 265 / 0.6);
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
box-shadow: inset 0 1px 0 oklch(0.35 0.03 265 / 0.3);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.portal-card {
|
|
--mx: 50%;
|
|
--my: 0%;
|
|
--rx: 0deg;
|
|
--ry: 0deg;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
background: linear-gradient(145deg, oklch(0.17 0.02 265 / 0.92), oklch(0.13 0.012 260 / 0.88));
|
|
box-shadow: 0 18px 48px oklch(0 0 0 / 0.3), inset 0 1px 0 oklch(0.35 0.03 265 / 0.35);
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease;
|
|
will-change: transform;
|
|
}
|
|
.portal-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
pointer-events: none;
|
|
background: radial-gradient(circle 20rem at var(--mx) var(--my), color-mix(in oklch, var(--accent) 30%, transparent), transparent 40%);
|
|
opacity: 0;
|
|
transition: opacity 0.28s ease;
|
|
}
|
|
.portal-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: linear-gradient(115deg, transparent 20%, oklch(0.8 0.02 260 / 0.12) 45%, transparent 70%);
|
|
transform: translateX(-125%);
|
|
transition: transform 0.65s ease;
|
|
}
|
|
.portal-card:hover {
|
|
transform: translateY(-9px) rotateX(var(--rx)) rotateY(var(--ry));
|
|
border-color: color-mix(in oklch, var(--accent) 48%, oklch(0.3 0.03 265));
|
|
box-shadow: 0 26px 70px color-mix(in oklch, var(--accent) 28%, transparent), inset 0 1px 0 oklch(0.4 0.03 265 / 0.4);
|
|
}
|
|
.portal-card:hover::before { opacity: 1; }
|
|
.portal-card:hover::after { transform: translateX(125%); }
|
|
.icon-wrap {
|
|
position: relative;
|
|
color: white;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
box-shadow: 0 12px 30px color-mix(in oklch, var(--accent) 30%, transparent);
|
|
transition: transform 0.32s ease, box-shadow 0.32s ease;
|
|
}
|
|
.icon-wrap::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -8px;
|
|
border-radius: 1.2rem;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
opacity: 0.12;
|
|
z-index: -1;
|
|
}
|
|
.icon-wrap svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
stroke-width: 1.9;
|
|
}
|
|
.portal-card:hover .icon-wrap {
|
|
transform: translateZ(28px) scale(1.08) rotate(-4deg);
|
|
box-shadow: 0 18px 40px color-mix(in oklch, var(--accent) 38%, transparent);
|
|
}
|
|
.tag-pill {
|
|
color: var(--accent);
|
|
background: color-mix(in oklch, var(--accent) 14%, oklch(0.15 0.015 260));
|
|
border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
|
|
}
|
|
.launch-link {
|
|
color: var(--accent);
|
|
background: color-mix(in oklch, var(--accent) 12%, oklch(0.15 0.015 260));
|
|
border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
|
|
transition: transform 0.25s ease, background 0.25s ease;
|
|
}
|
|
.portal-card:hover .launch-link {
|
|
transform: translateX(2px);
|
|
background: color-mix(in oklch, var(--accent) 18%, oklch(0.15 0.015 260));
|
|
}
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(22px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
@keyframes auroraShift {
|
|
from { transform: translate3d(-2%, -1%, 0) scale(1); }
|
|
to { transform: translate3d(2%, 3%, 0) scale(1.08); }
|
|
}
|
|
@keyframes spinGlow {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeInUp 0.64s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
opacity: 0;
|
|
}
|
|
.carousel-wrapper {
|
|
position: relative;
|
|
overflow: visible;
|
|
width: 100%;
|
|
padding: 0 2.5rem;
|
|
}
|
|
@media (max-width: 520px) {
|
|
.carousel-wrapper { padding: 0 2rem; }
|
|
}
|
|
.carousel-viewport {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.carousel-track {
|
|
display: flex;
|
|
width: 100%;
|
|
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.group-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
color: oklch(0.72 0.04 260);
|
|
padding: 0.5rem 0 0.25rem;
|
|
border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.carousel-page {
|
|
flex: 0 0 100%;
|
|
min-width: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
padding: 0 0.25rem;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.carousel-page { grid-template-columns: repeat(2, 1fr); }
|
|
.carousel-wrapper { display: none; }
|
|
}
|
|
@media (max-width: 520px) {
|
|
.carousel-page { grid-template-columns: 1fr; }
|
|
}
|
|
/* 手机端竖向列表 */
|
|
.mobile-app-list { display: none; }
|
|
@media (max-width: 768px) {
|
|
.mobile-app-list { display: block; }
|
|
}
|
|
.mobile-group-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
color: oklch(0.72 0.04 260);
|
|
padding: 0.75rem 0 0.25rem;
|
|
border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.mobile-app-list .portal-card {
|
|
margin-bottom: 0.75rem;
|
|
height: auto;
|
|
min-height: 120px;
|
|
}
|
|
.carousel-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: oklch(0.7 0.02 260);
|
|
background: oklch(0.15 0.015 260 / 0.8);
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.carousel-btn:hover {
|
|
color: oklch(0.9 0.05 260);
|
|
background: oklch(0.2 0.02 260 / 0.9);
|
|
border-color: oklch(0.4 0.05 265 / 0.6);
|
|
}
|
|
.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.4rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
.carousel-dot {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
background: oklch(0.3 0.02 265 / 0.5);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
padding: 0;
|
|
}
|
|
.carousel-dot.active {
|
|
background: oklch(0.68 0.16 235);
|
|
width: 1.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.contact-section {
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
background: linear-gradient(145deg, oklch(0.17 0.02 265 / 0.92), oklch(0.13 0.012 260 / 0.88));
|
|
border-radius: 1rem;
|
|
box-shadow: 0 18px 48px oklch(0 0 0 / 0.3), inset 0 1px 0 oklch(0.35 0.03 265 / 0.35);
|
|
}
|
|
.contact-qr {
|
|
border-radius: 0.625rem;
|
|
border: 2px solid oklch(0.35 0.04 265 / 0.6);
|
|
}
|
|
@media (max-width: 520px) {
|
|
.contact-qr { width: 110px !important; height: 150px !important; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.hero-subtitle { white-space: normal !important; }
|
|
.hero-subtitle .sep { display: block; height: 0.25rem; }
|
|
}
|
|
@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;
|
|
}
|
|
}
|
|
.help-btn {
|
|
color: oklch(0.7 0.02 260);
|
|
background: oklch(0.15 0.015 260 / 0.6);
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.5);
|
|
transition: all 0.25s ease;
|
|
}
|
|
.help-btn:hover {
|
|
color: oklch(0.85 0.05 260);
|
|
background: oklch(0.2 0.02 260 / 0.7);
|
|
border-color: oklch(0.4 0.05 265 / 0.6);
|
|
}
|
|
.help-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: oklch(0.05 0.01 255);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.help-overlay { padding: 0.5rem; }
|
|
.help-modal { max-width: 100% !important; border-radius: 0.75rem; }
|
|
}
|
|
.help-overlay.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
.help-modal {
|
|
background: oklch(0.13 0.015 260 / 0.98);
|
|
border: 1px solid oklch(0.3 0.03 265 / 0.55);
|
|
box-shadow: 0 30px 80px oklch(0 0 0 / 0.5);
|
|
max-width: 64rem;
|
|
width: 100%;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
border-radius: 1rem;
|
|
transform: translateY(20px) scale(0.97);
|
|
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
will-change: transform;
|
|
}
|
|
.help-overlay.active .help-modal {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
.help-modal::-webkit-scrollbar { width: 6px; }
|
|
.help-modal::-webkit-scrollbar-track { background: transparent; }
|
|
.help-modal::-webkit-scrollbar-thumb { background: oklch(0.3 0.03 265 / 0.5); border-radius: 3px; }
|
|
.help-section {
|
|
border: 1px solid oklch(0.25 0.02 265 / 0.4);
|
|
background: oklch(0.1 0.01 260 / 0.5);
|
|
border-radius: 0.625rem;
|
|
}
|
|
.help-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 11px;
|
|
}
|
|
.help-table-wrap {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.help-table th {
|
|
background: oklch(0.15 0.015 260 / 0.6);
|
|
color: oklch(0.7 0.02 260);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid oklch(0.25 0.02 265 / 0.4);
|
|
white-space: nowrap;
|
|
}
|
|
.help-table td {
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid oklch(0.2 0.015 265 / 0.3);
|
|
color: oklch(0.8 0.01 260);
|
|
}
|
|
.help-table td.copy-cell {
|
|
cursor: pointer;
|
|
transition: color 0.2s ease, background 0.2s ease;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.help-table td.copy-cell:hover {
|
|
color: oklch(0.9 0.05 260);
|
|
background: oklch(0.2 0.03 265 / 0.4);
|
|
}
|
|
.help-table td.copy-cell:active {
|
|
background: oklch(0.25 0.04 265 / 0.5);
|
|
}
|
|
.copy-feedback {
|
|
color: oklch(0.72 0.18 150) !important;
|
|
}
|
|
.help-table tr:last-child td { border-bottom: none; }
|
|
.aurora-paused {
|
|
animation-play-state: paused !important;
|
|
filter: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
.gpu-off .portal-card {
|
|
backdrop-filter: none !important;
|
|
}
|
|
.gpu-off .glass-header {
|
|
backdrop-filter: none !important;
|
|
}
|
|
.help-link {
|
|
color: oklch(0.68 0.16 235);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.help-link:hover { color: oklch(0.78 0.16 235); text-decoration: underline; }
|
|
</style>
|
|
</head>
|
|
<body class="antialiased relative">
|
|
<div class="aurora" aria-hidden="true"></div>
|
|
|
|
<!-- Header -->
|
|
<header class="glass-header sticky top-0 z-50 h-14">
|
|
<div class="container mx-auto max-w-6xl px-4 h-full flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="brand-mark w-9 h-9 rounded-xl flex items-center justify-center text-white">
|
|
<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"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 9.2L12 7.25l3.5 1.95v3.6L12 14.75l-3.5-1.95v-3.6z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-extrabold tracking-tight text-slate-100">All by AI</div>
|
|
<div class="text-[9px] uppercase tracking-[0.22em] text-slate-500 leading-none hidden sm:block">all8ai.top</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="hidden md:inline-flex items-center gap-2 rounded-full bg-white/5 px-2.5 py-1 text-[11px] font-semibold text-slate-400 ring-1 ring-white/10">
|
|
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400 shadow-[0_0_12px_oklch(0.72_0.18_150)]"></span>
|
|
20 个智能应用在线 / 20 Apps Online
|
|
</span>
|
|
<button class="help-btn w-7 h-7 rounded-full flex items-center justify-center" onclick="toggleHelpModal(true)" aria-label="帮助 / Help">
|
|
<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="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white shadow-lg cursor-pointer hover:ring-2 hover:ring-violet-400/50 transition-all" onclick="toggleContactModal(true)" aria-label="联系方式 / Contact">
|
|
<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-6 md:py-8">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="text-center mb-5 md:mb-6 animate-fade-in">
|
|
<h1 class="text-xl md:text-2xl font-extrabold tracking-tight mb-1">
|
|
<span class="gradient-text">AI 智能应用中心 / AI Application Hub</span>
|
|
</h1>
|
|
<p class="hero-subtitle text-slate-500 text-[10px] md:text-xs mx-auto leading-relaxed whitespace-nowrap overflow-hidden text-ellipsis">
|
|
一站式访问所有智能应用，让 AI 赋能企业每一个环节<span class="sep"> · </span>One-stop access to all AI apps, empowering every business workflow
|
|
</p>
|
|
</section>
|
|
|
|
<!-- App Grid -->
|
|
<section class="carousel-wrapper" id="carouselWrapper">
|
|
<button class="carousel-btn prev" id="carouselPrev" aria-label="上一页 / Previous" onclick="changePage(-1)">
|
|
<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.5" 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="下一页 / Next" onclick="changePage(1)">
|
|
<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.5" 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="mt-10 pt-5 border-t border-white/10 text-center text-[11px] text-slate-500">
|
|
<p>© 2026 AI 应用门户 · AI Application Portal</p>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- 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>
|
|
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: '技能人才胜任力',
|
|
subtitle: '技能胜任力评估 / Skills Assessment',
|
|
desc: '技能人才胜任力评估系统，科学测评技能水平 · Technical skill competency assessment system',
|
|
url: 'https://lianxingtest.feihec.com/',
|
|
icon: 'clipboard',
|
|
accent: 'oklch(0.58 0.18 210)',
|
|
accent2: 'oklch(0.65 0.16 235)',
|
|
tag: '技能 / Skills'
|
|
},
|
|
{
|
|
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'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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: 'MaxCount',
|
|
subtitle: '财务记账 / Finance & Accounting',
|
|
desc: '智能财务记账系统，高效管理企业收支与账目 · Smart financial bookkeeping for enterprise income and expenses',
|
|
url: 'http://62.234.107.180:9001/',
|
|
icon: 'chart',
|
|
accent: 'oklch(0.56 0.18 150)',
|
|
accent2: 'oklch(0.62 0.16 180)',
|
|
tag: '财务 / Finance'
|
|
},
|
|
{
|
|
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'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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 || '示例 / Demo';
|
|
} catch (e) {
|
|
return '示例 / Demo';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 根据鼠标位置更新卡片高光与 3D 倾斜参数。
|
|
*/
|
|
function handleCardMove(event) {
|
|
const card = event.currentTarget;
|
|
if (card._rafId) return;
|
|
card._rafId = requestAnimationFrame(() => {
|
|
card._rafId = null;
|
|
const rect = card.getBoundingClientRect();
|
|
const x = event.clientX - rect.left;
|
|
const y = event.clientY - rect.top;
|
|
const rx = ((y / rect.height) - 0.5) * -7;
|
|
const ry = ((x / rect.width) - 0.5) * 7;
|
|
card.style.setProperty('--mx', `${x}px`);
|
|
card.style.setProperty('--my', `${y}px`);
|
|
card.style.setProperty('--rx', `${rx.toFixed(2)}deg`);
|
|
card.style.setProperty('--ry', `${ry.toFixed(2)}deg`);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 鼠标离开时重置卡片 3D 倾斜状态，避免视觉残留。
|
|
*/
|
|
function resetCardMove(event) {
|
|
const card = event.currentTarget;
|
|
card.style.setProperty('--rx', '0deg');
|
|
card.style.setProperty('--ry', '0deg');
|
|
}
|
|
|
|
/**
|
|
* 渲染单个应用入口卡片，并绑定新窗口跳转和悬浮动效。
|
|
*/
|
|
function createAppCard(app, i) {
|
|
const card = document.createElement('a');
|
|
card.href = app.url;
|
|
card.target = '_blank';
|
|
card.rel = 'noopener noreferrer';
|
|
card.className = 'portal-card group rounded-[1rem] p-3.5 flex h-[220px] flex-col animate-fade-in';
|
|
card.style.cssText = `--accent: ${app.accent}; --accent-2: ${app.accent2}; animation-delay: ${i * 0.08}s;`;
|
|
card.innerHTML = `
|
|
<div class="relative z-10 flex h-full flex-col">
|
|
<div class="mb-2 flex items-start justify-between">
|
|
<div class="icon-wrap w-9 h-9 rounded-lg flex items-center justify-center">
|
|
${getIcon(app.icon)}
|
|
</div>
|
|
<span class="tag-pill rounded-full px-2 py-0.5 text-[10px] font-bold">${app.tag}</span>
|
|
</div>
|
|
<h3 class="text-sm font-extrabold tracking-tight text-slate-100 transition-colors group-hover:text-white">${app.name}</h3>
|
|
<p class="mt-0.5 text-[11px] font-semibold text-slate-400">${app.subtitle}</p>
|
|
<p class="mt-1 flex-1 text-[11px] leading-relaxed text-slate-500">${app.desc}</p>
|
|
<div class="mt-2.5 flex items-center justify-between gap-2 border-t border-white/10 pt-2">
|
|
<span class="truncate text-[10px] font-medium text-slate-500">${getHostname(app.url)}</span>
|
|
<span class="launch-link inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold">
|
|
进入应用 / Launch
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17 17 7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h8v8"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
card.addEventListener('mousemove', handleCardMove);
|
|
card.addEventListener('mouseleave', resetCardMove);
|
|
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';
|
|
const titleEl = document.createElement('div');
|
|
titleEl.className = 'group-title';
|
|
titleEl.textContent = group.title;
|
|
pageDiv.appendChild(titleEl);
|
|
const innerGrid = document.createElement('div');
|
|
innerGrid.style.display = 'grid';
|
|
innerGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
|
innerGrid.style.gap = '1rem';
|
|
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 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');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|