`; } }, { name: 'three.js Demo', icon: '🧊', content: () => { const threeDemo = () => { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 300 / 200, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(300, 200); document.getElementById('three-container').appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); }; return `
`; } }, { name: 'Projects', icon: '📁', type: 'folder', content: [ { name: 'Project 1', icon: '📄', url: 'project1.html' }, { name: 'Project 2', icon: '📄', url: 'project2.html' } ] }, { name: 'Notepad', icon: '📝', content: () => ` ` }, { name: 'Settings', icon: '⚙️', content: () => `
` } ]; // Initialize the OS init() { this.createDesktopIcons(); this.updateSelectedIcon(); this.updateBattery(); // Welcome notification setTimeout(() => { this.showNotification('Welcome to Degen Boy OS Advanced Template!'); }, 1000); } // Create desktop icons createDesktopIcons() { this.desktop.innerHTML = ''; this.apps.forEach((app, index) => { const icon = document.createElement('div'); icon.className = app.type === 'folder' ? 'folder-icon' : 'app-icon'; icon.innerHTML = ` ${app.icon} ${app.name} `; icon.onclick = () => this.openItem(app); icon.setAttribute('data-index', index); this.desktop.appendChild(icon); }); } // Open an app, folder, or link openItem(item) { if (item.type === 'folder') { this.openFolder(item); } else if (item.url) { this.openLink(item.url, item.name); } else { this.openApp(item); } } // Open an app openApp(app) { this.appWindow.style.display = 'flex'; this.appTitle.textContent = app.name; this.appContent.innerHTML = this.fitContentToScreen(app.content()); this.appWindow.classList.add('slide-in'); this.appWindow.classList.remove('slide-out'); } // Open a folder openFolder(folder) { this.folderWindow.style.display = 'flex'; this.folderTitle.textContent = folder.name; this.folderContent.innerHTML = ''; folder.content.forEach((item, index) => { const icon = document.createElement('div'); icon.className = item.type === 'folder' ? 'folder-icon' : 'app-icon'; icon.innerHTML = ` ${item.icon} ${item.name} `; icon.onclick = () => this.openItem(item); icon.setAttribute('data-index', index); this.folderContent.appendChild(icon); }); this.folderWindow.classList.add('slide-in'); this.folderWindow.classList.remove('slide-out'); } // Open a link in an iframe openLink(url, title) { this.iframeTitle.textContent = title; this.iframeContent.innerHTML = ``; this.iframeContainer.style.display = 'flex'; this.iframeContainer.classList.add('slide-in'); this.iframeContainer.classList.remove('slide-out'); } // Close a window with animation closeWindow(window, callback) { window.classList.add('slide-out'); window.classList.remove('slide-in'); setTimeout(() => { window.style.display = 'none'; if (callback) callback(); }, 300); } // Update the selected icon updateSelectedIcon() { const icons = document.querySelectorAll('.app-icon, .folder-icon'); icons.forEach((icon, index) => { icon.style.border = index === this.selectedIcon ? '2px solid #0f380f' : '2px solid transparent'; }); } // Handle D-pad input handleDPadInput(dir) { const currentWindow = this.getCurrentWindow(); const icons = currentWindow.querySelectorAll('.app-icon, .folder-icon'); const iconCount = icons.length; const columns = 3; switch (dir) { case 'UP': this.selectedIcon = (this.selectedIcon - columns + iconCount) % iconCount; break; case 'DOWN': this.selectedIcon = (this.selectedIcon + columns) % iconCount; break; case 'LEFT': this.selectedIcon = (this.selectedIcon - 1 + iconCount) % iconCount; break; case 'RIGHT': this.selectedIcon = (this.selectedIcon + 1) % iconCount; break; } this.updateSelectedIcon(); } // Get the current active window getCurrentWindow() { if (this.folderWindow.style.display === 'flex') { return this.folderContent; } else { return this.desktop; } } // Show a notification showNotification(message) { this.notification.textContent = message; this.notification.style.display = 'block'; this.notification.classList.add('fade-in'); this.notification.classList.remove('fade-out'); setTimeout(() => { this.notification.classList.add('fade-out'); this.notification.classList.remove('fade-in'); setTimeout(() => { this.notification.style.display = 'none'; }, 300); }, 2000); } // Update battery level (simulated) updateBattery() { const level = Math.floor(Math.random() * 20) + 80; // Random level between 80-100% this.batteryLevel.style.width = `${level}%`; setTimeout(() => this.updateBattery(), 60000); // Update every minute } // Ensure content fits within the Degen Boy screen fitContentToScreen(content) { const wrapper = document.createElement('div'); wrapper.style.width = '100%'; wrapper.style.height = '100%'; wrapper.style.overflow = 'auto'; wrapper.style.boxSizing = 'border-box'; wrapper.style.padding = '10px'; wrapper.innerHTML = content; // Adjust image sizes const images = wrapper.querySelectorAll('img'); images.forEach(img => { img.style.maxWidth = '100%'; img.style.height = 'auto'; }); return wrapper.outerHTML; } // Bind event listeners bindEventListeners() { this.closeBtn.onclick = () => this.closeWindow(this.appWindow); this.iframeCloseBtn.onclick = () => this.closeWindow(this.iframeContainer, () => this.iframeContent.innerHTML = ''); this.folderBackBtn.onclick = () => this.closeWindow(this.folderWindow); document.getElementById('menu-btn').addEventListener('click', () => { this.closeWindow(this.appWindow); this.closeWindow(this.folderWindow); this.closeWindow(this.iframeContainer); }); document.getElementById('select-btn').addEventListener('click', () => { const selectedApp = this.apps[this.selectedIcon]; this.openItem(selectedApp); }); // D-pad controls document.getElementById('up-btn').addEventListener('click', () => this.handleDPadInput('UP')); document.getElementById('down-btn').addEventListener('click', () => this.handleDPadInput('DOWN')); document.getElementById('left-btn').addEventListener('click', () => this.handleDPadInput('LEFT')); document.getElementById('right-btn').addEventListener('click', () => this.handleDPadInput('RIGHT')); // Keyboard controls document.addEventListener('keydown', (e) => { switch (e.key) { case 'ArrowUp': this.handleDPadInput('UP'); break; case 'ArrowDown': this.handleDPadInput('DOWN'); break; case 'ArrowLeft': this.handleDPadInput('LEFT'); break; case 'ArrowRight': this.handleDPadInput('RIGHT'); break; case 'Enter': document.getElementById('select-btn').click(); break; case 'Escape': if (this.appWindow.style.display === 'flex') this.closeBtn.click(); else if (this.folderWindow.style.display === 'flex') this.folderBackBtn.click(); else if (this.iframeContainer.style.display === 'flex') this.iframeCloseBtn.click(); break; } }); // Settings functionality document.addEventListener('change', (e) => { if (e.target.id === 'theme') { document.body.className = e.target.value.toLowerCase(); } else if (e.target.id === 'sound') { this.showNotification(e.target.checked ? 'Sound On' : 'Sound Off'); } else if (e.target.id === 'brightness') { document.getElementById('screen-container').style.filter = `brightness(${e.target.value}%)`; } else if (e.target.id === 'text-size') { document.body.style.fontSize = `${e.target.value}px`; } }); } } // Initialize the Degen Boy OS const degenBoyOS = new DegenBoyOS(); // Guide for users console.log(` Degen Boy OS Advanced Template User Guide: 1. To add new main screen icons: - Modify the 'apps' array in the DegenBoyOS class. - Each app should have a name, icon, and either content or url property. - For folders, use type: 'folder' and provide content as an array of items. 2. To add new functionality: - Create new methods in the DegenBoyOS class. - Modify existing methods or add new ones to customize behavior. 3. To add pop-up messages: - Use the showNotification(message) method. - Example: degenBoyOS.showNotification('Hello, Degen Boy!'); 4. To customize animations: - Modify the CSS classes 'slide-in', 'slide-out', 'fade-in', and 'fade-out'. - Add new animation classes and use them in the JavaScript code. 5. To integrate p5.js or three.js: - See the 'p5.js Demo' and 'three.js Demo' apps for examples. - Create a new app object with custom content using these libraries. Explore and customize the code to make Degen Boy OS truly your own! `);