# HTML Theme Prompts
This document contains prompt templates for generating themed HTML webpages.
---
## Apple Style Theme
Generate a clean, minimalist HTML page inspired by Apple's design language.
### Design Principles
- **Minimalist philosophy**: Every pixel serves a purpose
- **Generous white space**: Content density ≤ 40%
- **Typography-first**: SF Pro Display for headings, SF Pro Text for body
- **Subtle visual effects**: Gentle glows, smooth transitions
- **Rim lighting**: Studio-quality soft lighting
### Color Palette
```css
--bg-color: #000000 /* Pure black background */
--glow-start: #0A1929 /* Deep blue */
--glow-end: #1A3A52 /* Midnight blue */
--title-color: #FFFFFF /* Pure white */
--text-color: #E3F2FD /* High brightness blue-white */
--accent-color: #42A5F5 /* Sky blue for highlights */
--secondary-color: #B0BEC5 /* Medium gray for secondary info */
```
### Structure
```html
🤖
AI Daily
2026年1月13日 星期一
核心摘要
模型发布
```
### Key CSS Effects
```css
/* Background glow - bottom-right corner */
.background-glow {
position: fixed;
bottom: -20%;
right: -20%;
width: 70%;
height: 70%;
background: radial-gradient(
circle at center,
var(--glow-end) 0%,
var(--glow-start) 40%,
transparent 80%
);
opacity: 0.6;
filter: blur(80px);
z-index: -2;
}
/* Geometric lines - 15% opacity */
.geometric-lines {
position: fixed;
background-image:
linear-gradient(90deg, transparent 49%, var(--accent-color) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, var(--accent-color) 50%, transparent 51%);
background-size: 200px 200px;
opacity: 0.08;
z-index: -1;
}
/* Glowing logo icon */
.logo-icon {
animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 40px var(--accent-color), 0 0 80px var(--accent-color);
}
50% {
box-shadow: 0 0 50px var(--accent-color), 0 0 100px var(--accent-color);
}
}
```
### Full Prompt
```
Generate an HTML webpage with Apple-style minimalist design for AI news summary.
## Content
{markdown_content}
## Design Requirements
**Colors** (Black background with blue glow):
- Background: #000000
- Title: #FFFFFF
- Body text: #E3F2FD
- Accent: #42A5F5 (for highlights and icons)
- Secondary: #B0BEC5
**Layout**:
- Centered container, max-width 900px
- Content density ≤ 40% (generous white space)
- Padding: 40px 20px
**Typography**:
- Headings: SF Pro Display, 24-48px, pure white
- Body: SF Pro Text, 16px, #E3F2FD
- Line height: 1.6
**Visual Effects**:
- Background glow from bottom-right corner (radial gradient, blur 80px)
- Subtle geometric lines pattern (15% opacity)
- Glowing logo icon with pulse animation
- Smooth hover transitions on cards
**Structure**:
```
: Logo + Date badge
:
- Summary card (rounded, subtle border)
- Category sections with cards
- Keywords footer