Restructured scroll navigation:
- Arrow icons now in their own glass containers
- Minimal padding: 8px around icons
- 12px border-radius for rounded corners
- Positioned with left-2/right-2 and centered vertically
- Smaller, more elegant design
- Scale(1.05) on hover for subtle feedback
Icons are now compact glass pills instead of full-height bars.
Co-authored-by: Cursor <cursoragent@cursor.com>
Styled scroll buttons with glass treatment:
- Background: rgba(0, 0, 0, 0.35) with 24px backdrop blur
- Border: Subtle white border with glow
- Box shadow: Layered shadows with inset highlight
- Hover: Darker background with enhanced glow
- Opacity: 70% default, 100% on hover
- Matches overall glassmorphic design language
Buttons now have the same elegant glass styling as other UI elements.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed scroll buttons behavior:
- Always visible at 70% opacity when there's more content to scroll
- Increase to 100% opacity on hover
- Removed group-hover requirement
- Only show when canScrollLeft/canScrollRight is true
Users now have a clear indicator when more content is available
without needing to hover over the content row.
Co-authored-by: Cursor <cursoragent@cursor.com>
Applied same styling as content row titles:
- Gradient from #fafafa to #9ca3af
- letter-spacing: 0.05em (5% character spacing)
- Used background-clip: text for gradient effect
- Maintains uppercase and bold styling
Hero title now matches the visual language of section titles.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed content row titles to:
- font-bold (700 weight) for more emphasis
- letter-spacing: 0.05em (5% character spacing)
- Maintains gradient effect from #fafafa to #9ca3af
- More prominent and readable
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed content row titles to:
- font-semibold (less bold than before)
- Added gradient: #fafafa (very light grey) to #9ca3af (light grey)
- Used background-clip: text for gradient effect
- More subtle and elegant appearance
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed section titles (Featured Films, etc.) to:
- Uppercase with 'uppercase' class
- font-bold on mobile, font-extrabold on desktop
- More prominent and attention-grabbing
Co-authored-by: Cursor <cursoragent@cursor.com>
Changes:
- Moved .profile-avatar styles from Browse.vue to src/style.css
- Restored original gradient fill: orange (#f97316) to pink (#ec4899)
- Kept gradient border treatment
- Added z-index to span for proper layering
- Now available globally for reuse
Co-authored-by: Cursor <cursoragent@cursor.com>
Applied the same gradient border treatment as other UI elements:
- Inner gradient fill: Red to orange to blue
- Outer gradient border: White to red with mask composite
- 2px border width with rounded corners
- Applied to both desktop and mobile profile avatars
Co-authored-by: Cursor <cursoragent@cursor.com>
- Logo: ml-2 on mobile (8px left margin)
- Profile: mr-2 on mobile (8px right margin)
- Desktop: ml-0/mr-0 (no extra margins)
Co-authored-by: Cursor <cursoragent@cursor.com>
Critical fixes for PWA installation:
1. ✅ Use proper Vite PWA registration with virtual:pwa-register
2. ✅ Simplified manifest.json (removed verbose name, fixed orientation)
3. ✅ Added 'any maskable' dual-purpose icon for better compatibility
4. ✅ Removed crossorigin from manifest link (causes issues)
5. ✅ Simplified start_url to just '/'
6. ✅ Added msapplication-TileColor meta tag
7. ✅ Set injectRegister: 'auto' in Vite config
8. ✅ Use public/manifest.json directly instead of generating
This should now work on Brave Browser Android with proper 'Install App' prompt.
Test: Clear site data, visit site, should see install prompt within 30 seconds.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changes:
- Fills disappear in reverse order (last-in, first-out)
- Strokes undraw using reverse dasharray animation
- Diagonals undraw with reverse 0.3s stagger
- Circle undraws slower (2s) like it drew
- Background still fades out smoothly after undraw completes
Animation now perfectly mirrors itself!
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduce opacity from 0.95 to 0.85 (85% transparent)
- Hover state: 0.95 for subtle feedback
- More glassmorphic appearance with background showing through
- Better matches design system glass aesthetic
Co-authored-by: Cursor <cursoragent@cursor.com>
Header Layout Changes:
- Move navigation buttons next to logo on left side (40px gap)
- Remove centered navigation positioning
- Add profile dropdown after search on right side
Profile Dropdown Features:
- Shows user avatar, name 'Dorian', and chevron icon
- Glassmorphic dropdown menu with our button styles
- Menu items: Profile, Settings, Sign Out
- Icons for each menu item
- Smooth slide-down animation
- Click outside to close
- Desktop only (hidden on mobile)
- Uses same glass effect as nav buttons
Responsive:
- Mobile shows simple avatar without dropdown
- Search button hidden on mobile
- Nav stays in mobile bottom bar
Co-authored-by: Cursor <cursoragent@cursor.com>
Android PWA Requirements:
- Add mobile-web-app-capable meta tag for Android
- Add application-name meta tag
- Add prefer_related_applications: false to manifest
- Add explicit icon sizes (192x192, 512x512) for both any and maskable
- Add orientation: any for flexible display
- Add lang and dir to manifest for proper localization
- Add ?source=pwa to start_url for analytics
- Add crossorigin="use-credentials" to manifest link
- Add proper service worker registration in main.ts
- Add vite-plugin-pwa/client types to env.d.ts
This ensures Android recognizes it as a full PWA instead of creating a shortcut
Co-authored-by: Cursor <cursoragent@cursor.com>
- Move god-bless-bitcoin-backdrop.jpg to public/images/ folder
- Update content store to use /images/ path instead of /assets/images/
- Files in public/ are served directly in production builds
- Fixes broken banner image on production server
Co-authored-by: Cursor <cursoragent@cursor.com>
- Update app-icon.svg with new gradient strokes and circle element
- Update logo.svg with matching design improvements and gradient borders
- Increase film title size to 20px (text-xl) with bold weight on desktop
- Keep 16px (text-base) with semibold weight on mobile for better proportions
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add ImportMeta and ImportMetaEnv type declarations to env.d.ts
- Fix typo: INDEEHHUB_API → INDEEDHUB_API in indeeHubApi.ts
- Fix nostr-tools Filter type usage in subscribeToContent
- Remove unused Filter import and userPrivkey parameter
- Increase Workbox maximumFileSizeToCacheInBytes to 10MB for large images
- Build now succeeds with 43 precached entries (81.98 MB)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add Dockerfile with multi-stage build (Node.js + Nginx)
- Add docker-compose.yml for Portainer stack deployment on port 7777
- Add nginx.conf with PWA support, gzip compression, and security headers
- Add .dockerignore for optimized Docker builds
- Add DEPLOYMENT.md with comprehensive deployment guide
- Configure Vite PWA plugin with service worker and offline support
- Add PWA manifest.json with app icons and shortcuts
- Enhance logo.svg with iOS-style glass effects (filters, gradients, highlights)
- Add app-icon.svg for PWA installation
- Update mobile nav with glassmorphic active tab styling
- Fix mobile tab bar layout shift issues with flex-1 and consistent sizing
- Update index.html with PWA meta tags and Apple-specific settings
- Add health check endpoint at /health for container monitoring
Co-authored-by: Cursor <cursoragent@cursor.com>
- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic
- Updated background color and styling for body and app components
- Improved content card design with glass morphism effects and hover states
- Enhanced mobile navigation with a floating glass effect and updated button styles
- Adjusted header layout for better responsiveness and visual appeal
Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated content card width from 140/180px to 200/280px for improved visibility
- Changed image class to use 'object-contain' and added background color for better aesthetics
- Introduced a gradient background for the header with dynamic styles based on scroll position
- Added new CSS classes for header gradient effects and improved backdrop filter for a modern look
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduced card width from 200/280px to 140/180px
- Increased gap between cards from 8px to 32px (gap-8)
- Added vertical padding (py-4) to content rows
- Made title text smaller and responsive
- Hide description on mobile for cleaner look
Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated film data to use 21 locally downloaded images
- All posters and backdrops now served from /public/images/films/
- No external CDN dependencies for core films
- Includes Bitcoin docs, dramas, and independent films
- Images: webp, png, jpeg formats (optimized)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Downloaded 15 film posters and backdrops from CloudFront CDN
- Updated film data to use local images where available
- Remaining films still use CDN URLs
- Images saved in public/images/films/ directory
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replaced placeholder content with 20 real IndeeHub films
- All films now use IndeeHub's CloudFront CDN for images
- Added actual film titles, descriptions, and metadata
- Reduced hero section height (60vh/65vh) for better fold usage
- Content starts higher on page with more visible films
Films include:
- Bitcoin documentaries: God Bless Bitcoin, Bitcoiners, Hard Money
- Dramas: The Things We Carry, Kismet, Clemont, Bender
- Economics: Bitcoin: End of Money, Menger Notes, Housing Bubble
- Plus shorts and independent films
Images served from d1yvaqj97q119b.cloudfront.net
Co-authored-by: Cursor <cursoragent@cursor.com>
- Made header transparent on scroll for premium Netflix-style look
- Added browser console script to download all IndeeHub images
- Created Python script for batch image downloading
- Added shell script for curl-based downloads
The header now starts fully transparent and transitions to semi-transparent
black with blur when scrolling, creating a floating navigation effect.
Download scripts will extract all film posters, backdrops, and metadata
from IndeeHub.studio screening room.
Co-authored-by: Cursor <cursoragent@cursor.com>
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content.
Features:
- Vue 3 + TypeScript + Vite setup with hot module reloading
- Netflix-inspired UI with hero section and horizontal scrolling content rows
- Glass morphism design system with custom Tailwind configuration
- 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.)
- Full-featured video player component with custom controls
- Mobile-responsive design with bottom navigation
- Nostr integration ready (nostr-tools, relay pool, NIP-71 support)
- Pinia state management for content
- MCP tools configured (Filesystem, Memory, Nostr, Puppeteer)
Components:
- Browse.vue: Main streaming interface with hero and content rows
- ContentRow.vue: Horizontal scrolling film cards with navigation arrows
- VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen
- MobileNav.vue: Bottom tab navigation for mobile devices
Tech Stack:
- Frontend: Vue 3 (Composition API), TypeScript
- Build: Vite 7
- Styling: Tailwind CSS with custom theme
- State: Pinia 3
- Router: Vue Router 4.6
- Protocol: Nostr (nostr-tools 2.22)
Design:
- 4px grid spacing system
- Glass morphism UI components
- Netflix-style hero section with featured content
- Smooth animations and hover effects
- Mobile-first responsive breakpoints
- Dark theme with custom color palette
Content:
- 20+ IndeeHub films with titles, descriptions, categories
- Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi
- Independent films and documentaries
- Working Unsplash CDN images for thumbnails and backdrops
Ready for deployment to Umbrel, Start9, and Archy nodes.
Co-authored-by: Cursor <cursoragent@cursor.com>
