A stream.place VOD client inspired by icarly.com
Add character image back, update logo, add AtmosphereConf thumbnails
- Restored character image in top right with proper positioning
- Updated header grid layout to accommodate character image
- Changed logo to use iStream-Bigger.png for larger text
- VideoCard now shows atmosphere-conf-thumb.png for stream1/2/3.atmosphereconf.org videos
- Buttons reorganized to prevent overlapping
+66
-28
atmosphere-conf-thumb.png
atmosphere-conf-thumb.png
This is a binary file and will not be displayed.
iStream-Bigger.png
iStream-Bigger.png
This is a binary file and will not be displayed.
public/atmosphere-conf-thumb.png
public/atmosphere-conf-thumb.png
This is a binary file and will not be displayed.
public/iStream-Bigger.png
public/iStream-Bigger.png
This is a binary file and will not be displayed.
+41
-22
src/app/icarly.css
+41
-22
src/app/icarly.css
···
65
65
background: linear-gradient(180deg, #4A5A8A 0%, #7BA05B 40%, #A6CC3A 100%);
66
66
border: 4px solid #fff;
67
67
border-bottom: none;
68
-
padding: 15px 30px 30px;
68
+
padding: 15px 200px 30px 30px;
69
69
position: relative;
70
70
min-height: 240px;
71
71
box-shadow: 0 0 20px rgba(0,0,0,0.3);
72
72
display: grid;
73
-
grid-template-columns: 280px 1fr 180px 200px;
73
+
grid-template-columns: 300px 1fr 200px;
74
74
grid-template-rows: auto auto 1fr;
75
75
grid-template-areas:
76
-
"homepage homepage homepage homepage"
77
-
"logo search login widgets"
78
-
"date search . widgets";
79
-
gap: 10px 25px;
76
+
"homepage homepage homepage"
77
+
"logo search widgets"
78
+
"date search widgets";
79
+
gap: 15px 30px;
80
80
}
81
81
82
82
/* Homepage button */
···
250
250
.header-right-widgets {
251
251
grid-area: widgets;
252
252
align-self: center;
253
-
justify-self: center;
253
+
justify-self: end;
254
254
display: flex;
255
255
flex-direction: column;
256
-
gap: 12px;
257
-
align-items: center;
256
+
gap: 15px;
257
+
align-items: flex-end;
258
258
width: 100%;
259
+
padding-right: 10px;
259
260
}
260
261
261
262
/* Info button */
262
263
.info-btn {
263
264
background: #FF6B6B;
264
265
color: #fff;
265
-
padding: 12px 18px;
266
+
padding: 10px 16px;
266
267
font-weight: bold;
267
-
font-size: 13px;
268
+
font-size: 12px;
268
269
text-align: center;
269
-
line-height: 1.4;
270
+
line-height: 1.3;
270
271
border: 3px solid #fff;
271
272
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
272
273
z-index: 5;
273
-
width: 100%;
274
-
max-width: 160px;
274
+
width: 140px;
275
275
cursor: pointer;
276
276
transition: transform 0.2s;
277
277
}
···
289
289
.feedback-btn {
290
290
background: #FF4444;
291
291
color: #fff;
292
-
padding: 14px 18px;
292
+
padding: 12px 16px;
293
293
font-weight: bold;
294
-
font-size: 15px;
294
+
font-size: 14px;
295
295
text-align: center;
296
-
line-height: 1.3;
296
+
line-height: 1.2;
297
297
border: 3px solid #fff;
298
298
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
299
299
cursor: pointer;
300
300
z-index: 5;
301
-
width: 100%;
302
-
max-width: 160px;
301
+
width: 140px;
303
302
transition: transform 0.2s;
304
303
}
305
304
···
309
308
}
310
309
311
310
.feedback-btn small {
312
-
font-size: 12px;
311
+
font-size: 11px;
313
312
color: var(--icarly-yellow);
314
313
}
315
314
316
-
/* Character image - removed from header grid flow */
315
+
/* Character image - positioned in top right */
317
316
.character-image {
318
-
display: none;
317
+
position: absolute;
318
+
right: 25px;
319
+
top: 20px;
320
+
width: 160px;
321
+
height: 160px;
322
+
border: 5px solid #fff;
323
+
box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
324
+
overflow: hidden;
325
+
z-index: 10;
326
+
animation: float 5s ease-in-out infinite;
327
+
background: #fff;
328
+
}
329
+
330
+
.character-image:hover {
331
+
animation: wiggle 0.3s ease-in-out;
332
+
}
333
+
334
+
.character-image img {
335
+
width: 100%;
336
+
height: 100%;
337
+
object-fit: cover;
319
338
}
320
339
321
340
.character-image:hover {
+16
-4
src/components/HomeClient.tsx
+16
-4
src/components/HomeClient.tsx
···
131
131
Homepage
132
132
</Link>
133
133
134
-
{/* Logo - ENLARGED */}
134
+
{/* Logo - Using bigger version */}
135
135
<Link href="/" className="icarly-logo">
136
136
<Image
137
-
src="/iStream_Logo.png"
137
+
src="/iStream-Bigger.png"
138
138
alt="iStream"
139
-
width={300}
140
-
height={120}
139
+
width={280}
140
+
height={100}
141
141
style={{ objectFit: 'contain', width: '100%', height: 'auto' }}
142
142
priority
143
143
/>
···
185
185
<div className="feedback-btn">
186
186
feedback<br /><small>click 'til it hurts >></small>
187
187
</div>
188
+
</div>
189
+
190
+
{/* Character image */}
191
+
<div className="character-image">
192
+
<Image
193
+
src="/character-image.png"
194
+
alt="iStream Team"
195
+
width={160}
196
+
height={160}
197
+
style={{ objectFit: 'cover' }}
198
+
priority
199
+
/>
188
200
</div>
189
201
</header>
190
202
+9
-2
src/components/VideoCard.tsx
+9
-2
src/components/VideoCard.tsx
···
49
49
const id = video.uri.split('/').pop();
50
50
const displayName = getDisplayName(video.handle);
51
51
52
-
// Generate gradient based on title
52
+
// Check if this is an AtmosphereConf stream
53
+
const isAtmosphereConf = ['stream1.atmosphereconf.org', 'stream2.atmosphereconf.org', 'stream3.atmosphereconf.org'].includes(video.handle);
54
+
55
+
// Generate gradient based on title (only for non-AtmosphereConf videos)
53
56
const colors = [
54
57
['#FF6B6B', '#4ECDC4'],
55
58
['#667eea', '#764ba2'],
···
73
76
<div className="video-card">
74
77
<div
75
78
className="video-thumbnail"
76
-
style={{ background: `linear-gradient(135deg, ${color1}, ${color2})` }}
79
+
style={{
80
+
background: isAtmosphereConf
81
+
? 'url(/atmosphere-conf-thumb.png) center/cover no-repeat'
82
+
: `linear-gradient(135deg, ${color1}, ${color2})`
83
+
}}
77
84
>
78
85
<div className="play-overlay">▶</div>
79
86
<div className="duration-badge">