Skip to content

Create advanced dark theme financial services webpage #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
syf47 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Create advanced dark theme financial services webpage #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
340 changes: 340 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,340 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark only" />
<title>Aurora Finance — 现代金融服务</title>
<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&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-bJQGQX0bQ8aQmQ8Uo+QXb3F0cM0mF0o3m7Xv0f2s5m9oQm7kYg3o9uC4j9fJb9YQ9m0f5H0Z3xV9Y3p7o4nG5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./styles.css" />
<script defer src="./script.js"></script>
</head>
<body>
<!-- Background accent gradients -->
<div class="bg-accents" aria-hidden="true"></div>
<!-- Floating decorative orbs -->
<div class="orbs" aria-hidden="true">
<span class="orb orb-1"></span>
<span class="orb orb-2"></span>
<span class="orb orb-3"></span>
<span class="orb orb-4"></span>
<span class="orb orb-5"></span>
<span class="orb orb-6"></span>
</div>

<!-- Sticky Navbar -->
<header class="navbar glass">
<div class="container nav-inner">
<a href="#hero" class="brand interactive">
<span class="brand-mark"></span>
<span class="brand-name">Aurora<span class="brand-accent">Finance</span></span>
</a>
<nav class="nav-links">
<a class="nav-link interactive" href="#services">服务</a>
<a class="nav-link interactive" href="#process">流程</a>
<a class="nav-link interactive" href="#features">优势</a>
<a class="nav-link interactive" href="#stats">数据</a>
<a class="nav-link interactive" href="#contact">联系</a>
</nav>
<div class="nav-cta">
<a href="#contact" class="btn btn-primary interactive">预约咨询</a>
</div>
</div>
</header>

<main>
<!-- Hero Section -->
<section id="hero" class="section hero">
<div class="container hero-grid">
<div class="hero-content" data-animate="fadeInUp" data-delay="0.2s">
<div class="badge glass once-badge animate-once" data-animate="fadeInDown" data-delay="0.1s">
<span class="badge-dot"></span>
企业级 · 数字金融解决方案
</div>
<h1 class="hero-title gradient-text" data-animate="fadeInUp" data-delay="0.25s">
以科技驱动的下一代金融服务
</h1>
<p class="hero-subtitle" data-animate="fadeInUp" data-delay="0.35s">
资产管理、风险控制、支付清结算与合规风控的一体化平台。更快响应、更高安全、更优体验。
</p>
<div class="hero-actions" data-animate="fadeInUp" data-delay="0.45s">
<a href="#contact" class="btn btn-primary interactive">立即开始</a>
<a href="#services" class="btn btn-ghost interactive">了解更多</a>
</div>
<div class="hero-stats" data-animate="fadeInUp" data-delay="0.55s">
<div class="stat glass interactive">
<div class="stat-value">$12B+</div>
<div class="stat-label">管理资产规模</div>
</div>
<div class="stat glass interactive">
<div class="stat-value">99.99%</div>
<div class="stat-label">系统可用性</div>
</div>
<div class="stat glass interactive">
<div class="stat-value">120ms</div>
<div class="stat-label">交易响应延迟</div>
</div>
</div>
</div>
<div class="hero-visual" data-animate="fadeIn" data-delay="0.3s">
<div class="hero-card glass interactive">
<div class="chart-header">
<span>实时资金流</span>
<span class="status-pill">LIVE</span>
</div>
<div class="chart-area">
<svg viewBox="0 0 420 160" class="mini-chart" role="img" aria-label="增长曲线">
<defs>
<linearGradient id="grad-line" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#22d3ee" />
<stop offset="50%" stop-color="#6366f1" />
<stop offset="100%" stop-color="#f472b6" />
</linearGradient>
<linearGradient id="grad-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(99,102,241,0.35)" />
<stop offset="100%" stop-color="rgba(99,102,241,0)" />
</linearGradient>
</defs>
<path d="M0 120 C 40 100, 80 140, 120 110 S 200 60, 240 85 S 320 140, 360 110 S 420 70, 420 70" stroke="url(#grad-line)" stroke-width="3" fill="none" />
<path d="M0 160 L 0 120 C 40 100, 80 140, 120 110 S 200 60, 240 85 S 320 140, 360 110 S 420 70, 420 70 L 420 160 Z" fill="url(#grad-fill)" />
</svg>
</div>
<div class="metric-row">
<div class="metric">
<span class="metric-label">今日净流入</span>
<span class="metric-value">$8.7M</span>
</div>
<div class="metric">
<span class="metric-label">风控拦截</span>
<span class="metric-value">1,284</span>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Stats Section -->
<section id="stats" class="section">
<div class="container section-header">
<h2 class="section-title" data-animate="fadeInUp" data-delay="0.1s">关键数据</h2>
<p class="section-subtitle" data-animate="fadeInUp" data-delay="0.2s">以数据为依据，验证可靠与高效</p>
</div>
<div class="container stats-grid">
<div class="stat-card glass interactive" data-animate="fadeInUp" data-delay="0.15s">
<div class="stat-card-label">日交易额</div>
<div class="stat-card-value">$1.2B</div>
<div class="stat-card-trend positive">+8.3%</div>
</div>
<div class="stat-card glass interactive" data-animate="fadeInUp" data-delay="0.25s">
<div class="stat-card-label">合规通过率</div>
<div class="stat-card-value">98.7%</div>
<div class="stat-card-trend">稳健</div>
</div>
<div class="stat-card glass interactive" data-animate="fadeInUp" data-delay="0.35s">
<div class="stat-card-label">客户满意度</div>
<div class="stat-card-value">4.9/5</div>
<div class="stat-card-trend positive">NPS 76</div>
</div>
<div class="stat-card glass interactive" data-animate="fadeInUp" data-delay="0.45s">
<div class="stat-card-label">覆盖市场</div>
<div class="stat-card-value">32+</div>
<div class="stat-card-trend">全球</div>
</div>
</div>
</section>

