-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathsecret-menu.html
135 lines (134 loc) · 4.49 KB
/
secret-menu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0YLTCV2MMS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-0YLTCV2MMS');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Games Menu</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a; /* Darker background for secret menu */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.container {
text-align: center;
}
.menu {
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.menu h1 {
color: orange;
}
.games-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10px;
width: 120px;
height: 120px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.29);
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.card figcaption {
position: absolute;
bottom: -100%; /* start hidden */
left: 0;
width: 100%;
background-color: rgba(74, 74, 74, 0.8);
color: black;
text-align: center;
padding: 5px;
transition: bottom 0.3s ease;
overflow: hidden;
}
.card:hover figcaption {
bottom: 0; /* slide up on hover */
}
.block-lanschool {
margin-top: 20px;
padding: 10px;
background-color: #444;
border-radius: 10px;
color: white;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.block-lanschool:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<div id="secretMenu">
<h1>Secret Games Menu (we will add more games)</h1>
<div class="games-grid">
<a href="./html/run3/index.html" class="card">
<img src="./img/run3.webp"></img>
<figcaption style="color:black">run3</figcaption>
</a>
<a href="./html/abandoned/index.html" class="card">
<img src="./img/abandonedgame.jfif"></img>
<figcaption style="color:black">abandoned</figcaption>
</a>
<a href="./html/thats not my scratcher/index.html" class="card">
<img src="./img/thats not my scratcher.png"></img>
<figcaption style="color:black">Thats Not My Scratcher</figcaption>
</a>
<a href="./html/run billy run/index.html" class="card">
<img src="./img/run billy run.png"></img>
<figcaption style="color:black">run billy run</figcaption>
</a>
<a href="https://thatsnotmyneighbor.online" class="card">
<img src="./img/thats not my neighbor.jpg"></img>
<figcaption style="color:black">Thats Not My Neighbor</figcaption>
</a>
</div>
<a href="block-lanschool-2.0.html" class="block-lanschool">Block Lanschool 2.0</a>
</div>
</div>
<script src="game.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Show the secret menu immediately
const secretMenu = document.getElementById('secretMenu');
secretMenu.classList.remove('hidden');
});
</script>
</body>
</html>