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;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0b0b0b;13 color: #fff;14 }15 /* Status bar */16 .status-bar {17 height: 110px;18 padding: 0 40px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #eaeaea;23 font-size: 44px;24 letter-spacing: 1px;25 }26 .status-icons {27 display: flex;28 gap: 26px;29 align-items: center;30 }31 .dot { width: 18px; height: 18px; border-radius: 50%; background: #eaeaea; display: inline-block; }32 .battery {33 width: 38px; height: 22px; border: 2px solid #eaeaea; position: relative; border-radius: 4px;34 }35 .battery::after {36 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #eaeaea; border-radius: 2px;37 }38 .battery-fill { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 9px; background: #eaeaea; }39 40 /* Header */41 .header {42 height: 150px;43 display: flex;44 align-items: center;45 padding: 0 30px;46 border-bottom: 1px solid #1c1c1c;47 }48 .back {49 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;50 }51 .header-title { font-size: 64px; font-weight: 700; margin-left: 10px; }52 .header-actions {53 margin-left: auto;54 display: flex; gap: 24px;55 }56 .circle-btn {57 width: 96px; height: 96px; border-radius: 50%;58 background: #1a1a1a; display: flex; align-items: center; justify-content: center;59 }60 .icon { fill: #eaeaea; width: 48px; height: 48px; }61 62 /* Content area */63 .content {64 padding: 30px;65 }66 .section-title {67 font-size: 66px; font-weight: 800; margin: 20px 0 30px;68 }69 .seller-row {70 display: flex; align-items: center; gap: 26px; margin-top: 10px;71 }72 .avatar {73 width: 140px; height: 140px; border-radius: 70px; background: #E0E0E0;74 border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;75 color: #757575; font-size: 26px; text-align: center;76 }77 .seller-info {78 display: flex; flex-direction: column; gap: 10px;79 }80 .seller-name { font-size: 44px; font-weight: 700; }81 .seller-feedback { font-size: 38px; color: #b7b7b7; }82 .save-row { margin-top: 18px; display: flex; align-items: center; gap: 16px; color: #a9c4ff; font-size: 40px; }83 .heart { width: 44px; height: 44px; }84 .joined { margin-top: 40px; font-size: 40px; color: #dcdcdc; display: flex; align-items: center; gap: 20px; }85 .calendar {86 width: 44px; height: 44px; border: 2px solid #dcdcdc; border-radius: 6px; position: relative;87 }88 .calendar::before { content: ""; position: absolute; top: -10px; left: 6px; width: 30px; height: 10px; background: #dcdcdc; border-radius: 2px; }89 90 .btn-primary {91 margin-top: 36px;92 width: 100%; max-width: 1000px; height: 130px; border-radius: 80px;93 background: #4a64b8; display: flex; align-items: center; justify-content: center;94 font-size: 48px; font-weight: 700;95 }96 .btn-outline {97 margin-top: 30px;98 width: 100%; max-width: 1000px; height: 130px; border-radius: 80px;99 border: 2px solid #4a64b8; display: flex; align-items: center; justify-content: center;100 font-size: 48px; font-weight: 700; color: #bcd1ff;101 background: transparent;102 }103 104 .section-sub {105 margin-top: 60px; font-size: 62px; font-weight: 800;106 }107 108 /* Tabs and filter */109 .tabs {110 margin-top: 50px; display: flex; align-items: center; justify-content: space-between;111 }112 .tab-group {113 display: flex; gap: 40px;114 }115 .tab {116 font-size: 44px; color: #dcdcdc;117 }118 .tab.active { color: #ffffff; position: relative; }119 .tab.active::after {120 content: ""; display: block; width: 220px; height: 6px; background: #cfcfcf; margin-top: 20px;121 }122 .filter {123 display: flex; align-items: center; gap: 16px; border: 1px solid #2e2e2e; border-radius: 60px;124 padding: 22px 30px; font-size: 40px; color: #eaeaea;125 }126 .chev { width: 30px; height: 30px; border-left: 2px solid #eaeaea; border-bottom: 2px solid #eaeaea; transform: rotate(-45deg); }127 128 /* Bottom nav */129 .bottom-nav {130 position: absolute; bottom: 100px; left: 0; width: 100%;131 display: flex; justify-content: space-around; align-items: center;132 padding: 20px 0;133 }134 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #dcdcdc; font-size: 34px; }135 .nav-icon {136 width: 100px; height: 100px; border-radius: 50%; background: #1a1a1a;137 display: flex; align-items: center; justify-content: center;138 }139 .nav-item.active .nav-icon { background: #223052; }140 .nav-item.active { color: #ffffff; }141 142 /* USB Debugging modal */143 .dialog {144 position: absolute;145 left: 60px;146 bottom: 540px;147 width: 960px;148 background: #1f1f1f;149 border-radius: 44px;150 box-shadow: 0 40px 90px rgba(0,0,0,0.6);151 padding: 60px;152 border: 1px solid #2c2c2c;153 }154 .dialog-title {155 font-size: 64px; font-weight: 800; margin-bottom: 28px;156 }157 .dialog-text { font-size: 42px; color: #d0d0d0; line-height: 1.5; }158 .mono { font-family: "Courier New", monospace; color: #ffffff; }159 .checkbox-row {160 margin-top: 36px; display: flex; align-items: center; gap: 20px; font-size: 42px; color: #dcdcdc;161 }162 .box { width: 48px; height: 48px; border: 3px solid #bdbdbd; border-radius: 10px; }163 .dialog-actions {164 margin-top: 40px; display: flex; justify-content: flex-end; gap: 40px;165 }166 .btn-text {167 font-size: 48px; color: #9fc4ff;168 padding: 18px 26px; border-radius: 20px;169 background: transparent;170 }171 172 /* faint separators to mimic lists */173 .divider { height: 2px; background: #1c1c1c; margin: 30px 0; }174</style>175</head>176<body>177<div id="render-target">178 179 <!-- Status Bar -->180 <div class="status-bar">181 <div>1:32</div>182 <div class="status-icons">183 <div class="dot"></div>184 <div class="battery"><div class="battery-fill"></div></div>185 </div>186 </div>187 188 <!-- Header Bar -->189 <div class="header">190 <div class="back">191 <svg class="icon" viewBox="0 0 24 24">192 <path d="M15 19l-7-7 7-7" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 <div class="header-title">Item</div>196 <div class="header-actions">197 <div class="circle-btn">198 <svg class="icon" viewBox="0 0 24 24"><path d="M10 2a8 8 0 106.32 3.68l4.1 4.1-1.42 1.42-4.1-4.1A8 8 0 0010 2z" fill="#eaeaea"/></svg>199 </div>200 <div class="circle-btn">201 <svg class="icon" viewBox="0 0 24 24"><path d="M7 6h14l-2 10H9L7 6zM9 20a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4z" fill="#eaeaea"/></svg>202 </div>203 <div class="circle-btn">204 <svg class="icon" viewBox="0 0 24 24"><path d="M18 8a6 6 0 01-6 6v4l-8-8 8-8v4a6 6 0 016 6z" fill="#eaeaea"/></svg>205 </div>206 <div class="circle-btn">207 <svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>208 </div>209 </div>210 </div>211 212 <!-- Content -->213 <div class="content">214 <div class="section-title">About this seller</div>215 216 <div class="seller-row">217 <div class="avatar">[IMG: Seller Avatar]</div>218 <div class="seller-info">219 <div class="seller-name">The Cellular Professor eBay Store (14331)</div>220 <div class="seller-feedback">99.6% positive feedback</div>221 <div class="save-row">222 <svg class="heart" viewBox="0 0 24 24">223 <path d="M12 21s-7-4.35-7-10a5 5 0 019-3 5 5 0 019 3c0 5.65-7 10-7 10z" fill="#9fc4ff"/>224 </svg>225 <span>Save seller</span>226 </div>227 </div>228 </div>229 230 <div class="joined">231 <div class="calendar"></div>232 <div>Joined Dec 2013</div>233 </div>234 235 <div class="btn-primary">Seller's other items</div>236 <div class="btn-outline">Contact seller</div>237 238 <div class="section-sub">Detailed seller ratings</div>239 <div class="divider"></div>240 241 <div class="section-sub" style="font-size:58px;">Seller feedback (7,841)</div>242 243 <div class="tabs">244 <div class="tab-group">245 <div class="tab active">This item (106)</div>246 <div class="tab">All items (7,841)</div>247 </div>248 <div class="filter">249 <span>All ratings</span>250 <div class="chev"></div>251 </div>252 </div>253 </div>254 255 <!-- USB Debugging Modal -->256 <div class="dialog">257 <div class="dialog-title">Allow USB debugging?</div>258 <div class="dialog-text">259 The computer's RSA key fingerprint is:260 <div class="mono" style="margin-top:10px;">261 C1:85:5F:FF:EE:24:F0:C8:B2:38:CA:6D:60:C<br/>9:64:84262 </div>263 </div>264 <div class="checkbox-row">265 <div class="box"></div>266 <div>Always allow from this computer</div>267 </div>268 <div class="dialog-actions">269 <div class="btn-text">Cancel</div>270 <div class="btn-text">Allow</div>271 </div>272 </div>273 274 <!-- Bottom Navigation -->275 <div class="bottom-nav">276 <div class="nav-item">277 <div class="nav-icon">278 <svg class="icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3V10z" fill="#eaeaea"/></svg>279 </div>280 <div>Home</div>281 </div>282 <div class="nav-item">283 <div class="nav-icon">284 <svg class="icon" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm7 9H5v-2a7 7 0 0114 0v2z" fill="#eaeaea"/></svg>285 </div>286 <div>My eBay</div>287 </div>288 <div class="nav-item active">289 <div class="nav-icon">290 <svg class="icon" viewBox="0 0 24 24"><path d="M10 2a8 8 0 106.32 3.68l4.1 4.1-1.42 1.42-4.1-4.1A8 8 0 0010 2z" fill="#eaeaea"/></svg>291 </div>292 <div>Search</div>293 </div>294 <div class="nav-item">295 <div class="nav-icon">296 <svg class="icon" viewBox="0 0 24 24"><path d="M12 22a2 2 0 01-2-2h4a2 2 0 01-2 2zm8-6a8 8 0 10-16 0h16z" fill="#eaeaea"/></svg>297 </div>298 <div>Inbox</div>299 </div>300 <div class="nav-item">301 <div class="nav-icon">302 <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h12v14H4zM18 8l4 4-4 4V8z" fill="#eaeaea"/></svg>303 </div>304 <div>Selling</div>305 </div>306 </div>307 308</div>309</body>310</html>