<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>x Open</title>
<style>
body {
margin: 0;
padding: 0;
background-color: hwb(0 0% 100%);
font-family: 'Courier New', Courier, monospace;
color: hwb(290 29% 20%);
}
#screen {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
#terminal {
background-color: black;
padding: 20px;
border: 2px solid hwb(290 29% 20%);
border-radius: 5px;
width: 80%;
max-width: 600px;
}
#password-screen {
background-color: black;
padding: 20px;
border: 2px solid hwb(290 29% 20%);
border-radius: 5px;
width: 80%;
max-width: 600px;
text-align: center;
}
#password-content input {
background-color: black;
color: hwb(290 29% 20%);
border: 2px solid hwb(290 29% 20%);
padding: 10px;
margin: 10px 0;
width: 100%;
max-width: 250px;
border-radius: 5px;
}
#password-content button {
background-color: hwb(290 29% 20%);
color: black;
font-size: 1.2em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#desktop-image {
width: 100%;
height: 100vh;
object-fit: cover;
margin-bottom: 20px;
display: block;
transition: all 0.5s ease;
}
#link-button {
background-color: #9900ff00;
color: white;
font-size: 1.2em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#link-button:hover {
background-color: #a600ff00;
}
#heart-icon {
font-size: 2em;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="screen">
<div id="terminal">
<p>Starting x...</p>
<p id="loading-text"></p>
</div>
<div id="password-screen" style="display:none;">
<div id="password-content">
<h1>Welcome home. please enter the password;)</h1>
<input type="password" id="password" placeholder="Enter password">
<button id="submit-password">Submit</button>
<p id="error-message" style="color: red;"></p>
</div>
</div>
<div id="desktop" style="display:none;">
<div id="desktop-content">
<img id="desktop-image" src="x.png" alt="Desktop Image">
<button id="link-button">
<span id="heart-icon">🐈</span>
</button>
</div>
</div>
</div>
<script>
let loadingText = document.getElementById('loading-text');
let messages = [
"System is starting...",
"Loading...",
"Scanning file system...",
"Establishing connections...",
"System successfully started!"
];
let i = 0;
function showMessage() {
if (i < messages.length) {
loadingText.innerText = messages[i];
i++;
setTimeout(showMessage, 2000);
} else {
setTimeout(() => {
document.getElementById('terminal').style.display = 'none';
document.getElementById('password-screen').style.display = 'block';
}, 2000);
}
}
showMessage();
document.getElementById('submit-password').addEventListener('click', function() {
let enteredPassword = document.getElementById('password').value;
if (enteredPassword === '8851') {
document.getElementById('password-screen').style.display = 'none';
document.getElementById('desktop').style.display = 'block';
document.getElementById('desktop-image').src = 'x.png';
} else {
document.getElementById('error-message').innerText = "Incorrect password. Try again.";
}
});
document.getElementById('link-button').addEventListener('click', function() {
window.open('randomwebsite', '_blank');
});
</script>
</body>
</html>
