Skip to content

Commit afe37cf

Browse files
tedhyutedhyu
authored
Add files via upload
1 parent 16ab5df commit afe37cf

1 file changed

Lines changed: 121 additions & 121 deletions

File tree

‎src/views/index.ejs‎

Lines changed: 121 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,122 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<%- include("../partials/head.ejs") %>
6-
<title>Tridecco | Home</title>
7-
<style>
8-
.glass-btn {
9-
display: block;
10-
width: 100%;
11-
padding: 1.1rem 0;
12-
font-size: 1.25rem;
13-
font-weight: bold;
14-
color: #fff;
15-
border: none;
16-
border-radius: 1.5rem;
17-
background: linear-gradient(120deg, rgba(59, 130, 246, 0.8) 0%, rgba(96, 165, 250, 0.8) 100%);
18-
box-shadow: 0 4px 32px 0 rgba(59, 130, 246, 0.22), 0 1.5px 6px 0 rgba(0, 0, 0, 0.09);
19-
backdrop-filter: blur(12px) saturate(140%);
20-
transition: transform 0.18s cubic-bezier(.4, 2, .6, 1), box-shadow 0.18s;
21-
cursor: pointer;
22-
outline: none;
23-
position: relative;
24-
overflow: hidden;
25-
z-index: 1;
26-
}
27-
28-
.glass-btn:before {
29-
content: "";
30-
position: absolute;
31-
left: -50%;
32-
top: -50%;
33-
width: 200%;
34-
height: 200%;
35-
background: linear-gradient(120deg, rgba(255, 255, 255, 0.18) 40%, rgba(59, 130, 246, 0.25) 60%, rgba(255, 255, 255, 0.09) 100%);
36-
filter: blur(20px);
37-
opacity: 0.7;
38-
animation: btn-glow 2.5s linear infinite;
39-
z-index: -1;
40-
}
41-
42-
@keyframes btn-glow {
43-
0% {
44-
transform: rotate(0deg) scale(1);
45-
}
46-
47-
100% {
48-
transform: rotate(360deg) scale(1.03);
49-
}
50-
}
51-
52-
.glass-btn:hover,
53-
.glass-btn:focus {
54-
transform: scale(1.045);
55-
box-shadow: 0 8px 40px 0 rgba(59, 130, 246, 0.32), 0 5px 18px 0 rgba(0, 0, 0, 0.19);
56-
}
57-
58-
.glass-btn.disabled,
59-
.glass-btn[disabled] {
60-
cursor: not-allowed;
61-
background: linear-gradient(120deg, rgba(156, 163, 175, 0.55) 0%, rgba(209, 213, 219, 0.7) 100%);
62-
color: #e5e7eb;
63-
box-shadow: 0 2px 14px 0 rgba(156, 163, 175, 0.22), 0 1.5px 6px 0 rgba(0, 0, 0, 0.05);
64-
opacity: 0.78;
65-
}
66-
67-
.glass-btn.disabled:before,
68-
.glass-btn[disabled]:before {
69-
display: none;
70-
}
71-
72-
.glass-card {
73-
background: rgba(255, 255, 255, 0.82);
74-
border-radius: 2.5rem;
75-
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.13), 0 1.5px 8px 0 rgba(59, 130, 246, 0.08);
76-
backdrop-filter: blur(18px) saturate(150%);
77-
padding: 2.5rem 1.5rem 2.2rem;
78-
max-width: 98vw;
79-
width: 93vw;
80-
margin: auto;
81-
display: flex;
82-
flex-direction: column;
83-
align-items: center;
84-
gap: 2.4rem;
85-
transition: box-shadow 0.24s;
86-
}
87-
88-
@media (min-width: 450px) {
89-
.glass-card {
90-
width: 380px;
91-
min-width: 320px;
92-
}
93-
}
94-
95-
@media (min-width: 640px) {
96-
.glass-card {
97-
width: 410px;
98-
}
99-
}
100-
</style>
101-
</head>
102-
103-
<body class="h-screen overflow-hidden" style="background: url('<%= env.CDN_URL %>/img/backgrounds/wooden-board.jpg') center center / cover no-repeat;">
104-
<div id="board-container" class="absolute top-0 left-0 w-full h-full"></div>
105-
<div class="absolute inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg"></div>
106-
107-
<div class="fixed inset-0 flex items-center justify-center z-10">
108-
<div class="glass-card">
109-
<h1 class="glow-title text-6xl sm:text-7xl text-center select-none text-[#fffde7] rounded-[1.2em] m-2 tracking-[0.10em]" style="
110-
text-shadow: 3px 3px 3px #DAA520, 2px 3px 5px #8B4513, 0px 0px 20px #fffde7cc; font-family: 'tridecco', sans-serif;
111-
">TRIDECCO</h1>
112-
<div class="w-full flex flex-col gap-4">
113-
<a href="/single" class="glass-btn text-center">Single Player</a>
114-
<button class="glass-btn disabled" disabled>Multiplayer</button>
115-
</div>
116-
</div>
117-
</div>
118-
119-
<%- include("../partials/tridecco-board-animator.ejs") %>
120-
</body>
121-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<%- include("../partials/head.ejs") %>
6+
<title>Tridecco | Home</title>
7+
<style>
8+
.glass-btn {
9+
display: block;
10+
width: 100%;
11+
padding: 1.1rem 0;
12+
font-size: 1.25rem;
13+
font-weight: bold;
14+
color: #fff;
15+
border: none;
16+
border-radius: 1.5rem;
17+
background: linear-gradient(120deg, rgba(59, 130, 246, 0.8) 0%, rgba(96, 165, 250, 0.8) 100%);
18+
box-shadow: 0 4px 32px 0 rgba(59, 130, 246, 0.22), 0 1.5px 6px 0 rgba(0, 0, 0, 0.09);
19+
backdrop-filter: blur(12px) saturate(140%);
20+
transition: transform 0.18s cubic-bezier(.4, 2, .6, 1), box-shadow 0.18s;
21+
cursor: pointer;
22+
outline: none;
23+
position: relative;
24+
overflow: hidden;
25+
z-index: 1;
26+
}
27+
28+
.glass-btn:before {
29+
content: "";
30+
position: absolute;
31+
left: -50%;
32+
top: -50%;
33+
width: 200%;
34+
height: 200%;
35+
background: linear-gradient(120deg, rgba(255, 255, 255, 0.18) 40%, rgba(59, 130, 246, 0.25) 60%, rgba(255, 255, 255, 0.09) 100%);
36+
filter: blur(20px);
37+
opacity: 0.7;
38+
animation: btn-glow 2.5s linear infinite;
39+
z-index: -1;
40+
}
41+
42+
@keyframes btn-glow {
43+
0% {
44+
transform: rotate(0deg) scale(1);
45+
}
46+
47+
100% {
48+
transform: rotate(360deg) scale(1.03);
49+
}
50+
}
51+
52+
.glass-btn:hover,
53+
.glass-btn:focus {
54+
transform: scale(1.045);
55+
box-shadow: 0 8px 40px 0 rgba(59, 130, 246, 0.32), 0 5px 18px 0 rgba(0, 0, 0, 0.19);
56+
}
57+
58+
.glass-btn.disabled,
59+
.glass-btn[disabled] {
60+
cursor: not-allowed;
61+
background: linear-gradient(120deg, rgba(156, 163, 175, 0.55) 0%, rgba(209, 213, 219, 0.7) 100%);
62+
color: #e5e7eb;
63+
box-shadow: 0 2px 14px 0 rgba(156, 163, 175, 0.22), 0 1.5px 6px 0 rgba(0, 0, 0, 0.05);
64+
opacity: 0.78;
65+
}
66+
67+
.glass-btn.disabled:before,
68+
.glass-btn[disabled]:before {
69+
display: none;
70+
}
71+
72+
.glass-card {
73+
background: rgba(255, 255, 255, 0.82);
74+
border-radius: 2.5rem;
75+
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.13), 0 1.5px 8px 0 rgba(59, 130, 246, 0.08);
76+
backdrop-filter: blur(18px) saturate(150%);
77+
padding: 2.5rem 1.5rem 2.2rem;
78+
max-width: 98vw;
79+
width: 93vw;
80+
margin: auto;
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
gap: 2.4rem;
85+
transition: box-shadow 0.24s;
86+
}
87+
88+
@media (min-width: 450px) {
89+
.glass-card {
90+
width: 380px;
91+
min-width: 320px;
92+
}
93+
}
94+
95+
@media (min-width: 640px) {
96+
.glass-card {
97+
width: 410px;
98+
}
99+
}
100+
</style>
101+
</head>
102+
103+
<body class="h-screen overflow-hidden" style="background: url('<%= env.CDN_URL %>/img/backgrounds/wooden-board.jpg') center center / cover no-repeat;">
104+
<div id="board-container" class="absolute top-0 left-0 w-full h-full"></div>
105+
<div class="absolute inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg"></div>
106+
107+
<div class="fixed inset-0 flex items-center justify-center z-10">
108+
<div class="glass-card">
109+
<h1 class="glow-title text-6xl sm:text-7xl text-center select-none text-[#fffde7] rounded-[1.2em] m-2 tracking-[0.10em]" style="
110+
text-shadow: 3px 3px 3px #DAA520, 2px 3px 5px #8B4513, 0px 0px 20px #fffde7cc; font-family: 'tridecco', sans-serif;
111+
">TRIDECCO</h1>
112+
<div class="w-full flex flex-col gap-4">
113+
<a href="/single" class="glass-btn text-center">Single Player</a>
114+
<button class="glass-btn disabled" disabled>Multiplayer</button>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<%- include("../partials/tridecco-board-animator.ejs") %>
120+
</body>
121+
122122
</html>

0 commit comments

Comments
 (0)