init
This commit is contained in:
puke
puke
274
templates/README.md
Normal file
274
templates/README.md
Normal file
@@ -0,0 +1,274 @@
|
||||
# HTML Templates Guide
|
||||
|
||||
## 📸 Preset Templates
|
||||
|
||||
ReelForge provides the following preset templates:
|
||||
|
||||
| Template | Style | Preview |
|
||||
|----------|-------|---------|
|
||||
| `classic` | Classic black & white, minimalist professional | Clean white background with elegant typography |
|
||||
| `modern` | Modern gradient with glassmorphism effects | Purple-blue gradient with frosted glass style |
|
||||
| `minimal` | Minimalist with ample whitespace | Light gray background with refined design |
|
||||
|
||||
### Usage
|
||||
|
||||
```python
|
||||
from reelforge.service import reelforge
|
||||
|
||||
await reelforge.initialize()
|
||||
|
||||
# Use preset template
|
||||
result = await reelforge.generate_book_video(
|
||||
topic="为什么阅读改变命运",
|
||||
frame_template="classic" # or "modern", "minimal"
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Creating Custom Templates
|
||||
|
||||
### Method 1: Generate with LLM (Recommended ⭐, Zero Code)
|
||||
|
||||
**For users who want unique styles but don't want to write code**
|
||||
|
||||
#### Step 1: Open Prompt File
|
||||
|
||||
Open [`prompts/generate_html_template.txt`](../prompts/generate_html_template.txt) in the project root directory.
|
||||
|
||||
Or view online: [View Prompt File](https://github.com/xxx/ReelForge/blob/main/prompts/generate_html_template.txt)
|
||||
|
||||
#### Step 2: Copy Prompt, Modify Style Description
|
||||
|
||||
Find this section in the prompt:
|
||||
```
|
||||
## Visual Style
|
||||
[👉 Replace this section with your desired style]
|
||||
```
|
||||
|
||||
Replace with your desired style, for example:
|
||||
```
|
||||
## Visual Style
|
||||
Cyberpunk style with neon lights, dark background, purple and blue gradients
|
||||
```
|
||||
|
||||
#### Step 3: Paste to LLM Platform
|
||||
|
||||
Copy the entire prompt and paste it into any of these platforms:
|
||||
- 💬 ChatGPT: https://chat.openai.com
|
||||
- 💬 Claude: https://claude.ai
|
||||
- 💬 Tongyi Qianwen: https://tongyi.aliyun.com
|
||||
- 💬 DeepSeek: https://chat.deepseek.com
|
||||
- 💬 Doubao: https://www.doubao.com
|
||||
- 💬 Or any LLM you prefer
|
||||
|
||||
#### Step 4: Save HTML
|
||||
|
||||
Copy the HTML code returned by the LLM.
|
||||
|
||||
⚠️ **Note:** If the LLM returns HTML wrapped in \`\`\`html\`\`\`, only copy the HTML inside (excluding \`\`\`html and \`\`\`)
|
||||
|
||||
Save as:
|
||||
```
|
||||
templates/my-cyberpunk.html
|
||||
```
|
||||
|
||||
#### Step 5: Use Template
|
||||
|
||||
```python
|
||||
await reelforge.generate_book_video(
|
||||
topic="...",
|
||||
frame_template="my-cyberpunk" # Use your template
|
||||
)
|
||||
```
|
||||
|
||||
**🎉 Done! Your video now uses your custom style!**
|
||||
|
||||
---
|
||||
|
||||
### Example Style Descriptions
|
||||
|
||||
Here are some style descriptions you can use or adapt:
|
||||
|
||||
- "Cyberpunk style with neon lights, dark background, purple gradient"
|
||||
- "Fresh and clean style, light blue background, rounded cards, soft shadows"
|
||||
- "Professional business style, dark blue with gold accents, serious and dignified"
|
||||
- "Cute cartoon style, pink theme, rounded fonts, rainbow gradient"
|
||||
- "Vintage retro style, sepia tones, aged paper texture, rounded borders"
|
||||
- "Tech minimalist style, pure white background, thin borders, subtle animations"
|
||||
- "Warm reading style, beige background, book texture, soft lighting"
|
||||
|
||||
---
|
||||
|
||||
### Method 2: Write HTML Manually (Full Control)
|
||||
|
||||
**For users familiar with HTML/CSS**
|
||||
|
||||
Create an HTML file directly:
|
||||
|
||||
```html
|
||||
<!-- templates/my-style.html -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
background: #ffffff;
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topic {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 42px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.book-info {
|
||||
font-size: 36px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="topic">{{topic}}</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="Frame Image">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text">{{text}}</div>
|
||||
<div class="book-info">《{{book_title}}》 - {{book_author}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Available Variables:**
|
||||
|
||||
Required (always available):
|
||||
- `{{topic}}` - Video topic
|
||||
- `{{text}}` - Current frame narration text
|
||||
- `{{image}}` - AI-generated image path
|
||||
|
||||
Optional (available via `ext` parameter):
|
||||
- `{{book_title}}` - Book title
|
||||
- `{{book_author}}` - Author
|
||||
- `{{book_cover}}` - Book cover path
|
||||
- `{{book_rating}}` - Book rating
|
||||
- And any other custom fields you pass via `ext`
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Share Your Templates
|
||||
|
||||
Created a beautiful template? Share it with the community!
|
||||
|
||||
1. Fork this repository
|
||||
2. Add your HTML to `templates/community/`
|
||||
3. Submit a Pull Request
|
||||
|
||||
Excellent templates will be featured in the official template gallery!
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Q: What if the HTML generated by LLM has syntax errors?**
|
||||
A: Regenerate, or emphasize "ensure HTML syntax is correct" in the prompt
|
||||
|
||||
**Q: What if I'm not satisfied with the generated style?**
|
||||
A: Modify the style description in the prompt, or manually edit the HTML file
|
||||
|
||||
**Q: Can I use external CSS frameworks (like Tailwind)?**
|
||||
A: Yes, but you need CDN links. We recommend inline CSS for offline compatibility
|
||||
|
||||
**Q: Where should template files be placed?**
|
||||
A: In the `templates/` directory. The filename is the template name (without .html extension)
|
||||
|
||||
**Q: What's the recommended canvas size?**
|
||||
A: 1080x1920 (9:16 portrait for TikTok/Douyin)
|
||||
|
||||
**Q: Can I use custom fonts?**
|
||||
A: Yes, but system fonts are recommended (PingFang SC, Microsoft YaHei, etc.) for compatibility
|
||||
|
||||
---
|
||||
|
||||
## 📚 Technical Details
|
||||
|
||||
### How HTML Rendering Works
|
||||
|
||||
1. Load HTML template file
|
||||
2. Replace variables (`{{topic}}`, `{{text}}`, etc.) with actual data
|
||||
3. Render HTML to image using `html2image` (Chrome headless)
|
||||
4. Save as frame image
|
||||
|
||||
### Performance
|
||||
|
||||
- First render: ~1-2 seconds (browser initialization)
|
||||
- Subsequent renders: ~0.5-1 second per frame
|
||||
- For 5-frame videos: acceptable total time
|
||||
|
||||
### Browser Requirements
|
||||
|
||||
`html2image` uses Chrome/Chromium headless mode. It will automatically find:
|
||||
- System Chrome
|
||||
- System Chromium
|
||||
- Or download a lightweight browser engine
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
1. **Preview before generating**: Open HTML in browser to preview effect
|
||||
2. **Maintain aspect ratio**: Keep 1080x1920 for best results
|
||||
3. **Watch text length**: Ensure long text wraps properly (`word-wrap`, `overflow-wrap`)
|
||||
4. **Consider contrast**: Ensure text is readable against background
|
||||
5. **Use relative units**: `%` and `vh/vw` for better responsiveness
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Inspiration Gallery
|
||||
|
||||
Looking for inspiration? Check out:
|
||||
- [Official Template Gallery](https://reelforge.ai/templates) (coming soon)
|
||||
- [Community Templates](./community/) (coming soon)
|
||||
- Design sites: Dribbble, Behance, Pinterest
|
||||
|
||||
---
|
||||
|
||||
Need help? Open an [Issue](https://github.com/xxx/ReelForge/issues) or join our [Discord](https://discord.gg/xxx)!
|
||||
|
||||
541
templates/classic.html
Normal file
541
templates/classic.html
Normal file
@@ -0,0 +1,541 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1080px;
|
||||
background: #fafafa;
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
padding: 80px 60px 90px 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background minimal decorations */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtle circles */
|
||||
.circle-outline-1 {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(44, 62, 80, 0.12);
|
||||
top: 10%;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
.circle-outline-2 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(44, 62, 80, 0.1);
|
||||
bottom: 15%;
|
||||
left: -80px;
|
||||
}
|
||||
|
||||
.circle-outline-3 {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(149, 165, 166, 0.15);
|
||||
top: 50%;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
/* Subtle lines */
|
||||
.line-decoration {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: rgba(149, 165, 166, 0.25);
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
width: 250px;
|
||||
top: 20%;
|
||||
left: 80px;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
width: 180px;
|
||||
top: 55%;
|
||||
right: 120px;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
width: 200px;
|
||||
bottom: 25%;
|
||||
left: 120px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
/* Small accent squares */
|
||||
.square-minimal {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: rgba(149, 165, 166, 0.35);
|
||||
}
|
||||
|
||||
.square-1 { top: 15%; left: 50px; }
|
||||
.square-2 { top: 45%; right: 80px; }
|
||||
.square-3 { bottom: 20%; left: 100px; transform: rotate(45deg); }
|
||||
|
||||
/* Topic section */
|
||||
.topic-wrapper {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-ornament-top {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ornament-line {
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: rgba(149, 165, 166, 0.55);
|
||||
}
|
||||
|
||||
.ornament-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: rgba(149, 165, 166, 0.65);
|
||||
}
|
||||
|
||||
.topic {
|
||||
font-size: 68px;
|
||||
font-weight: 600;
|
||||
color: #1a252f;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120px;
|
||||
height: 2px;
|
||||
background: rgba(149, 165, 166, 0.4);
|
||||
}
|
||||
|
||||
/* Image section */
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 15px 50px rgba(0,0,0,0.06);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* L-shaped corner marks (different from modern) */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.corner-mark.tl {
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.tl::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 50px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.tr {
|
||||
top: -18px;
|
||||
right: -18px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.tr::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 50px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.bl {
|
||||
bottom: -18px;
|
||||
left: -18px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.bl::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 50px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.br {
|
||||
bottom: -18px;
|
||||
right: -18px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.corner-mark.br::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 50px;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
/* Side dots */
|
||||
.side-dots {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.side-dots.left { left: -30px; }
|
||||
.side-dots.right { right: -30px; }
|
||||
|
||||
.side-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: rgba(149, 165, 166, 0.4);
|
||||
}
|
||||
|
||||
.side-dot.active {
|
||||
background: rgba(149, 165, 166, 0.65);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* Text section */
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
max-width: 850px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 42px;
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
line-height: 1.9;
|
||||
font-weight: 500;
|
||||
padding: 20px 40px;
|
||||
position: relative;
|
||||
height: 239.4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Minimal quote marks */
|
||||
.quote-minimal {
|
||||
position: absolute;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.quote-minimal.left {
|
||||
top: -10px;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.quote-minimal.right {
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Decorative dividers */
|
||||
.divider-set {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 2px;
|
||||
background: rgba(149, 165, 166, 0.35);
|
||||
}
|
||||
|
||||
.divider.short { width: 40px; }
|
||||
.divider.long { width: 80px; }
|
||||
|
||||
.divider-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
padding: 25px 10px 0 10px;
|
||||
border-top: 2px solid rgba(149, 165, 166, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 70px;
|
||||
height: 3px;
|
||||
background: rgba(149, 165, 166, 0.55);
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #1a252f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.author-mark {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(149, 165, 166, 0.7);
|
||||
}
|
||||
|
||||
.author-desc {
|
||||
font-size: 22px;
|
||||
color: #5d6d7e;
|
||||
line-height: 1.3;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #707b7c;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.logo-marks {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.logo-mark {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(149, 165, 166, 0.45);
|
||||
}
|
||||
|
||||
.logo-mark.active {
|
||||
background: rgba(149, 165, 166, 0.75);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Background minimal decorations -->
|
||||
<div class="bg-decoration">
|
||||
<div class="circle-outline-1"></div>
|
||||
<div class="circle-outline-2"></div>
|
||||
<div class="circle-outline-3"></div>
|
||||
<div class="line-decoration line-1"></div>
|
||||
<div class="line-decoration line-2"></div>
|
||||
<div class="line-decoration line-3"></div>
|
||||
<div class="square-minimal square-1"></div>
|
||||
<div class="square-minimal square-2"></div>
|
||||
<div class="square-minimal square-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="topic-wrapper">
|
||||
<!-- Top ornament -->
|
||||
<div class="topic-ornament-top">
|
||||
<div class="ornament-line"></div>
|
||||
<div class="ornament-dot"></div>
|
||||
<div class="ornament-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="topic">{{topic}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-wrapper">
|
||||
<!-- Corner marks -->
|
||||
<div class="corner-mark tl"></div>
|
||||
<div class="corner-mark tr"></div>
|
||||
<div class="corner-mark bl"></div>
|
||||
<div class="corner-mark br"></div>
|
||||
|
||||
<!-- Side dots -->
|
||||
<div class="side-dots left">
|
||||
<div class="side-dot"></div>
|
||||
<div class="side-dot active"></div>
|
||||
<div class="side-dot"></div>
|
||||
</div>
|
||||
<div class="side-dots right">
|
||||
<div class="side-dot"></div>
|
||||
<div class="side-dot active"></div>
|
||||
<div class="side-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="Frame Image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="text-wrapper">
|
||||
<!-- Minimal quote marks -->
|
||||
<svg class="quote-minimal left" width="60" height="60" viewBox="0 0 24 24" fill="#95a5a6">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
<svg class="quote-minimal right" width="60" height="60" viewBox="0 0 24 24" fill="#95a5a6">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
|
||||
<!-- Decorative dividers -->
|
||||
<div class="divider-set">
|
||||
<div class="divider short"></div>
|
||||
<div class="divider-dot"></div>
|
||||
<div class="divider long"></div>
|
||||
<div class="divider-dot"></div>
|
||||
<div class="divider short"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="author">
|
||||
<div class="author-name">
|
||||
<span class="author-mark"></span>
|
||||
@Pixelle.AI
|
||||
</div>
|
||||
<div class="author-desc">Open Source Omnimodal AI Creative Agent</div>
|
||||
</div>
|
||||
<div class="logo-section">
|
||||
<div class="logo">ReelForge</div>
|
||||
<div class="logo-marks">
|
||||
<div class="logo-mark"></div>
|
||||
<div class="logo-mark active"></div>
|
||||
<div class="logo-mark"></div>
|
||||
<div class="logo-mark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
572
templates/modern.html
Normal file
572
templates/modern.html
Normal file
@@ -0,0 +1,572 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1080px;
|
||||
background: #764ba2;
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
padding: 60px 60px 70px 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background decorative shapes */
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Dot pattern background */
|
||||
.dot-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.08) 2px, transparent 2px);
|
||||
background-size: 60px 60px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
top: -180px;
|
||||
right: -120px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
border-radius: 50%;
|
||||
background: rgba(106, 17, 203, 0.2);
|
||||
bottom: 80px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid rgba(78, 205, 196, 0.25);
|
||||
background: transparent;
|
||||
top: 40%;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 180px solid transparent;
|
||||
border-right: 180px solid transparent;
|
||||
border-bottom: 310px solid rgba(255, 255, 255, 0.04);
|
||||
top: 45%;
|
||||
right: -80px;
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.square-1 {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: rgba(255, 107, 157, 0.08);
|
||||
top: 20%;
|
||||
left: -40px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.square-2 {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.15);
|
||||
background: transparent;
|
||||
bottom: 30%;
|
||||
right: 60px;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
/* Diagonal lines */
|
||||
.line-1, .line-2, .line-3 {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
width: 300px;
|
||||
top: 15%;
|
||||
left: 100px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
width: 200px;
|
||||
top: 60%;
|
||||
right: 150px;
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
|
||||
.line-3 {
|
||||
width: 250px;
|
||||
bottom: 15%;
|
||||
left: 150px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
/* Header with icon decoration */
|
||||
.topic-wrapper {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-decoration {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topic-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.topic-dot:nth-child(1) { background: #FF6B9D; }
|
||||
.topic-dot:nth-child(2) { background: #4ECDC4; }
|
||||
.topic-dot:nth-child(3) { background: #FFE66D; }
|
||||
|
||||
.topic {
|
||||
font-size: 72px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1.3;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.topic::before,
|
||||
.topic::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.topic::before {
|
||||
left: -90px;
|
||||
}
|
||||
|
||||
.topic::after {
|
||||
right: -90px;
|
||||
}
|
||||
|
||||
/* Bookmark decoration */
|
||||
.bookmark-deco {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 80px;
|
||||
}
|
||||
|
||||
/* Image container with corner decorations */
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Corner decorations for image */
|
||||
.corner-deco {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.6);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.corner-deco.top-left {
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-radius: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.corner-deco.bottom-right {
|
||||
bottom: -15px;
|
||||
right: -15px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-radius: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.corner-deco.top-right {
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-radius: 0 15px 0 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-color: rgba(78, 205, 196, 0.6);
|
||||
}
|
||||
|
||||
.corner-deco.bottom-left {
|
||||
bottom: -15px;
|
||||
left: -15px;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-radius: 0 0 0 15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-color: rgba(255, 107, 157, 0.6);
|
||||
}
|
||||
|
||||
/* Side badges */
|
||||
.side-badge-left, .side-badge-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.side-badge-left {
|
||||
left: -25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.side-badge-right {
|
||||
right: -25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.badge-circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(255, 255, 255, 0.4);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.badge-circle.filled {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Quote icon using SVG */
|
||||
.text-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 44px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
padding: 30px 60px;
|
||||
position: relative;
|
||||
height: 237.6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quote-icon-left {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.25;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.quote-icon-right {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/* Accent bars beside text */
|
||||
.accent-bar-left, .accent-bar-right {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 150px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.accent-bar-left {
|
||||
left: 20px;
|
||||
background: rgba(78, 205, 196, 0.5);
|
||||
}
|
||||
|
||||
.accent-bar-right {
|
||||
right: 20px;
|
||||
background: rgba(255, 107, 157, 0.5);
|
||||
}
|
||||
|
||||
/* Footer with icon */
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 5px;
|
||||
border-top: 2px solid rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.footer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: rgba(78, 205, 196, 0.6);
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.author-badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.author-badge {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
.author-badge.cyan {
|
||||
background: #4ECDC4;
|
||||
color: #4ECDC4;
|
||||
}
|
||||
|
||||
.author-badge.pink {
|
||||
background: #FF6B9D;
|
||||
color: #FF6B9D;
|
||||
}
|
||||
|
||||
.author-desc {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #FFE66D;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.logo-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.logo-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Background decorations -->
|
||||
<div class="bg-decoration">
|
||||
<div class="dot-pattern"></div>
|
||||
<div class="circle-1"></div>
|
||||
<div class="circle-2"></div>
|
||||
<div class="circle-3"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="square-1"></div>
|
||||
<div class="square-2"></div>
|
||||
<div class="line-1"></div>
|
||||
<div class="line-2"></div>
|
||||
<div class="line-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="topic-wrapper">
|
||||
<div class="topic-decoration">
|
||||
<div class="topic-dot"></div>
|
||||
<div class="topic-dot"></div>
|
||||
<div class="topic-dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Bookmark decoration -->
|
||||
<svg class="bookmark-deco" width="50" height="70" viewBox="0 0 24 32" fill="rgba(255, 230, 109, 0.6)">
|
||||
<path d="M2 0h20v32l-10-6-10 6V0z"/>
|
||||
</svg>
|
||||
|
||||
<div class="topic">{{topic}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-wrapper">
|
||||
<div class="corner-deco top-left"></div>
|
||||
<div class="corner-deco bottom-right"></div>
|
||||
<div class="corner-deco top-right"></div>
|
||||
<div class="corner-deco bottom-left"></div>
|
||||
|
||||
<!-- Side badges -->
|
||||
<div class="side-badge-left">
|
||||
<div class="badge-circle filled"></div>
|
||||
<div class="badge-circle"></div>
|
||||
<div class="badge-circle"></div>
|
||||
</div>
|
||||
<div class="side-badge-right">
|
||||
<div class="badge-circle"></div>
|
||||
<div class="badge-circle filled"></div>
|
||||
<div class="badge-circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="Frame Image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-wrapper">
|
||||
<!-- Quote SVG icons -->
|
||||
<svg class="quote-icon-left" width="90" height="90" viewBox="0 0 24 24" fill="white">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
<svg class="quote-icon-right" width="90" height="90" viewBox="0 0 24 24" fill="white">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Accent bars -->
|
||||
<div class="accent-bar-left"></div>
|
||||
<div class="accent-bar-right"></div>
|
||||
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="author">
|
||||
<div class="author-name">
|
||||
<div class="author-badges">
|
||||
<div class="author-badge cyan"></div>
|
||||
<div class="author-badge pink"></div>
|
||||
</div>
|
||||
@Pixelle.AI
|
||||
</div>
|
||||
<div class="author-desc">Open Source Omnimodal AI Creative Agent</div>
|
||||
</div>
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo">ReelForge</div>
|
||||
<div class="logo-dots">
|
||||
<div class="logo-dot"></div>
|
||||
<div class="logo-dot"></div>
|
||||
<div class="logo-dot"></div>
|
||||
<div class="logo-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
936
templates/neon.html
Normal file
936
templates/neon.html
Normal file
@@ -0,0 +1,936 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{{topic}}</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0b0f1a;
|
||||
--fg: #eaf6ff;
|
||||
--muted: #9fb6c6;
|
||||
--accent: #3cf0ff;
|
||||
--accent2: #ff3fe0;
|
||||
--accent3: #f0e130;
|
||||
--card-bg: rgba(12, 14, 20, 0.5);
|
||||
--border: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-rows: 15% 53% 18% 14%;
|
||||
gap: 22px;
|
||||
padding: 80px 40px 50px 40px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background decorations */
|
||||
.background-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grid pattern */
|
||||
.grid-pattern {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(60, 240, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(60, 240, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Scan lines */
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(60, 240, 255, 0.6) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 10px rgba(60, 240, 255, 0.5);
|
||||
}
|
||||
|
||||
.scan-line:nth-child(1) { top: 15%; }
|
||||
.scan-line:nth-child(2) { top: 45%; }
|
||||
.scan-line:nth-child(3) { top: 75%; }
|
||||
|
||||
/* Neon rings */
|
||||
.neon-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(60, 240, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 20px rgba(60, 240, 255, 0.4),
|
||||
inset 0 0 20px rgba(60, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
.neon-ring.ring-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: 10%;
|
||||
right: -150px;
|
||||
border-color: rgba(60, 240, 255, 0.25);
|
||||
}
|
||||
|
||||
.neon-ring.ring-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
bottom: 15%;
|
||||
left: -100px;
|
||||
border-color: rgba(255, 63, 224, 0.25);
|
||||
box-shadow:
|
||||
0 0 20px rgba(255, 63, 224, 0.4),
|
||||
inset 0 0 20px rgba(255, 63, 224, 0.2);
|
||||
}
|
||||
|
||||
.neon-ring.ring-3 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50%;
|
||||
left: 80px;
|
||||
border-color: rgba(240, 225, 48, 0.2);
|
||||
box-shadow:
|
||||
0 0 20px rgba(240, 225, 48, 0.3),
|
||||
inset 0 0 20px rgba(240, 225, 48, 0.15);
|
||||
}
|
||||
|
||||
/* Corner neon circles */
|
||||
.corner-circle {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.corner-circle.tl {
|
||||
left: -50px;
|
||||
top: -50px;
|
||||
border: 3px solid rgba(60, 240, 255, 0.5);
|
||||
box-shadow:
|
||||
0 0 30px rgba(60, 240, 255, 0.4),
|
||||
inset 0 0 30px rgba(60, 240, 255, 0.15);
|
||||
}
|
||||
|
||||
.corner-circle.tl::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(60, 240, 255, 0.3);
|
||||
box-shadow: 0 0 20px rgba(60, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.corner-circle.tl::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 50%;
|
||||
background: rgba(60, 240, 255, 0.15);
|
||||
box-shadow:
|
||||
0 0 25px rgba(60, 240, 255, 0.5),
|
||||
inset 0 0 15px rgba(60, 240, 255, 0.3);
|
||||
animation: circlePulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.corner-circle.br {
|
||||
right: -50px;
|
||||
bottom: -50px;
|
||||
border: 3px solid rgba(255, 63, 224, 0.5);
|
||||
box-shadow:
|
||||
0 0 30px rgba(255, 63, 224, 0.4),
|
||||
inset 0 0 30px rgba(255, 63, 224, 0.15);
|
||||
}
|
||||
|
||||
.corner-circle.br::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(255, 63, 224, 0.3);
|
||||
box-shadow: 0 0 20px rgba(255, 63, 224, 0.3);
|
||||
}
|
||||
|
||||
.corner-circle.br::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 63, 224, 0.15);
|
||||
box-shadow:
|
||||
0 0 25px rgba(255, 63, 224, 0.5),
|
||||
inset 0 0 15px rgba(255, 63, 224, 0.3);
|
||||
animation: circlePulse 3s ease-in-out infinite 1.5s;
|
||||
}
|
||||
|
||||
@keyframes circlePulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Neon squares */
|
||||
.neon-square {
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.neon-square.sq-1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 20%;
|
||||
left: -30px;
|
||||
border-color: rgba(60, 240, 255, 0.3);
|
||||
box-shadow: 0 0 20px rgba(60, 240, 255, 0.4);
|
||||
}
|
||||
|
||||
.neon-square.sq-2 {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
bottom: 25%;
|
||||
right: 50px;
|
||||
border-color: rgba(255, 63, 224, 0.3);
|
||||
box-shadow: 0 0 20px rgba(255, 63, 224, 0.4);
|
||||
}
|
||||
|
||||
/* Neon particles */
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(60, 240, 255, 0.8);
|
||||
box-shadow: 0 0 10px rgba(60, 240, 255, 1);
|
||||
}
|
||||
|
||||
.particle.p1 { top: 10%; left: 20%; }
|
||||
.particle.p2 { top: 30%; right: 15%; background: rgba(255, 63, 224, 0.8); box-shadow: 0 0 10px rgba(255, 63, 224, 1); }
|
||||
.particle.p3 { top: 60%; left: 10%; }
|
||||
.particle.p4 { bottom: 20%; right: 25%; background: rgba(240, 225, 48, 0.8); box-shadow: 0 0 10px rgba(240, 225, 48, 1); }
|
||||
.particle.p5 { bottom: 35%; left: 30%; }
|
||||
|
||||
/* Diagonal lines */
|
||||
.neon-line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(60, 240, 255, 0.4) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 8px rgba(60, 240, 255, 0.4);
|
||||
}
|
||||
|
||||
.neon-line.line-1 {
|
||||
width: 300px;
|
||||
top: 25%;
|
||||
left: 100px;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.neon-line.line-2 {
|
||||
width: 250px;
|
||||
top: 65%;
|
||||
right: 150px;
|
||||
transform: rotate(20deg);
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 63, 224, 0.4) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 8px rgba(255, 63, 224, 0.4);
|
||||
}
|
||||
|
||||
/* Header section */
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(60, 240, 255, 0.8) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 12px rgba(60, 240, 255, 0.8);
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 63, 224, 0.7) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 10px rgba(255, 63, 224, 0.7);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--fg);
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
text-shadow:
|
||||
0 0 6px rgba(60, 240, 255, 0.6),
|
||||
0 0 18px rgba(60, 240, 255, 0.35),
|
||||
0 0 32px rgba(255, 63, 224, 0.25);
|
||||
animation: glowPulse 3.6s ease-in-out infinite;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title::before,
|
||||
.title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 12px var(--accent);
|
||||
}
|
||||
|
||||
.title::before { left: -20px; }
|
||||
.title::after { right: -20px; background: var(--accent2); box-shadow: 0 0 12px var(--accent2); }
|
||||
|
||||
.title-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
color: #dff7ff;
|
||||
border: 2px solid rgba(60, 240, 255, 0.4);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 15px rgba(60, 240, 255, 0.3);
|
||||
}
|
||||
.chip .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(60, 240, 255, 1);
|
||||
box-shadow: 0 0 16px rgba(60, 240, 255, 0.9);
|
||||
}
|
||||
.chip .dot.pink {
|
||||
background: rgba(255, 63, 224, 1);
|
||||
box-shadow: 0 0 16px rgba(255, 63, 224, 0.9);
|
||||
}
|
||||
.chip .dot.yellow {
|
||||
background: rgba(240, 225, 48, 1);
|
||||
box-shadow: 0 0 16px rgba(240, 225, 48, 0.9);
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
text-shadow:
|
||||
0 0 6px rgba(60, 240, 255, 0.6),
|
||||
0 0 18px rgba(60, 240, 255, 0.35),
|
||||
0 0 32px rgba(255, 63, 224, 0.25);
|
||||
}
|
||||
50% {
|
||||
text-shadow:
|
||||
0 0 8px rgba(60, 240, 255, 0.85),
|
||||
0 0 26px rgba(60, 240, 255, 0.55),
|
||||
0 0 48px rgba(255, 63, 224, 0.35);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.title { animation: none; }
|
||||
}
|
||||
|
||||
/* Media section */
|
||||
.media {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(60, 240, 255, 0.5),
|
||||
rgba(255, 63, 224, 0.5)) 1;
|
||||
background: rgba(15, 18, 28, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 24px 48px rgba(0, 0, 0, 0.55),
|
||||
0 0 60px rgba(60, 240, 255, 0.15);
|
||||
}
|
||||
|
||||
.media::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 26px;
|
||||
border: 2px solid rgba(60, 240, 255, 0.3);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Corner indicators */
|
||||
.corner-indicator {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.corner-indicator.tl {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
border-top: 3px solid var(--accent);
|
||||
border-left: 3px solid var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.corner-indicator.tr {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
border-top: 3px solid var(--accent2);
|
||||
border-right: 3px solid var(--accent2);
|
||||
box-shadow: 0 0 10px var(--accent2);
|
||||
}
|
||||
|
||||
.corner-indicator.bl {
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
border-bottom: 3px solid var(--accent2);
|
||||
border-left: 3px solid var(--accent2);
|
||||
box-shadow: 0 0 10px var(--accent2);
|
||||
}
|
||||
|
||||
.corner-indicator.br {
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
border-bottom: 3px solid var(--accent);
|
||||
border-right: 3px solid var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
/* Side badges */
|
||||
.media-badge {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.media-badge.left {
|
||||
left: -25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.media-badge.right {
|
||||
right: -25px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(60, 240, 255, 0.3);
|
||||
border: 2px solid rgba(60, 240, 255, 0.6);
|
||||
box-shadow: 0 0 12px rgba(60, 240, 255, 0.6);
|
||||
}
|
||||
|
||||
.badge-dot.active {
|
||||
background: rgba(60, 240, 255, 0.8);
|
||||
border-color: rgba(60, 240, 255, 1);
|
||||
}
|
||||
|
||||
.badge-dot.pink {
|
||||
background: rgba(255, 63, 224, 0.3);
|
||||
border-color: rgba(255, 63, 224, 0.6);
|
||||
box-shadow: 0 0 12px rgba(255, 63, 224, 0.6);
|
||||
}
|
||||
|
||||
.badge-dot.pink.active {
|
||||
background: rgba(255, 63, 224, 0.8);
|
||||
border-color: rgba(255, 63, 224, 1);
|
||||
}
|
||||
|
||||
.media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Caption section */
|
||||
.caption {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 12px 1fr 12px;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 35px 10px 20px 10px;
|
||||
}
|
||||
|
||||
.caption::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(60, 240, 255, 0.7) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 10px rgba(60, 240, 255, 0.7);
|
||||
}
|
||||
|
||||
.caption::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 63, 224, 0.7) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 10px rgba(255, 63, 224, 0.7);
|
||||
}
|
||||
|
||||
.caption .accent-bar {
|
||||
width: 8px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(60, 240, 255, 0.95),
|
||||
rgba(255, 63, 224, 0.95));
|
||||
box-shadow:
|
||||
0 0 18px rgba(60, 240, 255, 0.8),
|
||||
0 0 36px rgba(255, 63, 224, 0.45);
|
||||
animation: barPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.caption .accent-bar-right {
|
||||
width: 8px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(255, 63, 224, 0.95),
|
||||
rgba(240, 225, 48, 0.95));
|
||||
box-shadow:
|
||||
0 0 18px rgba(255, 63, 224, 0.8),
|
||||
0 0 36px rgba(240, 225, 48, 0.45);
|
||||
animation: barPulse 2s ease-in-out infinite 1s;
|
||||
}
|
||||
|
||||
@keyframes barPulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Quote icons */
|
||||
.quote-icon {
|
||||
position: absolute;
|
||||
opacity: 0.15;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.quote-icon.left {
|
||||
top: -15px;
|
||||
left: 40px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.quote-icon.right {
|
||||
bottom: -15px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.caption p {
|
||||
margin: 0;
|
||||
font-size: 42px;
|
||||
line-height: 1.5;
|
||||
color: #dff7ff;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
text-shadow: 0 0 8px rgba(60, 240, 255, 0.3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 189px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 1fr;
|
||||
align-items: start;
|
||||
gap: 18px;
|
||||
padding: 20px 10px 28px 10px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(240, 225, 48, 0.8) 50%,
|
||||
transparent);
|
||||
box-shadow: 0 0 12px rgba(240, 225, 48, 0.8);
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 28px;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.author-badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.author-badge-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.author-badge-dot.pink {
|
||||
background: var(--accent2);
|
||||
box-shadow: 0 0 10px var(--accent2);
|
||||
}
|
||||
|
||||
.author .tag {
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid rgba(60, 240, 255, 0.5);
|
||||
color: #bfefff;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 15px rgba(60, 240, 255, 0.4);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: #dff7ff;
|
||||
text-shadow: 0 0 10px rgba(60, 240, 255, 0.25);
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.cta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
color: var(--muted);
|
||||
font-size: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.cta .follow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 63, 224, 0.5);
|
||||
color: #bfefff;
|
||||
box-shadow: 0 0 15px rgba(255, 63, 224, 0.4);
|
||||
font-size: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cta .hashtags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.cta .hashtags span {
|
||||
color: #9ad8ff;
|
||||
text-shadow: 0 0 10px rgba(60, 240, 255, 0.18);
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Detail overlays */
|
||||
.media::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Spine decoration */
|
||||
.spine {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: left top;
|
||||
z-index: 1;
|
||||
opacity: 0.9;
|
||||
background: transparent;
|
||||
border: 2px solid rgba(60, 240, 255, 0.5);
|
||||
border-radius: 999px;
|
||||
padding: 8px 14px;
|
||||
color: #bfefff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 10px rgba(60, 240, 255, 0.6);
|
||||
box-shadow: 0 0 20px rgba(60, 240, 255, 0.4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spine::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.spine::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent2);
|
||||
box-shadow: 0 0 10px var(--accent2);
|
||||
}
|
||||
|
||||
/* Readability */
|
||||
* {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<!-- Background decorations -->
|
||||
<div class="background-glow" aria-hidden="true">
|
||||
<!-- Grid pattern -->
|
||||
<div class="grid-pattern"></div>
|
||||
|
||||
<!-- Scan lines -->
|
||||
<div class="scan-line"></div>
|
||||
<div class="scan-line"></div>
|
||||
<div class="scan-line"></div>
|
||||
|
||||
<!-- Neon rings -->
|
||||
<div class="neon-ring ring-1"></div>
|
||||
<div class="neon-ring ring-2"></div>
|
||||
<div class="neon-ring ring-3"></div>
|
||||
|
||||
<!-- Corner neon circles -->
|
||||
<div class="corner-circle tl"></div>
|
||||
<div class="corner-circle br"></div>
|
||||
|
||||
<!-- Neon squares -->
|
||||
<div class="neon-square sq-1"></div>
|
||||
<div class="neon-square sq-2"></div>
|
||||
|
||||
<!-- Particles -->
|
||||
<div class="particle p1"></div>
|
||||
<div class="particle p2"></div>
|
||||
<div class="particle p3"></div>
|
||||
<div class="particle p4"></div>
|
||||
<div class="particle p5"></div>
|
||||
|
||||
<!-- Neon lines -->
|
||||
<div class="neon-line line-1"></div>
|
||||
<div class="neon-line line-2"></div>
|
||||
</div>
|
||||
|
||||
<!-- Spine decoration -->
|
||||
<div class="spine" aria-hidden="true">READ · LEARN · GROW</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="header" role="banner">
|
||||
<h1 class="title">{{topic}}</h1>
|
||||
<div class="title-meta" role="list">
|
||||
<div class="chip" role="listitem"><span class="dot"></span>读书短视频</div>
|
||||
<div class="chip" role="listitem"><span class="dot pink"></span>思维提升</div>
|
||||
<div class="chip" role="listitem"><span class="dot yellow"></span>3分钟知识卡</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Media -->
|
||||
<section class="media" role="img" aria-label="Illustration for the topic">
|
||||
<!-- Corner indicators -->
|
||||
<div class="corner-indicator tl"></div>
|
||||
<div class="corner-indicator tr"></div>
|
||||
<div class="corner-indicator bl"></div>
|
||||
<div class="corner-indicator br"></div>
|
||||
|
||||
<!-- Side badges -->
|
||||
<div class="media-badge left">
|
||||
<div class="badge-dot"></div>
|
||||
<div class="badge-dot active"></div>
|
||||
<div class="badge-dot"></div>
|
||||
</div>
|
||||
<div class="media-badge right">
|
||||
<div class="badge-dot pink"></div>
|
||||
<div class="badge-dot pink active"></div>
|
||||
<div class="badge-dot pink"></div>
|
||||
</div>
|
||||
|
||||
<img src="{{image}}" alt="图像：{{topic}}">
|
||||
</section>
|
||||
|
||||
<!-- Caption -->
|
||||
<section class="caption" role="region" aria-label="旁白内容">
|
||||
<!-- Quote icons -->
|
||||
<svg class="quote-icon left" width="80" height="80" viewBox="0 0 24 24" fill="var(--accent)">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
<svg class="quote-icon right" width="80" height="80" viewBox="0 0 24 24" fill="var(--accent2)">
|
||||
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||
</svg>
|
||||
|
||||
<div class="accent-bar" aria-hidden="true"></div>
|
||||
<p>{{text}}</p>
|
||||
<div class="accent-bar-right" aria-hidden="true"></div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="author">
|
||||
<span class="tag">作者</span>
|
||||
<div class="author-badges">
|
||||
<div class="author-badge-dot"></div>
|
||||
<div class="author-badge-dot pink"></div>
|
||||
</div>
|
||||
<strong>@Pixelle.AI</strong>
|
||||
</div>
|
||||
<div class="slogan">Open Source Omnimodal AI Creative Agent</div>
|
||||
<div class="cta">
|
||||
<div class="follow">ReelForge</div>
|
||||
<div class="hashtags">
|
||||
<span>#阅读</span>
|
||||
<span>#成长</span>
|
||||
<span>#认知升级</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user