243 lines
15 KiB
Plaintext
243 lines
15 KiB
Plaintext
<div id="tetrisWindow" class="fixed hidden window-border bg-win-light w-[320px] z-50 transform transition-all duration-300 scale-95 opacity-0">
|
||
<div class="window-titlebar text-white p-1 flex items-center justify-between">
|
||
<div class="flex items-center"><i class="fa fa-cube mr-2"></i><span class="dot-text">TETRIS</span></div>
|
||
<div>
|
||
<button id="closeButton" class="bg-win-light text-black text-xs px-2 py-0 window-border dot-text">X</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-3">
|
||
<div id="difficultyScreen" class="text-center">
|
||
<div class="my-4 dot-text text-tetris-dark text-2xl font-bold tracking-widest">TETRIS</div>
|
||
<div class="my-6 flex justify-center">
|
||
<div class="grid grid-cols-10 grid-rows-8 gap-0">
|
||
<!-- I -->
|
||
<div class="col-span-1 row-span-4 bg-tetris-blue"></div>
|
||
<div class="col-span-1 row-span-4 bg-tetris-blue"></div>
|
||
<div class="col-span-1 row-span-4 bg-tetris-blue"></div>
|
||
<div class="col-span-1 row-span-4 bg-tetris-blue"></div>
|
||
<!-- O -->
|
||
<div class="col-span-2 row-span-2 bg-tetris-blue col-start-6 row-start-1"></div>
|
||
<div class="col-span-2 row-span-2 bg-tetris-blue col-start-6 row-start-3"></div>
|
||
<!-- T -->
|
||
<div class="col-span-1 row-span-1 bg-tetris-blue col-start-1 row-start-5"></div>
|
||
<div class="col-span-3 row-span-1 bg-tetris-blue col-start-1 row-start-6"></div>
|
||
<div class="col-span-1 row-span-1 bg-tetris-blue col-start-3 row-start-5"></div>
|
||
<!-- S -->
|
||
<div class="col-span-2 row-span-1 bg-tetris-blue col-start-5 row-start-5"></div>
|
||
<div class="col-span-2 row-span-1 bg-tetris-blue col-start-4 row-start-6"></div>
|
||
<!-- Z -->
|
||
<div class="col-span-2 row-span-1 bg-tetris-blue col-start-8 row-start-5"></div>
|
||
<div class="col-span-2 row-span-1 bg-tetris-blue col-start-7 row-start-6"></div>
|
||
<!-- J -->
|
||
<div class="col-span-1 row-span-2 bg-tetris-blue col-start-1 row-start-7"></div>
|
||
<div class="col-span-3 row-span-1 bg-tetris-blue col-start-1 row-start-8"></div>
|
||
<!-- L -->
|
||
<div class="col-span-1 row-span-2 bg-tetris-blue col-start-4 row-start-7"></div>
|
||
<div class="col-span-3 row-span-1 bg-tetris-blue col-start-2 row-start-8"></div>
|
||
</div>
|
||
</div>
|
||
<div class="dot-text text-sm mb-2">SELECT DIFFICULTY</div>
|
||
<div class="flex justify-center gap-3 my-4"><button class="difficulty-btn btn-classic" data-speed="800">EASY</button><button class="difficulty-btn btn-classic" data-speed="500">MEDIUM</button><button class="difficulty-btn btn-classic" data-speed="300">HARD</button></div>
|
||
<button id="startGameBtn" class="btn-classic mt-4 disabled:opacity-50 disabled:cursor-not-allowed" disabled>START GAME</button>
|
||
</div>
|
||
<div id="gameScreen" class="hidden">
|
||
<div class="flex justify-between">
|
||
<div><canvas id="tetrisCanvas" class="window-border-inset bg-black"></canvas></div>
|
||
<div class="ml-3 flex flex-col gap-2">
|
||
<div class="window-border-inset bg-win-light p-1 text-center"><div class="dot-text text-xs mb-1">SCORE</div><div id="score" class="dot-text text-lg font-bold">0</div></div>
|
||
<div class="window-border-inset bg-win-light p-1 text-center"><div class="dot-text text-xs mb-1">NEXT</div><canvas id="nextCanvas" class="window-border-inset bg-black"></canvas></div>
|
||
<button id="pauseButton" class="btn-classic dot-text">PAUSE</button>
|
||
<button id="restartButton" class="btn-classic dot-text">RESTART</button>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 text-center text-xs dot-text"><p>ARROWS: MOVE & ROTATE</p><p>SPACE: DROP</p></div>
|
||
</div>
|
||
<div id="gameOverScreen" class="hidden text-center py-6">
|
||
<div class="dot-text text-xl font-bold text-tetris-dark mb-4">GAME OVER</div>
|
||
<div class="mb-2 dot-text">SCORE: <span id="finalScore">0</span></div>
|
||
<button id="playAgainButton" class="btn-classic mt-4">PLAY AGAIN</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="bg-gray-900 text-white pt-16 pb-8 px-4 md:px-8 relative overflow-hidden" id="footer">
|
||
<!-- 背景装饰 - 无渐变，仅蓝色点缀 -->
|
||
<div class="absolute inset-0 z-0 opacity-10">
|
||
<div class="absolute top-0 left-0 w-full h-full bg-gray-900"></div>
|
||
<div class="absolute -top-32 -right-32 w-96 h-96 rounded-full bg-blue-900/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-blue-900/20 blur-3xl"></div>
|
||
<!-- 网格背景 -->
|
||
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PC9nPjwvc3ZnPg==')] opacity-20"></div>
|
||
</div>
|
||
|
||
<div class="container mx-auto relative z-10">
|
||
<!-- 主体内容 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 mb-12">
|
||
<!-- 快速导航 -->
|
||
<div class="md:col-span-4 transition-all duration-500 opacity-0 animate-fadeIn" style="animation-delay: 0ms; animation-duration: 600ms;">
|
||
<h3 class="text-lg md:text-xl font-semibold mb-6 relative pb-3 text-gray-100">
|
||
快速导航
|
||
<span class="absolute bottom-0 left-0 w-12 h-0.5 bg-blue-500 rounded-full"></span>
|
||
</h3>
|
||
<ul class="space-y-3 text-sm">
|
||
<li>
|
||
<a href="https://www.gvsds.com/index.html" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2 group">
|
||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
|
||
主页
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.gvsds.com/Gallery.html" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2 group">
|
||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
|
||
画廊
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://doc.gvsds.com/9bc298e9c1d03ed3bd4777181bf7411d" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2 group">
|
||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
|
||
文档
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.gvsds.com/members.html?Type=Members" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2 group">
|
||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full scale-0 group-hover:scale-100 transition-transform duration-300"></span>
|
||
成员
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 工作室信息 -->
|
||
<div class="md:col-span-4 transition-all duration-500 opacity-0 animate-fadeIn" style="animation-delay: 200ms; animation-duration: 600ms;">
|
||
<h3 class="text-lg md:text-xl font-semibold mb-6 relative pb-3 text-gray-100">
|
||
工作室信息
|
||
<span class="absolute bottom-0 left-0 w-12 h-0.5 bg-blue-500 rounded-full"></span>
|
||
</h3>
|
||
<ul class="space-y-3 text-sm text-gray-300">
|
||
<li class="font-medium text-white text-base mb-2">银河锋锐软件开发工作室</li>
|
||
<li class="flex items-center gap-2.5">
|
||
<i class="fa fa-map-marker text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>定位：IT 技术团队</span>
|
||
</li>
|
||
<li class="flex items-center gap-2.5">
|
||
<i class="fa fa-shield text-blue-400 w-4 text-center text-xs"></i>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">津ICP备2025031204号</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 联系我们 -->
|
||
<div class="md:col-span-4 transition-all duration-500 opacity-0 animate-fadeIn" style="animation-delay: 400ms; animation-duration: 600ms;">
|
||
<h3 class="text-lg md:text-xl font-semibold mb-6 relative pb-3 text-gray-100">
|
||
联系我们
|
||
<span class="absolute bottom-0 left-0 w-12 h-0.5 bg-blue-500 rounded-full"></span>
|
||
</h3>
|
||
<ul class="space-y-3 text-sm">
|
||
<li>
|
||
<a href="mailto:support@gvsds.com" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2.5 group p-1.5 rounded hover:bg-blue-900/20">
|
||
<i class="fa fa-envelope text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>support@gvsds.com</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="mailto:terminexus@gvsds.com" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2.5 group p-1.5 rounded hover:bg-blue-900/20">
|
||
<i class="fa fa-envelope text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>terminexus@gvsds.com</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="weixin://dl/add/?username=TermiNexus" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2.5 group p-1.5 rounded hover:bg-blue-900/20">
|
||
<i class="fa-brands fa-weixin text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>微信：TermiNexus</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=3439961063" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2.5 group p-1.5 rounded hover:bg-blue-900/20">
|
||
<i class="fa-brands fa-qq text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>QQ：3439961063</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://github.com/GVSDS" target="_blank" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center gap-2.5 group p-1.5 rounded hover:bg-blue-900/20">
|
||
<i class="fa-brands fa-github text-blue-400 w-4 text-center text-xs"></i>
|
||
<span>Github: GVSDS</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分割线 -->
|
||
<div class="w-full h-px bg-gray-800 mb-8"></div>
|
||
|
||
<!-- 底部版权 -->
|
||
<div class="transition-all duration-500 opacity-0 animate-fadeIn" style="animation-delay: 600ms; animation-duration: 600ms;">
|
||
<div class="flex flex-col md:flex-row justify-between items-center w-full mx-auto">
|
||
<p class="text-gray-500 text-xs md:text-sm mb-4 md:mb-0">
|
||
© 2026 GVSDS. All Rights Reserved.
|
||
<span class="hidden md:inline">|</span>
|
||
<br class="md:hidden">
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">津ICP备2025031204号</a>
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-x-5 gap-y-2 md:gap-y-0 text-xs md:text-sm">
|
||
<a class="text-gray-500 hover:text-blue-400 transition-colors duration-300 flex items-center gap-1" id="startButton">
|
||
<i class="fa fa-cube text-blue-400 text-xs"></i> 彩蛋
|
||
</a>
|
||
<a href="https://doc.gvsds.com/fc084ab20a283208adb19033ca4de173" target="_blank" class="text-gray-500 hover:text-blue-400 transition-colors duration-300">隐私政策</a>
|
||
<a href="https://doc.gvsds.com/1f07d3b8cec43a2ab9892a15b150bdd6" target="_blank" class="text-gray-500 hover:text-blue-400 transition-colors duration-300">服务条款</a>
|
||
<a href="https://doc.gvsds.com/d2ae1dd63e9c35d687464a160896e1ab" target="_blank" class="text-gray-500 hover:text-blue-400 transition-colors duration-300">用户协议</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(15px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fadeIn {
|
||
animation-name: fadeIn;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
#footer i {
|
||
vertical-align: middle;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
#footer {
|
||
padding-top: 12px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.grid {
|
||
gap: 6px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
ul {
|
||
gap: 1px;
|
||
}
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
#footer {
|
||
background-color: #0f172a;
|
||
}
|
||
}
|
||
</style>
|
||
</footer>
|
||
<script src="https://www.gvsds.com/assets/js/tetris.js"></script> |