Skip to content

Commit 047ab12

Browse files
bingggbinggg
committed
feat(doc): 🎨 add project cases gallery HTML page
- Add retro-futuristic styled gallery page for showcasing project cases - Implement poker card design with neon effects - Include three project cases: multiplayer game, mini program, and enterprise application - Use Space Mono and Josefin Sans fonts for distinctive typography
1 parent 42b4a97 commit 047ab12

File tree

1 file changed

+128
-0
lines changed

1 file changed

+128
-0
lines changed

‎scripts/doc/gallary.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CloudBase AI ToolKit 扑克牌案例画廊 - Retro-futuristic</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
/* 引入 Design Specification 中的字体 */
10+
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&family=Josefin+Sans:wght@400;700&display=swap');
11+
12+
.font-display { font-family: 'Space Mono', monospace; }
13+
.font-body { font-family: 'Josefin Sans', sans-serif; }
14+
15+
/* 核心画布和背景 */
16+
.poker-canvas {
17+
width: 800px;
18+
height: 600px;
19+
background-color: #1A1A2E; /* 深太空蓝 */
20+
overflow: hidden;
21+
color: #F0F0FF; /* 亮白文字 */
22+
box-shadow: 0 0 50px rgba(233, 69, 96, 0.4); /* 柔和的外部霓虹红光 */
23+
}
24+
25+
/* 扑克牌样式核心 */
26+
.poker-card {
27+
background-color: #2B2B45; /* 卡片基色 */
28+
border: 3px solid #BFFF00; /* 霓虹绿边框 */
29+
border-radius: 12px;
30+
/* 霓虹发光效果 (Primary Accent) */
31+
box-shadow: 0 0 10px #E94560, inset 0 0 5px rgba(255, 255, 255, 0.5);
32+
transition: all 0.3s ease;
33+
cursor: pointer;
34+
35+
/* 扑克牌风格：卡片角落的定制符号 */
36+
position: relative;
37+
}
38+
39+
/* 悬停效果：增强霓虹感和位移 */
40+
.poker-card:hover {
41+
box-shadow: 0 0 25px #E94560, inset 0 0 10px rgba(255, 255, 255, 0.8);
42+
transform: scale(1.05) rotate(0deg) !important; /* 取消倾斜，突出显示 */
43+
z-index: 10;
44+
}
45+
46+
/* 扑克牌符号 (使用伪元素模拟) */
47+
.card-symbol::before {
48+
content: attr(data-symbol);
49+
position: absolute;
50+
font-size: 2.5rem;
51+
font-weight: 900;
52+
line-height: 1;
53+
color: #E94560; /* 红心红 */
54+
font-family: 'Space Mono', monospace;
55+
}
56+
.card-symbol.top-left::before { top: 8px; left: 10px; }
57+
.card-symbol.bottom-right::before { bottom: 8px; right: 10px; transform: rotate(180deg); }
58+
59+
.text-neon-red { color: #E94560; }
60+
.text-neon-green { color: #BFFF00; }
61+
</style>
62+
</head>
63+
<body>
64+
65+
<div class="poker-canvas font-body p-8">
66+
67+
<header class="mb-10 text-left relative z-10">
68+
<h1 class="text-4xl font-display font-bold tracking-widest text-neon-green leading-snug">
69+
PROJECT <span class="text-neon-red">CASES</span>
70+
</h1>
71+
<p class="text-lg font-body uppercase tracking-wider text-[#F0F0FF]/80 -mt-1 ml-1">
72+
AI Toolkit High-Impact Prototypes
73+
</p>
74+
</header>
75+
76+
<div class="relative h-[420px] w-full">
77+
78+
<a href="#" class="poker-card w-[350px] h-[250px] p-6 absolute top-0 left-[20px] transform -rotate-1 translate-x-0 card-symbol top-left" data-symbol="A">
79+
<div class="flex flex-col h-full justify-between relative z-10">
80+
<div class="text-right">
81+
<span class="text-xs uppercase font-bold text-neon-green border border-neon-green px-2 py-0.5">联机游戏</span>
82+
</div>
83+
<div>
84+
<h3 class="text-2xl font-display font-bold mb-2 leading-tight text-neon-red">
85+
联机版分手厨房小游戏
86+
</h3>
87+
<p class="text-sm text-[#F0F0FF]/80">两天上线一款可联机的游戏，全栈应用实践案例。</p>
88+
</div>
89+
</div>
90+
<div class="card-symbol bottom-right" data-symbol="A"></div>
91+
</a>
92+
93+
<a href="#" class="poker-card w-[320px] h-[200px] p-5 absolute top-[100px] left-[300px] transform rotate-1 translate-x-1/2 card-symbol top-left" data-symbol="K">
94+
<div class="flex flex-col h-full justify-between relative z-10">
95+
<div class="text-right">
96+
<span class="text-xs uppercase font-bold text-neon-red">微信小程序</span>
97+
</div>
98+
<div>
99+
<h3 class="text-xl font-display font-bold mb-1 leading-snug">
100+
AI打造专属“云书房”
101+
</h3>
102+
<p class="text-xs text-[#F0F0FF]/80">我用「CloudBase AI ToolKit」一天做出"网络热词"小程序</p>
103+
</div>
104+
</div>
105+
<div class="card-symbol bottom-right" data-symbol="K"></div>
106+
</a>
107+
108+
<a href="#" class="poker-card w-[300px] h-[180px] p-4 absolute top-[250px] left-[50px] transform -rotate-2 card-symbol top-left" data-symbol="Q">
109+
<div class="flex flex-col h-full justify-between relative z-10">
110+
<div class="text-left">
111+
<span class="text-xs uppercase font-bold text-neon-green">企业应用</span>
112+
</div>
113+
<div>
114+
<h3 class="text-lg font-display font-bold mb-1 leading-snug">
115+
医院实习生排班系统
116+
</h3>
117+
<p class="text-xs text-[#F0F0FF]/60">告别痛苦的Excel表格，实现云化部署。</p>
118+
</div>
119+
</div>
120+
<div class="card-symbol bottom-right" data-symbol="Q"></div>
121+
</a>
122+
123+
</div>
124+
125+
</div>
126+
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)