Hugging Face's logo

Spaces:
PrometheusGroup
/
voidscape-noir
Running

App Files Community
voidscape-noir
File size: 2,178 Bytes 
5f4cbfa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
```markdown
# VoidScape Media Player Design Brief

## Core Features
1. **Dual Interface System**:
   - Main Playlist View
   - Search Modal View

2. **Player Components**:
   - Draggable mini-player (fixed position)
   - Play/Pause, Next/Previous, Shuffle controls
   - Progress bar with time indicators
   - Current track display (X of Y)

3. **Playlist View**:
   - Title header with gradient text
   - Search bar with search button
   - Variable zoom flex-grid (2x2 to 8x8)
   - Card components showing:
     - Video thumbnail
     - Duration badge
     - Video title
     - Channel/author name
     - Green background (downloaded)
     - Remove "X" button (lower right)

4. **Search Modal**:
   - Full-screen overlay with blurred background
   - Same card format as playlist but with:
     - Red background (not downloaded)
     - Remove "X" button
     - Green glowing border on selection
   - "Back to Playlist" button

5. **Interaction Flow**:
   - User enters search term → clicks search → modal opens
   - Clicking cards in search adds to playlist
   - "Download New" button initiates downloads
   - All functions accessible while playing media

## Technical Requirements
1. **Frontend**:
   - HTML5, CSS3, JavaScript (ES6+)
   - Web Components for reusable UI
   - Responsive flex-grid layout
   - Smooth animations/transitions
   - Dark theme with accent colors

2. **Backend**:
   - Python Flask server
   - REST API endpoints for:
     - Playlist management
     - Search functionality
     - Player controls

3. **State Management**:
   - Current playlist
   - Search results
   - Player status (playing/paused)
   - Current track position

## Visual Design
- Color Scheme:
  - Primary: Dark background (#111827)
  - Secondary: Gradient accents (blue-purple)
  - Status Indicators:
    - Green: Downloaded (#14532d)
    - Red: Not downloaded (#7f1d1d)

- Typography:
  - Main font: Inter (clean, modern)
  - Headers: Bold with gradient text
  - Body: Medium weight, high contrast

## User Flow
1. Landing on playlist view
2. Searching for content
3. Adding to playlist
4. Managing downloads
5. Controlling playback
6. Accessing all features during playback
```