<!-- Services Section -->
<section id="services" class="section">
<div class="container section-header">
<h2 class="section-title" data-animate="fadeInUp" data-delay="0.1s">核心服务</h2>
<p class="section-subtitle" data-animate="fadeInUp" data-delay="0.2s">覆盖机构与企业级金融业务的全链条能力</p>
</div>
<div class="container cards-grid">
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.15s">
<div class="card-icon icon-indigo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 5h18v2H3V5zm2 4h14v10H5V9zm2 2v6h10v-6H7z"/></svg>
</div>
<h3 class="card-title">资产管理</h3>
<p class="card-desc">多策略资产配置引擎，支持自动再平衡、风险预算与绩效归因。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.2s">
<div class="card-icon icon-cyan">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18L19 6v4c0 4.63-3.17 9.23-7 10.61C8.17 19.23 5 14.63 5 10V6l7-2.82z"/></svg>
</div>
<h3 class="card-title">风险控制</h3>
<p class="card-desc">实时风控规则、异常检测与自动化处置，保障业务稳健运行。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.25s">
<div class="card-icon icon-pink">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 6h18v2H3V6zm0 5h12v2H3v-2zm0 5h18v2H3v-2z"/></svg>
</div>
<h3 class="card-title">支付清结算</h3>
<p class="card-desc">高吞吐、低延迟支付通道，覆盖多币种、多渠道清结算。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.3s">
<div class="card-icon icon-emerald">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2l4 4H8l4-4zm0 20l-4-4h8l-4 4zM4 12l4-4v8l-4-4zm16 0l-4 4V8l4 4z"/></svg>
</div>
<h3 class="card-title">合规模块</h3>
<p class="card-desc">KYC/AML、审计追踪与数据留痕，满足各地合规要求。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.35s">
<div class="card-icon icon-indigo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3a9 9 0 100 18 9 9 0 000-18zm1 4v5h4v2h-6V7h2z"/></svg>
</div>
<h3 class="card-title">量化引擎</h3>
<p class="card-desc">低代码策略回测与执行框架，毫秒级下单与风控协同。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
<article class="card glass interactive" data-animate="fadeInUp" data-delay="0.4s">
<div class="card-icon icon-cyan">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 3h14v2H5V3zm2 4h10v2H7V7zm-2 4h14v2H5v-2zm2 4h10v2H7v-2z"/></svg>
</div>
<h3 class="card-title">数据洞察</h3>
<p class="card-desc">跨域数据融合、可视化洞察与AI驱动的预测分析。</p>
<a class="card-link interactive" href="#">了解详情</a>
</article>
</div>
</section>

<!-- Process Section -->
<section id="process" class="section">
<div class="container section-header">
<h2 class="section-title" data-animate="fadeInUp" data-delay="0.1s">交付流程</h2>
<p class="section-subtitle" data-animate="fadeInUp" data-delay="0.2s">标准化流程，快速落地业务价值</p>
</div>
<div class="container steps">
<div class="step glass interactive" data-animate="fadeInUp" data-delay="0.15s">
<span class="step-index">01</span>
<h3 class="step-title">需求梳理</h3>
<p class="step-desc">厘清目标与约束，制定里程碑与评估指标。</p>
</div>
<div class="step glass interactive" data-animate="fadeInUp" data-delay="0.25s">
<span class="step-index">02</span>
<h3 class="step-title">方案设计</h3>
<p class="step-desc">架构与合规双评审，确保安全与扩展性。</p>
</div>
<div class="step glass interactive" data-animate="fadeInUp" data-delay="0.35s">
<span class="step-index">03</span>
<h3 class="step-title">实施交付</h3>
<p class="step-desc">灰度上线、A/B 验证与性能调优。</p>
</div>
<div class="step glass interactive" data-animate="fadeInUp" data-delay="0.45s">
<span class="step-index">04</span>
<h3 class="step-title">持续运营</h3>
<p class="step-desc">SLA 保障与监管跟进，持续价值创造。</p>
</div>
</div>
</section>

