Spaces:
Running
Running
ok, give me a straight forward design brief for this product, using separate html and python server, draggable mini-player, with play/pause next/previous random shuffle icon, video "x of y", main page has a title header, search bar, under the search bar is a flex-grid (variable zoom upto 8x8 cards - use "+" and "-" buttons) displaying search results using CSS cards, video thumbnail, duration, video title, video author or channel name, green background signifying it is downloaded, each card will have a remove "X" circle button on the lower right corner, when user enters text and clicks search a modal opens and displays the results in a search grid (this search grid is to be the same format as the playlist flex-grid - css cards will have a red background for 'not downloaded', a remove "x" circle button to remove it from the search results list, user can click a card to add it to the playlist when selected a card in the search results display gets a green glowing border. Search modal needs a 'back' button, returning the user to the playlist, where they can press 'download new' to start the downloads. Theuser must be able to acess the search AND playlist while a video is playing.
5f4cbfa
verified
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1a1a1a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #333; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #444; | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Player styles */ | |
| #mini-player { | |
| transition: transform 0.2s; | |
| z-index: 100; | |
| } | |
| #mini-player:hover { | |
| transform: scale(1.02); | |
| } | |
| .draggable { | |
| cursor: grab; | |
| user-select: none; | |
| } | |
| /* Card styles */ | |
| .music-card { | |
| position: relative; | |
| background: #1e293b; | |
| border-radius: 0.75rem; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .music-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .music-card.downloaded { | |
| background: linear-gradient(to bottom right, #1e293b, #14532d); | |
| } | |
| .music-card.not-downloaded { | |
| background: linear-gradient(to bottom right, #1e293b, #7f1d1d); | |
| } | |
| .music-card.selected { | |
| box-shadow: 0 0 0 3px #4ade80, 0 0 20px rgba(74, 222, 128, 0.5); | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .music-card .thumbnail { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| object-fit: cover; | |
| } | |
| .music-card .duration { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| } | |
| .music-card .remove-btn { | |
| position: absolute; | |
| bottom: 0.5rem; | |
| right: 0.5rem; | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| background: rgba(239, 68, 68, 0.9); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .music-card .remove-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .music-card .info { | |
| padding: 0.75rem; | |
| } | |
| .music-card .title { | |
| font-weight: 500; | |
| margin-bottom: 0.25rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .music-card .artist { | |
| font-size: 0.875rem; | |
| color: #94a3b8; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* Modal styles */ | |
| #search-modal { | |
| backdrop-filter: blur(5px); | |
| } | |
| /* Grid columns */ | |
| .grid-cols-2 { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .grid-cols-3 { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| } | |
| .grid-cols-4 { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| .grid-cols-5 { | |
| grid-template-columns: repeat(5, minmax(0, 1fr)); | |
| } | |
| .grid-cols-6 { | |
| grid-template-columns: repeat(6, minmax(0, 1fr)); | |
| } | |
| .grid-cols-7 { | |
| grid-template-columns: repeat(7, minmax(0, 1fr)); | |
| } | |
| .grid-cols-8 { | |
| grid-template-columns: repeat(8, minmax(0, 1fr)); | |
| } | |