const desktopEl = document.getElementById('desktopContainer');
@keyframes gentlePop 0% transform: scale(1); 50% transform: scale(0.94); 100% transform: scale(1); small icons on desktop
/* desktop right-click hint (optional) */ .status-note position: fixed; bottom: 12px; right: 16px; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 30px; font-size: 10px; color: #ccc; font-family: monospace; pointer-events: none; z-index: 99; </style> </head> <body> const desktopEl = document
body background: radial-gradient(circle at 20% 30%, #1a3c2c, #0a1f1a); min-height: 100vh; font-family: 'Segoe UI', 'SF Pro Text', 'Roboto', system-ui, -apple-system, sans-serif; overflow: hidden; position: relative; height: 100vh; width: 100vw; @keyframes gentlePop 0% transform: scale(1)
// load positions from storage, if any function loadStoredPositions() const stored = localStorage.getItem('desktopIconsLayout'); if (!stored) return false; try const positions = JSON.parse(stored); for (let pos of positions) const icon = iconsState.find(i => i.id === pos.id); if (icon && typeof pos.x === 'number' && typeof pos.y === 'number') // clamp within valid boundaries later when rendering icon.x = pos.x; icon.y = pos.y; return true; catch(e) return false;
<script> // -------------------------------------------------------------- // SMALL ICONS ON DESKTOP — draggable, double-click, context menu // Modern web desktop simulation with persistent positioning (localStorage) // --------------------------------------------------------------
// 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);