设定区:修订间差异
Plurimod学生会(留言 | 贡献) 小 (修改页面) |
Plurimod学生会(留言 | 贡献) (美化) |
||
(未显示同一用户的12个中间版本) | |||
第1行: | 第1行: | ||
< | {{全屏| | ||
< | <html> | ||
< | <head> | ||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>迪普菲公共档案数据库</title> | |||
<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=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> | |||
<style> | |||
/* 自定义字体 */ | |||
body { | |||
font-family: 'Noto Sans SC', sans-serif; | |||
background-color: #0a0a1a; | |||
color: #e0e0e0; | |||
overflow-x: hidden; | |||
} | |||
.font-orbitron { | |||
font-family: 'Orbitron', sans-serif; | |||
} | |||
/* 粒子背景画布 */ | |||
#particle-canvas { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: -1; | |||
opacity: 0.5; | |||
} | |||
/* 玻璃拟态效果容器 */ | |||
.glass-effect { | |||
background: rgba(10, 10, 30, 0.6); | |||
backdrop-filter: blur(12px) saturate(150%); | |||
-webkit-backdrop-filter: blur(12px) saturate(150%); | |||
border: 1px solid rgba(255, 255, 255, 0.1); | |||
transition: all 0.3s ease; | |||
} | |||
.glass-effect:hover { | |||
background: rgba(20, 20, 40, 0.7); | |||
box-shadow: 0 0 25px rgba(0, 255, 255, 0.3); | |||
transform: translateY(-5px); | |||
} | |||
/* 标题打字机效果 */ | |||
.typewriter-text { | |||
display: inline-block; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
border-right: .15em solid cyan; | |||
letter-spacing: .1em; | |||
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |||
} | |||
/* 链接悬停辉光效果 */ | |||
.glowing-link { | |||
color: #00ffff; | |||
text-decoration: none; | |||
transition: all 0.3s ease; | |||
font-weight: bold; | |||
} | |||
.glowing-link:hover { | |||
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; | |||
} | |||
/* 自定义 hr 分割线 */ | |||
{ | hr { | ||
border: 0; | |||
height: 1px; | |||
background-image: linear-gradient(to right, rgba(0, 255, 255, 0), rgba(0, 255, 255, 0.75), rgba(0, 255, 255, 0)); | |||
} | |||
/* 初始加载动画 */ | |||
.fade-in-up { | |||
opacity: 0; | |||
transform: translateY(30px); | |||
animation: fadeInUp 0.8s ease-out forwards; | |||
} | |||
@keyframes fadeInUp { | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | |||
/* 针对不同元素的延迟加载 */ | |||
.main-content { animation-delay: 0.2s; } | |||
.sidebar { animation-delay: 0.4s; } | |||
/* 滚动条样式 */ | |||
::-webkit-scrollbar { | |||
width: 8px; | |||
} | |||
::-webkit-scrollbar-track { | |||
background: #0a0a1a; | |||
} | |||
::-webkit-scrollbar-thumb { | |||
background: #00ffff; | |||
border-radius: 4px; | |||
} | |||
::-webkit-scrollbar-thumb:hover { | |||
background: #00c0c0; | |||
} | |||
</style> | |||
</head> | |||
<body class="bg-gray-900 text-gray-200"> | |||
<canvas id="particle-canvas"></canvas> | |||
“汇佳世界观设定”系列具有丰富的叙事等方面上的潜能,等待着创作者的发掘,因此请尽情抒怀您的创造力! | <div class="container mx-auto p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center"> | ||
<div class="w-full max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8"> | |||
<!-- 主要内容区域 --> | |||
<div class="lg:col-span-2 space-y-8"> | |||
<div class="mini-block glass-effect p-6 sm:p-8 rounded-2xl fade-in-up main-content"> | |||
<h1 class="font-orbitron text-2xl sm:text-3xl text-cyan-300 mb-4" data-text="欢迎您,迪普菲的居民。"></h1> | |||
<p class="text-gray-300 leading-relaxed"> | |||
这里是迪普菲的重要公共档案数据库,记载着迪普菲上面发生的任何重要事件、档案等内容。本页面为迪普菲公共档案库的中心页,右测为各个分支类别中心页的快速导航,可以通过右侧组件快速进入相关区域。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
最初,该网站被 <b class="text-cyan-400"><a href="S.T.R.探索对策总署" title="S.T.R.探索对策总署">S.T.R.探索对策总署</a></b>——数据部设立,这处数据库皆在维系整个迪普菲这片庞大都市的稳定,S.T.R.总是致力于为每一位迪普菲的原住民提供人身安全保障服务。 | |||
</p> | |||
<hr class="my-6"/> | |||
<h2 class="font-orbitron text-xl sm:text-2xl text-cyan-300 mb-4" data-text="前言"></h2> | |||
<p class="text-gray-300 leading-relaxed"> | |||
你清楚,我们皆处于这处神秘而奇妙的庇护之地,在这个奇幻的学园社会中,或许你早已因学分争夺、学园战争、邪教迷雾而感到疲惫不堪了。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
当下的迪普菲,正变得十分不稳定——学生之间开始产生分歧,这引发了一系列的抗议活动和示威游行,许多团体和党派产生,势力之间不断发生纷争,恐怖袭击不断发生…… | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
迪普菲的未来充满了挑战和变数。你——作为学生们的一员,即使是一人的选择与行动,也将决定了这座城市的命运。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
我们是 <b class="text-cyan-400"><a href="S.T.R.探索对策总署" title="S.T.R.探索对策总署">S.T.R.探索对策总署</a></b>——数据处理部,我们真诚地邀请您为迪普菲档案数据处理做出贡献! | |||
</p> | |||
<hr class="my-6"/> | |||
<h2 class="font-orbitron text-xl sm:text-2xl text-cyan-300 mb-4" data-text="屏幕之外"></h2> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
<a href="墨绿色的启示录" class="glowing-link text-lg">点我查看《墨绿色的启示录》设定详情中心页!</a> | |||
</p> | |||
<p class="text-gray-300 leading-relaxed"> | |||
本页面是HUIJIA FUN的两大区之一——设定区的中心页。本区隶属于“汇佳世界观设定”系列二创,定义为“以汇佳为基础背景,所进行的世界观二创系列”,是一种网络接力创作形式。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
目前,“汇佳世界观设定”有多种版本。设定区以 <b class="text-cyan-400"><a href="墨绿色的启示录" title="墨绿色的启示录">IP版设定——墨绿色的启示录</a></b> 为默认设定,其它设定集可以在位于设定区的分区中心页—— <b class="text-cyan-400"><a href="设定" title="设定">设定</a></b> 中进行阅读和了解。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
“汇佳世界观设定”系列具有丰富的叙事等方面上的潜能,等待着创作者的发掘,因此请尽情抒怀您的创造力! | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
作为作者,您拥有无限的创作自由,您可以从任意角度出发,构建一个引人深思的平行世界。如果您具有深度的思想及文学功底,您甚至可以从“全球性问题”等论理方面角度上出发,创作富含人文思想或哲学内涵的故事情节,引发读者的一系列思考,真正体现出这一系列的潜能性。 | |||
</p> | |||
<p class="mt-4 text-gray-300 leading-relaxed"> | |||
你当然可以从任何事物为出发点,发挥任何你的创作自由,构建出这样一个奇幻的平行世界。祝你好运,作者! | |||
</p> | |||
</div> | |||
</div> | |||
<!-- 侧边栏导航 --> | |||
</div> | <div class="sidebar lg:col-span-1 glass-effect p-6 sm:p-8 rounded-2xl self-start sticky top-8 fade-in-up"> | ||
<h2 class="font-orbitron text-2xl text-cyan-300 mb-6 border-b-2 border-cyan-500/30 pb-3">设定区导航</h2> | |||
<nav class="space-y-4"> | |||
<a href="故事文章" class="glowing-link block text-lg hover:pl-2 transition-all">故事文章</a> | |||
<a href="人物档案" class="glowing-link block text-lg hover:pl-2 transition-all">人物档案</a> | |||
<a href="团体势力" class="glowing-link block text-lg hover:pl-2 transition-all">团体势力</a> | |||
<a href="地点" class="glowing-link block text-lg hover:pl-2 transition-all">地点</a> | |||
<a href="物品" class="glowing-link block text-lg hover:pl-2 transition-all">物品</a> | |||
<a href="墨绿色的启示录" class="glowing-link block text-lg hover:pl-2 transition-all">世界观总览</a> | |||
<a href="设定" class="glowing-link block text-lg hover:pl-2 transition-all">其它设定</a> | |||
</nav> | |||
</div> | |||
</div> | |||
</div> | |||
< | <script> | ||
document.addEventListener('DOMContentLoaded', () => { | |||
// 粒子背景效果 | |||
const canvas = document.getElementById('particle-canvas'); | |||
const ctx = canvas.getContext('2d'); | |||
let particles = []; | |||
function resizeCanvas() { | |||
canvas.width = window.innerWidth; | |||
canvas.height = window.innerHeight; | |||
} | |||
window.addEventListener('resize', resizeCanvas); | |||
resizeCanvas(); | |||
class Particle { | |||
constructor() { | |||
this.x = Math.random() * canvas.width; | |||
this.y = Math.random() * canvas.height; | |||
this.vx = Math.random() * 0.4 - 0.2; | |||
this.vy = Math.random() * 0.4 - 0.2; | |||
this.radius = 1.5; | |||
} | |||
update() { | |||
</ | this.x += this.vx; | ||
this.y += this.vy; | |||
if (this.x < 0 || this.x > canvas.width) this.vx *= -1; | |||
if (this.y < 0 || this.y > canvas.height) this.vy *= -1; | |||
} | |||
draw() { | |||
ctx.beginPath(); | |||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); | |||
ctx.fillStyle = 'rgba(0, 255, 255, 0.7)'; | |||
ctx.fill(); | |||
} | |||
} | |||
function initParticles() { | |||
const particleCount = Math.floor(canvas.width * canvas.height / 15000); | |||
for (let i = 0; i < particleCount; i++) { | |||
particles.push(new Particle()); | |||
} | |||
} | |||
function connectParticles() { | |||
for (let i = 0; i < particles.length; i++) { | |||
for (let j = i + 1; j < particles.length; j++) { | |||
const dx = particles[i].x - particles[j].x; | |||
const dy = particles[i].y - particles[j].y; | |||
const distance = Math.sqrt(dx * dx + dy * dy); | |||
if (distance < 120) { | |||
ctx.beginPath(); | |||
ctx.moveTo(particles[i].x, particles[i].y); | |||
ctx.lineTo(particles[j].x, particles[j].y); | |||
ctx.strokeStyle = `rgba(0, 255, 255, ${1 - distance / 120})`; | |||
ctx.lineWidth = 0.5; | |||
ctx.stroke(); | |||
} | |||
} | |||
} | |||
} | |||
function animate() { | |||
ctx.clearRect(0, 0, canvas.width, canvas.height); | |||
particles.forEach(p => { | |||
p.update(); | |||
p.draw(); | |||
}); | |||
connectParticles(); | |||
requestAnimationFrame(animate); | |||
} | |||
initParticles(); | |||
animate(); | |||
// 打字机效果 | |||
function typeWriter(element, text, speed = 70) { | |||
let i = 0; | |||
element.innerHTML = ''; // 清空内容以开始打字 | |||
const typingInterval = setInterval(() => { | |||
if (i < text.length) { | |||
element.innerHTML += text.charAt(i); | |||
i++; | |||
} else { | |||
clearInterval(typingInterval); | |||
} | |||
}, speed); | |||
} | |||
const headers = document.querySelectorAll('h1[data-text], h2[data-text]'); | |||
headers.forEach((header, index) => { | |||
const text = header.getAttribute('data-text'); | |||
// 使用 Intersection Observer 来触发动画 | |||
const observer = new IntersectionObserver((entries) => { | |||
entries.forEach(entry => { | |||
if (entry.isIntersecting) { | |||
setTimeout(() => { | |||
typeWriter(entry.target, text); | |||
}, index * 200); // 错开动画开始时间 | |||
observer.unobserve(entry.target); // 动画只播放一次 | |||
} | |||
}); | |||
}, { threshold: 0.5 }); | |||
observer.observe(header); | |||
}); | |||
}); | |||
</script> | |||
</body> | |||
</html> | |||
}} | }} | ||
[[分类:中心页]] |
2025年10月6日 (一) 20:29的最新版本
这里是迪普菲的重要公共档案数据库,记载着迪普菲上面发生的任何重要事件、档案等内容。本页面为迪普菲公共档案库的中心页,右测为各个分支类别中心页的快速导航,可以通过右侧组件快速进入相关区域。
最初,该网站被 S.T.R.探索对策总署——数据部设立,这处数据库皆在维系整个迪普菲这片庞大都市的稳定,S.T.R.总是致力于为每一位迪普菲的原住民提供人身安全保障服务。
你清楚,我们皆处于这处神秘而奇妙的庇护之地,在这个奇幻的学园社会中,或许你早已因学分争夺、学园战争、邪教迷雾而感到疲惫不堪了。
当下的迪普菲,正变得十分不稳定——学生之间开始产生分歧,这引发了一系列的抗议活动和示威游行,许多团体和党派产生,势力之间不断发生纷争,恐怖袭击不断发生……
迪普菲的未来充满了挑战和变数。你——作为学生们的一员,即使是一人的选择与行动,也将决定了这座城市的命运。
我们是 S.T.R.探索对策总署——数据处理部,我们真诚地邀请您为迪普菲档案数据处理做出贡献!
本页面是HUIJIA FUN的两大区之一——设定区的中心页。本区隶属于“汇佳世界观设定”系列二创,定义为“以汇佳为基础背景,所进行的世界观二创系列”,是一种网络接力创作形式。
目前,“汇佳世界观设定”有多种版本。设定区以 IP版设定——墨绿色的启示录 为默认设定,其它设定集可以在位于设定区的分区中心页—— 设定 中进行阅读和了解。
“汇佳世界观设定”系列具有丰富的叙事等方面上的潜能,等待着创作者的发掘,因此请尽情抒怀您的创造力!
作为作者,您拥有无限的创作自由,您可以从任意角度出发,构建一个引人深思的平行世界。如果您具有深度的思想及文学功底,您甚至可以从“全球性问题”等论理方面角度上出发,创作富含人文思想或哲学内涵的故事情节,引发读者的一系列思考,真正体现出这一系列的潜能性。
你当然可以从任何事物为出发点,发挥任何你的创作自由,构建出这样一个奇幻的平行世界。祝你好运,作者!