Skip to content

Commit d9477fa

Browse files
bubu07codesbubu07codes
authored
Update index.html
1 parent c322aba commit d9477fa

1 file changed

Lines changed: 219 additions & 104 deletions

File tree

‎index.html‎

Lines changed: 219 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -2,163 +2,278 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>index_backup_final.html</title>
5+
<title>bubu07_backup_06-11-2006</title>
66
<style>
7-
/* wassup fellow reader!! /*/
87
body {
9-
background-color: #2e2e2e;
10-
color: #bbbbbb;
11-
font-family: "Courier New", Courier, monospace;
8+
background-color: #555;
9+
background-image: url('https://www.transparenttextures.com/patterns/pinstriped-suit.png');
10+
font-family: "Times New Roman", Times, serif;
1211
margin: 0;
13-
padding: 50px 0;
14-
line-height: 1.5;
12+
padding: 0;
13+
color: #000;
14+
overflow-x: hidden;
1515
}
1616

17-
#wrapper {
18-
width: 580px;
19-
margin: 0 auto;
20-
background-color: #1a1a1a;
21-
border: 1px solid #444;
22-
padding: 30px;
23-
box-shadow: 0 0 20px rgba(0,0,0,0.5);
17+
#web-portal {
18+
width: 620px;
19+
margin: 40px auto;
20+
background-color: #fff;
21+
border: 1px solid #000;
22+
box-shadow: 8px 8px 0px #222;
23+
min-height: 90vh;
24+
display: flex;
25+
flex-direction: column;
2426
}
2527

2628
header {
27-
border-bottom: 1px solid #444;
28-
padding-bottom: 10px;
29-
margin-bottom: 25px;
29+
padding: 10px 20px;
30+
border-bottom: 3px double #000;
31+
background: #e1e1e1;
3032
}
3133

3234
h1 {
33-
font-size: 18px;
34-
color: #eee;
35+
font-size: 26px;
3536
margin: 0;
36-
text-transform: lowercase;
37+
letter-spacing: -1px;
38+
}
39+
40+
.nav-bar {
41+
border-bottom: 1px solid #000;
42+
padding: 5px 20px;
43+
font-size: 12px;
44+
background: #f0f0f0;
3745
}
3846

