GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Status bar simulation */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 80px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 box-sizing: border-box;29 color: #333;30 font-size: 32px;31 }32 .status-icons {33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .tiny-dot {38 width: 10px; height: 10px; background: #333; border-radius: 50%;39 display: inline-block; margin-left: 6px;40 }41 42 /* Top header with avatar, scan and bell */43 .top-header {44 position: absolute;45 top: 90px;46 left: 0;47 width: 1080px;48 padding: 0 36px;49 box-sizing: border-box;50 display: flex;51 align-items: center;52 justify-content: space-between;53 }54 .circle-btn {55 width: 54px; height: 54px;56 border-radius: 50%;57 border: 2px solid #ddd;58 display: flex; align-items: center; justify-content: center;59 background: #fff;60 }61 .right-actions {62 display: flex;63 align-items: center;64 gap: 26px;65 }66 .alert-badge {67 position: absolute;68 top: -2px; right: -2px;69 width: 18px; height: 18px; border-radius: 50%;70 background: #ff6fae; border: 2px solid #fff;71 }72 73 /* Search bar */74 .search-wrap {75 position: absolute;76 top: 160px;77 left: 36px;78 width: 1008px;79 height: 108px;80 box-sizing: border-box;81 display: flex; align-items: center;82 gap: 24px;83 }84 .search-bar {85 flex: 1;86 height: 108px;87 border-radius: 58px;88 border: 2px solid #e5e5e5;89 box-sizing: border-box;90 padding: 0 40px;91 display: flex; align-items: center;92 gap: 26px;93 color: #666;94 font-size: 40px;95 background: #fff;96 }97 .scan-btn {98 width: 108px; height: 108px; border-radius: 50%;99 background: #111; color: #fff;100 display: flex; align-items: center; justify-content: center;101 }102 103 /* Promo card */104 .promo-card {105 position: absolute;106 top: 310px;107 left: 36px;108 width: 1008px;109 border-radius: 24px;110 overflow: hidden;111 box-shadow: 0 8px 24px rgba(0,0,0,0.08);112 background: #fff;113 }114 .promo-image {115 height: 520px;116 background: #E0E0E0;117 border-bottom: 1px solid #BDBDBD;118 display: flex; align-items: center; justify-content: center;119 color: #757575; font-size: 32px;120 }121 .promo-content {122 padding: 42px;123 box-sizing: border-box;124 }125 .promo-title {126 font-size: 54px; font-weight: 700; margin-bottom: 24px;127 }128 .promo-text {129 font-size: 36px; line-height: 1.5; color: #555;130 }131 132 /* Section tabs */133 .tabs {134 position: absolute;135 top: 1000px;136 left: 36px;137 width: 1008px;138 display: flex;139 gap: 60px;140 font-size: 44px;141 font-weight: 700;142 color: #222;143 }144 .tab-active {145 position: relative;146 }147 .tab-active::after {148 content: "";149 position: absolute;150 left: 0; bottom: -20px;151 width: 160px; height: 8px;152 background: #000; border-radius: 4px;153 }154 .tab-inactive {155 color: #777;156 }157 158 /* Tiles */159 .tiles {160 position: absolute;161 top: 1100px;162 left: 36px;163 width: 1008px;164 display: grid;165 grid-template-columns: 1fr 1fr;166 gap: 24px;167 }168 .tile {169 background: #fff;170 border-radius: 16px;171 overflow: hidden;172 }173 .tile-image {174 height: 540px;175 background: #E0E0E0;176 border: 1px solid #BDBDBD;177 display: flex; align-items: center; justify-content: center;178 color: #757575; font-size: 30px;179 }180 .tile-label {181 padding: 30px;182 font-size: 48px;183 color: #222;184 }185 186 /* Bottom nav */187 .bottom-nav {188 position: absolute;189 bottom: 0;190 left: 0;191 width: 1080px;192 height: 170px;193 border-top: 2px solid #eee;194 background: #fff;195 display: flex;196 align-items: center;197 justify-content: space-around;198 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);199 }200 .nav-item {201 display: flex;202 flex-direction: column;203 align-items: center;204 gap: 18px;205 color: #666;206 font-size: 32px;207 }208 .nav-item.active { color: #000; }209 .icon {210 width: 56px; height: 56px;211 }212 213 /* Simple utility */214 .srch-icon { width: 44px; height: 44px; }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="status-bar">222 <div>9:35</div>223 <div class="status-icons">224 <!-- simple battery, wifi, notifications placeholder -->225 <svg class="icon" viewBox="0 0 24 24">226 <rect x="3" y="6" width="16" height="12" rx="2" fill="#333"></rect>227 <rect x="20" y="10" width="2" height="4" fill="#333"></rect>228 </svg>229 <svg class="icon" viewBox="0 0 24 24">230 <path d="M2 10l10-7 10 7-10 7-10-7z" fill="#333"></path>231 </svg>232 <span class="tiny-dot"></span>233 </div>234 </div>235 236 <!-- Top header -->237 <div class="top-header">238 <div class="circle-btn" title="Profile">239 <svg class="icon" viewBox="0 0 24 24">240 <circle cx="12" cy="8" r="4" fill="#000"></circle>241 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#000"></path>242 </svg>243 </div>244 <div class="right-actions">245 <div class="circle-btn" title="Notifications" style="position: relative;">246 <svg class="icon" viewBox="0 0 24 24">247 <path d="M12 3c-3 0-5 2-5 5v4l-2 2v1h14v-1l-2-2V8c0-3-2-5-5-5z" fill="#000"></path>248 <circle cx="12" cy="20" r="2" fill="#000"></circle>249 </svg>250 <span class="alert-badge"></span>251 </div>252 <div class="scan-btn" title="Scan">253 <svg class="icon" viewBox="0 0 24 24" fill="#fff">254 <path d="M4 6v-2h6v2H4zm10 0v-2h6v2h-6zM4 20v-2h6v2H4zm10 0v-2h6v2h-6zM6 8h12v8H6V8z"></path>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Search bar -->261 <div class="search-wrap">262 <div class="search-bar">263 <svg class="srch-icon" viewBox="0 0 24 24">264 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>265 <path d="M15 15l6 6" stroke="#666" stroke-width="2"></path>266 </svg>267 <div>What are you looking for?</div>268 </div>269 </div>270 271 <!-- Promo card -->272 <div class="promo-card">273 <div class="promo-image">[IMG: Person carrying parcel on staircase]</div>274 <div class="promo-content">275 <div class="promo-title">Free small parcel delivery</div>276 <div class="promo-text">277 Free small standard parcel delivery when you278 spend £60 or more on accessories & small279 furniture, up to 15kg.280 </div>281 </div>282 </div>283 284 <!-- Tabs -->285 <div class="tabs">286 <div class="tab-active">Products</div>287 <div class="tab-inactive">Rooms</div>288 </div>289 290 <!-- Tiles grid -->291 <div class="tiles">292 <div class="tile">293 <div class="tile-image">[IMG: Bedroom setup with single bed and window]</div>294 <div class="tile-label">New at IKEA</div>295 </div>296 <div class="tile">297 <div class="tile-image">[IMG: Dining table and chairs in bright room]</div>298 <div class="tile-label">Offers</div>299 </div>300 </div>301 302 <!-- Bottom Navigation -->303 <div class="bottom-nav">304 <div class="nav-item active">305 <svg class="icon" viewBox="0 0 24 24">306 <path d="M3 11l9-8 9 8v10h-6v-6H9v6H3V11z" fill="#000"></path>307 </svg>308 <div>Home</div>309 </div>310 <div class="nav-item">311 <svg class="icon" viewBox="0 0 24 24">312 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"></circle>313 <path d="M16 16l6 6" stroke="#666" stroke-width="2"></path>314 </svg>315 <div>Search</div>316 </div>317 <div class="nav-item">318 <svg class="icon" viewBox="0 0 24 24">319 <rect x="3" y="3" width="8" height="8" fill="#666"></rect>320 <rect x="13" y="3" width="8" height="8" fill="#666"></rect>321 <rect x="3" y="13" width="8" height="8" fill="#666"></rect>322 <rect x="13" y="13" width="8" height="8" fill="#666"></rect>323 </svg>324 <div>Browse</div>325 </div>326 <div class="nav-item">327 <svg class="icon" viewBox="0 0 24 24">328 <path d="M12 4c3 0 6 2 6 6s-4 8-6 8-6-4-6-8 3-6 6-6z" fill="#666"></path>329 </svg>330 <div>Saved</div>331 </div>332 <div class="nav-item">333 <svg class="icon" viewBox="0 0 24 24">334 <path d="M6 6h12l-2 14H8L6 6z" fill="#666"></path>335 <circle cx="9" cy="21" r="2" fill="#666"></circle>336 <circle cx="16" cy="21" r="2" fill="#666"></circle>337 </svg>338 <div>Bag</div>339 </div>340 </div>341 342</div>343</body>344</html>