GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Render</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#f5f5f7;11 border-radius:24px;12 box-shadow: 0 8px 24px rgba(0,0,0,0.15);13 color:#222;14 }15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; width:100%; height:110px;18 padding:0 36px;19 display:flex; align-items:center; justify-content:space-between;20 font-size:40px; color:#2d2d2d;21 background:transparent;22 }23 .status-right { display:flex; align-items:center; gap:22px; }24 .icon-dot {25 width:24px; height:24px; background:#999; border-radius:50%;26 }27 /* Top search area */28 .top-area {29 position:absolute; top:110px; left:0; width:100%; padding:0 36px;30 height:140px; display:flex; align-items:center;31 }32 .back-btn {33 width:84px; height:84px; display:flex; align-items:center; justify-content:center;34 border-radius:20px;35 }36 .search-field {37 flex:1;38 height:96px; margin-left:8px;39 background:#fff; border-radius:22px;40 box-shadow: 0 2px 6px rgba(0,0,0,0.06) inset;41 display:flex; align-items:center; justify-content:space-between;42 padding:0 26px;43 font-size:36px; color:#777;44 }45 .search-placeholder { color:#555; }46 .mic {47 width:48px; height:48px;48 }49 50 /* Overlay modal */51 .overlay-card {52 position:absolute; top:210px; left:36px; width:1008px;53 background:#ffffff; border-radius:32px;54 box-shadow:0 18px 40px rgba(0,0,0,0.18);55 padding:44px 38px;56 display:flex; gap:60px; align-items:flex-start;57 }58 .overlay-close {59 position:absolute; right:24px; top:24px;60 width:68px; height:68px; border-radius:34px; background:#f3f3f3;61 display:flex; align-items:center; justify-content:center;62 box-shadow:0 2px 8px rgba(0,0,0,0.08);63 }64 .overlay-option {65 flex:1; min-width:0;66 display:flex; flex-direction:column; align-items:flex-start;67 gap:18px;68 }69 .option-icon {70 width:132px; height:132px; border-radius:30px;71 display:flex; align-items:center; justify-content:center;72 background:linear-gradient(135deg,#ffd4e1,#f7a3be);73 box-shadow:0 6px 14px rgba(255,105,135,0.25);74 }75 .option-icon.robot {76 background:linear-gradient(135deg,#d4ffe7,#a6f0c8);77 box-shadow:0 6px 14px rgba(0,180,120,0.25);78 }79 .option-title { font-size:40px; font-weight:700; color:#1f1f1f; }80 .option-sub { font-size:32px; color:#666; line-height:1.3; }81 82 /* Section headers */83 .section {84 position:absolute; left:36px; right:36px;85 }86 .recent { top:620px; }87 .sec-title {88 font-size:44px; font-weight:800; letter-spacing:0.5px; color:#1f1f1f;89 display:flex; align-items:center; justify-content:space-between;90 margin-bottom:28px;91 }92 .edit-link { color:#d64b61; font-size:36px; font-weight:700; }93 94 /* Recent chips */95 .recent-list {96 display:flex; gap:32px;97 }98 .recent-item {99 width:210px; display:flex; flex-direction:column; align-items:center; gap:12px;100 }101 .circle-img {102 width:160px; height:160px; border-radius:50%;103 background:#E0E0E0; border:1px solid #BDBDBD;104 display:flex; align-items:center; justify-content:center; color:#757575;105 text-align:center; font-size:28px; padding:8px;106 }107 .recent-text {108 font-size:34px; text-align:center; color:#333; line-height:1.2;109 }110 111 /* Most searched articles */112 .most { top:930px; }113 .view-all {114 background:#f05d75; color:#fff; font-weight:800; font-size:36px;115 padding:22px 34px; border-radius:18px;116 box-shadow:0 8px 14px rgba(240,93,117,0.3);117 }118 119 /* Grid tiles */120 .grid {121 margin-top:28px;122 display:grid;123 grid-template-columns: repeat(3, 1fr);124 gap:28px;125 }126 .tile {127 height:340px; border-radius:18px; overflow:hidden;128 background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.08);129 position:relative; display:flex; align-items:center; justify-content:center;130 padding:0;131 }132 .tile .img {133 position:absolute; inset:0;134 display:flex; align-items:center; justify-content:center;135 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; font-size:30px;136 }137 .label {138 position:absolute; bottom:0; left:0; right:0;139 background:#0e0e0f; color:#fff; font-size:38px; font-weight:800;140 padding:18px 22px;141 opacity:0.95;142 }143 144 /* Bottom safe area indicator bar */145 .home-indicator {146 position:absolute; bottom:28px; left:50%; transform:translateX(-50%);147 width:420px; height:14px; border-radius:7px; background:#d0d0d2;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div>8:48</div>157 <div class="status-right">158 <div class="icon-dot"></div>159 <div class="icon-dot"></div>160 <div class="icon-dot"></div>161 <div class="icon-dot"></div>162 </div>163 </div>164 165 <!-- Top search area -->166 <div class="top-area">167 <div class="back-btn">168 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">169 <path d="M14 18L8 12L14 6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>170 </svg>171 </div>172 <div class="search-field">173 <div class="search-placeholder">Search for brands & products</div>174 <svg class="mic" viewBox="0 0 24 24" fill="none">175 <rect x="9" y="4" width="6" height="10" rx="3" stroke="#333" stroke-width="2"></rect>176 <path d="M6 10v2a6 6 0 0012 0v-2" stroke="#333" stroke-width="2" stroke-linecap="round"></path>177 <path d="M12 20v2" stroke="#333" stroke-width="2" stroke-linecap="round"></path>178 </svg>179 </div>180 </div>181 182 <!-- Overlay modal with options -->183 <div class="overlay-card">184 <div class="overlay-close">185 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">186 <path d="M6 6L18 18M18 6L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"></path>187 </svg>188 </div>189 <div class="overlay-option">190 <div class="option-icon">191 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">192 <rect x="5" y="7" width="14" height="10" rx="2" stroke="#7a2d45" stroke-width="2"></rect>193 <circle cx="12" cy="12" r="3" stroke="#7a2d45" stroke-width="2"></circle>194 <path d="M8 7l1.5-2h5L16 7" stroke="#7a2d45" stroke-width="2" stroke-linecap="round"></path>195 </svg>196 </div>197 <div class="option-title">Image search</div>198 <div class="option-sub">Upload images & search products</div>199 </div>200 <div class="overlay-option">201 <div class="option-icon robot">202 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">203 <rect x="6" y="8" width="12" height="8" rx="3" stroke="#0e7c57" stroke-width="2"></rect>204 <circle cx="10" cy="12" r="1.5" fill="#0e7c57"></circle>205 <circle cx="14" cy="12" r="1.5" fill="#0e7c57"></circle>206 <path d="M9 8V6M15 8V6" stroke="#0e7c57" stroke-width="2" stroke-linecap="round"></path>207 </svg>208 </div>209 <div class="option-title">Fashion GPT</div>210 <div class="option-sub">Get AI generated styling ideas</div>211 </div>212 </div>213 214 <!-- Recent Searches -->215 <div class="section recent">216 <div class="sec-title">217 <div>RECENT SEARCHES</div>218 <div class="edit-link">EDIT</div>219 </div>220 <div class="recent-list">221 <div class="recent-item">222 <div class="circle-img">[IMG: Laptop bag]</div>223 <div class="recent-text">Laptop standin…</div>224 </div>225 <div class="recent-item">226 <div class="circle-img">[IMG: Golf shoes]</div>227 <div class="recent-text">Golf shoes for men</div>228 </div>229 <div class="recent-item">230 <div class="circle-img">[IMG: Golf shoes]</div>231 <div class="recent-text">Golf shoes for men</div>232 </div>233 </div>234 </div>235 236 <!-- Most searched articles -->237 <div class="section most">238 <div class="sec-title">239 <div>MOST SEARCHED ARTICLES</div>240 <div class="view-all">View All</div>241 </div>242 243 <div class="grid">244 <div class="tile">245 <div class="img">[IMG: Lace briefs]</div>246 <div class="label">Briefs</div>247 </div>248 <div class="tile">249 <div class="img">[IMG: Red sports shoe]</div>250 <div class="label">Sports Shoes</div>251 </div>252 <div class="tile">253 <div class="img">[IMG: Black watch]</div>254 <div class="label">Watches</div>255 </div>256 <div class="tile">257 <div class="img">[IMG: Smartwatch screen]</div>258 <div class="label">Smartwatches</div>259 </div>260 <div class="tile">261 <div class="img">[IMG: Two people in T-Shirts]</div>262 <div class="label">T-Shirts</div>263 </div>264 <div class="tile">265 <div class="img">[IMG: Pair wearing jeans]</div>266 <div class="label">Jeans</div>267 </div>268 <div class="tile">269 <div class="img">[IMG: Green flip-flops]</div>270 <div class="label">Flip-Flops</div>271 </div>272 <div class="tile">273 <div class="img">[IMG: Headphones on yellow]</div>274 <div class="label">Headphones</div>275 </div>276 <div class="tile">277 <div class="img">[IMG: Platform casual shoes]</div>278 <div class="label">Casual</div>279 </div>280 <div class="tile">281 <div class="img">[IMG: Pink bra]</div>282 <div class="label">Bras</div>283 </div>284 <div class="tile">285 <div class="img">[IMG: Black & red backpack]</div>286 <div class="label">Backpacks</div>287 </div>288 <div class="tile">289 <div class="img">[IMG: White flats]</div>290 <div class="label">Flats</div>291 </div>292 </div>293 </div>294 295 <!-- Home indicator -->296 <div class="home-indicator"></div>297</div>298</body>299</html>