GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>WPS Recent - Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:100px; padding:0 40px;17 display:flex; align-items:center; justify-content:space-between;18 color:#333;19 font-size:40px; font-weight:600;20 }21 .status-icons { display:flex; align-items:center; gap:28px; color:#333; font-size:34px; }22 .icon { width:44px; height:44px; display:inline-block; }23 .icon svg { width:100%; height:100%; }24 25 /* Search bar */26 .search-wrap {27 position:absolute; top:120px; left:40px; right:40px;28 }29 .search-bar {30 height:110px; background:#f2f4f7; border-radius:56px;31 display:flex; align-items:center; padding:0 32px; box-sizing:border-box;32 }33 .hamburger { width:64px; height:64px; margin-right:24px; }34 .search-placeholder { flex:1; color:#7a7f86; font-size:40px; }35 .avatar {36 width:90px; height:90px; border-radius:50%; background:#a18373;37 display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;38 }39 40 /* Promo banner */41 .promo {42 position:absolute; top:260px; left:40px; right:40px;43 background:#eaf3ff; border-radius:28px; padding:26px 30px; box-sizing:border-box;44 display:flex; align-items:center; gap:24px; color:#1f2a44;45 }46 .promo .bell { width:56px; height:56px; background:#ffffff; border-radius:50%; border:2px solid #cddaf5; display:flex; align-items:center; justify-content:center; }47 .promo .msg { flex:1; font-size:36px; }48 .promo .arrow { width:60px; height:60px; }49 .promo .timers { margin-top:8px; display:flex; gap:20px; }50 .timer-pill {51 display:inline-block; padding:6px 12px; border-radius:10px;52 background:#ffffff; border:1px solid #cddaf5; color:#3267ff; font-size:30px;53 }54 55 /* Tabs */56 .tabs {57 position:absolute; top:430px; left:40px; right:40px;58 display:flex; align-items:center; justify-content:space-between;59 }60 .tab-left { display:flex; gap:40px; }61 .tab {62 font-size:46px; color:#7a7f86;63 }64 .tab.active { color:#356dff; font-weight:700; }65 .filter-btn { width:60px; height:60px; }66 67 /* List */68 .list {69 position:absolute; top:500px; left:0; right:0;70 padding:0 24px; box-sizing:border-box;71 }72 .item {73 display:flex; align-items:center;74 padding:32px 24px; border-bottom:1px solid #eee;75 }76 .doc-icon, .audio-icon {77 width:80px; height:80px; border-radius:16px; background:#eaf0ff;78 display:flex; align-items:center; justify-content:center; margin-right:26px;79 }80 .audio-icon { background:#e8eef6; }81 .item-title { font-size:44px; color:#222; }82 .item-sub { margin-top:6px; font-size:32px; color:#7a7f86; }83 .spacer { flex:1; }84 .dots { width:50px; height:90px; display:flex; align-items:center; justify-content:center; }85 .ad-row {86 background:#f6f6f7;87 border-radius:20px;88 margin:24px; padding:28px;89 display:flex; align-items:center; gap:26px;90 }91 .ad-img {92 width:100px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD;93 display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px; border-radius:12px;94 }95 .ad-title { font-size:44px; color:#222; }96 .install { margin-left:auto; color:#2e64ff; font-size:40px; font-weight:700; }97 98 /* Open files button */99 .open-btn {100 position:absolute; left:150px; right:150px; top:1550px;101 height:130px; border-radius:80px; background:#eef0f3; color:#2e64ff;102 display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:700;103 box-shadow: inset 0 0 0 1px #dde1e6;104 }105 106 .no-history {107 position:absolute; top:1750px; left:0; right:0; text-align:center;108 color:#9aa0a6; font-size:44px;109 }110 111 /* Floating scan button */112 .scan {113 position:absolute; right:60px; bottom:260px;114 width:146px; height:146px; background:#f6f9ff; border-radius:73px;115 box-shadow:0 8px 24px rgba(0,0,0,0.1);116 display:flex; align-items:center; justify-content:center;117 }118 119 /* Bottom navigation */120 .bottom-nav {121 position:absolute; bottom:0; left:0; right:0;122 height:190px; border-top:1px solid #e5e8ec; background:#ffffff;123 display:flex; align-items:center; justify-content:space-around;124 }125 .nav-item { display:flex; align-items:center; flex-direction:column; gap:8px; color:#7a7f86; font-size:32px; }126 .nav-item.active { color:#356dff; font-weight:700; }127 .fab {128 position:absolute; bottom:90px; left:50%; transform:translateX(-50%);129 width:150px; height:150px; border-radius:30px; background:#3f6cff;130 display:flex; align-items:center; justify-content:center; color:#fff; font-size:88px; font-weight:800;131 box-shadow:0 14px 34px rgba(63,108,255,0.35);132 }133 .red-dot {134 position:absolute; width:18px; height:18px; border-radius:50%; background:#ff3b30;135 right:-10px; top:-6px;136 }137 138 /* Small helpers */139 .row { display:flex; align-items:center; }140 .muted { color:#7a7f86; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div>9:44</div>149 <div class="status-icons">150 <span class="icon">151 <svg viewBox="0 0 24 24">152 <circle cx="12" cy="12" r="9" fill="none" stroke="#555" stroke-width="2"></circle>153 </svg>154 </span>155 <span class="icon">156 <svg viewBox="0 0 24 24">157 <path d="M2 16c4-5 8-5 12 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"></path>158 <path d="M6 16c2-3 4-3 6 0" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round"></path>159 </svg>160 </span>161 <div class="row" style="gap:10px;">162 <span class="icon" style="width:54px;">163 <svg viewBox="0 0 24 24">164 <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>165 <rect x="21" y="9" width="2" height="6" fill="#555"></rect>166 </svg>167 </span>168 <span style="font-size:34px; color:#333;">89%</span>169 </div>170 </div>171 </div>172 173 <!-- Search Bar -->174 <div class="search-wrap">175 <div class="search-bar">176 <div class="hamburger">177 <svg viewBox="0 0 24 24">178 <path d="M3 6h18M3 12h18M3 18h18" stroke="#5c6168" stroke-width="2" stroke-linecap="round" fill="none"></path>179 </svg>180 </div>181 <div class="search-placeholder">Search files, tools</div>182 <div class="avatar">I</div>183 </div>184 </div>185 186 <!-- Promo Banner -->187 <div class="promo">188 <div class="bell">189 <svg viewBox="0 0 24 24">190 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z" fill="none" stroke="#6b87d8" stroke-width="2"></path>191 <circle cx="12" cy="20" r="2" fill="#6b87d8"></circle>192 </svg>193 </div>194 <div class="msg">195 You have a limited-time offer. Tap to view.196 <div class="timers">197 <span class="timer-pill">23 :</span>198 <span class="timer-pill">23 :</span>199 <span class="timer-pill">22</span>200 </div>201 </div>202 <div class="arrow">203 <svg viewBox="0 0 24 24">204 <path d="M8 4l8 8-8 8" fill="none" stroke="#6b87d8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>205 </svg>206 </div>207 </div>208 209 <!-- Tabs -->210 <div class="tabs">211 <div class="tab-left">212 <div class="tab active">Recent</div>213 <div class="tab">Starred</div>214 </div>215 <div class="filter-btn">216 <svg viewBox="0 0 24 24">217 <path d="M3 5h18l-6 7v6l-6-3v-3z" fill="none" stroke="#6b6f77" stroke-width="2"></path>218 </svg>219 </div>220 </div>221 222 <!-- List -->223 <div class="list">224 <!-- Item 1 -->225 <div class="item">226 <div class="doc-icon">227 <svg viewBox="0 0 24 24">228 <rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#3d6aff" stroke-width="2"></rect>229 <path d="M7 8h10M7 12h10M7 16h8" stroke="#3d6aff" stroke-width="2" stroke-linecap="round"></path>230 </svg>231 </div>232 <div style="flex:1;">233 <div class="item-title">Meeting Agenda-WPS Office</div>234 <div class="item-sub">09:44 · 8 KB · My Cloud</div>235 </div>236 <div class="dots">237 <svg viewBox="0 0 24 24">238 <circle cx="12" cy="5" r="2" fill="#9aa0a6"></circle>239 <circle cx="12" cy="12" r="2" fill="#9aa0a6"></circle>240 <circle cx="12" cy="19" r="2" fill="#9aa0a6"></circle>241 </svg>242 </div>243 </div>244 245 <!-- Ad Row -->246 <div class="ad-row">247 <div class="ad-img">[IMG: Zomato Logo]</div>248 <div class="ad-title">Zomato: Food Delivery & Dining</div>249 <div class="install">Install now</div>250 </div>251 252 <!-- Item 2 -->253 <div class="item">254 <div class="doc-icon">255 <svg viewBox="0 0 24 24">256 <rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#3d6aff" stroke-width="2"></rect>257 <path d="M7 8h10M7 12h10M7 16h8" stroke="#3d6aff" stroke-width="2" stroke-linecap="round"></path>258 </svg>259 </div>260 <div style="flex:1;">261 <div class="item-title">Events</div>262 <div class="item-sub">09:37 · 8 KB · My Cloud</div>263 </div>264 <div class="dots">265 <svg viewBox="0 0 24 24">266 <circle cx="12" cy="5" r="2" fill="#9aa0a6"></circle>267 <circle cx="12" cy="12" r="2" fill="#9aa0a6"></circle>268 <circle cx="12" cy="19" r="2" fill="#9aa0a6"></circle>269 </svg>270 </div>271 </div>272 273 <!-- Item 3 -->274 <div class="item">275 <div class="audio-icon">276 <svg viewBox="0 0 24 24">277 <path d="M5 8v8l6-3V11z" fill="#556170"></path>278 <path d="M15 9c3 1 3 5 0 6" fill="none" stroke="#556170" stroke-width="2" stroke-linecap="round"></path>279 </svg>280 </div>281 <div style="flex:1;">282 <div class="item-title">Original+Glazed™+Flavored+Iced+Coffee</div>283 <div class="item-sub">Received files from Download</div>284 </div>285 <div class="dots">286 <svg viewBox="0 0 24 24">287 <circle cx="12" cy="5" r="2" fill="#9aa0a6"></circle>288 <circle cx="12" cy="12" r="2" fill="#9aa0a6"></circle>289 <circle cx="12" cy="19" r="2" fill="#9aa0a6"></circle>290 </svg>291 </div>292 </div>293 </div>294 295 <!-- Open files button -->296 <div class="open-btn">Open files</div>297 298 <!-- No history -->299 <div class="no-history">No earlier history</div>300 301 <!-- Floating scan button -->302 <div class="scan">303 <svg viewBox="0 0 24 24" width="120" height="120">304 <rect x="5" y="5" width="14" height="14" rx="2" fill="none" stroke="#3d6aff" stroke-width="2"></rect>305 <path d="M2 9h4M18 9h4M2 15h4M18 15h4" stroke="#3d6aff" stroke-width="2" stroke-linecap="round"></path>306 </svg>307 </div>308 309 <!-- Bottom Navigation -->310 <div class="bottom-nav">311 <div class="nav-item active">312 <div class="icon">313 <svg viewBox="0 0 24 24">314 <rect x="3" y="4" width="18" height="14" rx="2" fill="none" stroke="#356dff" stroke-width="2"></rect>315 <path d="M6 8h12M6 12h8" stroke="#356dff" stroke-width="2" stroke-linecap="round"></path>316 </svg>317 </div>318 <div>Recent</div>319 </div>320 <div class="nav-item">321 <div class="icon">322 <svg viewBox="0 0 24 24">323 <path d="M4 6h16v12H4zM10 6v12" fill="none" stroke="#7a7f86" stroke-width="2"></path>324 </svg>325 </div>326 <div>Files</div>327 </div>328 <div class="nav-item" style="opacity:0;">329 <div class="icon"></div>330 <div></div>331 </div>332 <div class="nav-item">333 <div class="icon">334 <svg viewBox="0 0 24 24">335 <path d="M12 2l3 6 7 1-5 5 2 7-7-4-7 4 2-7-5-5 7-1z" fill="none" stroke="#7a7f86" stroke-width="2"></path>336 </svg>337 </div>338 <div>Discover</div>339 </div>340 <div class="nav-item">341 <div style="position:relative;">342 <div class="icon">343 <svg viewBox="0 0 24 24">344 <path d="M12 2l8 5v10l-8 5-8-5V7z" fill="none" stroke="#7a7f86" stroke-width="2"></path>345 <path d="M8 13l4-8 4 8-8 0z" fill="#7a7f86"></path>346 </svg>347 </div>348 <span class="red-dot"></span>349 </div>350 <div>WPS Pro</div>351 </div>352 </div>353 354 <!-- Center FAB -->355 <div class="fab">+</div>356 357</div>358</body>359</html>