GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Rendering</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0c0f12; /* dark app background */14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #E7ECEF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 100px;25 padding: 0 40px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #E7ECEF;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 24px;38 color: #E7ECEF;39 }40 .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #E7ECEF; stroke-width: 3; }41 42 /* Top search area */43 .top-area {44 position: absolute;45 top: 100px;46 left: 0;47 width: 1080px;48 height: 160px;49 padding: 0 60px;50 box-sizing: border-box;51 display: flex;52 align-items: center;53 }54 .search-pill {55 width: 960px;56 height: 110px;57 background: #1b1f23;58 border-radius: 55px;59 display: flex;60 align-items: center;61 padding: 0 36px;62 box-sizing: border-box;63 }64 .search-pill .left-icon svg { width: 52px; height: 52px; fill: none; stroke: #AAB2B9; stroke-width: 5; }65 .search-text {66 flex: 1;67 color: #B8C1CA;68 font-size: 40px;69 margin-left: 26px;70 }71 .avatar {72 width: 84px;73 height: 84px;74 border-radius: 42px;75 background: #ce3a65;76 color: #fff;77 display: flex;78 align-items: center;79 justify-content: center;80 font-weight: 600;81 font-size: 42px;82 margin-left: 12px;83 }84 85 /* Tabs */86 .tabs {87 position: absolute;88 top: 260px;89 left: 0;90 width: 1080px;91 height: 90px;92 display: flex;93 align-items: center;94 padding: 0 60px;95 box-sizing: border-box;96 gap: 60px;97 }98 .tab {99 font-size: 38px;100 color: #9BA6B0;101 position: relative;102 }103 .tab.active {104 color: #8fb4ff;105 }106 .tab.active::after {107 content: "";108 position: absolute;109 left: 0;110 bottom: -16px;111 width: 160px;112 height: 6px;113 background: #8fb4ff;114 border-radius: 3px;115 }116 117 /* Header row */118 .list-header {119 position: absolute;120 top: 350px;121 left: 0;122 width: 1080px;123 height: 80px;124 display: flex;125 align-items: center;126 padding: 0 60px;127 box-sizing: border-box;128 justify-content: space-between;129 color: #B8C1CA;130 font-size: 34px;131 }132 .list-header .right-icon svg { width: 52px; height: 52px; stroke: #B8C1CA; stroke-width: 5; fill: none; }133 134 /* File item behind sheet */135 .file-item {136 position: absolute;137 top: 420px;138 left: 0;139 width: 1080px;140 padding: 40px 60px;141 box-sizing: border-box;142 }143 .file-card {144 height: 160px;145 background: #293036;146 border-radius: 28px;147 display: flex;148 align-items: center;149 padding: 0 40px;150 box-sizing: border-box;151 gap: 28px;152 color: #E7ECEF;153 font-size: 42px;154 }155 .file-card .folder-icon svg { width: 66px; height: 66px; fill: none; stroke: #B8C1CA; stroke-width: 5; }156 157 /* Bottom Sheet */158 .bottom-sheet {159 position: absolute;160 left: 0;161 top: 520px;162 width: 1080px;163 height: 1600px;164 background: #2c3338;165 border-top-left-radius: 42px;166 border-top-right-radius: 42px;167 box-shadow: 0 -20px 60px rgba(0,0,0,0.5);168 z-index: 10;169 padding-top: 40px;170 }171 .sheet-content {172 padding: 0 60px 40px;173 box-sizing: border-box;174 }175 .sheet-row {176 display: flex;177 align-items: center;178 gap: 36px;179 height: 120px;180 border-radius: 12px;181 color: #E7ECEF;182 }183 .sheet-row .icon {184 width: 64px;185 height: 64px;186 display: inline-flex;187 align-items: center;188 justify-content: center;189 }190 .sheet-row .icon svg {191 width: 64px;192 height: 64px;193 stroke: #AAB2B9;194 fill: none;195 stroke-width: 4;196 }197 .sheet-row .label {198 font-size: 40px;199 letter-spacing: 0.2px;200 }201 .separator {202 height: 1px;203 background: #3a4248;204 margin: 18px 0 18px 100px;205 }206 207 /* Bottom gesture bar */208 .gesture {209 position: absolute;210 bottom: 26px;211 left: 50%;212 transform: translateX(-50%);213 width: 360px;214 height: 14px;215 background: #EDEFF2;216 border-radius: 8px;217 opacity: 0.85;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="status-bar">226 <div>8:30</div>227 <div class="status-icons">228 <!-- Wi-Fi -->229 <svg viewBox="0 0 24 24">230 <path d="M2 8c5-5 15-5 20 0"></path>231 <path d="M6 12c3-3 9-3 12 0"></path>232 <path d="M10 16c1.5-1.5 2.5-1.5 4 0"></path>233 <circle cx="12" cy="19" r="1.7" fill="#E7ECEF" stroke="none"></circle>234 </svg>235 <!-- Battery -->236 <svg viewBox="0 0 28 24">237 <rect x="1" y="5" width="22" height="14" rx="3"></rect>238 <rect x="24" y="9" width="3" height="6" rx="1" stroke="#E7ECEF"></rect>239 <rect x="4" y="8" width="14" height="8" rx="2" fill="#E7ECEF" stroke="none"></rect>240 </svg>241 </div>242 </div>243 244 <!-- Search pill -->245 <div class="top-area">246 <div class="search-pill">247 <div class="left-icon">248 <!-- Hamburger -->249 <svg viewBox="0 0 24 24">250 <path d="M3 6h18M3 12h12M3 18h16"></path>251 </svg>252 </div>253 <div class="search-text">Search in Drive</div>254 <div class="avatar">C</div>255 </div>256 </div>257 258 <!-- Tabs -->259 <div class="tabs">260 <div class="tab active">My Drive</div>261 <div class="tab">Computers</div>262 </div>263 264 <!-- List header -->265 <div class="list-header">266 <div>Name ↑</div>267 <div class="right-icon">268 <!-- list sort icon -->269 <svg viewBox="0 0 24 24">270 <path d="M4 6h16M4 12h10M4 18h14"></path>271 </svg>272 </div>273 </div>274 275 <!-- First file row (behind sheet) -->276 <div class="file-item">277 <div class="file-card">278 <div class="folder-icon">279 <svg viewBox="0 0 24 24">280 <path d="M3 7h7l2 3h9v9H3z"></path>281 </svg>282 </div>283 <div>Jitendra</div>284 </div>285 </div>286 287 <!-- Bottom sheet menu -->288 <div class="bottom-sheet">289 <div class="sheet-content">290 <div class="sheet-row">291 <div class="icon">292 <!-- Share (person +) -->293 <svg viewBox="0 0 24 24">294 <circle cx="9" cy="8" r="3"></circle>295 <path d="M2 19c1.5-4 12.5-4 14 0"></path>296 <path d="M17 8v5M17 8h5"></path>297 </svg>298 </div>299 <div class="label">Share</div>300 </div>301 302 <div class="sheet-row">303 <div class="icon">304 <!-- Manage access (two people) -->305 <svg viewBox="0 0 24 24">306 <circle cx="8" cy="9" r="3"></circle>307 <circle cx="16" cy="11" r="2.5"></circle>308 <path d="M2 19c2-5 10-5 12 0"></path>309 <path d="M12 19c1.5-3.5 6-3.5 8 0"></path>310 </svg>311 </div>312 <div class="label">Manage access</div>313 </div>314 315 <div class="sheet-row">316 <div class="icon">317 <!-- Star -->318 <svg viewBox="0 0 24 24">319 <path d="M12 3l3 6 6 .8-4.5 4 1.3 6.2L12 17l-5.8 3 1.3-6.2L3 9.8 9 9z"></path>320 </svg>321 </div>322 <div class="label">Add to Starred</div>323 </div>324 325 <div class="separator"></div>326 327 <div class="sheet-row">328 <div class="icon">329 <!-- Link -->330 <svg viewBox="0 0 24 24">331 <path d="M9 12a4 4 0 0 1 4-4h4"></path>332 <path d="M15 12a4 4 0 0 1-4 4H7"></path>333 <path d="M8 8l8 8"></path>334 </svg>335 </div>336 <div class="label">Copy link</div>337 </div>338 339 <div class="separator"></div>340 341 <div class="sheet-row">342 <div class="icon">343 <!-- Pencil -->344 <svg viewBox="0 0 24 24">345 <path d="M4 20l5-1 9-9-4-4-9 9-1 5z"></path>346 <path d="M14 6l4 4"></path>347 </svg>348 </div>349 <div class="label">Rename</div>350 </div>351 352 <div class="sheet-row">353 <div class="icon">354 <!-- Palette -->355 <svg viewBox="0 0 24 24">356 <path d="M12 3a9 9 0 1 0 0 18c3 0 3-3 1.5-4.5h-2.5"></path>357 <circle cx="7.5" cy="10" r="1"></circle>358 <circle cx="11" cy="8.5" r="1"></circle>359 <circle cx="14.5" cy="10.5" r="1"></circle>360 </svg>361 </div>362 <div class="label">Change color</div>363 </div>364 365 <div class="sheet-row">366 <div class="icon">367 <!-- Shortcut + -->368 <svg viewBox="0 0 24 24">369 <path d="M6 16l6-10 6 10H6z"></path>370 <path d="M4 20h6M7 17v6" stroke-linecap="round"></path>371 </svg>372 </div>373 <div class="label">Add shortcut to Drive</div>374 </div>375 376 <div class="sheet-row">377 <div class="icon">378 <!-- Move (arrow into box) -->379 <svg viewBox="0 0 24 24">380 <rect x="3" y="6" width="18" height="12" rx="2"></rect>381 <path d="M12 16V8M9 11l3-3 3 3"></path>382 </svg>383 </div>384 <div class="label">Move</div>385 </div>386 387 <div class="sheet-row">388 <div class="icon">389 <!-- Info -->390 <svg viewBox="0 0 24 24">391 <circle cx="12" cy="12" r="9"></circle>392 <path d="M12 10v6M12 7h.1"></path>393 </svg>394 </div>395 <div class="label">Details & activity</div>396 </div>397 398 <div class="sheet-row">399 <div class="icon">400 <!-- Home + arrow -->401 <svg viewBox="0 0 24 24">402 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>403 <path d="M12 12v6M9 15h6"></path>404 </svg>405 </div>406 <div class="label">Add to Home screen</div>407 </div>408 409 <div class="sheet-row">410 <div class="icon">411 <!-- Trash -->412 <svg viewBox="0 0 24 24">413 <path d="M4 7h16"></path>414 <path d="M9 7V5h6v2"></path>415 <rect x="6" y="7" width="12" height="13" rx="2"></rect>416 </svg>417 </div>418 <div class="label">Remove</div>419 </div>420 </div>421 </div>422 423 <!-- Bottom gesture bar -->424 <div class="gesture"></div>425 426</div>427</body>428</html>