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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 border-radius: 0;16 box-shadow: none;17 color: #EDEDED;18 }19 20 /* Status bar */21 .statusbar {22 position: absolute;23 top: 0;24 left: 0;25 width: 100%;26 height: 92px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 38px;31 color: #ffffff;32 font-weight: 600;33 letter-spacing: 0.2px;34 }35 .status-right {36 display: flex;37 align-items: center;38 gap: 22px;39 opacity: 0.9;40 }41 .icon {42 width: 28px;43 height: 28px;44 }45 46 /* Main content area */47 .content {48 position: absolute;49 top: 92px;50 left: 0;51 right: 0;52 padding: 42px 48px 0 48px;53 }54 55 /* Search */56 .search-bar {57 display: flex;58 align-items: center;59 background: #1E1E1E;60 border: 1px solid #2A2A2A;61 border-radius: 40px;62 height: 96px;63 padding: 0 26px;64 gap: 22px;65 }66 .search-bar input {67 flex: 1;68 background: transparent;69 border: none;70 outline: none;71 color: #B8B8B8;72 font-size: 34px;73 }74 .round-btn {75 width: 72px;76 height: 72px;77 border-radius: 50%;78 display: flex;79 align-items: center;80 justify-content: center;81 margin-left: 8px;82 }83 .round-btn.energy { background: linear-gradient(135deg, #3D8BFF, #8A5BFF); }84 .round-btn.avatar { background: #2A2A2A; border: 1px solid #3A3A3A; }85 .avatar-dot {86 width: 26px; height: 26px; border-radius: 50%; background: #777; opacity: 0.9;87 }88 89 /* Feature cards */90 .cards {91 margin-top: 34px;92 display: flex;93 gap: 28px;94 }95 .card {96 flex: 1;97 background: #181818;98 border: 1px solid #2A2A2A;99 border-radius: 26px;100 height: 238px;101 padding: 26px;102 position: relative;103 box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;104 }105 .card h3 {106 margin: 0 0 10px 0;107 font-size: 36px;108 font-weight: 700;109 }110 .card p {111 margin: 0;112 font-size: 28px;113 color: #A7A7A7;114 line-height: 1.3;115 max-width: 420px;116 }117 .card .close {118 position: absolute;119 top: 18px; right: 18px;120 width: 40px; height: 40px; border-radius: 50%;121 border: 1px solid #3A3A3A; color: #9A9A9A;122 display: flex; align-items: center; justify-content: center;123 font-size: 22px;124 }125 .pill {126 position: absolute;127 bottom: 24px;128 right: 26px;129 padding: 14px 26px;130 border-radius: 24px;131 border: 1px solid #4A78FF;132 color: #AFC1FF;133 font-size: 26px;134 }135 136 /* Tabs */137 .tabs {138 margin-top: 36px;139 display: flex;140 align-items: center;141 justify-content: space-between;142 }143 .tab-left {144 display: flex; gap: 40px; align-items: center;145 }146 .tab {147 font-size: 32px;148 color: #9F9F9F;149 }150 .tab.active { color: #EDEDED; font-weight: 600; }151 .tab-indicator {152 width: 110px; height: 6px; background: #3D8BFF; border-radius: 3px; margin-top: 16px;153 }154 .filter-btn {155 width: 60px; height: 60px; border-radius: 18px;156 border: 1px solid #2E2E2E; background: #1B1B1B;157 display: flex; align-items: center; justify-content: center;158 opacity: 0.7;159 }160 161 /* List items */162 .list {163 margin-top: 16px;164 padding-bottom: 460px; /* space behind sheet */165 }166 .item {167 display: flex; align-items: center;168 padding: 28px 8px;169 border-bottom: 1px solid #1F1F1F;170 }171 .item .doc-icon {172 width: 68px; height: 68px; border-radius: 16px; margin-right: 28px;173 display: flex; align-items: center; justify-content: center;174 color: #fff; font-weight: 700; font-size: 28px;175 }176 .doc-orange { background: #D56B3E; }177 .doc-grey { background: #3A3A3A; }178 .doc-red { background: #B44B4B; }179 180 .item .meta {181 flex: 1;182 }183 .item .title {184 font-size: 34px; color: #EDEDED; margin-bottom: 6px; font-weight: 600;185 }186 .item .subtitle {187 font-size: 28px; color: #9A9A9A;188 }189 .item .more {190 width: 60px; text-align: center; color: #8A8A8A; font-size: 34px;191 }192 193 /* Bottom sheet */194 .sheet {195 position: absolute;196 left: 0; right: 0; bottom: 120px;197 height: 1000px;198 background: #252525;199 border-top-left-radius: 44px;200 border-top-right-radius: 44px;201 box-shadow: 0 -8px 24px rgba(0,0,0,0.5);202 padding: 38px 48px 24px 48px;203 }204 .sheet .grab {205 width: 120px; height: 12px; border-radius: 6px;206 background: #3A3A3A; margin: 0 auto 18px auto;207 }208 .sheet h2 {209 text-align: center; margin: 10px 0 32px 0; font-size: 42px; font-weight: 700;210 }211 .grid {212 display: grid;213 grid-template-columns: repeat(4, 1fr);214 gap: 34px 26px;215 margin-bottom: 30px;216 }217 .tool {218 display: flex; flex-direction: column; align-items: center; gap: 12px;219 }220 .tool .icon-tile {221 width: 120px; height: 120px; border-radius: 28px;222 display: flex; align-items: center; justify-content: center;223 color: #fff; font-weight: 800; font-size: 36px;224 }225 .tile-blue { background: #4D83FF; }226 .tile-orange { background: #E67C3F; }227 .tile-green { background: #4DBB7A; }228 .tile-red { background: #E36A6A; }229 .tile-purple { background: #7B6DFF; }230 .tile-lilac { background: #8FA5FF; }231 .tile-slate { background: #6F87C6; }232 .tile-violet { background: #8A6CF0; }233 .label {234 color: #D9D9D9; font-size: 28px; text-align: center;235 }236 .subtext {237 font-size: 22px; color: #9A9A9A;238 }239 .badge {240 font-size: 20px; color: #FFA54D; border: 1px solid #FFA54D; padding: 3px 10px; border-radius: 12px; margin-left: 6px;241 }242 243 /* Tools row */244 .tools-header {245 display: flex; align-items: center; justify-content: space-between;246 margin-top: 18px; margin-bottom: 18px;247 }248 .tools-header .title { font-size: 36px; font-weight: 700; color: #DFDFDF; }249 .tools-header .more { font-size: 28px; color: #BFBFBF; }250 .tools-row {251 display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;252 }253 .tool-item {254 display: flex; flex-direction: column; align-items: center; gap: 12px;255 }256 .tool-item .circle {257 width: 100px; height: 100px; border-radius: 50%;258 display: flex; align-items: center; justify-content: center;259 color: #fff; font-size: 36px; font-weight: 800;260 }261 .circle-red { background: #D05D5D; }262 .circle-blue { background: #3D8BFF; }263 .circle-darkred { background: #B64D4D; }264 .gesture {265 position: absolute; left: 50%; transform: translateX(-50%);266 bottom: 40px; width: 240px; height: 12px; background: #EDEDED; border-radius: 8px; opacity: 0.8;267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="statusbar">275 <div>12:02</div>276 <div class="status-right">277 <!-- Wifi icon -->278 <svg class="icon" viewBox="0 0 24 24" fill="none">279 <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>280 <path d="M5 12c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>281 <path d="M9 16c2-2 4-2 6 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>282 <circle cx="12" cy="19" r="1.6" fill="#ffffff"/>283 </svg>284 <!-- Battery icon -->285 <svg class="icon" viewBox="0 0 24 24" fill="none">286 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>287 <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>288 <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>289 </svg>290 </div>291 </div>292 293 <div class="content">294 <!-- Search bar -->295 <div class="search-bar">296 <svg class="icon" viewBox="0 0 24 24" fill="none">297 <circle cx="11" cy="11" r="7" stroke="#9A9A9A" stroke-width="2"/>298 <path d="M20 20l-4-4" stroke="#9A9A9A" stroke-width="2" stroke-linecap="round"/>299 </svg>300 <input type="text" value="Search files, tools" readonly>301 <div class="round-btn energy">302 <svg class="icon" viewBox="0 0 24 24">303 <path d="M13 2l-8 12h6l-2 8 8-12h-6l2-8z" fill="#ffffff"/>304 </svg>305 </div>306 <div class="round-btn avatar">307 <div class="avatar-dot"></div>308 </div>309 </div>310 311 <!-- Feature cards -->312 <div class="cards">313 <div class="card">314 <div class="close">×</div>315 <h3>Convert File</h3>316 <p>Support conversion among multiple file formats.</p>317 <div class="pill">Try It</div>318 </div>319 <div class="card">320 <h3>PDF Edit</h3>321 <p>PDF editing has never been easier.</p>322 </div>323 </div>324 325 <!-- Tabs -->326 <div class="tabs">327 <div class="tab-left">328 <div>329 <div class="tab active">Recent</div>330 <div class="tab-indicator"></div>331 </div>332 <div class="tab">Starred</div>333 </div>334 <div class="filter-btn">335 <svg class="icon" viewBox="0 0 24 24" fill="none">336 <path d="M3 5h18l-6 7v5l-6 2v-7L3 5z" stroke="#BFBFBF" stroke-width="2" stroke-linejoin="round"/>337 </svg>338 </div>339 </div>340 341 <!-- List -->342 <div class="list">343 <div class="item">344 <div class="doc-icon doc-orange">L</div>345 <div class="meta">346 <div class="title">Jhdjen-WPS Office</div>347 <div class="subtitle">11:43 · This Device</div>348 </div>349 <div class="more">⋮</div>350 </div>351 352 <div class="item">353 <div class="doc-icon doc-grey">N</div>354 <div class="meta">355 <div class="title">Jhdjen-WPS Office</div>356 <div class="subtitle">Received files from SDcard</div>357 </div>358 <div class="more">⋮</div>359 </div>360 361 <div class="item">362 <div class="doc-icon doc-red">P</div>363 <div class="meta">364 <div class="title">Get Started with WPS Office for Android</div>365 <div class="subtitle">11:42 · This Device</div>366 </div>367 <div class="more">⋮</div>368 </div>369 </div>370 </div>371 372 <!-- Bottom sheet -->373 <div class="sheet">374 <div class="grab"></div>375 <h2>Create new</h2>376 377 <div class="grid">378 <div class="tool">379 <div class="icon-tile tile-blue">DOC</div>380 <div class="label">DOC</div>381 </div>382 <div class="tool">383 <div class="icon-tile tile-orange">PPT</div>384 <div class="label">PPT</div>385 </div>386 <div class="tool">387 <div class="icon-tile tile-green">XLS</div>388 <div class="label">XLS</div>389 </div>390 <div class="tool">391 <div class="icon-tile tile-red">PDF</div>392 <div class="label">PDF</div>393 </div>394 395 <div class="tool">396 <div class="icon-tile tile-purple">AP</div>397 <div class="label">AirPage</div>398 <div class="subtext">Beta</div>399 </div>400 <div class="tool">401 <div class="icon-tile tile-lilac">RS</div>402 <div class="label">Resume <span class="badge">NEW</span></div>403 </div>404 <div class="tool">405 <div class="icon-tile tile-slate">T</div>406 <div class="label">TXT</div>407 </div>408 <div class="tool">409 <div class="icon-tile tile-violet">SC</div>410 <div class="label">Scanner</div>411 </div>412 </div>413 414 <div class="tools-header">415 <div class="title">Tools</div>416 <div class="more">More ></div>417 </div>418 419 <div class="tools-row">420 <div class="tool-item">421 <div class="circle circle-red">PE</div>422 <div class="label">PDF Edit</div>423 </div>424 <div class="tool-item">425 <div class="circle circle-blue">WD</div>426 <div class="label">PDF to DOC</div>427 </div>428 <div class="tool-item">429 <div class="circle circle-darkred">PS</div>430 <div class="label">PDF Signature</div>431 </div>432 <div class="tool-item">433 <div class="circle circle-darkred">FF</div>434 <div class="label">Fill Form</div>435 </div>436 </div>437 </div>438 439 <div class="gesture"></div>440</div>441</body>442</html>