0bb1bcc5f9
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>
64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Avenir Next', 'system-ui', 'sans-serif'],
|
|
},
|
|
backdropBlur: {
|
|
'glass': '18px',
|
|
'glass-strong': '24px',
|
|
},
|
|
colors: {
|
|
'glass-dark': 'rgba(0, 0, 0, 0.35)',
|
|
'glass-darker': 'rgba(0, 0, 0, 0.6)',
|
|
'glass-border': 'rgba(255, 255, 255, 0.18)',
|
|
'glass-highlight': 'rgba(255, 255, 255, 0.22)',
|
|
'netflix-red': '#E50914',
|
|
'netflix-black': '#141414',
|
|
},
|
|
boxShadow: {
|
|
'glass': '0 8px 24px rgba(0, 0, 0, 0.45)',
|
|
'glass-sm': '0 6px 18px rgba(0, 0, 0, 0.35)',
|
|
'glass-inset': 'inset 0 1px 0 rgba(255, 255, 255, 0.22)',
|
|
'content': '0 10px 40px rgba(0, 0, 0, 0.5)',
|
|
},
|
|
spacing: {
|
|
// 4px grid system from neode-ui
|
|
'1': '4px',
|
|
'2': '8px',
|
|
'3': '12px',
|
|
'4': '16px',
|
|
'5': '20px',
|
|
'6': '24px',
|
|
'7': '28px',
|
|
'8': '32px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.3s ease-in',
|
|
'slide-up': 'slideUp 0.4s ease-out',
|
|
'scale-in': 'scaleIn 0.2s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|