So basically I will not be providing major updates to cube spy anymore. This does not mean it is discontinued, It just means I will only provide minor updates to cube spy. Here is the code for PearOS 4.0 beta 1:
<!DOCTYPE html>
<html>
<head>
<title>PearOS Desktop</title>
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
height: 100vh;
overflow: hidden;
}
/* Login Screen */
.login-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
z-index: 100;
transition: opacity 0.5s ease;
}
.login-header {
margin-bottom: 40px;
text-align: center;
}
.login-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.login-header p {
opacity: 0.8;
}
.login-box {
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 8px;
width: 320px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.login-box h2 {
color: #333;
margin-bottom: 20px;
text-align: center;
}
.login-input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.login-btn {
width: 100%;
padding: 12px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: background 0.2s;
}
.login-btn:hover {
background: #45a049;
}
/* Desktop Interface */
.desktop {
display: none;
width: 100%;
height: 100vh;
background-color: #008080;
position: relative;
overflow: hidden;
}
.desktop-icons {
position: absolute;
top: 20px;
left: 20px;
}
.desktop-icon {
width: 80px;
margin-bottom: 20px;
color: white;
text-align: center;
cursor: pointer;
padding: 5px;
border-radius: 3px;
}
.desktop-icon:hover {
background: rgba(255,255,255,0.2);
}
.desktop-icon img {
width: 48px;
height: 48px;
margin-bottom: 5px;
}
.desktop-icon span {
display: block;
font-size: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.taskbar {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, #3a6ea5, #2a5298);
display: flex;
align-items: center;
padding: 0 10px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
.start-button {
background: #4CAF50;
color: white;
padding: 5px 15px;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}
.clock {
margin-left: auto;
margin-right: 20px;
color: white;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Login Screen -->
<div class="login-screen" id="loginScreen">
<div class="login-header">
<h1>PearOS</h1>
<p>Welcome back! Please sign in</p>
</div>
<div class="login-box">
<h2>Login</h2>
<input type="text" placeholder="Username" class="login-input" id="username">
<input type="password" placeholder="Password" class="login-input" id="password">
<button class="login-btn" id="loginBtn">Sign In</button>
</div>
</div>
<!-- Desktop (hidden initially) -->
<div class="desktop" id="desktop">
<div class="desktop-icons">
<div class="desktop-icon" onclick="openApp('files')">
<img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="Files">
<span>Files</span>
</div>
<div class="desktop-icon" onclick="openApp('browser')">
<img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="Browser">
<span>Browser</span>
</div>
<div class="desktop-icon" onclick="openApp('settings')">
<img src="https://cdn-icons-png.flaticon.com/512/2965/2965358.png" alt="Settings">
<span>Settings</span>
</div>
</div>
<div class="taskbar">
<div class="start-button" onclick="openStartMenu()">
Start
</div>
<div class="clock" id="clock">12:00 PM</div>
</div>
</div>
<script>
// Wait for DOM to load
document.addEventListener('DOMContentLoaded', function() {
// Get elements
const loginScreen = document.getElementById('loginScreen');
const desktop = document.getElementById('desktop');
const loginBtn = document.getElementById('loginBtn');
const clock = document.getElementById('clock');
// Login button click handler
loginBtn.addEventListener('click', function() {
// Hide login screen with fade effect
loginScreen.style.opacity = '0';
// After fade completes, hide it and show desktop
setTimeout(function() {
loginScreen.style.display = 'none';
desktop.style.display = 'block';
// Start clock
updateClock();
setInterval(updateClock, 60000);
}, 500);
});
// Simple app opening function
window.openApp = function(appName) {
alert(appName.charAt(0).toUpperCase() + appName.slice(1) + ' app would open here!');
};
// Start menu function
window.openStartMenu = function() {
alert('Start menu would appear here!');
};
// Clock function
function updateClock() {
const now = new Date();
let hours = now.getHours();
const minutes = now.getMinutes().toString().padStart(2, '0');
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // Convert 0 to 12
clock.textContent = `${hours}:${minutes} ${ampm}`;
}
});
</script>
</body>
</html>
Thank you!