GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Books & documents - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #1f2f36;14 border-radius: 20px;15 box-shadow: 0 10px 40px rgba(0,0,0,0.35);16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 height: 100px;24 width: 1080px;25 background: #000000;26 color: #ffffff;27 display: flex;28 align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 font-size: 36px;32 }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .status-dot {40 width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: .9;41 }42 .battery {43 width: 48px; height: 24px; border: 2px solid #fff; border-radius: 6px; position: relative;44 }45 .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }46 .battery-fill { position: absolute; left: 3px; top: 3px; height: 16px; width: 32px; background: #8bc34a; }47 48 /* App bar */49 .app-bar {50 position: absolute;51 top: 100px;52 left: 0;53 height: 160px;54 width: 1080px;55 background: #2c6f79;56 color: #e8f3f4;57 display: flex;58 align-items: center;59 padding: 0 28px;60 box-sizing: border-box;61 box-shadow: 0 6px 10px rgba(0,0,0,0.2);62 }63 .app-title {64 font-size: 54px;65 font-weight: 500;66 margin-left: 28px;67 }68 .app-actions {69 margin-left: auto;70 display: flex;71 gap: 34px;72 align-items: center;73 }74 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }75 76 /* List area */77 .list {78 position: absolute;79 top: 260px;80 left: 0;81 right: 0;82 bottom: 0;83 padding: 24px 24px 120px 24px;84 box-sizing: border-box;85 }86 87 .card {88 width: 1032px;89 background: #26353b;90 border-radius: 18px;91 box-shadow: 0 6px 12px rgba(0,0,0,0.35);92 border: 1px solid rgba(255,255,255,0.06);93 margin: 18px auto;94 display: flex;95 padding: 24px;96 box-sizing: border-box;97 color: #cfe1e4;98 }99 100 .thumb {101 width: 240px;102 height: 300px;103 background: #E0E0E0;104 border: 1px solid #BDBDBD;105 border-radius: 6px;106 display: flex;107 align-items: center;108 justify-content: center;109 color: #757575;110 font-size: 26px;111 text-align: center;112 padding: 8px;113 box-sizing: border-box;114 margin-right: 28px;115 }116 117 .card-content {118 flex: 1;119 display: flex;120 flex-direction: column;121 }122 .title {123 font-size: 46px;124 line-height: 1.2;125 color: #d7e9ec;126 margin-top: 6px;127 }128 .meta {129 font-size: 30px;130 color: #9fb4ba;131 margin-top: 6px;132 }133 134 .progress {135 position: relative;136 height: 4px;137 background: rgba(255,255,255,0.18);138 border-radius: 3px;139 margin: 22px 16px 18px 0;140 }141 .progress::before, .progress::after {142 content: "";143 position: absolute;144 top: -6px;145 width: 14px; height: 14px;146 border-radius: 50%;147 background: #9fb4ba;148 opacity: 0.7;149 }150 .progress::before { left: -2px; }151 .progress::after { right: -2px; }152 .progress .value {153 height: 4px;154 background: #9ad1d7;155 width: 35%;156 border-radius: 3px;157 }158 159 .actions {160 display: flex;161 align-items: center;162 gap: 44px;163 margin-top: 12px;164 color: #bcd0d4;165 }166 .actions .right-overflow {167 margin-left: auto;168 }169 170 /* Bottom gesture pill */171 .gesture-pill {172 position: absolute;173 bottom: 30px;174 left: 50%;175 transform: translateX(-50%);176 width: 240px;177 height: 12px;178 background: #d9d9d9;179 border-radius: 8px;180 opacity: 0.85;181 }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Status bar -->188 <div class="status-bar">189 <div>10:33</div>190 <div class="status-right">191 <!-- simple sun icon -->192 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">193 <circle cx="12" cy="12" r="4" stroke="#fff" stroke-width="2"></circle>194 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M17 7l2.1-2.1M4.9 19.1l2.1-2.1" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>195 </svg>196 <!-- wifi -->197 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">198 <path d="M3 8.5c5-4 13-4 18 0M6 12c3.5-2.7 8.5-2.7 12 0M9 15.5c2-1.5 4.9-1.5 6.9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>199 <circle cx="12" cy="18" r="2" fill="#fff"></circle>200 </svg>201 <!-- G letter -->202 <div style="font-size:36px; font-weight:600;">G</div>203 <div class="status-dot"></div>204 <div class="battery"><div class="battery-fill"></div></div>205 </div>206 </div>207 208 <!-- App bar -->209 <div class="app-bar">210 <div class="icon-btn">211 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">212 <path d="M3 6h18M3 12h18M3 18h18" stroke="#e8f3f4" stroke-width="2" stroke-linecap="round"></path>213 </svg>214 </div>215 <div class="app-title">Books & documents</div>216 <div class="app-actions">217 <div class="icon-btn">218 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">219 <circle cx="11" cy="11" r="6" stroke="#e8f3f4" stroke-width="2"></circle>220 <path d="M20 20l-4.2-4.2" stroke="#e8f3f4" stroke-width="2" stroke-linecap="round"></path>221 </svg>222 </div>223 <div class="icon-btn">224 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">225 <circle cx="12" cy="5" r="2" fill="#e8f3f4"></circle>226 <circle cx="12" cy="12" r="2" fill="#e8f3f4"></circle>227 <circle cx="12" cy="19" r="2" fill="#e8f3f4"></circle>228 </svg>229 </div>230 </div>231 </div>232 233 <!-- List of cards -->234 <div class="list">235 <!-- Card 1 -->236 <div class="card">237 <div class="thumb">[IMG: Alice ebook cover]</div>238 <div class="card-content">239 <div class="title">Alice's Adventures in Wonderland</div>240 <div class="meta">Lewis Carroll • EPUB, 26 kB</div>241 <div class="progress"><div class="value" style="width:18%;"></div></div>242 <div class="actions">243 <!-- star -->244 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">245 <path d="M12 17.3L5.5 21l1.8-7.2L2 9.4l7.4-.7L12 2l2.6 6.7 7.4.7-5.3 4.4L18.5 21z" stroke="#bcd0d4" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>246 </svg>247 <!-- clock -->248 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">249 <circle cx="12" cy="12" r="8" stroke="#bcd0d4" stroke-width="2"></circle>250 <path d="M12 7v5l4 2" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round"></path>251 </svg>252 <!-- check -->253 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">254 <path d="M5 13l4 4L19 7" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>255 </svg>256 <!-- bookshelf -->257 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">258 <rect x="3" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>259 <rect x="10" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>260 <rect x="17" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>261 </svg>262 <div class="right-overflow">263 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">264 <circle cx="12" cy="5" r="2" fill="#bcd0d4"></circle>265 <circle cx="12" cy="12" r="2" fill="#bcd0d4"></circle>266 <circle cx="12" cy="19" r="2" fill="#bcd0d4"></circle>267 </svg>268 </div>269 </div>270 </div>271 </div>272 273 <!-- Card 2 -->274 <div class="card">275 <div class="thumb">[IMG: WHO COVID-19 clinical guide cover]</div>276 <div class="card-content">277 <div class="title">WHO-2019-nCoV-clinical-2023.2-eng</div>278 <div class="meta">PDF, 2.7 MB</div>279 <div class="progress"><div class="value" style="width:42%;"></div></div>280 <div class="actions">281 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">282 <path d="M12 17.3L5.5 21l1.8-7.2L2 9.4l7.4-.7L12 2l2.6 6.7 7.4.7-5.3 4.4L18.5 21z" stroke="#bcd0d4" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>283 </svg>284 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">285 <circle cx="12" cy="12" r="8" stroke="#bcd0d4" stroke-width="2"></circle>286 <path d="M12 7v5l4 2" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round"></path>287 </svg>288 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">289 <path d="M5 13l4 4L19 7" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>290 </svg>291 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">292 <rect x="3" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>293 <rect x="10" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>294 <rect x="17" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>295 </svg>296 <div class="right-overflow">297 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">298 <circle cx="12" cy="5" r="2" fill="#bcd0d4"></circle>299 <circle cx="12" cy="12" r="2" fill="#bcd0d4"></circle>300 <circle cx="12" cy="19" r="2" fill="#bcd0d4"></circle>301 </svg>302 </div>303 </div>304 </div>305 </div>306 307 <!-- Card 3 -->308 <div class="card">309 <div class="thumb">[IMG: Yerma cover page]</div>310 <div class="card-content">311 <div class="title">20121106214533yermapdf_pdf</div>312 <div class="meta">PDF, 235 kB</div>313 <div class="progress"><div class="value" style="width:12%;"></div></div>314 <div class="actions">315 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">316 <path d="M12 17.3L5.5 21l1.8-7.2L2 9.4l7.4-.7L12 2l2.6 6.7 7.4.7-5.3 4.4L18.5 21z" stroke="#bcd0d4" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>317 </svg>318 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">319 <circle cx="12" cy="12" r="8" stroke="#bcd0d4" stroke-width="2"></circle>320 <path d="M12 7v5l4 2" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round"></path>321 </svg>322 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">323 <path d="M5 13l4 4L19 7" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>324 </svg>325 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">326 <rect x="3" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>327 <rect x="10" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>328 <rect x="17" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>329 </svg>330 <div class="right-overflow">331 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">332 <circle cx="12" cy="5" r="2" fill="#bcd0d4"></circle>333 <circle cx="12" cy="12" r="2" fill="#bcd0d4"></circle>334 <circle cx="12" cy="19" r="2" fill="#bcd0d4"></circle>335 </svg>336 </div>337 </div>338 </div>339 </div>340 341 <!-- Card 4 -->342 <div class="card">343 <div class="thumb">[IMG: Project Gutenberg page list]</div>344 <div class="card-content">345 <div class="title">The Red and the Black, A Chronicle of 1830 by Stendhal – Project Gutenberg</div>346 <div class="meta">PDF, 193 kB</div>347 <div class="progress"><div class="value" style="width:60%;"></div></div>348 <div class="actions">349 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">350 <path d="M12 17.3L5.5 21l1.8-7.2L2 9.4l7.4-.7L12 2l2.6 6.7 7.4.7-5.3 4.4L18.5 21z" stroke="#bcd0d4" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>351 </svg>352 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">353 <circle cx="12" cy="12" r="8" stroke="#bcd0d4" stroke-width="2"></circle>354 <path d="M12 7v5l4 2" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round"></path>355 </svg>356 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">357 <path d="M5 13l4 4L19 7" stroke="#bcd0d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>358 </svg>359 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">360 <rect x="3" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>361 <rect x="10" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>362 <rect x="17" y="5" width="4" height="14" stroke="#bcd0d4" stroke-width="2"></rect>363 </svg>364 <div class="right-overflow">365 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">366 <circle cx="12" cy="5" r="2" fill="#bcd0d4"></circle>367 <circle cx="12" cy="12" r="2" fill="#bcd0d4"></circle>368 <circle cx="12" cy="19" r="2" fill="#bcd0d4"></circle>369 </svg>370 </div>371 </div>372 </div>373 </div>374 </div>375 376 <div class="gesture-pill"></div>377</div>378</body>379</html>