-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
409 lines (371 loc) · 17.8 KB
/
index.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6J1M89GB0Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-6J1M89GB0Q');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>0xste's Terminal</title>
<meta name="description" content="i am not a frontend engineer, please don't judge">
<meta name="keywords" content="stefano mantini, platform engineering, developer experience, software engineer">
<link rel="author" href="0xste" />
<link rel="canonical" href="/" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Fira Code', monospace;
background-color: #0e0e0e;
color: #ececec;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.terminal {
width: 100%;
height: 100%;
background-color: #0e0e0e;
padding: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.output {
flex-grow: 1;
white-space: pre-wrap;
line-height: 1.6;
color: #ececec;
font-size: 16px;
overflow-y: auto;
padding-bottom: 20px;
}
.input-line {
display: block;
display: flex;
align-items: center;
}
.prompt {
color: #00d3ff;
margin-right: 5px;
}
.user-input {
color: #ececec;
outline: none;
border: none;
background: none;
font-family: 'Fira Code', monospace;
font-size: 16px;
width: 100%;
}
.terminal-header {
background-color: #1e1e1e;
padding: 10px;
color: #00d3ff;
border-bottom: 1px solid #444;
display: flex;
justify-content: space-between;
}
.terminal-header span {
color: #ffbd2e;
}
@media (max-width: 768px) {
.output {
font-size: 14px;
}
.user-input {
font-size: 14px;
}
}
.overlay {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
gap: 10px; /* Space between videos */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000; /* Ensure overlay is above other content */
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
visibility: hidden; /* Initially hidden */
}
iframe {
width: 100%; /* Make iframe take full column width */
height: 100%; /* Make iframe take full column height */
border: none; /* Remove default border */
}
button {
position: absolute;
top: 20px;
right: 20px;
padding: 10px 15px;
font-size: 16px;
z-index: 1001; /* Ensure the button is above the overlay */
visibility: hidden; /* Initially hidden */
}
</style>
</head>
<body>
<button id="cleanupButton" onclick="cleanup()">X</button>
<div class="overlay" id="videoOverlay"></div>
<div class="terminal">
<div class="output" id="terminal-output">Stefano Mantini - Head of Platform Engineering @ Blockdaemon<br>Type "help" for a list of commands.<br></div>
<div class="input-line">
<span class="prompt" id="prompt">0xste@host:~$</span>
<input type="text" id="cli-input" class="user-input" autofocus placeholder="">
</div>
</div>
<script>
const terminalOutput = document.getElementById('terminal-output');
const cliInput = document.getElementById('cli-input');
const promptSpan = document.getElementById('prompt');
let userIP = 'host';
let output = '';
const commands = {
'help': 'Available commands: \nhelp - Show available commands\nclear - clear the terminal screen\nabout - Information about the author\nlinkedin - Open LinkedIn\n' +
'github - Open GitHub\nblog - Open Blog\nls – list directory contents\ncat – concatenate and print files\nrm – remove directory entries',
'about': 'Seasoned engineering leader with a proven track record of architecting and scaling global, distributed systems that power mission-critical platforms. Adept at crafting data-driven technical strategy, leading cross-functional teams, and fostering a culture of innovation to provide highly available, resilient solutions at scale for global technology platforms.',
'linkedin': () => {
window.open("https://www.linkedin.com/in/stefanomantini", "_blank");
return 'Opening LinkedIn...';
},
'github': () => {
window.open("https://github.com/0xste", "_blank");
return 'Opening GitHub...';
},
'blog': () => {
window.open("https://0xste.github.io", "_blank");
return 'Opening Blog...';
},
'ls': () => {
return generateFileList();
},
'cat': (file) => {
return displaySecretContent(file) ;
},
};
// Fetch IP and update prompt
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
userIP = data.ip;
promptSpan.textContent = `0xste@${userIP}:~$`;
})
.catch(error => {
appendOutput('System', 'Error fetching IP address.');
});
function processCommand(input) {
const [command, ...args] = input.split(' '); // Split input into command and arguments
const argString = args.join(' '); // Join arguments back to a single string
if (command === 'clear') {
terminalOutput.innerHTML = ''; // Clear terminal output
cliInput.value = ''; // Clear input field
promptSpan.textContent = `0xste@${userIP}:~$`; // Reset prompt
return;
}
if (input === "what a week") {
const currentDay = new Date().toLocaleDateString(undefined, {
weekday: 'long'
});
console.log(input, currentDay)
output = `Captain, it's ${currentDay}`
appendOutput(input, output)
return
}
// Check if the command exists in the commands object
if (commands[command]) {
// If the command is a function, call it with arguments if any
output = typeof commands[command] === 'function' ? commands[command](argString) : commands[command];
} else {
output = `Command not found: ${input}`;
}
appendOutput(input, output);
}
function appendOutput(input, output) {
terminalOutput.innerHTML += `<span class="prompt">0xste@${userIP}:~$</span> ${input}\n${output}\n`;
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
const videoCount = 4; // Total number of videos to display (8 columns x 8 rows)
function createVideos() {
const overlay = document.getElementById('videoOverlay');
const cleanupButton = document.getElementById('cleanupButton');
// Show the overlay and button
overlay.style.visibility = 'visible';
cleanupButton.style.visibility = 'visible';
for (let i = 0; i < videoCount; i++) {
const iframe = document.createElement('iframe');
iframe.src = `https://www.youtube.com/embed/NUYvbT6vTPs?autoplay=1&controls=0&mute=1`;
iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
// Append iframe to overlay
overlay.appendChild(iframe);
}
// Unmute one video after a slight delay
setTimeout(() => {
const unmuteIndex = Math.floor(Math.random() * videoCount);
const unmuteIframe = document.querySelectorAll('iframe')[unmuteIndex];
unmuteIframe.src = unmuteIframe.src.replace('mute=1', 'mute=0');
}, 1000); // Adjust delay as needed
}
// Function to clean up and remove all video iframes
function cleanup() {
const iframes = document.querySelectorAll('iframe');
iframes.forEach(iframe => iframe.remove());
// Hide the overlay and button after cleanup
document.getElementById('videoOverlay').style.visibility = 'hidden';
document.getElementById('cleanupButton').style.visibility = 'hidden';
}
function generateFileList() {
const sensitiveFiles = [
'bank_statement.pdf', 'tax_returns_2023.pdf',
'confidential_project_plan.docx', 'passwords.txt', 'encryption_keys.json',
'personal_info.txt', 'social_security_number.txt', 'medical_records.docx',
'contracts/contract_A.pdf', 'contracts/contract_B.pdf', 'notes/meeting_notes.txt',
'documents/important_emails.eml', 'photos/private_album.zip',
'projects/security_audit_report.pdf', 'reports/financial_overview.xlsx',
'logins/password_manager.json', 'backup/secure_backup.zip',
'configuration/secrets.yaml', 'environments/staging/.env'
];
// Shuffle the sensitiveFiles array and pick a subset of random files
const randomFiles = sensitiveFiles.sort(() => 0.5 - Math.random()).slice(0, 10).map(file => {
// Randomly mark some entries as directories (e.g., contracts, notes, etc.)
return Math.random() > 0.7 ? `${file}/` : file; // About 30% chance to be a directory
})
randomFiles.unshift('resume.pdf');
return randomFiles.join('\n');
}
function displaySecretContent(file) {
const secretContents = {
'resume.pdf': 'Name: Stefano Mantini\nExperience:\n- Head of platform Engineering @ Blockdaemon - 2021-Present\n- Developer Experience Lead @ Pollinate - 2020-2021\n- Lead Software Engineer @ Atom Bank - 2019-2020\n- Senior Technical Architect @ Accenture - 2018-2019\n- Software Engineer @ Nissan - 2014-2016\n',
'bank_statement.pdf': 'Account Number: 987654321012\nBalance: $12,345.67\nTransactions:\n- 01/15/2024: Deposit $1,500.00\n- 01/18/2024: Withdrawal $250.00\n- 02/01/2024: Payment Received $300.00\n',
'tax_returns_2023.pdf': 'Filing Status: Single\nRefund: $1,200.00\nTotal Income: $65,000.00\nDeductions: $12,000.00\n',
'confidential_project_plan.docx': 'Project Name: SecureApp\nObjective: Develop a secure application for data management.\nTeam Members: Alice, Bob, Charlie\nTimeline: January 2024 - June 2024\nBudget: $50,000\n',
'passwords.txt': 'Email: [email protected]\nPassword: MyS3cureP@ss\nBank: JaneBank2024\nSocial Media: JaneSocial123\n',
'encryption_keys.json': '{\n "key1": "A1B2C3D4E5F6G7H8I9J0",\n "key2": "Q1R2S3T4U5V6W7X8Y9Z0"\n}',
'personal_info.txt': 'Name: Jane Smith\nAddress: 123 Main St, Anytown, CA, 90210\nSSN: 123-45-6789\n',
'social_security_number.txt': 'SSN: 123-45-6789\n',
'medical_records.docx': 'Patient Name: Jane Smith\nAllergies: None\nMedications: None\nLast Checkup: 01/10/2024\n',
'contracts/contract_A.pdf': 'Contract A Details:\n- Party A: XYZ Corp.\n- Party B: ABC LLC.\n- Amount: $25,000\n- Terms: Payment upon completion\n',
'contracts/contract_B.pdf': 'Contract B Details:\n- Party A: DEF Inc.\n- Party B: GHI Ltd.\n- Amount: $30,000\n- Terms: Monthly installments\n',
'notes/meeting_notes.txt': 'Meeting Notes from 03/10/2024:\n- Discussed Project Timeline\n- Action Items: Prepare design mockups, Schedule follow-up meeting\n',
'documents/important_emails.eml': 'From: [email protected]\nTo: [email protected]\nSubject: Important Project Update\nBody: Please review the attached documents and provide feedback by EOD.\n',
'photos/private_album.zip': 'Contains: 15 photos\n- vacation_2024_01.jpg\n- family_reunion_2023_02.jpg\n- birthday_party_2024_03.jpg\n',
'projects/security_audit_report.pdf': 'Security Audit Report 2024:\n- Vulnerabilities Found: 3\n- Recommendations: Immediate patching required\n- Next Steps: Schedule follow-up audit\n',
'reports/financial_overview.xlsx': 'Financial Overview 2023:\n- Revenue: $1,000,000\n- Expenses: $750,000\n- Profit: $250,000\n',
'logins/password_manager.json': '{\n "service1": {\n "username": "[email protected]",\n "password": "S3curePassword1"\n },\n "service2": {\n "username": "[email protected]",\n "password": "S3cureSocialPassword2"\n }\n}',
'backup/secure_backup.zip': 'Backup includes: Databases, Configuration Files, Important Documents\n- last_backup_date: 01/31/2024\n- encryption: AES-256\n',
'configuration/secrets.yaml': 'api_key: "AbCdEfGh123456"\ndatabase_password: "D@t@B@seP@ssw0rd"\nservice_url: "https://api.example.com/v1/"\n',
'environments/staging/.env': 'DB_HOST=staging-db.example.com\nDB_USER=staging_user\nDB_PASS=staging_pass123\nAPI_KEY=staging_api_key_123\n'
};
if (file === "resume.pdf"){ // skip cat
return `${file}\n\n${secretContents[file]}`;
}
if (secretContents[file]) {
createVideos()
return `🐈 ${file}\n\n${secretContents[file]}`;
} else {
return `${file}: No such file or directory`;
}
}
// List of malicious commands to trigger the Easter egg
const maliciousCommands = [
'rm -rf /',
'kill -r %%1',
'format c:',
'shutdown -h now',
'del *.* /f /s /q'
];
function triggerBSOD() {
const body = document.body;
// Store the original content to restore later
originalHTML = body.innerHTML;
// Remove the terminal and replace it with the BSOD screen
body.innerHTML = '';
body.style.backgroundColor = '#0000aa';
body.style.color = '#ffffff';
body.style.fontFamily = 'Consolas, "Courier New", monospace';
body.style.fontSize = '18px';
body.style.textAlign = 'left';
body.style.paddingTop = '50px';
body.style.paddingLeft = '30px';
body.style.lineHeight = '1.5';
// Realistic BSOD content
body.innerHTML = `
<div class="bsod">
<p>A problem has been detected and Windows has been shut down to prevent damage to your computer.</p>
<p>The problem seems to be caused by the following file: <strong>UNKNOWN_DRIVER.sys</strong></p>
<br>
<p>*** STOP: 0x000000D1 (0x00000000, 0x00000002, 0x00000000, 0x00000000)</p>
<p>*** DRIVER_IRQL_NOT_LESS_OR_EQUAL</p>
<br>
<p>If this is the first time you've seen this Stop error screen, restart your computer. If this screen appears again, follow these steps:</p>
<ul>
<li>Check to make sure any new hardware or software is properly installed.</li>
<li>If this is a new installation, ask your hardware or software manufacturer for any Windows updates you might need.</li>
<li>If problems continue, disable or remove any newly installed hardware or software.</li>
</ul>
<p>Disable BIOS memory options such as caching or shadowing. If you need to use Safe Mode to remove or disable components, restart your computer, press F8 to select Advanced Startup Options, and then select Safe Mode.</p>
<br>
<p>Technical information:</p>
<p>*** STOP: 0x0000001E (0x00000000, 0x00000000, 0x00000000, 0x00000000)</p>
<p>*** UNKNOWN_DRIVER.sys - Address 0x12345678 base at 0x87654321, DateStamp 0xabcdef01</p>
<br>
<p>Collecting data for crash dump ...</p>
<p>Initializing disk for crash dump ...</p>
<p>Beginning dump of physical memory ...</p>
<p>Dumping physical memory to disk: 40%</p>
<p class="flicker">Dump complete.</p>
<p class="flicker">Press Ctrl+R to restart</p>
</div>
`;
// Add flickering effect to make the final part of the BSOD more realistic
body.style.animation = "flicker 1.5s infinite";
// Add the flickering keyframes for the "dump complete" section
const styleSheet = document.createElement("style");
styleSheet.innerHTML = `
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.flicker {
animation: flicker 1.5s infinite;
}
`;
document.head.appendChild(styleSheet);
// Listen for 'Ctrl+Alt+Del' keypress or "exit" command to recover
window.addEventListener('keydown', handleBSODExit);
}
// Handle input submission
cliInput.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
const inputValue = cliInput.value.trim();
if (inputValue) {
if (maliciousCommands.includes(inputValue)) {
triggerBSOD(); // Trigger the BSOD effect if a malicious command is run
} else {
processCommand(inputValue);
}
cliInput.value = '';
}
}
});
// Automatically focus on the input field
window.onload = () => {
cliInput.focus();
};
window.focus = () => {
cliInput.focus();
};
</script>
</body>
</html>