Fiche reddit

--- name: social-reddit-card zhname : "Reddit 帖子卡" enname : "Reddit Post Card" emoji: "🔺" description: "Realistic Reddit post card + upvotes/downvotes + comment count, suitable for video overlays / story sharing" category: card scenario: marketing aspecthint : "1280×720 or 800×600" featured: 42 tags: ["reddit", "social", "card", "overlay", "story"] exampleid : sample-social-reddit-card examplename : "Reddit Post · r/programming" exampleformat : markdown exampletagline : "Reddit dark mode + vote rail" exampledesc : "An AITA-style story + 12.3k upvotes + 1.2k comments" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · reddit-post" od: mode: prototype surface: web platform: desktop scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Reddit Post Card' template to turn my content into a 'realistic Reddit post card with upvotes, downvotes, and comment counts, suitable for video overlays and social media story sharing.' Maintain the template's visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- [Template: Reddit Post Card] [Intent] Render a story / question / joke as a Reddit post card for use in video overlays and social media story sharing. Inspired by hyperframes reddit-post. 【Canvas】1280×720 (video overlay) or 800×600 (single card share); transparent or dark background#0b1416 . 【Card Structure】 - Border: Rounded corners 16px, white background#ffffff (light) or#1a1a1b (dark, recommended for video overlays), 1px border#edeff1 /#343536 . - Left-side vote rail (40:56px wide): - Up arrow ▲ (16px,#878a8c , turns orange on hover#ff4500 ). - Vote count (Inter, 17px, weight 700, centered, color: 0 gray / positive orange / negative blue); large numbers use the format12.3k . - Down arrow ▼ (turns blue on hover#7193ff ). - Main content area: - Top meta row: Sub-section icons (CSS circles + letters) + “r/subreddit ” (bold) + “· Posted by u/username · 3h ” (small gray text). - Title (Inter / IBM Plex Sans, 22:28px, weight 500, dark text). - Content: 16px body text, a quote block, or 1 image (CSS gradient placeholder). - Bottom action row: 💬1.2k Comments · 🏆 Awards · ⤴️ Share · ⋯ icon. - Reddit Snoo logo in the top-right corner (inline SVG, orange#ff4500 ). 【Fonts】 - Primary:IBM Plex Sans → fallbackInter , weight 400/500/700. - Numbers: Same as primary font. - Chinese:Noto Sans SC . 【Design Details】 - Light mode: bg#fff , text#1c1c1c , secondary#7c7c7c . - Dark mode (recommended): bg#1a1a1b , text#d7dadc , secondary#818384 , border#343536 . - Vote color: Upvote =#ff4500 , Downvote =#7193ff , 0 =#878a8c . - Add a subtle hover background to the clickable title area. - External image links are strictly prohibited; use CSS gradients and descriptions as image placeholders. - Must use user-provided content; automatically generate valid subreddit, username, and vote counts. - Single HTML file; inline SVG icons (up/down arrows, comment bubbles, trophy).