GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #f0f0f0;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 background: #9a9a9a;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 36px;26 font-size: 40px;27 box-sizing: border-box;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }31 .sb-square {32 width: 36px; height: 36px; background: #fff; border-radius: 4px;33 }34 .wifi-icon, .bolt-icon {35 width: 44px; height: 44px; display: inline-block;36 }37 38 /* Header */39 .header {40 height: 140px;41 background: #d3d3d3;42 display: flex;43 align-items: center;44 padding: 0 30px;45 box-sizing: border-box;46 border-bottom: 1px solid #c7c7c7;47 }48 .nav-left, .nav-right {49 display: flex; align-items: center; gap: 28px;50 }51 .spacer { flex: 1; }52 53 .icon-btn {54 width: 72px; height: 72px; display: inline-flex; justify-content: center; align-items: center;55 }56 .back-icon svg, .bag-icon svg, .heart-icon svg, .chev-icon svg {57 width: 44px; height: 44px; stroke: #222; fill: none; stroke-width: 4;58 }59 60 /* List sections */61 .section-row {62 background: #dcdcdc;63 padding: 34px 30px;64 font-size: 46px;65 font-weight: 700;66 border-bottom: 1px solid #cfcfcf;67 display: flex; align-items: center;68 }69 .section-row .row-title { flex: 1; }70 .section-row.light { font-weight: 700; }71 72 /* Content heading */73 .content {74 padding: 34px 30px 0 30px;75 }76 .content h2 {77 margin: 26px 0 30px;78 font-size: 54px;79 letter-spacing: 0.3px;80 }81 82 /* Product grid */83 .grid {84 display: grid;85 grid-template-columns: repeat(3, 1fr);86 gap: 30px;87 }88 .card {89 background: transparent;90 }91 .img-ph {92 width: 100%;93 height: 360px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 color: #757575;97 display: flex; align-items: center; justify-content: center;98 font-size: 36px;99 }100 .card .title {101 margin-top: 18px;102 font-size: 36px;103 color: #333;104 }105 .card .price {106 font-size: 34px;107 color: #d14c4c;108 }109 110 /* Bottom add bar */111 .bottom-bar-wrap {112 position: absolute;113 left: 0; right: 0; bottom: 120px;114 padding: 0 30px;115 box-sizing: border-box;116 }117 .add-bar {118 height: 140px;119 background: #111;120 border-radius: 12px;121 color: #fff;122 display: flex; align-items: center; justify-content: center;123 font-size: 48px; font-weight: 700;124 gap: 18px;125 }126 .add-bar svg { stroke: #fff; width: 44px; height: 44px; }127 128 /* Gesture pill */129 .gesture-pill {130 position: absolute;131 bottom: 36px;132 left: 50%;133 transform: translateX(-50%);134 width: 240px; height: 14px;135 background: #ffffff;136 border-radius: 10px;137 opacity: 0.95;138 }139 140 /* Dim overlay + modal */141 .overlay {142 position: absolute; inset: 0;143 background: rgba(0,0,0,0.45);144 }145 .modal {146 position: absolute;147 left: 50%;148 top: 60%;149 transform: translate(-50%, -50%);150 width: 940px;151 background: #1e1e1f;152 color: #eaeaea;153 border-radius: 36px;154 box-shadow: 0 20px 50px rgba(0,0,0,0.6);155 padding: 44px 46px 34px;156 box-sizing: border-box;157 }158 .modal h3 {159 margin: 0 0 18px;160 font-size: 56px;161 font-weight: 700;162 color: #ffffff;163 }164 .modal p {165 margin: 8px 0;166 font-size: 38px;167 line-height: 1.35;168 color: #d9d9d9;169 }170 .checkbox-row {171 display: flex; align-items: center; gap: 22px;172 margin-top: 28px;173 }174 .checkbox {175 width: 46px; height: 46px; border: 2px solid #cfcfcf; border-radius: 6px;176 }177 .modal-actions {178 display: flex; justify-content: flex-end; gap: 46px;179 margin-top: 28px;180 }181 .modal-actions .btn {182 font-size: 44px; color: #b7c8ff; cursor: default;183 }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status Bar -->190 <div class="status-bar">191 <div class="status-left">192 <div>7:55</div>193 <div class="sb-square"></div>194 </div>195 <div class="status-right">196 <!-- simple wifi -->197 <svg class="wifi-icon" viewBox="0 0 24 24">198 <path d="M2 9c5-5 15-5 20 0M5 12c3.5-3.5 10.5-3.5 14 0M8 15c2-2 6-2 8 0M11.5 18.5h1" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>199 </svg>200 <!-- bolt -->201 <svg class="bolt-icon" viewBox="0 0 24 24">202 <path d="M13 2 5 13h6l-1 9 8-11h-6l1-9z" fill="#fff"/>203 </svg>204 </div>205 </div>206 207 <!-- Header row -->208 <div class="header">209 <div class="nav-left">210 <div class="icon-btn back-icon">211 <svg viewBox="0 0 24 24"><path d="M15 4 7 12l8 8" stroke-linecap="round" stroke-linejoin="round"/></svg>212 </div>213 </div>214 <div class="spacer"></div>215 <div class="nav-right">216 <div class="icon-btn bag-icon">217 <svg viewBox="0 0 24 24">218 <path d="M6 8h12l-1 12H7L6 8z"/>219 <path d="M9 8V6a3 3 0 0 1 6 0v2" />220 </svg>221 </div>222 </div>223 </div>224 225 <!-- Rows -->226 <div class="section-row">227 <div class="row-title">Materials & Suppliers</div>228 <div class="heart-icon">229 <svg viewBox="0 0 24 24">230 <path d="M12 21s-7-5.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 10-7 10z"/>231 </svg>232 </div>233 </div>234 235 <div class="section-row light">236 <div class="row-title">Care guide</div>237 <div class="chev-icon">238 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>239 </div>240 </div>241 242 <!-- Content -->243 <div class="content">244 <h2>Select favorites</h2>245 246 <div class="grid">247 <div class="card">248 <div class="img-ph">[IMG: Chunky Sneaker]</div>249 <div class="title">Chunky Sneaker</div>250 <div class="price">$34.99</div>251 </div>252 <div class="card">253 <div class="img-ph">[IMG: Beige Blazer]</div>254 <div class="title">Beige Blazer</div>255 <div class="price">$39.99</div>256 </div>257 <div class="card">258 <div class="img-ph">[IMG: Sneaker]</div>259 <div class="title">Chunky Sneaker</div>260 <div class="price">$47.99</div>261 </div>262 </div>263 </div>264 265 <!-- Bottom bar -->266 <div class="bottom-bar-wrap">267 <div class="add-bar">268 <svg viewBox="0 0 24 24">269 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#fff" stroke-width="2"/>270 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#fff" stroke-width="2"/>271 </svg>272 <div>Add</div>273 </div>274 </div>275 276 <div class="gesture-pill"></div>277 278 <!-- Dim overlay + modal dialog -->279 <div class="overlay"></div>280 <div class="modal">281 <h3>Allow USB debugging?</h3>282 <p>The computer's RSA key fingerprint is:</p>283 <p>9F:DF:65:C6:6B:82:4C:94:C9:2E:4F:3F:E2:E2:4D:85</p>284 285 <div class="checkbox-row">286 <div class="checkbox"></div>287 <div style="font-size:38px;color:#e6e6e6;">Always allow from this computer</div>288 </div>289 290 <div class="modal-actions">291 <div class="btn">Cancel</div>292 <div class="btn">Allow</div>293 </div>294 </div>295 296</div>297</body>298</html>