Small Icons On Desktop ✰

.desktop-icon:hover .icon-label background: rgba(0, 0, 0, 0.7); color: white;

let iconsState = []; // each: id, name, emoji, x, y, colorTint let dragTarget = null; let dragStartX = 0, dragStartY = 0; let initialLeft = 0, initialTop = 0; let activeIconElement = null; let currentZIndex = 20; // bring dragged icon to front small icons on desktop

/* context menu simulation (right-click) */ .context-menu position: fixed; background: #1e1f2cdf; backdrop-filter: blur(20px); border-radius: 12px; padding: 6px 0; min-width: 160px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,210,0.3); z-index: 1000; font-size: 13px; font-weight: 500; color: #eaeef5; animation: menuFade 0.12s ease; .desktop-icon:hover .icon-label background: rgba(0

// -------- 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" ]; let iconsState = []

// 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);

// remove an icon by id function deleteIconById(iconId) const index = iconsState.findIndex(ic => ic.id === iconId); if (index !== -1) iconsState.splice(index, 1); persistPositions(); renderAllIcons(); showToast(`🗑️ Removed icon`, 1000);