Skip to content

Commit 136f364

Browse files
nine1onenine1one
committed
update
1 parent 45c5f54 commit 136f364

3 files changed

Lines changed: 423 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Matrix - Choose Your Destiny</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background-color: #000;
16+
overflow: hidden;
17+
font-family: 'Courier New', monospace;
18+
}
19+
20+
#matrix-canvas {
21+
position: fixed;
22+
top: 0;
23+
left: 0;
24+
z-index: 1;
25+
}
26+
27+
.pill-choice {
28+
position: fixed;
29+
top: 50%;
30+
left: 50%;
31+
transform: translate(-50%, -50%);
32+
z-index: 2;
33+
text-align: center;
34+
color: #0F0;
35+
}
36+
37+
.pill-choice h1 {
38+
font-size: 3rem;
39+
font-weight: bold;
40+
letter-spacing: 0.3rem;
41+
margin-bottom: 1rem;
42+
text-shadow: 0 0 10px #0F0, 0 0 20px #0F0, 0 0 30px #0F0;
43+
animation: glow 2s ease-in-out infinite alternate;
44+
}
45+
46+
.question {
47+
font-size: 1.8rem;
48+
margin-bottom: 3rem;
49+
opacity: 0.9;
50+
letter-spacing: 0.15rem;
51+
text-shadow: 0 0 8px #0F0;
52+
}
53+
54+
.button-container {
55+
display: flex;
56+
gap: 3rem;
57+
justify-content: center;
58+
align-items: center;
59+
}
60+
61+
.pill-button {
62+
padding: 1.5rem 3rem;
63+
font-size: 1.3rem;
64+
font-family: 'Courier New', monospace;
65+
font-weight: bold;
66+
letter-spacing: 0.1rem;
67+
border: 3px solid;
68+
border-radius: 50px;
69+
cursor: pointer;
70+
text-decoration: none;
71+
display: inline-block;
72+
transition: all 0.3s ease;
73+
text-transform: uppercase;
74+
position: relative;
75+
overflow: hidden;
76+
}
77+
78+
.pill-button::before {
79+
content: '';
80+
position: absolute;
81+
top: 50%;
82+
left: 50%;
83+
width: 0;
84+
height: 0;
85+
border-radius: 50%;
86+
transform: translate(-50%, -50%);
87+
transition: width 0.6s, height 0.6s;
88+
z-index: -1;
89+
}
90+
91+
.pill-button:hover::before {
92+
width: 300px;
93+
height: 300px;
94+
}
95+
96+
.blue-pill {
97+
background-color: rgba(0, 100, 255, 0.2);
98+
border-color: #0066FF;
99+
color: #0066FF;
100+
text-shadow: 0 0 10px #0066FF;
101+
box-shadow: 0 0 20px rgba(0, 100, 255, 0.5);
102+
}
103+
104+
.blue-pill::before {
105+
background-color: rgba(0, 100, 255, 0.3);
106+
}
107+
108+
.blue-pill:hover {
109+
background-color: rgba(0, 100, 255, 0.4);
110+
box-shadow: 0 0 30px rgba(0, 100, 255, 0.8), 0 0 50px rgba(0, 100, 255, 0.6);
111+
transform: scale(1.1);
112+
border-color: #4D94FF;
113+
}
114+
115+
.red-pill {
116+
background-color: rgba(255, 0, 0, 0.2);
117+
border-color: #FF0000;
118+
color: #FF0000;
119+
text-shadow: 0 0 10px #FF0000;
120+
box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
121+
}
122+
123+
.red-pill::before {
124+
background-color: rgba(255, 0, 0, 0.3);
125+
}
126+
127+
.red-pill:hover {
128+
background-color: rgba(255, 0, 0, 0.4);
129+
box-shadow: 0 0 30px rgba(255, 0, 0, 0.8), 0 0 50px rgba(255, 0, 0, 0.6);
130+
transform: scale(1.1);
131+
border-color: #FF4D4D;
132+
}
133+
134+
@keyframes glow {
135+
from {
136+
text-shadow: 0 0 10px #0F0, 0 0 20px #0F0, 0 0 30px #0F0;
137+
}
138+
to {
139+
text-shadow: 0 0 20px #0F0, 0 0 30px #0F0, 0 0 40px #0F0;
140+
}
141+
}
142+
143+
@media (max-width: 768px) {
144+
.pill-choice h1 {
145+
font-size: 2rem;
146+
letter-spacing: 0.2rem;
147+
}
148+
149+
.question {
150+
font-size: 1.2rem;
151+
margin-bottom: 2rem;
152+
}
153+
154+
.button-container {
155+
flex-direction: column;
156+
gap: 1.5rem;
157+
}
158+
159+
.pill-button {
160+
padding: 1.2rem 2.5rem;
161+
font-size: 1.1rem;
162+
}
163+
}
164+
</style>
165+
</head>
166+
<body>
167+
<canvas id="matrix-canvas"></canvas>
168+
<div class="pill-choice">
169+
<h1>GREETINGS!!</h1>
170+
<p class="question">Choose Your Destiny</p>
171+
<div class="button-container">
172+
<a href="https://blockone987.com" class="pill-button blue-pill">ENTER</a>
173+
<a href="about:blank" class="pill-button red-pill">EXIT</a>
174+
</div>
175+
</div>
176+
<script>
177+
const canvas = document.getElementById('matrix-canvas');
178+
const ctx = canvas.getContext('2d');
179+
180+
canvas.width = window.innerWidth;
181+
canvas.height = window.innerHeight;
182+
183+
const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
184+
const matrixArray = matrix.split("");
185+
186+
const fontSize = 10;
187+
const columns = canvas.width / fontSize;
188+
189+
const drops = [];
190+
for(let x = 0; x < columns; x++) {
191+
drops[x] = 1;
192+
}
193+
194+
function draw() {
195+
ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
196+
ctx.fillRect(0, 0, canvas.width, canvas.height);
197+
198+
ctx.fillStyle = '#0F0';
199+
ctx.font = fontSize + 'px monospace';
200+
201+
for(let i = 0; i < drops.length; i++) {
202+
const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
203+
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
204+
205+
if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
206+
drops[i] = 0;
207+
}
208+
drops[i]++;
209+
}
210+
}
211+
212+
setInterval(draw, 35);
213+
214+
window.addEventListener('resize', () => {
215+
canvas.width = window.innerWidth;
216+
canvas.height = window.innerHeight;
217+
});
218+
</script>
219+
</body>
220+
</html>

