// -------- 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" ];
@keyframes menuFade from opacity: 0; transform: scale(0.96); to opacity: 1; transform: scale(1); 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; // -------- Icon dataset: name, icon (emoji or
/* 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