Desktop Upd — Small Icons On

// helper: remove existing context menu function removeContextMenu() if (activeContextMenu && activeContextMenu.parentNode) activeContextMenu.remove(); activeContextMenu = null;

// Context menu management let activeContextMenu = null; small icons on desktop

<script> // -------------------------------------------------------------- // SMALL ICONS ON DESKTOP — draggable, double-click, context menu // Modern web desktop simulation with persistent positioning (localStorage) // -------------------------------------------------------------- activeContextMenu = null

@keyframes menuFade from opacity: 0; transform: scale(0.96); to opacity: 1; transform: scale(1); to opacity: 1

.context-menu-item:hover background: #3a4b6ecc;

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

/* icon text label */ .icon-label font-size: 12px; font-weight: 500; color: #fef7e0; text-shadow: 0 1px 3px rgba(0,0,0,0.6); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 20px; max-width: 92px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; transition: background 0.1s;