GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</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: #F6F7FB;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #1e1e1e;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 104px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: flex-end;29 justify-content: space-between;30 color: #222;31 }32 .status-left { font-weight: 600; font-size: 36px; padding-bottom: 18px; }33 .status-right {34 display: flex; gap: 18px; align-items: center; padding-bottom: 16px;35 color: #111;36 }37 .icon-dot { width: 10px; height: 10px; background: #111; border-radius: 50%; opacity: .7; }38 39 /* Top search / header */40 .top-area {41 position: absolute;42 top: 118px;43 left: 26px;44 right: 26px;45 height: 120px;46 }47 .avatar {48 position: absolute;49 top: 10px;50 left: 0;51 width: 92px; height: 92px; border-radius: 50%;52 background: #5E483A; color: #fff; display: flex; align-items: center; justify-content: center;53 font-weight: 700; font-size: 46px;54 }55 .avatar .badge {56 position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: #E53935; border-radius: 50%;57 border: 3px solid #5E483A;58 }59 .search-pill {60 position: absolute;61 left: 110px; right: 150px; top: 8px; height: 100px;62 background: #fff; border-radius: 50px; border: 2px solid #D7D9E0;63 box-shadow: 0 6px 0 rgba(0,0,0,0.06) inset, 0 6px 18px rgba(0,0,0,0.08);64 display: flex; align-items: center; padding: 0 34px; box-sizing: border-box;65 font-size: 36px; color: #8A8C95;66 }67 .search-pill .search-icon { margin-left: auto; width: 54px; height: 54px; }68 .header-actions {69 position: absolute; right: 10px; top: 10px; display: flex; gap: 18px; align-items: center;70 }71 .small-round {72 width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.08);73 display: flex; align-items: center; justify-content: center; border: 1px solid #E5E7EE;74 }75 76 /* Feed content (behind sheet) */77 .ad-card {78 position: absolute; left: 36px; right: 36px; top: 270px; height: 280px;79 background: #fff; border-radius: 28px; box-shadow: 0 8px 22px rgba(0,0,0,.06); border: 1px solid #ECEEF5;80 }81 .ad-label {82 position: absolute; top: 20px; left: 24px; padding: 8px 16px; border: 3px solid #27AE60; color: #27AE60;83 border-radius: 8px; font-weight: 600; background: #F6FFF9; font-size: 28px;84 }85 .premium-row {86 position: absolute; top: 570px; left: 60px; color: #8B8F9B; font-size: 34px; display: flex; align-items: center; gap: 14px;87 }88 .premium-row .pchip {89 width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#b18cff,#7cc0ff);90 display: inline-block;91 }92 93 .grid-cards {94 position: absolute; top: 640px; left: 36px; right: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px;95 }96 .card {97 background: #fff; border-radius: 28px; padding: 26px; box-shadow: 0 8px 22px rgba(0,0,0,.06); border: 1px solid #ECEEF5;98 height: 360px; box-sizing: border-box;99 }100 .promo-hero {101 width: 100%; height: 210px; background: #E0E0E0; border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 20px;103 margin-bottom: 18px; font-size: 30px;104 }105 .blue-btn {106 display: inline-block; background: #3E49F8; color: #fff; border-radius: 38px; padding: 22px 36px; font-weight: 600;107 margin-top: 8px; font-size: 30px;108 }109 .list-item {110 display: flex; align-items: center; gap: 22px; padding: 16px 0; font-size: 34px; color: #2c2c2c;111 border-bottom: 1px solid #F1F2F6;112 }113 .list-item:last-child { border-bottom: 0; }114 .round-ic {115 width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg,#6178ff,#7cc0ff);116 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px;117 }118 119 .tabs {120 position: absolute; top: 1040px; left: 36px; right: 36px;121 display: flex; justify-content: space-between; align-items: center;122 color: #272727; font-weight: 600; font-size: 40px;123 }124 .tab-center { display: flex; gap: 50px; align-items: center; }125 .active { color: #111; position: relative; }126 .active::after {127 content: ""; position: absolute; left: 0; right: 0; bottom: -12px; margin: auto; width: 64px; height: 8px; border-radius: 6px; background: #3E49F8;128 }129 130 .pics-section {131 position: absolute; top: 1128px; left: 36px; right: 36px;132 }133 .pics-title { font-size: 44px; font-weight: 700; margin-bottom: 18px; }134 .thumbs { display: flex; gap: 18px; }135 .thumb {136 width: 240px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;137 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 18px;138 }139 140 /* Dim overlay */141 .overlay {142 position: absolute; inset: 0; background: rgba(0,0,0,0.45);143 }144 145 /* Bottom sheet */146 .sheet {147 position: absolute;148 left: 0; right: 0; bottom: 0;149 height: 980px;150 background: #ffffff;151 border-top-left-radius: 32px; border-top-right-radius: 32px;152 box-shadow: 0 -12px 32px rgba(0,0,0,.25);153 }154 .drag-indicator {155 width: 120px; height: 10px; background: #E4E6ED; border-radius: 8px; margin: 18px auto 16px;156 }157 .safe-banner {158 width: calc(100% - 48px); margin: 6px auto 22px; padding: 22px 24px;159 background: #E9FAF0; color: #27AE60; border-radius: 16px; display: flex; align-items: center; gap: 16px;160 font-size: 38px; font-weight: 600;161 }162 .safe-banner svg { width: 44px; height: 44px; }163 164 .options-grid {165 width: 100%;166 padding: 26px 48px 10px;167 box-sizing: border-box;168 display: grid;169 grid-template-columns: repeat(3, 1fr);170 grid-row-gap: 70px;171 justify-items: center;172 }173 .option {174 width: 280px; text-align: center; position: relative;175 }176 .circle {177 width: 160px; height: 160px; margin: 0 auto 18px; border-radius: 50%;178 background: #F6F7FF; display: flex; align-items: center; justify-content: center;179 border: 2px solid #E4E6F5;180 }181 .option svg { width: 70px; height: 70px; }182 .option-label { font-size: 36px; color: #111; }183 184 .chip {185 position: absolute; right: 40px; top: -6px;186 padding: 8px 16px; border-radius: 20px; font-size: 26px; font-weight: 700;187 }188 .chip.premium {189 background: linear-gradient(135deg,#b18cff,#7cc0ff); color: #fff;190 }191 .chip.new {192 left: 18px; right: auto; top: 0;193 background: #FF6B6B; color: #fff;194 }195 196 .bottom-row {197 width: 100%;198 box-sizing: border-box;199 padding: 40px 48px;200 }201 .nav-indicator {202 position: absolute; left: 50%; transform: translateX(-50%);203 bottom: 28px; width: 320px; height: 12px; background: #C9CDD6; border-radius: 8px;204 }205</style>206</head>207<body>208<div id="render-target">209 210 <!-- Status bar -->211 <div class="status-bar">212 <div class="status-left">9:08</div>213 <div class="status-right">214 <span class="icon-dot"></span>215 <span class="icon-dot"></span>216 <span class="icon-dot"></span>217 <span style="font-weight:700;">100%</span>218 </div>219 </div>220 221 <!-- Header with search -->222 <div class="top-area">223 <div class="avatar">F<div class="badge"></div></div>224 <div class="search-pill">225 Search files in TeraBox226 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#60636f" stroke-width="2">227 <circle cx="10" cy="10" r="7"></circle>228 <path d="M15 15 L22 22"></path>229 </svg>230 </div>231 <div class="header-actions">232 <div class="small-round">233 <svg viewBox="0 0 24 24" width="30" height="30">234 <path d="M3 10h18M5 10c1-4 4-6 7-6s6 2 7 6" stroke="#d32f2f" stroke-width="2" fill="none"/>235 <path d="M7 10v6a5 5 0 0 0 10 0v-6" stroke="#d32f2f" stroke-width="2" fill="none"/>236 </svg>237 </div>238 <div class="small-round">239 <svg viewBox="0 0 24 24" width="30" height="30">240 <path d="M6 3v18M18 3v18M3 6h18M3 18h18" stroke="#111" stroke-width="2" fill="none"/>241 </svg>242 </div>243 </div>244 </div>245 246 <!-- Feed behind the sheet -->247 <div class="ad-card">248 <div class="ad-label">Ad</div>249 </div>250 251 <div class="premium-row">252 <span class="pchip"></span>253 <span>Premium Ad-free ></span>254 </div>255 256 <div class="grid-cards">257 <div class="card">258 <div class="promo-hero">[IMG: Premium Super Sale]</div>259 <div style="font-size:34px; color:#2c2c2c; margin-top: 6px;">11.11 Super Sale</div>260 <span class="blue-btn">View Now</span>261 </div>262 <div class="card">263 <div class="list-item">264 <div class="round-ic">📄</div>265 <div>Novels</div>266 </div>267 <div class="list-item">268 <div class="round-ic">🖼</div>269 <div>Space Analyzer</div>270 </div>271 <div class="list-item">272 <div class="round-ic">📦</div>273 <div>Welfare Center</div>274 </div>275 </div>276 </div>277 278 <div class="tabs">279 <div class="tab-center">280 <div>Welfare Center</div>281 <div class="active">Recent</div>282 <div>Offline</div>283 </div>284 <div style="width: 60px; height: 6px; background:#111; border-radius:3px;"></div>285 </div>286 287 <div class="pics-section">288 <div class="pics-title">Pictures viewed</div>289 <div class="thumbs">290 <div class="thumb">[IMG]</div>291 <div class="thumb">[IMG]</div>292 <div class="thumb">[IMG]</div>293 <div class="thumb">[IMG]</div>294 </div>295 </div>296 297 <!-- Dim overlay -->298 <div class="overlay"></div>299 300 <!-- Bottom Sheet -->301 <div class="sheet">302 <div class="drag-indicator"></div>303 304 <div class="safe-banner">305 <svg viewBox="0 0 24 24" fill="none" stroke="#27AE60" stroke-width="2">306 <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"></path>307 <path d="M8 12l3 3 5-5"></path>308 </svg>309 <div>Safeguard your data ></div>310 </div>311 312 <div class="options-grid">313 <div class="option">314 <div class="circle">315 <svg viewBox="0 0 24 24" stroke="#2B2F95" stroke-width="1.8" fill="none">316 <rect x="3" y="5" width="18" height="14" rx="2"></rect>317 <path d="M7 13l3-3 4 5 3-3"></path>318 <circle cx="9" cy="9" r="1.2" fill="#2B2F95"></circle>319 </svg>320 </div>321 <div class="option-label">Photos</div>322 </div>323 324 <div class="option">325 <span class="chip premium">Premium</span>326 <div class="circle">327 <svg viewBox="0 0 24 24" stroke="#2B2F95" stroke-width="1.8" fill="none">328 <circle cx="12" cy="12" r="9"></circle>329 <path d="M10 9v6l5-3z" fill="#2B2F95" stroke="none"></path>330 </svg>331 </div>332 <div class="option-label">Videos</div>333 </div>334 335 <div class="option">336 <div class="circle">337 <svg viewBox="0 0 24 24" stroke="#2B2F95" stroke-width="1.8" fill="none">338 <path d="M7 3h7l5 5v13H7z"></path>339 <path d="M14 3v5h5"></path>340 <path d="M9 14h6M9 17h6"></path>341 </svg>342 </div>343 <div class="option-label">Documents</div>344 </div>345 346 <div class="option" style="grid-column: 1 / span 3;">347 <span class="chip new">New</span>348 <div class="circle">349 <svg viewBox="0 0 24 24" stroke="#2B2F95" stroke-width="1.8" fill="none">350 <path d="M4 9l3-3h10l3 3v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"></path>351 <circle cx="12" cy="13" r="3"></circle>352 </svg>353 </div>354 <div class="option-label">Take a photo and upload</div>355 </div>356 </div>357 358 <div class="nav-indicator"></div>359 </div>360 361</div>362</body>363</html>