// -------- Icon dataset: name, icon (emoji or SVG path), default positions -------- const ICON_DB = [ id: "folder_docs", name: "Documents", emoji: "📁", colorTint: "#5b8c5a" , id: "folder_pics", name: "Gallery", emoji: "🖼️", colorTint: "#b97f44" , id: "app_music", name: "Music Player", emoji: "🎵", colorTint: "#4f7a9e" , id: "app_terminal", name: "Terminal", emoji: "💻", colorTint: "#3c6e47" , id: "app_settings", name: "Settings", emoji: "⚙️", colorTint: "#5f6c7a" , id: "trash_bin", name: "Trash", emoji: "🗑️", colorTint: "#9e5e5e" ];
/* individual icon wrapper — draggable, positioned absolutely */ .desktop-icon position: absolute; width: 85px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: grab; transition: transform 0.05s ease, filter 0.1s; z-index: 10; will-change: left, top;
// show temporary toast message function showToast(message, duration = 1800) const existingToast = document.querySelector('.toast-msg'); if(existingToast) existingToast.remove(); const toast = document.createElement('div'); toast.className = 'toast-msg'; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => if(toast.parentNode) toast.remove(); , duration); small icons on desktop
// reset positions to a nice grid (based on current desktop size) function resetToDefaultGrid() const containerRect = desktopEl.getBoundingClientRect(); const marginX = 35; const marginY = 35; const colSpacing = 110; const rowSpacing = 120; const columns = 3; iconsState.forEach((icon, idx) => const col = idx % columns; const row = Math.floor(idx / columns); let x = marginX + col * colSpacing; let y = marginY + row * rowSpacing; // ensure within viewport borders const maxX = Math.max(20, containerRect.width - 100); const maxY = Math.max(20, containerRect.height - 90); x = Math.min(maxX, Math.max(10, x)); y = Math.min(maxY, Math.max(10, y)); icon.x = x; icon.y = y; ); persistPositions(); renderAllIcons(); showToast("✨ Icons rearranged to default grid", 1200);
/* hover effect: modern glow */ .desktop-icon:hover .icon-graphic background: rgba(50, 55, 70, 0.8); transform: scale(1.02); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255,255,255,0.3); border-color: rgba(255,215,150,0.6); // -------- Icon dataset: name, icon (emoji or
.context-menu-item padding: 8px 18px; cursor: pointer; transition: background 0.08s linear; display: flex; align-items: center; gap: 10px;
// ---- Context menu (right-click) for icon removal ---- function onIconContextMenu(e, icon) e.preventDefault(); removeContextMenu(); // remove existing const menu = document.createElement('div'); menu.className = 'context-menu'; // position near cursor menu.style.left = `$e.clientXpx`; menu.style.top = `$e.clientYpx`; const removeOption = document.createElement('div'); removeOption.className = 'context-menu-item'; removeOption.innerHTML = '🗑️ Remove icon'; removeOption.addEventListener('click', (ev) => ev.stopPropagation(); deleteIconById(icon.id); removeContextMenu(); ); const infoOption = document.createElement('div'); infoOption.className = 'context-menu-item'; infoOption.innerHTML = 'ℹ️ About'; infoOption.addEventListener('click', (ev) => double-click to launch`, 1300); removeContextMenu(); ); const divider = document.createElement('div'); divider.className = 'context-menu-divider'; const resetOption = document.createElement('div'); resetOption.className = 'context-menu-item'; resetOption.innerHTML = '🔄 Reset all positions'; resetOption.addEventListener('click', (ev) => ev.stopPropagation(); resetToDefaultGrid(); removeContextMenu(); ); menu.appendChild(removeOption); menu.appendChild(infoOption); menu.appendChild(divider); menu.appendChild(resetOption); document.body.appendChild(menu); activeContextMenu = menu; // click outside to close const closeHandler = (clickEvent) => if (!menu.contains(clickEvent.target)) removeContextMenu(); document.removeEventListener('click', closeHandler); ; setTimeout(() => document.addEventListener('click', closeHandler), 10); // ---- Render all icons from iconsState ---- function renderAllIcons() if (!desktopEl) return; desktopEl.innerHTML = ''; // clear all iconsState.forEach(icon => const iconDiv = document.createElement('div'); iconDiv.className = 'desktop-icon'; iconDiv.setAttribute('data-id', icon.id); iconDiv.style.left = `$icon.xpx`; iconDiv.style.top = `$icon.ypx`; iconDiv.style.zIndex = 10; // graphic container const graphicDiv = document.createElement('div'); graphicDiv.className = 'icon-graphic'; // use emoji or custom svg text const emojiSpan = document.createElement('span'); emojiSpan.style.fontSize = '32px'; emojiSpan.style.filter = `drop-shadow(0 2px 4px rgba(0,0,0,0.4))`; emojiSpan.textContent = icon.emoji; graphicDiv.appendChild(emojiSpan); const labelSpan = document.createElement('span'); labelSpan.className = 'icon-label'; labelSpan.textContent = icon.name; iconDiv.appendChild(graphicDiv); iconDiv.appendChild(labelSpan); // attach event listeners iconDiv.addEventListener('mousedown', (e) => onMouseDown(e, icon)); iconDiv.addEventListener('dblclick', (e) => e.stopPropagation(); onDoubleClickIcon(icon); ); iconDiv.addEventListener('contextmenu', (e) => onIconContextMenu(e, icon)); desktopEl.appendChild(iconDiv); ); // ---- initialize icons: build state, load stored positions or default grid ---- function initIcons() // build iconsState from DB iconsState = ICON_DB.map(db => ( id: db.id, name: db.name, emoji: db.emoji, colorTint: db.colorTint, x: 0, y: 0 )); // get container dimensions const rect = desktopEl.getBoundingClientRect(); const defaultMarginX = 40; const defaultMarginY = 40; const colStep = 110; const rowStep = 120; const cols = 3; iconsState.forEach((icon, idx) => const col = idx % cols; const row = Math.floor(idx / cols); icon.x = defaultMarginX + col * colStep; icon.y = defaultMarginY + row * rowStep; ); // try load stored positions after creating default grid const hasStored = loadStoredPositions(); // if stored positions are loaded, they overwrite defaults // but also ensure they are in bounds after loading clampIconPositions(); // will adjust if needed and re-render renderAllIcons(); if (!hasStored) // initially persist default grid persistPositions(); // ---- global desktop right click: reset menu or add? ---- function onDesktopContextMenu(e) e.preventDefault(); removeContextMenu(); const menu = document.createElement('div'); menu.className = 'context-menu'; menu.style.left = `$e.clientXpx`; menu.style.top = `$e.clientYpx`; const resetPos = document.createElement('div'); resetPos.className = 'context-menu-item'; resetPos.innerHTML = '📌 Reset icon positions'; resetPos.addEventListener('click', () => resetToDefaultGrid(); removeContextMenu(); ); const refreshHint = document.createElement('div'); refreshHint.className = 'context-menu-item'; refreshHint.innerHTML = '🖱️ Double-click any icon'; refreshHint.addEventListener('click', () => showToast('Double-click icons to open apps! Right-click to remove.', 1500); removeContextMenu(); ); menu.appendChild(resetPos); menu.appendChild(refreshHint); document.body.appendChild(menu); activeContextMenu = menu; const closeHandler = (ce) => if (!menu.contains(ce.target)) removeContextMenu(); document.removeEventListener('click', closeHandler); ; setTimeout(() => document.addEventListener('click', closeHandler), 10); // ---- resize handler to keep icons visible ---- function handleResize() if (!desktopEl) return; clampIconPositions(); // re-render to refresh positions from updated state renderAllIcons(); // ---- set up event listeners, prevent default context menu on desktop ---- function bindGlobalEvents() desktopEl.addEventListener('contextmenu', onDesktopContextMenu); window.addEventListener('resize', () => handleResize(); ); // clicking anywhere outside context menu: handled but also any click on desktop removes menu window.addEventListener('click', (e) => if (activeContextMenu && !activeContextMenu.contains(e.target)) removeContextMenu(); ); // optional: disable default drag behaviour on images window.addEventListener('dragstart', (e) => e.preventDefault()); // ready to launch function launchDesktop() initIcons(); bindGlobalEvents(); // extra: initial clamp after fonts loaded setTimeout(() => handleResize(), 50); launchDesktop(); </script> </body> </html> // -------- Icon dataset: name
@keyframes gentlePop 0% transform: scale(1); 50% transform: scale(0.94); 100% transform: scale(1);