GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: 'Segoe UI', Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #ffffff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #2e2e2e;29 font-weight: 600;30 font-size: 40px;31 }32 .status-icons {33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .icon-dot {38 width: 36px; height: 36px; border-radius: 50%; background:#7b7b7b;39 }40 .icon-triangle {41 width: 38px; height: 38px; background: linear-gradient(135deg,#7b7b7b,#7b7b7b);42 clip-path: polygon(0 100%, 50% 0, 100% 100%);43 }44 .icon-battery {45 width: 60px; height: 30px; border: 4px solid #7b7b7b; position: relative; border-radius:6px;46 }47 .icon-battery:after { content:""; position:absolute; right:-12px; top:8px; width:8px; height:14px; background:#7b7b7b; border-radius:2px; }48 49 /* Header tabs */50 .header-tabs {51 position: absolute;52 top: 118px;53 left: 0;54 width: 1080px;55 height: 110px;56 display: flex;57 align-items: center;58 padding: 0 40px;59 gap: 44px;60 }61 .tab {62 font-size: 48px;63 color: #2c2c2c;64 font-weight: 700;65 position: relative;66 padding-bottom: 12px;67 }68 .tab.active {69 color: #3367ff;70 }71 .tab.active:after {72 content:"";73 position:absolute;74 left:0;75 bottom:-4px;76 height: 10px;77 width: 120%;78 background:#3367ff;79 border-radius:6px;80 }81 .filter-btn {82 position: absolute;83 right: 36px;84 top: 146px;85 width: 60px;86 height: 60px;87 }88 89 /* List */90 .list {91 position: absolute;92 top: 238px;93 left: 0;94 width: 1080px;95 }96 .row {97 display: flex;98 align-items: flex-start;99 padding: 26px 36px;100 border-bottom: 1px solid #eee;101 gap: 26px;102 }103 .file-icon {104 width: 88px; height: 88px; border-radius: 14px; background:#e9f0ff; border:1px solid #c9dbff; display:flex; align-items:center; justify-content:center;105 }106 .file-icon svg { width: 56px; height: 56px; }107 .file-icon.red { background:#ffe9e9; border-color:#ffb5b5; }108 .file-icon.red svg rect { fill:#ff6b6b; }109 .file-icon.blue svg rect { fill:#4f7cff; }110 .row-content { flex: 1; }111 .title {112 font-size: 44px;113 color:#111;114 line-height: 1.3;115 font-weight: 700;116 margin-top: 8px;117 }118 .meta {119 margin-top: 8px;120 color:#6a6a6a;121 font-size: 30px;122 }123 .dots {124 width: 60px; height: 120px; display:flex; align-items:center; justify-content:center;125 }126 .dots span { display:block; width: 12px; height: 12px; background:#9c9c9c; border-radius:50%; margin:6px 0; }127 128 /* Ad block */129 .ad-row {130 padding: 30px 36px;131 background:#f5f7fb;132 display:flex;133 align-items: center;134 gap: 26px;135 }136 .ad-icon {137 width: 84px; height: 84px; border-radius: 12px; background:#cfe7ea; border:1px solid #9dc1c7; display:flex; align-items:center; justify-content:center; color:#2b6f7a; font-weight:700;138 }139 .ad-text {140 flex:1;141 }142 .ad-title {143 font-size: 40px; font-weight: 700; color:#173d49;144 }145 .ad-desc {146 font-size: 32px; color:#6a7c86; margin-top: 8px;147 }148 .ad-open {149 background:#1a73e8; color:#fff; font-size: 34px; font-weight:700; padding: 18px 34px; border-radius: 12px;150 }151 152 /* Open files button */153 .open-files {154 width: 780px; height: 110px; border-radius: 56px;155 background:#efefef; color:#2f5fe0; font-size: 44px; font-weight: 700;156 display:flex; align-items:center; justify-content:center;157 margin: 40px auto;158 }159 .no-history {160 text-align:center; color:#9a9a9a; font-size: 40px; margin-top: 40px;161 }162 163 /* Bottom navigation */164 .bottom-nav {165 position:absolute;166 bottom:0;167 left:0;168 width:1080px;169 height: 200px;170 background:#ffffff;171 border-top:1px solid #e6e6e6;172 display:flex;173 align-items:center;174 justify-content: space-around;175 }176 .nav-item {177 display:flex; flex-direction:column; align-items:center; justify-content:center;178 color:#6a6a6a; font-size:34px; gap:14px;179 }180 .nav-item.active { color:#3367ff; font-weight:700; }181 .nav-icon {182 width: 86px; height: 86px; border-radius: 20px; background:#eef3ff; border:1px solid #cddaff; display:flex; align-items:center; justify-content:center;183 }184 .nav-item.active .nav-icon { background:#dfe8ff; border-color:#b8c9ff; }185 .nav-icon svg { width:48px; height:48px; }186 187 /* Floating create button */188 .create-btn {189 position: absolute;190 right: 36px;191 bottom: 236px;192 background:#3f6fff;193 color:#ffffff;194 font-size: 44px;195 font-weight: 800;196 padding: 30px 46px 30px 30px;197 border-radius: 80px;198 box-shadow: 0 20px 40px rgba(63,111,255,0.35);199 display:flex; align-items:center; gap: 26px;200 }201 .plus-circle {202 width: 90px; height: 90px; border-radius:50%; background:#ffffff; color:#3f6fff; display:flex; align-items:center; justify-content:center; font-size:66px; font-weight:900;203 }204 205 /* Utility */206 .separator { height: 1px; background:#eee; }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status bar -->213 <div class="status-bar">214 <div>12:01</div>215 <div class="status-icons">216 <div class="icon-dot"></div>217 <div class="icon-triangle"></div>218 <div class="icon-battery"></div>219 </div>220 </div>221 222 <!-- Header Tabs -->223 <div class="header-tabs">224 <div class="tab active">Recent</div>225 <div class="tab">Starred</div>226 <div class="filter-btn">227 <svg viewBox="0 0 24 24">228 <path d="M3 6h18l-7 8v4l-4 2v-6L3 6z" fill="#6c6c6c"></path>229 </svg>230 </div>231 </div>232 233 <!-- List -->234 <div class="list">235 236 <!-- Row 1: Weekday schedule -->237 <div class="row">238 <div class="file-icon">239 <svg viewBox="0 0 24 24" class="blue">240 <rect x="5" y="4" width="14" height="16" rx="2" fill="#4f7cff"></rect>241 <rect x="7" y="8" width="10" height="2" fill="#ffffff"></rect>242 <rect x="7" y="12" width="8" height="2" fill="#ffffff"></rect>243 <rect x="7" y="16" width="6" height="2" fill="#ffffff"></rect>244 </svg>245 </div>246 <div class="row-content">247 <div class="title">Weekday schedule</div>248 <div class="meta">11:59 · 4.1 MB · My Cloud</div>249 </div>250 <div class="dots">251 <span></span><span></span><span></span>252 </div>253 </div>254 255 <!-- Ad Row -->256 <div class="ad-row">257 <div class="ad-icon">F</div>258 <div class="ad-text">259 <div class="ad-title">Furlenco</div>260 <div class="ad-desc">Your favourite online furniture app - now in an all new avatar!...</div>261 </div>262 <div class="ad-open">OPEN</div>263 </div>264 265 <!-- Row 2: Typical Weekend Schedule -->266 <div class="row">267 <div class="file-icon">268 <svg viewBox="0 0 24 24" class="blue">269 <rect x="5" y="4" width="14" height="16" rx="2" fill="#4f7cff"></rect>270 <rect x="7" y="8" width="10" height="2" fill="#ffffff"></rect>271 <rect x="7" y="12" width="8" height="2" fill="#ffffff"></rect>272 <rect x="7" y="16" width="6" height="2" fill="#ffffff"></rect>273 </svg>274 </div>275 <div class="row-content">276 <div class="title">Typical Weekend Schedule</div>277 <div class="meta">11:30 · 7 KB · My Cloud</div>278 </div>279 <div class="dots">280 <span></span><span></span><span></span>281 </div>282 </div>283 284 <!-- Row 3: Into the Wild -->285 <div class="row">286 <div class="file-icon red">287 <svg viewBox="0 0 24 24">288 <rect x="5" y="4" width="14" height="16" rx="2" fill="#ff6b6b"></rect>289 <rect x="7" y="8" width="10" height="2" fill="#ffffff"></rect>290 <rect x="7" y="12" width="8" height="2" fill="#ffffff"></rect>291 <rect x="7" y="16" width="6" height="2" fill="#ffffff"></rect>292 </svg>293 </div>294 <div class="row-content">295 <div class="title">Into-the-Wild-Jon-Krakauer</div>296 <div class="meta">09:38 · 1.8 MB · Download</div>297 </div>298 <div class="dots">299 <span></span><span></span><span></span>300 </div>301 </div>302 303 <!-- Row 4: Ralph Ellison -->304 <div class="row">305 <div class="file-icon red">306 <svg viewBox="0 0 24 24">307 <rect x="5" y="4" width="14" height="16" rx="2" fill="#ff6b6b"></rect>308 <rect x="7" y="8" width="10" height="2" fill="#ffffff"></rect>309 <rect x="7" y="12" width="8" height="2" fill="#ffffff"></rect>310 <rect x="7" y="16" width="6" height="2" fill="#ffffff"></rect>311 </svg>312 </div>313 <div class="row-content">314 <div class="title">Ralph-Ellison-Invisible-Man-Text</div>315 <div class="meta">09:05 · 2.3 MB · Download</div>316 </div>317 <div class="dots">318 <span></span><span></span><span></span>319 </div>320 </div>321 322 <!-- Open files button -->323 <div class="open-files">Open files</div>324 <div class="no-history">No earlier history</div>325 </div>326 327 <!-- Floating Create Button -->328 <div class="create-btn">329 <div class="plus-circle">+</div>330 <div>Create</div>331 </div>332 333 <!-- Bottom Navigation -->334 <div class="bottom-nav">335 <div class="nav-item active">336 <div class="nav-icon">337 <svg viewBox="0 0 24 24">338 <path d="M3 7h18v12H3z" fill="#4171ff"></path>339 <path d="M7 4h10v3H7z" fill="#4171ff"></path>340 </svg>341 </div>342 <div>Recent</div>343 </div>344 <div class="nav-item">345 <div class="nav-icon">346 <svg viewBox="0 0 24 24">347 <path d="M4 5h16v14H4z" fill="#808080"></path>348 <path d="M6 7h12v3H6z" fill="#b0b0b0"></path>349 <path d="M6 12h9v2H6z" fill="#b0b0b0"></path>350 </svg>351 </div>352 <div>Files</div>353 </div>354 <div class="nav-item">355 <div class="nav-icon">356 <svg viewBox="0 0 24 24">357 <circle cx="10" cy="10" r="6" fill="#808080"></circle>358 <path d="M14 14l6 6" stroke="#808080" stroke-width="2"></path>359 </svg>360 </div>361 <div>Discover</div>362 </div>363 <div class="nav-item">364 <div class="nav-icon">365 <svg viewBox="0 0 24 24">366 <path d="M12 3l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" fill="#9e9e9e"></path>367 </svg>368 </div>369 <div>WPS Pro</div>370 </div>371 </div>372 373</div>374</body>375</html>