188 lines
8.6 KiB
HTML
188 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NEOBOT | Changelog</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@300;400;600&family=Noto+Serif+SC:wght@300;400;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
|
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Inter"', 'sans-serif'],
|
|
display: ['"Space Grotesk"', 'sans-serif'],
|
|
serif: ['"Noto Serif SC"', 'serif'],
|
|
lyric: ['"Cormorant Garamond"', 'serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
bg: '#050505',
|
|
surface: '#121212',
|
|
border: '#27272a',
|
|
text: '#e4e4e7',
|
|
muted: '#a1a1aa',
|
|
}
|
|
},
|
|
animation: {
|
|
'fade-in-up': 'fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #050505;
|
|
color: #e4e4e7;
|
|
background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #050505 60%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.changelog-card {
|
|
background: rgba(18, 18, 18, 0.6);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.changelog-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
background: rgba(30, 30, 30, 0.8);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.lyric-text {
|
|
font-family: "Cormorant Garamond", serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Timeline line */
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #050505; }
|
|
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
|
|
</style>
|
|
</head>
|
|
<body class="antialiased selection:bg-white/20 selection:text-white">
|
|
|
|
<!-- 导航 -->
|
|
<nav class="fixed top-0 w-full z-50 border-b border-white/5 bg-black/80 backdrop-blur-md">
|
|
<div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<a href="../index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
|
<div class="w-2 h-2 bg-white rounded-full animate-pulse-slow"></div>
|
|
<span class="font-display font-bold text-sm tracking-widest text-white">NEO<span class="text-white/40 font-light">BOT</span></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 text-[10px] font-mono text-gray-400 uppercase tracking-widest">
|
|
<span class="px-2 py-1 rounded border border-white/10 bg-white/5">Changelog</span>
|
|
<span>Latest: {{ latest_version }}</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pt-40 pb-32 px-6">
|
|
<div class="max-w-4xl mx-auto space-y-16">
|
|
|
|
<!-- Header -->
|
|
<section class="text-center space-y-4 animate-fade-in-up">
|
|
<div class="font-mono text-xs text-gray-500 mb-2">PROJECT HISTORY</div>
|
|
<h1 class="text-4xl md:text-6xl font-display font-bold text-white leading-tight">
|
|
System<br>
|
|
<span class="text-white/30">Evolution</span>
|
|
</h1>
|
|
<p class="font-serif text-lg text-gray-400 max-w-2xl mx-auto">
|
|
记录每一次微小的改变，见证成长的轨迹。
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Changelog Card -->
|
|
<section class="max-w-2xl mx-auto">
|
|
<div class="changelog-card p-8 md:p-10 relative overflow-hidden group">
|
|
<!-- Decorative background glow -->
|
|
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-500"></div>
|
|
|
|
<!-- Version & Date -->
|
|
<div class="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8 border-b border-white/10 pb-6">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h2 class="font-display text-4xl text-white font-bold">{{ log.version }}</h2>
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-white/10 text-white/60 border border-white/10">LATEST</span>
|
|
</div>
|
|
<div class="font-mono text-xs text-gray-500">{{ log.date }}</div>
|
|
</div>
|
|
{% if log.description %}
|
|
<div class="md:text-right max-w-xs">
|
|
<p class="font-serif text-sm text-gray-400 italic leading-relaxed">
|
|
"{{ log.description }}"
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Changes List -->
|
|
<div class="relative z-10">
|
|
<ul class="space-y-4">
|
|
{% for change in log.changes %}
|
|
<li class="flex items-start gap-4 group/item">
|
|
{% if change.type == 'add' %}
|
|
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-green-500/10 text-green-400 border border-green-500/20 group-hover/item:bg-green-500/20 transition-colors">ADD</span>
|
|
{% elif change.type == 'update' %}
|
|
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-blue-500/10 text-blue-400 border border-blue-500/20 group-hover/item:bg-blue-500/20 transition-colors">UPD</span>
|
|
{% elif change.type == 'fix' %}
|
|
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-red-500/10 text-red-400 border border-red-500/20 group-hover/item:bg-red-500/20 transition-colors">FIX</span>
|
|
{% else %}
|
|
<span class="flex-shrink-0 mt-1 px-2 py-1 rounded text-[10px] font-mono font-bold bg-gray-500/10 text-gray-400 border border-gray-500/20 group-hover/item:bg-gray-500/20 transition-colors">MSC</span>
|
|
{% endif %}
|
|
|
|
<span class="text-base text-gray-300 leading-relaxed group-hover/item:text-white transition-colors">{{ change.content }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="py-12 border-t border-white/5 bg-black/20">
|
|
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="text-center md:text-left">
|
|
<div class="font-display font-bold text-white mb-1">NEOBOT</div>
|
|
<p class="font-mono text-[10px] text-gray-600">
|
|
PRIVATE PERSONAL PROJECT<br>
|
|
GENERATED BY CHANGELOG TOOL
|
|
</p>
|
|
</div>
|
|
<div class="font-mono text-[10px] text-gray-600 text-center md:text-right">
|
|
TO ASTEROID B-612<br>
|
|
SASAKURE.UK
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|