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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 28px 36px;25 box-sizing: border-box;26 color: #000;27 font-weight: 600;28 display: flex;29 align-items: center;30 justify-content: space-between;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .status-icon {38 width: 34px;39 height: 34px;40 }41 42 /* App header and search area */43 .app-header {44 position: absolute;45 top: 110px;46 left: 0;47 width: 1080px;48 padding: 24px 30px;49 box-sizing: border-box;50 }51 .top-row {52 display: flex;53 align-items: center;54 gap: 24px;55 }56 .back-btn {57 width: 60px;58 height: 60px;59 border-radius: 30px;60 display: flex;61 align-items: center;62 justify-content: center;63 }64 .search-wrap {65 flex: 1;66 position: relative;67 height: 92px;68 background: #F1F3F4;69 border-radius: 46px;70 display: flex;71 align-items: center;72 padding: 0 24px 0 24px;73 box-sizing: border-box;74 color: #555;75 font-size: 34px;76 }77 .search-wrap .icon {78 width: 36px; height: 36px; margin-right: 16px;79 }80 .search-text { flex: 1; color: #222; }81 .search-wrap .clear {82 width: 36px; height: 36px; margin-left: 12px;83 }84 .search-action {85 color: #3F51F7;86 font-size: 36px;87 font-weight: 600;88 margin-left: 18px;89 }90 91 .section-title {92 margin-top: 40px;93 font-size: 38px;94 color: #333;95 padding-left: 90px;96 }97 98 .result-item {99 margin-top: 24px;100 padding: 22px 90px;101 display: flex;102 align-items: center;103 gap: 26px;104 }105 .img-ph {106 width: 80px; height: 80px;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 border-radius: 8px;110 color: #757575;111 font-size: 20px;112 display: flex; justify-content: center; align-items: center;113 text-align: center;114 }115 .result-text .name {116 color: #2979FF;117 font-size: 36px;118 font-weight: 600;119 }120 .result-text .meta { color: #999; font-size: 28px; }121 122 /* Overlay and modal sheet */123 .overlay {124 position: absolute;125 left: 0; top: 0; width: 100%; height: 100%;126 background: rgba(0,0,0,0.40);127 }128 .sheet {129 position: absolute;130 left: 120px;131 top: 600px;132 width: 840px;133 background: #FFFFFF;134 border-radius: 28px;135 box-shadow: 0 24px 60px rgba(0,0,0,0.35);136 overflow: hidden;137 }138 .sheet-header {139 padding: 36px 36px 10px 36px;140 font-size: 40px;141 font-weight: 700;142 color: #333;143 }144 .sheet-list {145 padding: 8px 12px 12px 12px;146 }147 .sheet-item {148 display: flex;149 align-items: center;150 justify-content: space-between;151 padding: 22px 24px;152 border-radius: 12px;153 }154 .item-left {155 display: flex;156 align-items: center;157 gap: 22px;158 }159 .app-icon {160 width: 78px; height: 78px;161 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;162 color: #757575; font-size: 22px;163 display: flex; justify-content: center; align-items: center; text-align: center;164 }165 .app-name {166 font-size: 36px; color: #222; font-weight: 600;167 }168 .radio {169 width: 40px; height: 40px;170 border: 3px solid #D0D0D0;171 border-radius: 50%;172 position: relative;173 margin-left: 10px;174 }175 .radio.selected { border-color: #4A66FF; }176 .radio.selected::before {177 content: "";178 position: absolute;179 width: 18px; height: 18px;180 background: #4A66FF; border-radius: 50%;181 left: 50%; top: 50%; transform: translate(-50%, -50%);182 }183 184 .sheet-divider {185 height: 1px; background: #E6E6E6; margin: 12px 0;186 }187 .disabled-row {188 display: flex; align-items: center; gap: 18px;189 padding: 16px 30px;190 color: #B5B5B5;191 font-size: 28px;192 }193 .checkbox {194 width: 36px; height: 36px;195 border: 3px solid #D0D0D0; border-radius: 8px;196 background: #F5F5F5;197 }198 199 .sheet-actions {200 display: flex; justify-content: space-between; align-items: center;201 padding: 26px 34px 34px 34px;202 }203 .text-btn {204 font-size: 36px; font-weight: 700;205 color: #536DFE;206 }207 208 /* Navigation pill at bottom */209 .nav-pill {210 position: absolute;211 bottom: 34px;212 left: 50%;213 transform: translateX(-50%);214 width: 200px; height: 12px;215 background: #D3D3D3;216 border-radius: 6px;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="statusbar">225 <div class="time">10:50</div>226 <div class="status-right">227 <!-- Small status icons -->228 <svg class="status-icon" viewBox="0 0 24 24">229 <circle cx="12" cy="12" r="10" fill="#AAA"/>230 </svg>231 <svg class="status-icon" viewBox="0 0 24 24">232 <rect x="3" y="6" width="18" height="12" rx="3" fill="#AAA"/>233 </svg>234 <svg class="status-icon" viewBox="0 0 24 24">235 <path d="M3 12h18" stroke="#AAA" stroke-width="3" stroke-linecap="round"/>236 <path d="M6 16h12" stroke="#AAA" stroke-width="3" stroke-linecap="round"/>237 </svg>238 <svg class="status-icon" viewBox="0 0 24 24">239 <path d="M3 20h18M5 15h14M7 10h10M9 5h6" stroke="#AAA" stroke-width="2" stroke-linecap="round"/>240 </svg>241 <svg class="status-icon" viewBox="0 0 24 24">242 <path d="M4 6h16v12H4z" fill="#AAA"/>243 <path d="M18 8v8" stroke="#FFF" stroke-width="2"/>244 </svg>245 </div>246 </div>247 248 <!-- App content -->249 <div class="app-header">250 <div class="top-row">251 <div class="back-btn">252 <svg width="34" height="34" viewBox="0 0 24 24">253 <path d="M15 5L6 12l9 7" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 <div class="search-wrap">257 <svg class="icon" viewBox="0 0 24 24">258 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>259 <path d="M15 15l6 6" stroke="#666" stroke-width="2" stroke-linecap="round"/>260 </svg>261 <div class="search-text">report.pdf</div>262 <svg class="clear" viewBox="0 0 24 24">263 <path d="M6 6l12 12M18 6L6 18" stroke="#888" stroke-width="2" stroke-linecap="round"/>264 </svg>265 </div>266 <div class="search-action">Search</div>267 </div>268 269 <div class="section-title">Search results (1)</div>270 <div class="result-item">271 <div class="img-ph">[IMG: PDF]</div>272 <div class="result-text">273 <div class="name">Report.pdf</div>274 </div>275 </div>276 </div>277 278 <!-- Overlay and modal -->279 <div class="overlay"></div>280 281 <div class="sheet">282 <div class="sheet-header">Opening APP</div>283 <div class="sheet-list">284 <!-- Drive PDF Viewer -->285 <div class="sheet-item">286 <div class="item-left">287 <div class="app-icon">[IMG: Drive PDF]</div>288 <div class="app-name">Drive PDF Viewer</div>289 </div>290 <div class="radio selected"></div>291 </div>292 293 <!-- Adobe Fill & Sign -->294 <div class="sheet-item">295 <div class="item-left">296 <div class="app-icon">[IMG: Fill & Sign]</div>297 <div class="app-name">Adobe Fill & Sign</div>298 </div>299 <div class="radio"></div>300 </div>301 302 <!-- Adobe Acrobat -->303 <div class="sheet-item">304 <div class="item-left">305 <div class="app-icon">[IMG: Acrobat]</div>306 <div class="app-name">Adobe Acrobat</div>307 </div>308 <div class="radio"></div>309 </div>310 311 <!-- Kindle -->312 <div class="sheet-item">313 <div class="item-left">314 <div class="app-icon">[IMG: Kindle]</div>315 <div class="app-name">Kindle</div>316 </div>317 <div class="radio"></div>318 </div>319 320 <!-- AmindPDF -->321 <div class="sheet-item">322 <div class="item-left">323 <div class="app-icon">[IMG: AmindPDF]</div>324 <div class="app-name">AmindPDF</div>325 </div>326 <div class="radio"></div>327 </div>328 329 <!-- Canva View, edit and export -->330 <div class="sheet-item">331 <div class="item-left">332 <div class="app-icon">[IMG: Canva]</div>333 <div class="app-name">View, edit and export</div>334 </div>335 <div class="radio"></div>336 </div>337 </div>338 339 <div class="sheet-divider"></div>340 341 <div class="disabled-row">342 <div class="checkbox"></div>343 <div>Do not prompt again for this session</div>344 </div>345 346 <div class="sheet-actions">347 <div class="text-btn">Cancel</div>348 <div class="text-btn">Confirm</div>349 </div>350 </div>351 352 <!-- Bottom navigation pill -->353 <div class="nav-pill"></div>354</div>355</body>356</html>