public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: add real Unsplash images to playground templates

Browse Source 
Replace CSS gradient placeholders with actual photos:
- Card Component: mountain landscape
- Profile Card: woman portrait
- Social Post: avatar + nature photo
- Story Highlights: 5 different portrait photos
- Comment Section: 2 avatar photos
- Bio Section: woman portrait with gradient ring
- Status Update: man portrait

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-16 04:50:29 +01:00
parent 817dc09a58
commit d408c49e45
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/config/playground-templates.js
View File

@@ -24,7 +24,7 @@ export const playgroundTemplates = [
.card-image { .card-image {
width: 100%; width: 100%;
height: 180px; height: 180px;
background: linear-gradient(135deg, #667eea, #764ba2); object-fit: cover;
} }
.card-content { .card-content {
@@ -45,7 +45,7 @@ export const playgroundTemplates = [
</style> </style>
<article class="card"> <article class="card">
<div class="card-image"></div> <img class="card-image" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400" alt="">
<div class="card-content"> <div class="card-content">
<h2 class="card-title">Card Title</h2> <h2 class="card-title">Card Title</h2>
<p class="card-text">A simple card component with an image placeholder and text content.</p> <p class="card-text">A simple card component with an image placeholder and text content.</p>
@@ -136,7 +136,7 @@ export const playgroundTemplates = [
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #f093fb, #f5576c); object-fit: cover;
margin: 0 auto 1rem; margin: 0 auto 1rem;
} }
@@ -172,7 +172,7 @@ export const playgroundTemplates = [
</style> </style>
<div class="profile"> <div class="profile">
<div class="avatar"></div> <img class="avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" alt="">
<h2 class="name">Jane Doe</h2> <h2 class="name">Jane Doe</h2>
<p class="role">UI Designer</p> <p class="role">UI Designer</p>
<div class="stats"> <div class="stats">
@@ -727,7 +727,7 @@ export const playgroundTemplates = [
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); object-fit: cover;
} }
.username { .username {
@@ -738,7 +738,7 @@ export const playgroundTemplates = [
.post-image { .post-image {
width: 100%; width: 100%;
height: 300px; height: 300px;
background: linear-gradient(135deg, #667eea, #764ba2); object-fit: cover;
} }
.post-actions { .post-actions {
@@ -770,10 +770,10 @@ export const playgroundTemplates = [
<article class="post"> <article class="post">
<header class="post-header"> <header class="post-header">
<div class="avatar"></div> <img class="avatar" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64" alt="">
<span class="username">creative_studio</span> <span class="username">creative_studio</span>
</header> </header>
<div class="post-image"></div> <img class="post-image" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=500" alt="">
<div class="post-actions"> <div class="post-actions">
<span>♡</span> <span>♡</span>
<span>💬</span> <span>💬</span>
@@ -819,7 +819,7 @@ export const playgroundTemplates = [
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background: #ddd; object-fit: cover;
border: 2px solid white; border: 2px solid white;
} }
@@ -835,23 +835,23 @@ export const playgroundTemplates = [
<div class="stories"> <div class="stories">
<div class="story"> <div class="story">
<div class="story-ring"><div class="story-avatar"></div></div> <div class="story-ring"><img class="story-avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64" alt=""></div>
<span class="story-name">You</span> <span class="story-name">You</span>
</div> </div>
<div class="story"> <div class="story">
<div class="story-ring"><div class="story-avatar"></div></div> <div class="story-ring"><img class="story-avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64" alt=""></div>
<span class="story-name">anna</span> <span class="story-name">anna</span>
</div> </div>
<div class="story"> <div class="story">
<div class="story-ring"><div class="story-avatar"></div></div> <div class="story-ring"><img class="story-avatar" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64" alt=""></div>
<span class="story-name">mike</span> <span class="story-name">mike</span>
</div> </div>
<div class="story seen"> <div class="story seen">
<div class="story-ring"><div class="story-avatar"></div></div> <div class="story-ring"><img class="story-avatar" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64" alt=""></div>
<span class="story-name">lisa</span> <span class="story-name">lisa</span>
</div> </div>
<div class="story seen"> <div class="story seen">
<div class="story-ring"><div class="story-avatar"></div></div> <div class="story-ring"><img class="story-avatar" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64" alt=""></div>
<span class="story-name">alex</span> <span class="story-name">alex</span>
</div> </div>
</div>` </div>`
@@ -941,7 +941,7 @@ export const playgroundTemplates = [
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2); object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -992,7 +992,7 @@ export const playgroundTemplates = [
<div class="comments"> <div class="comments">
<div class="comment"> <div class="comment">
<div class="comment-avatar"></div> <img class="comment-avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64" alt="">
<div class="comment-content"> <div class="comment-content">
<span class="comment-user">sarah_designs</span> <span class="comment-user">sarah_designs</span>
<span class="comment-text">This is amazing! 🔥</span> <span class="comment-text">This is amazing! 🔥</span>
@@ -1000,7 +1000,7 @@ export const playgroundTemplates = [
</div> </div>
</div> </div>
<div class="comment"> <div class="comment">
<div class="comment-avatar"></div> <img class="comment-avatar" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64" alt="">
<div class="comment-content"> <div class="comment-content">
<span class="comment-user">mike_photo</span> <span class="comment-user">mike_photo</span>
<span class="comment-text">Love the colors! What filter did you use?</span> <span class="comment-text">Love the colors! What filter did you use?</span>
@@ -1189,16 +1189,15 @@ export const playgroundTemplates = [
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
display: flex; padding: 3px;
align-items: center; flex-shrink: 0;
justify-content: center;
} }
.bio-avatar-inner { .bio-avatar img {
width: 72px; width: 100%;
height: 72px; height: 100%;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2); object-fit: cover;
} }
.bio-stats { .bio-stats {
@@ -1254,7 +1253,7 @@ export const playgroundTemplates = [
<div class="bio"> <div class="bio">
<div class="bio-header"> <div class="bio-header">
<div class="bio-avatar"><div class="bio-avatar-inner"></div></div> <div class="bio-avatar"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100" alt=""></div>
<div class="bio-stats"> <div class="bio-stats">
<div class="stat"><div class="stat-num">142</div><div class="stat-label">posts</div></div> <div class="stat"><div class="stat-num">142</div><div class="stat-label">posts</div></div>
<div class="stat"><div class="stat-num">8.5K</div><div class="stat-label">followers</div></div> <div class="stat"><div class="stat-num">8.5K</div><div class="stat-label">followers</div></div>
@@ -1295,7 +1294,7 @@ export const playgroundTemplates = [
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2); object-fit: cover;
} }
.status-field { .status-field {
@@ -1338,7 +1337,7 @@ export const playgroundTemplates = [
<div class="status-box"> <div class="status-box">
<div class="status-input"> <div class="status-input">
<div class="status-avatar"></div> <img class="status-avatar" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64" alt="">
<div class="status-field">What's on your mind?</div> <div class="status-field">What's on your mind?</div>
</div> </div>
<div class="status-actions"> <div class="status-actions">