ghol/Ai-Single-Page
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

z.ai 写的网站建设中的页面

Browse Source
This commit is contained in:
ghol
2025-10-11 18:33:54 +00:00
commit 5882c91bb9
1 changed files with 687 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
z.ai/coming-soon.html
+687
View File
@@ -0,0 +1,687 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站建设中 - 敬请期待</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--accent-color: #f093fb;
--text-primary: #2d3748;
--text-secondary: #718096;
--bg-light: rgba(255, 255, 255, 0.95);
--shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
position: relative;
}
/* 动态背景装饰 */
.bg-decoration {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.floating-shape {
position: absolute;
opacity: 0.1;
animation: float 20s infinite ease-in-out;
}
.shape-1 {
width: 300px;
height: 300px;
background: linear-gradient(45deg, #f093fb, #f5576c);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: -150px;
left: -150px;
animation-delay: 0s;
}
.shape-2 {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #4facfe, #00f2fe);
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
bottom: -100px;
right: -100px;
animation-delay: 5s;
}
.shape-3 {
width: 150px;
height: 150px;
background: linear-gradient(45deg, #fa709a, #fee140);
border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
top: 50%;
left: 10%;
animation-delay: 10s;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
33% {
transform: translate(30px, -30px) rotate(120deg);
}
66% {
transform: translate(-20px, 20px) rotate(240deg);
}
}
/* 主容器 */
.container {
position: relative;
z-index: 1;
background: var(--bg-light);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 60px 40px;
box-shadow: var(--shadow);
max-width: 600px;
width: 90%;
text-align: center;
animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Logo区域 */
.logo-container {
margin-bottom: 30px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.logo {
width: 80px;
height: 80px;
margin: 0 auto;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: white;
position: relative;
overflow: hidden;
}
.logo::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
/* 标题和描述 */
h1 {
font-size: 2.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
font-weight: 700;
}
.subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 40px;
line-height: 1.6;
}
/* 进度条 */
.progress-container {
margin-bottom: 40px;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
border-radius: 10px;
width: 0%;
animation: progress 3s ease-out forwards;
position: relative;
overflow: hidden;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes progress {
to {
width: 75%;
}
}
.progress-text {
margin-top: 10px;
color: var(--text-secondary);
font-size: 0.9rem;
}
/* 倒计时 */
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
.countdown-item {
background: linear-gradient(135deg, #f6f8fb, #ffffff);
border-radius: 12px;
padding: 15px;
min-width: 70px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.countdown-item:hover {
transform: translateY(-5px);
}
.countdown-number {
font-size: 1.8rem;
font-weight: bold;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.countdown-label {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 订阅表单 */
.subscribe-form {
margin-bottom: 30px;
}
.form-group {
display: flex;
gap: 10px;
max-width: 400px;
margin: 0 auto;
}
.email-input {
flex: 1;
padding: 12px 20px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.email-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.subscribe-btn {
padding: 12px 30px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.subscribe-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}
.subscribe-btn:active {
transform: translateY(0);
}
/* 社交媒体链接 */
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f7fafc;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
}
.social-link:hover {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}
/* 成功消息 */
.success-message {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 15px 25px;
border-radius: 12px;
box-shadow: var(--shadow);
display: none;
align-items: center;
gap: 10px;
animation: slideInRight 0.5s ease;
z-index: 1000;
}
.success-message.show {
display: flex;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.success-icon {
width: 24px;
height: 24px;
background: #48bb78;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
/* 响应式设计 */
@media (max-width: 640px) {
.container {
padding: 40px 20px;
}
h1 {
font-size: 2rem;
}
.countdown {
gap: 10px;
}
.countdown-item {
min-width: 60px;
padding: 10px;
}
.countdown-number {
font-size: 1.5rem;
}
.form-group {
flex-direction: column;
}
.subscribe-btn {
width: 100%;
}
}
/* 加载动画 */
.loader {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="floating-shape shape-1"></div>
<div class="floating-shape shape-2"></div>
<div class="floating-shape shape-3"></div>
</div>
<!-- 主容器 -->
<div class="container">
<!-- Logo -->
<div class="logo-container">
<div class="logo">🚀</div>
</div>
<!-- 标题 -->
<h1>网站建设中</h1>
<p class="subtitle">
我们正在为您打造一个全新的体验<br>
精彩即将呈现，敬请期待
</p>
<!-- 进度条 -->
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<p class="progress-text">开发进度：75%</p>
</div>
<!-- 倒计时 -->
<div class="countdown">
<div class="countdown-item">
<div class="countdown-number" id="days">00</div>
<div class="countdown-label">天</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="hours">00</div>
<div class="countdown-label">小时</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="minutes">00</div>
<div class="countdown-label">分钟</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="seconds">00</div>
<div class="countdown-label">秒</div>
</div>
</div>
<!-- 订阅表单 -->
<div class="subscribe-form">
<form id="subscribeForm">
<div class="form-group">
<input
type="email"
class="email-input"
placeholder="输入您的邮箱，获取上线通知"
required
id="emailInput"
>
<button type="submit" class="subscribe-btn" id="subscribeBtn">
<span id="btnText">订阅通知</span>
</button>
</div>
</form>
</div>
<!-- 社交媒体链接 -->
<div class="social-links">
<a href="#" class="social-link" title="微博">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M9.5 17c-4.5 0-8-2.7-8-6s3.5-6 8-6 8 2.7 8 6-3.5 6-8 6zm0-10c-3.3 0-6 1.8-6 4s2.7 4 6 4 6-1.8 6-4-2.7-4-6-4z"/>
<circle cx="9.5" cy="13" r="2"/>
</svg>
</a>
<a href="#" class="social-link" title="微信">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M8.5 12.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm7 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/>
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"/>
</svg>
</a>
<a href="#" class="social-link" title="GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
<a href="#" class="social-link" title="邮箱">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</a>
</div>
</div>
<!-- 成功消息 -->
<div class="success-message" id="successMessage">
<div class="success-icon">✓</div>
<span>订阅成功！我们会第一时间通知您</span>
</div>
<script>
// 倒计时功能
function initCountdown() {
// 设置目标日期（30天后）
const targetDate = new Date();
targetDate.setDate(targetDate.getDate() + 30);
function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate.getTime() - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('days').textContent = String(days).padStart(2, '0');
document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
if (distance < 0) {
clearInterval(countdownInterval);
document.querySelector('.countdown').innerHTML = '<h2 style="color: var(--primary-color);">🎉 网站已上线！</h2>';
}
}
updateCountdown();
const countdownInterval = setInterval(updateCountdown, 1000);
}
// 订阅表单处理
document.getElementById('subscribeForm').addEventListener('submit', function(e) {
e.preventDefault();
const emailInput = document.getElementById('emailInput');
const subscribeBtn = document.getElementById('subscribeBtn');
const btnText = document.getElementById('btnText');
const successMessage = document.getElementById('successMessage');
// 显示加载状态
btnText.innerHTML = '<span class="loader"></span>';
subscribeBtn.disabled = true;
// 模拟API调用
setTimeout(() => {
// 恢复按钮状态
btnText.textContent = '订阅通知';
subscribeBtn.disabled = false;
// 清空输入框
emailInput.value = '';
// 显示成功消息
successMessage.classList.add('show');
// 3秒后隐藏消息
setTimeout(() => {
successMessage.classList.remove('show');
}, 3000);
// 保存到localStorage（模拟）
const subscribers = JSON.parse(localStorage.getItem('subscribers') || '[]');
subscribers.push({
email: emailInput.value,
timestamp: new Date().toISOString()
});
localStorage.setItem('subscribers', JSON.stringify(subscribers));
}, 1500);
});
// 动态更新进度条
function animateProgress() {
const progressFill = document.querySelector('.progress-fill');
const progressText = document.querySelector('.progress-text');
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 2;
if (progress >= 75) {
progress = 75;
clearInterval(interval);
}
progressFill.style.width = progress + '%';
progressText.textContent = `开发进度：${Math.floor(progress)}%`;
}, 100);
}
// 添加打字机效果
function typeWriter() {
const subtitle = document.querySelector('.subtitle');
const text = subtitle.innerHTML;
subtitle.innerHTML = '';
let i = 0;
function type() {
if (i < text.length) {
subtitle.innerHTML += text.charAt(i);
i++;
setTimeout(type, 30);
}
}
setTimeout(type, 500);
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
initCountdown();
animateProgress();
typeWriter();
// 添加页面可见性变化监听
document.addEventListener('visibilitychange', function() {
if (!document.hidden) {
// 页面重新可见时更新倒计时
initCountdown();
}
});
});
// 添加平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
});
});
</script>
</body>
</html>