Spaces:
Running
Running
Can you please create a demo for me for a start menu feature for a hypothetical OS or even a SPA that demonstrates a radically different but familiar way to organize and to locate files on a OS? The requirements are this: It is a hierarchical explorer structure but it is modernized by being a single top-level set of beautiful squares with icons inside each (that is the top-level), from there when you click, horizontal stack of squares folds into a single deck and a expanse of icons folds out after the top-level icons become stacked left. Then you can hover over each one of the resulting square icons that have expanded left, which will expand squares with icons down at each second-level icon in the horizontal expanded menu.
e5250e4 verified | /* Shared styles across all pages */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --transition-speed: 0.4s; | |
| --transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .explorer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| gap: 1.5rem; | |
| padding: 1rem; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| } | |
| .explorer-item { | |
| background: linear-gradient(145deg, #1e293b, #0f172a); | |
| border-radius: 16px; | |
| padding: 1.5rem 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); | |
| position: relative; | |
| overflow: hidden; | |
| aspect-ratio: 1; | |
| } | |
| .explorer-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); | |
| opacity: 0; | |
| transition: opacity var(--transition-speed) var(--transition-ease); | |
| z-index: -1; | |
| } | |
| .explorer-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3); | |
| } | |
| .explorer-item:hover::before { | |
| opacity: 1; | |
| } | |
| .explorer-item.active { | |
| background: linear-gradient(145deg, #312e81, #3730a3); | |
| transform: scale(0.95); | |
| box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); | |
| } | |
| .explorer-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.75rem; | |
| transition: transform var(--transition-speed) var(--transition-ease); | |
| } | |
| .explorer-item:hover .explorer-icon { | |
| transform: scale(1.2); | |
| } | |
| .explorer-label { | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| text-align: center; | |
| line-height: 1.3; | |
| } | |
| .level-container { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 1.5rem; | |
| padding: 1rem; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| } | |
| .level-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| min-width: 120px; | |
| } | |
| .level-stack .explorer-item { | |
| width: 120px; | |
| height: 120px; | |
| } | |
| .level-expanded { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| flex: 1; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| } | |
| .level-expanded .explorer-item { | |
| width: 120px; | |
| height: 120px; | |
| } | |
| .sublevel-container { | |
| position: absolute; | |
| top: 0; | |
| left: 100%; | |
| width: 400px; | |
| padding-left: 1.5rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateX(20px); | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| z-index: 10; | |
| } | |
| .sublevel-container.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateX(0); | |
| } | |
| .sublevel-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| background: rgba(30, 41, 59, 0.9); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 1rem 0; | |
| font-size: 0.9rem; | |
| color: #94a3b8; | |
| } | |
| .breadcrumb-item { | |
| cursor: pointer; | |
| transition: color var(--transition-speed) var(--transition-ease); | |
| } | |
| .breadcrumb-item:hover { | |
| color: #60a5fa; | |
| } | |
| .breadcrumb-separator { | |
| color: #475569; | |
| } | |
| .back-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: rgba(55, 48, 163, 0.3); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 8px; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: all var(--transition-speed) var(--transition-ease); | |
| margin-bottom: 1rem; | |
| } | |
| .back-button:hover { | |
| background: rgba(55, 48, 163, 0.5); | |
| transform: translateX(-3px); | |
| } | |
| @media (max-width: 768px) { | |
| .explorer-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .explorer-item { | |
| padding: 1rem 0.75rem; | |
| } | |
| .explorer-icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .explorer-label { | |
| font-size: 0.75rem; | |
| } | |
| .level-stack .explorer-item, | |
| .level-expanded .explorer-item { | |
| width: 90px; | |
| height: 90px; | |
| } | |
| .sublevel-container { | |
| position: static; | |
| width: 100%; | |
| padding-left: 0; | |
| margin-top: 1rem; | |
| } | |
| .sublevel-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } |