social-reddit-card

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: Reddit 帖子卡】【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。

【画布】1280×720 (视频叠加) 或 800×600 (单卡分享); 背景透明或暗色

#0b1416

。

【卡片结构】

外框: 圆角 16px, bg 白
```
#ffffff
```
(light) 或
```
#1a1a1b
```
(dark, 推荐 video overlay), border 1px
```
#edeff1
```
/
```
#343536
```
。
左侧 vote rail (40-56px 宽):
- 上箭头 ▲ (16px,
```
#878a8c
```
  , hover 变橙
```
#ff4500
```
  )。
- 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用
```
12.3k
```
  格式。
- 下箭头 ▼ (hover 变蓝
```
#7193ff
```
  )。
主体区:
- 顶部 meta row: 子版块图标 (CSS 圆形 + 字母) +
```
r/subreddit
```
  (粗) +
```
· Posted by u/username · 3h
```
  (小字灰)。
- 标题 (Inter / IBM Plex Sans, 22-28px, weight 500, dark text)。
- 内容: 16px body 或引用块或 1 张图 (CSS 渐变占位)。
- 底部 action row: 💬
```
1.2k Comments
```
  · 🏆 Awards · ⤴️ Share · ⋯ icon。
顶部右上角 Reddit Snoo logo (内联 SVG, 橙色
```
#ff4500
```
)。

【字体】

主:
```
IBM Plex Sans
```
→ fallback
```
Inter
```
, weight 400/500/700。
数字: 同主字体。
中文:
```
Noto Sans SC
```
。

【设计细节】

Light mode: bg
```
#fff
```
, text
```
#1c1c1c
```
, secondary
```
#7c7c7c
```
。
Dark mode (推荐): bg
```
#1a1a1b
```
, text
```
#d7dadc
```
, secondary
```
#818384
```
, border
```
#343536
```
。
票数颜色: 正 =
```
#ff4500
```
, 负 =
```
#7193ff
```
, 0 =
```
#878a8c
```
。
标题点击区可加微妙背景 hover。
严禁外链图片; 图片占位用 CSS 渐变 + 描述。
必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。
单文件 HTML; icon 内联 SVG (上下箭头、评论气泡、奖杯)。

【Template: Reddit Post Card】【Purpose】Render a story / question / joke into a Reddit post card for video overlay and social media story sharing. Inspired by hyperframes reddit-post.

【Canvas】1280×720 (for video overlay) or 800×600 (for single card sharing); background transparent or dark

#0b1416

【Card Structure】

Outer frame: 16px rounded corners, bg white
```
#ffffff
```
(light) or
```
#1a1a1b
```
(dark, recommended for video overlay), border 1px
```
#edeff1
```
/
```
#343536
```
.
Left vote rail (40-56px wide):
- Up arrow ▲ (16px,
```
#878a8c
```
  , turns orange
```
#ff4500
```
  on hover).
- Vote count (Inter, 17px, weight 700, centered, color: gray for 0 / orange for positive / blue for negative); use
```
12.3k
```
  format for large numbers.
- Down arrow ▼ (turns blue
```
#7193ff
```
  on hover).
Main section:
- Top meta row: Subreddit icon (CSS circle + letter) +
```
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 or quote block or 1 image (CSS gradient placeholder).
- Bottom action row: 💬
```
1.2k Comments
```
  · 🏆 Awards · ⤴️ Share · ⋯ icon.
Top-right corner Reddit Snoo logo (inline SVG, orange
```
#ff4500
```
).

【Fonts】

Primary:
```
IBM Plex Sans
```
→ fallback
```
Inter
```
, 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 count color: Positive =
```
#ff4500
```
, Negative =
```
#7193ff
```
, Zero =
```
#878a8c
```
.
Add subtle background hover effect to title click area.
Strictly no external linked images; use CSS gradient + description for image placeholders.
Must use user-provided content; automatically generate reasonable subreddit / username / vote count.
Single-file HTML; icons as inline SVG (up/down arrows, comment bubble, trophy).