Skip to content

Commit f9dbb5f

Browse files
Mishra-coderMishra-coder
committed
fix:add mobile UI overlay to Preview
1 parent 35e7842 commit f9dbb5f

2 files changed

Lines changed: 65 additions & 13 deletions

File tree

‎frontend/src/App.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,11 @@ function App() {
116116
});
117117
}, [selectedCategories, selectedThemes, sneakersView, searchQuery]);
118118

119+
const isEmbed = new URLSearchParams(window.location.search).get('embed') === '1';
120+
119121
return (
120122
<div className="zappify-app">
121-
<Header
123+
{!isEmbed && <Header
122124
onOpenOverlay={setActiveOverlay}
123125
onNavigate={handleNavigate}
124126
cartCount={cartItems.reduce((sum, i) => sum + i.qty, 0)}
@@ -128,7 +130,7 @@ function App() {
128130
onOpenAccount={() => setShowAccount(true)}
129131
searchQuery={searchQuery}
130132
onSearch={setSearchQuery}
131-
/>
133+
/>}
132134

133135
<main className="app-main">
134136
<div className="container-broad main-layout">

‎frontend/src/Preview.jsx‎

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,76 @@ export default function Preview() {
3232
alignItems: 'center',
3333
boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 0 1px #000',
3434
}}>
35+
{/* Side buttons */}
3536
<div style={{ position: 'absolute', left: '-3px', top: '120px', width: '3px', height: '36px', background: '#333', borderRadius: '2px 0 0 2px' }} />
3637
<div style={{ position: 'absolute', left: '-3px', top: '170px', width: '3px', height: '64px', background: '#333', borderRadius: '2px 0 0 2px' }} />
3738
<div style={{ position: 'absolute', left: '-3px', top: '248px', width: '3px', height: '64px', background: '#333', borderRadius: '2px 0 0 2px' }} />
3839
<div style={{ position: 'absolute', right: '-3px', top: '180px', width: '3px', height: '80px', background: '#333', borderRadius: '0 2px 2px 0' }} />
3940

4041
<div style={{ flex: 1, width: '100%', borderRadius: '42px', overflow: 'hidden', background: '#fff', position: 'relative' }}>
42+
{/* Dynamic island */}
4143
<div style={{
42-
position: 'absolute',
43-
top: '14px',
44-
left: '50%',
45-
transform: 'translateX(-50%)',
46-
width: '120px',
47-
height: '34px',
48-
background: '#000',
49-
borderRadius: '20px',
50-
zIndex: 100,
44+
position: 'absolute', top: '14px', left: '50%', transform: 'translateX(-50%)',
45+
width: '120px', height: '34px', background: '#000', borderRadius: '20px', zIndex: 100,
5146
}} />
52-
<div style={{ paddingTop: '58px', height: '100%', boxSizing: 'border-box' }}>
53-
<iframe src="/" style={{ width: '100%', height: '100%', border: 'none' }} title="Zappify App" />
47+
48+
{/* Overlay UI */}
49+
<div style={{
50+
position: 'absolute', top: 0, left: 0, right: 0, zIndex: 50,
51+
background: '#fff', paddingTop: '58px',
52+
}}>
53+
{/* Header */}
54+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 16px' }}>
55+
<div style={{ fontSize: '22px', fontWeight: '800', color: '#222' }}>
56+
<span style={{ color: '#e85d04' }}>Z</span>appify
57+
</div>
58+
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
59+
{/* Heart */}
60+
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
61+
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
62+
</svg>
63+
{/* Bag */}
64+
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
65+
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/>
66+
<path d="M16 10a4 4 0 0 1-8 0"/>
67+
</svg>
68+
{/* Person */}
69+
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
70+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
71+
</svg>
72+
</div>
73+
</div>
74+
75+
{/* Search Bar */}
76+
<div style={{
77+
display: 'flex', alignItems: 'center', gap: '8px',
78+
background: '#f2f2f2', margin: '4px 16px 10px', borderRadius: '14px',
79+
padding: '11px 14px',
80+
}}>
81+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
82+
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
83+
</svg>
84+
<span style={{ fontSize: '14px', color: '#aaa' }}>What are you looking for?</span>
85+
</div>
86+
87+
{/* Category Chips */}
88+
<div style={{
89+
display: 'flex', gap: '8px', overflowX: 'auto', padding: '2px 16px 10px',
90+
scrollbarWidth: 'none',
91+
}}>
92+
{['All', 'Men Low Top Sneakers', 'Men High Top Sneakers', 'Men Mid Top Sneakers', 'Men Clogs'].map((cat, i) => (
93+
<div key={cat} style={{
94+
flexShrink: 0, padding: '8px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '600',
95+
background: i === 0 ? '#e85d04' : '#f2f2f2',
96+
color: i === 0 ? '#fff' : '#888',
97+
whiteSpace: 'nowrap',
98+
}}>{cat}</div>
99+
))}
100+
</div>
54101
</div>
102+
103+
{/* iframe behind overlay */}
104+
<iframe src="/?embed=1" style={{ width: '100%', height: '100%', border: 'none', paddingTop: '185px', boxSizing: 'border-box' }} title="Zappify App" />
55105
</div>
56106

57107
<div style={{ width: '134px', height: '5px', background: 'rgba(255,255,255,0.4)', borderRadius: '3px', marginTop: '10px' }} />

0 commit comments

Comments
 (0)