feat(app/layout): 引入 Press Start 2P + VT323 像素字体，添加游戏全局样式和动画
This commit is contained in:
Cloud Bot
133
app/globals.css
133
app/globals.css
@@ -1,6 +1,139 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "tw-animate-css";
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
/* =============================================
|
||||||
|
* 游戏专属 CSS 变量（大厂保卫战）
|
||||||
|
* ============================================= */
|
||||||
|
:root {
|
||||||
|
--game-bg: #0F0F23;
|
||||||
|
--game-primary: #7C3AED;
|
||||||
|
--game-secondary: #A78BFA;
|
||||||
|
--game-cta: #F43F5E;
|
||||||
|
--game-text: #E2E8F0;
|
||||||
|
--game-path: #3d2b1f;
|
||||||
|
--game-buildable: #1e3a5f;
|
||||||
|
--game-hover: #2d5a8e;
|
||||||
|
--game-border: #0a1628;
|
||||||
|
--game-hud: rgba(10, 22, 40, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =============================================
|
||||||
|
* 像素字体 class
|
||||||
|
* ============================================= */
|
||||||
|
.font-pixel {
|
||||||
|
font-family: 'Press Start 2P', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-vt323 {
|
||||||
|
font-family: 'VT323', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =============================================
|
||||||
|
* CRT 扫描线效果（主页封面）
|
||||||
|
* ============================================= */
|
||||||
|
.crt-overlay {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crt-overlay::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
transparent,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(0, 0, 0, 0.08) 2px,
|
||||||
|
rgba(0, 0, 0, 0.08) 4px
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =============================================
|
||||||
|
* 霓虹发光动画
|
||||||
|
* ============================================= */
|
||||||
|
@keyframes neon-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
text-shadow:
|
||||||
|
0 0 7px #A78BFA,
|
||||||
|
0 0 10px #A78BFA,
|
||||||
|
0 0 21px #A78BFA,
|
||||||
|
0 0 42px #7C3AED;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow:
|
||||||
|
0 0 4px #A78BFA,
|
||||||
|
0 0 7px #A78BFA,
|
||||||
|
0 0 13px #A78BFA,
|
||||||
|
0 0 26px #7C3AED;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes neon-border-pulse {
|
||||||
|
0%, 100% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 5px #A78BFA,
|
||||||
|
0 0 10px #A78BFA,
|
||||||
|
0 0 20px #7C3AED,
|
||||||
|
inset 0 0 5px rgba(167, 139, 250, 0.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow:
|
||||||
|
0 0 3px #A78BFA,
|
||||||
|
0 0 6px #A78BFA,
|
||||||
|
0 0 12px #7C3AED,
|
||||||
|
inset 0 0 3px rgba(167, 139, 250, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch-skew {
|
||||||
|
0%, 100% { transform: skewX(0); }
|
||||||
|
2% { transform: skewX(-1deg); }
|
||||||
|
4% { transform: skewX(0.5deg); }
|
||||||
|
6% { transform: skewX(0); }
|
||||||
|
88% { transform: skewX(0); }
|
||||||
|
90% { transform: skewX(1deg); }
|
||||||
|
92% { transform: skewX(-0.5deg); }
|
||||||
|
94% { transform: skewX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scanline-move {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
100% { transform: translateY(100vh); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-title {
|
||||||
|
color: #A78BFA;
|
||||||
|
animation: neon-pulse 2.5s ease-in-out infinite, glitch-skew 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-border {
|
||||||
|
border: 1px solid #A78BFA;
|
||||||
|
animation: neon-border-pulse 2.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-text {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-6px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-cover-scanline {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: rgba(167, 139, 250, 0.15);
|
||||||
|
animation: scanline-move 6s linear infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
|
|||||||
@@ -8,8 +8,8 @@ import { AgentationGuard } from "@/components/AgentationGuard";
|
|||||||
import RouteChange from "./RouteChange";
|
import RouteChange from "./RouteChange";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Nova Chat',
|
title: '大厂保卫战',
|
||||||
description: 'Generated by create Nova Chat',
|
description: '保住KPI，战胜空降VP。一款讽刺大厂文化的塔防游戏。',
|
||||||
};
|
};
|
||||||
|
|
||||||
interface RootLayoutProps {
|
interface RootLayoutProps {
|
||||||
@@ -18,7 +18,15 @@ interface RootLayoutProps {
|
|||||||
|
|
||||||
export default function RootLayout(props: RootLayoutProps) {
|
export default function RootLayout(props: RootLayoutProps) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="zh-CN" suppressHydrationWarning>
|
||||||
|
<head>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
<body className="antialiased">
|
<body className="antialiased">
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
|||||||
Reference in New Issue
Block a user