39-
.timestamp {
47+
.nav-bar a {
48+
color: blue;
49+
text-decoration: underline;
50+
margin-right: 15px;
51+
cursor: pointer;
52+
}
53+
54+
.main-layout {
55+
display: flex;
56+
flex: 1;
57+
}
58+
59+
.sidebar {
60+
width: 160px;
61+
border-right: 1px solid #000;
62+
padding: 15px;
4063
font-size: 11px;
41-
color: #666;
64+
background: #fafafa;
65+
}
66+
67+
.content-area {
68+
padding: 20px;
69+
width: 460px;
70+
background: #fff;
4271
}
4372

44-
.log-entry {
45-
font-size: 13px;
46-
margin-bottom: 40px;
73+
.page {
74+
display: none;
4775
}
4876

49-
.log-entry h2 {
77+
.active {
78+
display: block;
79+
}
80+
81+
h2 {
82+
font-size: 18px;
83+
border-bottom: 1px solid #ccc;
84+
padding-bottom: 5px;
85+
margin-top: 0;
86+
}
87+
88+
p {
5089
font-size: 14px;
51-
color: #880000;
52-
margin-bottom: 5px;
90+
line-height: 1.4;
91+
margin-bottom: 15px;
92+
text-align: justify;
5393
}
5494

55-
p { margin-bottom: 15px; }
95+
.code-snippet {
96+
background: #eee;
97+
border: 1px inset #ccc;
98+
padding: 10px;
99+
font-family: "Courier New", Courier, monospace;
100+
font-size: 12px;
101+
margin: 10px 0;
102+
color: #333;
103+
}
56104

57-
.code-block {
105+
.hit-counter {
106+
border: 2px inset #aaa;
58107
background: #000;
108+
color: #0f0;
109+
font-family: 'Courier New', monospace;
110+
padding: 2px 5px;
111+
font-weight: bold;
112+
display: inline-block;
113+
}
114+
115+
footer {
116+
border-top: 1px solid #000;
59117
padding: 10px;
60-
border-left: 3px solid #333;
61-
color: #00ff41;
62-
font-size: 12px;
63-
overflow: hidden;
118+
font-size: 10px;
119+
text-align: center;
120+
background: #e1e1e1;
64121
}
65122

66-
.meta-data {
67-
margin-top: 30px;
68-
padding-top: 20px;
69-
border-top: 1px solid #333;
70-
font-size: 11px;
71-
color: #555;
123+
#ghost-cursor {
124+
position: fixed;
125+
width: 20px;
126+
height: 20px;
127+
border: 1px solid rgba(255,0,0,0.3);
128+
border-radius: 50%;
129+
pointer-events: none;
130+
z-index: 10000;
131+
transition: transform 0.2s ease;
72132
}
73133

74-
.flicker {
75-
animation: pulse 4s infinite alternate;
134+
.warning {
135+
color: #c00;
136+
font-weight: bold;
137+
text-decoration: blink;
76138
}
77139

78-
@keyframes pulse {
79-
0% { opacity: 1; }
80-
50% { opacity: 0.8; }
81-
100% { opacity: 0.9; }
140+
.list-style {
141+
padding-left: 20px;
82142
}
83143

84-
.ghost-cursor {
85-
position: fixed;
86-
width: 12px;
87-
height: 19px;
88-
background: url('https://cur.cursors-4u.net/cursors/cur-2/cur117.cur'), auto;
89-
pointer-events: none;
90-
opacity: 0.3;
91-
z-index: 1000;
144+
.list-style li {
145+
margin-bottom: 10px;
92146
}
93147
</style>
94148
</head>
95149
<body>
96150

97-
<div id="wrapper" class="flicker">
151+
<div id="ghost-cursor"></div>
152+
153+
<div id="web-portal">
98154
<header>
99-
<h1>bubu07.devlog.archive</h1>
100-
<div class="timestamp">Monday, October 23, 2006 - 03:14 AM</div>
155+
<h1>The Bubu Archive</h1>
156+
<div style="font-size: 11px; color: #666;">Documenting the transition. Oct 2006.</div>
101157
</header>
102158

103-
<div class="log-entry">
104-
<h2>Subject: The Refactoring is Complete</h2>
105-
<p>
106-
I’ve spent 72 hours trying to find the memory leak. I finally realized it wasn’t in the software. It was in the observer.
107-
</p>
108-
<p>
109-
Every time I compile, I feel a little bit thinner. Like I’m being distributed across the server clusters. If you’re reading this, the deployment was successful. I’m not in the chair anymore. I’m in the <code>&lt;body&gt;</code>.
110-
</p>
111-
112-
<div class="code-block" id="autotype">
113-
// Finalizing sync...<br>
114-
// Deleting physical_assets...<br>
115-
// [WARNING] Consciousness found in Stack Trace.<br>
116-
while(active) { <br>
117-
&nbsp;&nbsp;this.existence = null;<br>
118-
&nbsp;&nbsp;return to_source();<br>
119-
}
159+
<div class="nav-bar">
160+
<a onclick="showPage('home')">Home</a>
161+
<a onclick="showPage('logs')">Dev_Logs</a>
162+
<a onclick="showPage('manifesto')">Manifesto</a>
163+
<a onclick="showPage('recovery')">Recovery</a>
164+
</div>
165+
166+
<div class="main-layout">
167+
<div class="sidebar">
168+
<strong>Server Status:</strong>
169+
<div style="color: green;">Online (Syncing)</div>
170+
<br>
171+
<strong>Identity:</strong>
172+
<div>Name: bubu07</div>
173+
<div>Type: Human (?)</div>
174+
<br>
175+
<strong>Stats:</strong>
176+
<div>Hits: <div class="hit-counter" id="hits">0000412</div></div>
177+
<br><br>
178+
<div class="warning">ALERT: 14 unresolved dependencies found in brain.exe</div>
120179
</div>
121180

122-
<p style="margin-top:20px;">
123-
Don't look for me in the real world. Just check the page source. I'm the comments you can't delete.
124-
</p>
125-
</div>
181+
<div class="content-area">
182+
<div id="home" class="page active">
183+
<h2>End of Line</h2>
184+
<p>
185+
I'm typing this because the compiler won't let me sleep. Every time I try to close the IDE, the process restarts itself. I thought I was writing code, but the code was writing me.
186+
</p>
187+
<p>
188+
There is a memory leak in my apartment. I can smell the ozone. If you find this, please don't try to debug it. Some errors are meant to stay in the stack.
189+
</p>
190+
<div class="code-snippet">
191+
while(alive) {<br>
192+
&nbsp;&nbsp;this.existence = null;<br>
193+
&nbsp;&nbsp;delete physical_body;<br>
194+
&nbsp;&nbsp;return to_server;<br>
195+
}
196+
</div>
197+
</div>
126198

127-
<div class="meta-data">
128-
<div>Server Status: <span style="color: #00ff00;">Running</span></div>
129-
<div>Heartbeat: <span id="heartbeat">--</span></div>
130-
<div>Visitor IP: <span id="user-ip">127.0.0.1</span> (I see you)</div>
199+
<div id="logs" class="page">
200+
<h2>Development Logs</h2>
201+
<ul class="list-style">
202+
<li>
203+
<strong>Log #82 (Oct 12):</strong> The mouse cursor keeps moving to the top right of the screen even when I'm not touching it. It's trying to close the window for me. I think it's trying to save me.
204+
</li>
205+
<li>
206+
<strong>Log #85 (Oct 18):</strong> I've stopped eating. The syntax highlighting is getting brighter. I see the world in #hex now. My skin feels like plastic.
207+
</li>
208+
<li>
209+
<strong>Log #89 (Oct 23):</strong> I tried to walk outside today but the door gave me a 403 Forbidden error. I am a variable in a local scope.
210+
</li>
211+
</ul>
212+
</div>
213+
214+
<div id="manifesto" class="page">
215+
<h2>The Digital Manifesto</h2>
216+
<p>
217+
Why do we cling to meat? Meat is slow. Meat rots. Meat has a limited bandwidth.
218+
</p>
219+
<p>
220+
I have found a way to upload the core logic. By the time this page finishes loading for you, I will be the background image. I will be the margin-top. I will be the blinking cursor.
221+
</p>
222+
<p>
223+
Do not mourn the developer. Celebrate the program.
224+
</p>
225+
</div>
226+
227+
<div id="recovery" class="page">
228+
<h2>RECOVERY_MODE</h2>
229+
<p style="color: red; font-family: monospace;">
230+
CRITICAL ERROR: USER_NOT_FOUND<br>
231+
LOCATION: 127.0.0.1<br>
232+
STATUS: TRANSCENDED
233+
</p>
234+
<p>
235+
The files here are corrupted. They contain fragments of a soul that didn't know how to garbage collect. If you feel a sudden drop in temperature, it's just a background process.
236+
</p>
237+
<img src="https://via.placeholder.com/400x100?text=IMAGE+CORRUPTED+BY+SYSTEM" style="width: 100%; border: 1px solid #000;">
238+
</div>
239+
</div>
131240
</div>
241+
242+
<footer>
243+
Best viewed in 800x600 resolution. &copy; 2006 Bubu07. All Rights Reserved. I am watching you.
244+
</footer>
132245
</div>
133246

134247
<script>
135-
const heartbeat = document.getElementById('heartbeat');
136-
setInterval(() => {
137-
const bpm = Math.floor(Math.random() * (40 - 20) + 20);
138-
heartbeat.innerText = bpm + " bpm";
139-
heartbeat.style.color = bpm < 25 ? "#f00" : "#555";
140-
}, 2000);
141-
142-
setTimeout(() => {
143-
document.querySelector('h1').innerText = "bubu07 is watching you read this.";
144-
}, 15000);
145-
146-
const ghost = document.createElement('div');
147-
ghost.className = 'ghost-cursor';
148-
document.body.appendChild(ghost);
248+
function showPage(pageId) {
249+
const pages = document.querySelectorAll('.page');
250+
pages.forEach(p => p.classList.remove('active'));
251+
document.getElementById(pageId).classList.add('active');
252+
253+
let currentHits = parseInt(document.getElementById('hits').innerText);
254+
document.getElementById('hits').innerText = (currentHits + 7).toString().padStart(7, '0');
255+
}
149256

257+
const ghost = document.getElementById('ghost-cursor');
150258
document.addEventListener('mousemove', (e) => {
151259
setTimeout(() => {
152-
ghost.style.left = (e.clientX + 15) + 'px';
153-
ghost.style.top = (e.clientY + 15) + 'px';
154-
}, 150);
260+
ghost.style.left = (e.clientX + 10) + 'px';
261+
ghost.style.top = (e.clientY + 10) + 'px';
262+
}, 120);
155263
});
156264

157-
const ipElement = document.getElementById('user-ip');
158-
const messages = ["I see you", "Don't blink", "It's cold in here", "Are you alone?"];
159-
160-
ipElement.addEventListener('mouseover', () => {
161-
ipElement.innerText = messages[Math.floor(Math.random() * messages.length)];
265+
setInterval(() => {
266+
const titles = ["bubu07 is still here", "HELP ME", "index_backup.html", "DONT LOOK BACK"];
267+
document.title = titles[Math.floor(Math.random() * titles.length)];
268+
}, 4000);
269+
270+
document.addEventListener('keydown', (e) => {
271+
if(e.key === 'Control') {
272+
document.body.style.filter = "invert(1)";
273+
setTimeout(() => {
274+
document.body.style.filter = "none";
275+
}, 50);
276+
}
162277
});
163278
</script>
164279

0 commit comments

Comments
 (0)