https://cool-games.netlify.app/play

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=88ebbda7-e997-4b99-92fd-a5c5e8748a44
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Cool Games - Neon Zone</title>
10    <style>
11        body {
12            margin: 0;
13            padding: 0;
14            background-color: #050505;
15            height: 100vh;
16            display: flex;
17            flex-direction: column;
18            justify-content: center;
19            align-items: center;
20            font-family: 'Courier New', Courier, monospace;
21            overflow: hidden;
22            position: relative;
23        }
24
25        /* --- FIXED MOVING NEON BACKGROUND --- */
26        .cyber-grid {
27            position: absolute;
28            top: 0;
29            left: 0;
30            width: 200%;
31            height: 200%;
32            background-image: 
33                linear-gradient(rgba(0, 255, 255, 0.8) 2px, transparent 2px),
34                linear-gradient(90deg, rgba(0, 255, 255, 0.8) 2px, transparent 2px);
35            background-size: 50px 50px;
36            background-position: 0 0;
37            /* 3D Perspective Setup */
38            transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
39            animation: grid-move 1s linear infinite;
40            z-index: -1;
41            opacity: 0.6;
42            /* Neon Glow Filter on the lines */
43            filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8));
44            /* Fade out at the top (horizon) */
45            mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
46            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
47        }
48
49        @keyframes grid-move {
50            0% {
51                background-position: 0 0;
52            }
53            100% {
54                /* Moves the background exactly one grid unit (50px) to create seamless loop */
55                background-position: 0 50px; 
56            }
57        }
58
59        /* Neon Text Styling */
60        .neon-title {
61            font-size: 5rem;
62            font-weight: bold;
63            text-transform: uppercase;
64            color: #fff;
65            text-align: center;
66            margin-bottom: 50px;
67            letter-spacing: 10px;
68            text-shadow: 
69                0 0 5px #fff,
70                0 0 10px #fff,
71                0 0 20px #fff,
72                0 0 40px #0ff,
73                0 0 80px #0ff,
74                0 0 90px #0ff,
75                0 0 100px #0ff;
76            animation: flicker 1.5s infinite alternate;
77            z-index: 1;
78        }
79
80        /* Neon Button Styling */
81        .neon-button {
82            position: relative;
83            display: inline-block;
84            padding: 20px 40px;
85            font-size: 2rem;
86            font-weight: bold;
87            text-transform: uppercase;
88            text-decoration: none;
89            color: #0ff;
90            background: transparent;
91            border: 2px solid #0ff;
92            border-radius: 5px;
93            letter-spacing: 4px;
94            transition: 0.3s;
95            cursor: pointer;
96            box-shadow: 
97                0 0 10px #0ff,
98                inset 0 0 10px #0ff;
99            text-shadow: 0 0 10px #0ff;
100            z-index: 1;
101        }
102
103        .neon-button:hover {
104            background: #0ff;
105            color: #000;
106            box-shadow: 
107                0 0 20px #0ff,
108                0 0 50px #0ff,
109                inset 0 0 20px #0ff;
110            text-shadow: none;
111        }
112
113        @keyframes flicker {
114            0%, 18%, 22%, 25%, 53%, 57%, 100% {
115                text-shadow: 
116                0 0 5px #fff,
117                0 0 10px #fff,
118                0 0 20px #fff,
119                0 0 40px #0ff,
120                0 0 80px #0ff,
121                0 0 90px #0ff,
122                0 0 100px #0ff;
123            }
124            20%, 24%, 55% {
125                text-shadow: none;
126                opacity: 0.5;
127            }
128        }
129
130        @media (max-width: 600px) {
131            .neon-title { font-size: 3rem; letter-spacing: 5px; }
132            .neon-button { font-size: 1.5rem; padding: 15px 30px; }
133        }
134    </style>
135</head>
136<body>
137

138    <!-- Moving Background Element -->
139    <div class="cyber-grid"></div>
140
141    <!-- Main Neon Title -->
142    <h1 class="neon-title">COOL GAMES</h1>
143
144    <!-- Interactive Neon Button -->
145    <a class='neon-button' href='/load' id='playBtn'>PLAY</a>
146
147    

147<script>
148        document.getElementById('playBtn').addEventListener('click', function() {
149            console.log("Initiating game load sequence...");
150        });
151    </script>

151

152<script src="https://keepandroidopen.org/banner.js?link=https://example.com/android&hidebutton=off"></script>

152
153</body>
154</html>