‎matrix.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const canvas = document.getElementById(‘matrix-canvas’);
2+
const ctx = canvas.getContext(‘2d’);
3+
4+
canvas.width = window.innerWidth;
5+
canvas.height = window.innerHeight;
6+
7+
const matrix = “ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}”;
8+
const matrixArray = matrix.split(””);
9+
10+
const fontSize = 10;
11+
const columns = canvas.width / fontSize;
12+
13+
const drops = [];
14+
for(let x = 0; x < columns; x++) {
15+
drops[x] = 1;
16+
}
17+
18+
function draw() {
19+
ctx.fillStyle = ‘rgba(0, 0, 0, 0.04)’;
20+
ctx.fillRect(0, 0, canvas.width, canvas.height);
21+
22+
```
23+
ctx.fillStyle = '#0F0';
24+
ctx.font = fontSize + 'px monospace';
25+
26+
for(let i = 0; i < drops.length; i++) {
27+
const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
28+
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
29+
30+
if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
31+
drops[i] = 0;
32+
}
33+
drops[i]++;
34+
}
35+
```
36+
37+
}
38+
39+
setInterval(draw, 35);
40+
41+
window.addEventListener(‘resize’, () => {
42+
canvas.width = window.innerWidth;
43+
canvas.height = window.innerHeight;
44+
});

0 commit comments

Comments
 (0)