<!-- Features Section -->
<section id="features" class="section">
<div class="container section-header">
<h2 class="section-title" data-animate="fadeInUp" data-delay="0.1s">为什么选择我们</h2>
<p class="section-subtitle" data-animate="fadeInUp" data-delay="0.2s">专业与科技的平衡，成就可靠与高效</p>
</div>
<div class="container features-grid">
<div class="feature glass interactive" data-animate="fadeInUp" data-delay="0.15s">
<div class="feature-icon icon-emerald">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/></svg>
</div>
<h3 class="feature-title">安全为先</h3>
<p class="feature-desc">零信任安全架构、密钥托管与加密审计，全面守护资产。</p>
</div>
<div class="feature glass interactive" data-animate="fadeInUp" data-delay="0.25s">
<div class="feature-icon icon-indigo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 7V3L1 9l11 6 9-4.91V17h2V9L12 3v4z"/></svg>
</div>
<h3 class="feature-title">高性能</h3>
<p class="feature-desc">分布式计算与内存队列，极致吞吐与低抖动延迟。</p>
</div>
<div class="feature glass interactive" data-animate="fadeInUp" data-delay="0.35s">
<div class="feature-icon icon-cyan">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4l-8 8h5v8h6v-8h5z"/></svg>
</div>
<h3 class="feature-title">可扩展</h3>
<p class="feature-desc">模块化能力中心与开放 API，灵活适配业务增长。</p>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="section">
<div class="container section-header">
<h2 class="section-title" data-animate="fadeInUp" data-delay="0.1s">联系咨询</h2>
<p class="section-subtitle" data-animate="fadeInUp" data-delay="0.2s">留下您的需求，我们将在 24 小时内与您沟通</p>
</div>
<div class="container contact-grid">
<form class="contact-form glass" data-animate="fadeInUp" data-delay="0.25s">
<div class="form-row">
<label for="name">姓名</label>
<input id="name" name="name" type="text" placeholder="您的姓名" required />
</div>
<div class="form-row">
<label for="email">邮箱</label>
<input id="email" name="email" type="email" placeholder="name@company.com" required />
</div>
<div class="form-row">
<label for="company">公司</label>
<input id="company" name="company" type="text" placeholder="公司名称" />
</div>
<div class="form-row">
<label for="topic">咨询主题</label>
<select id="topic" name="topic">
<option>资产管理</option>
<option>风险控制</option>
<option>支付清结算</option>
<option>合规/审计</option>
<option>其他</option>
</select>
</div>
<div class="form-row full">
<label for="message">需求描述</label>
<textarea id="message" name="message" rows="5" placeholder="请简要描述您的业务背景、目标与时间计划……"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary interactive">提交需求</button>
<p class="form-note">提交即表示同意《隐私政策》</p>
</div>
</form>
<aside class="contact-aside" data-animate="fadeInUp" data-delay="0.35s">
<div class="aside-card glass interactive">
<h3>与专家对接</h3>
<p>我们提供 1v1 解决方案评估与演示，帮助您快速匹配最佳实践。</p>
<ul class="contact-list">
<li><span class="dot dot-indigo"></span>安全评估与合规咨询</li>
<li><span class="dot dot-cyan"></span>系统架构与性能优化</li>
<li><span class="dot dot-emerald"></span>数据与AI应用落地</li>
</ul>
</div>
</aside>
</div>
</section>
</main>

<footer class="footer glass">
<div class="container footer-inner">
<div class="footer-brand">
<span class="brand-mark"></span>
<span class="brand-name">Aurora<span class="brand-accent">Finance</span></span>
</div>
<nav class="footer-links">
<a class="interactive" href="#services">服务</a>
<a class="interactive" href="#features">优势</a>
<a class="interactive" href="#process">流程</a>
<a class="interactive" href="#stats">数据</a>
<a class="interactive" href="#contact">联系</a>
</nav>
<p class="copyright">© <span id="year"></span> Aurora Finance. 保留所有权利。</p>
</div>
</footer>
</body>
</html>
36 changes: 36 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
document.addEventListener('DOMContentLoaded', () => {
// Animate.css on-scroll, play once
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
const el = entry.target;
if (el.dataset.animated === 'true') {
obs.unobserve(el);
return;
}
const anim = el.dataset.animate || 'fadeInUp';
const delay = el.dataset.delay || '0s';
el.style.setProperty('--animate-delay', delay);
el.classList.add('animate__animated', `animate__${anim}`);
el.dataset.animated = 'true';
// ensure it only plays once
obs.unobserve(el);
});
}, { root: null, threshold: 0.15 });

document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));

// Navbar scrolled shadow state
const navbar = document.querySelector('.navbar');
const updateNav = () => {
if (!navbar) return;
if (window.scrollY > 10) navbar.classList.add('scrolled');
else navbar.classList.remove('scrolled');
};
window.addEventListener('scroll', updateNav, { passive: true });
updateNav();

// Footer dynamic year
const year = document.getElementById('year');
if (year) year.textContent = new Date().getFullYear();
});
Loading