GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Library UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #1e1e1e;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 background: #3d56c6;18 color: #ffffff;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-weight: 600;23 }24 .status-left { display: flex; align-items: center; gap: 22px; }25 .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }26 .sb-icon { width: 32px; height: 32px; }27 .battery {28 width: 44px; height: 20px; border: 2px solid #fff; position: relative; border-radius: 3px;29 }30 .battery:after { content: ""; position: absolute; right: -7px; top: 5px; width: 4px; height: 10px; background: #fff; border-radius: 1px; }31 .battery .level { position: absolute; left: 2px; top: 2px; height: 14px; width: 28px; background: #ffffff; }32 33 /* Top tabs */34 .top-tabs {35 height: 220px;36 background: #5a54a8;37 color: #fff;38 display: flex;39 align-items: center;40 padding: 0 24px;41 box-sizing: border-box;42 }43 .tabs-row {44 width: 100%;45 display: grid;46 grid-template-columns: repeat(4, 1fr);47 gap: 24px;48 }49 .tab {50 display: flex;51 align-items: center;52 gap: 18px;53 padding: 26px 24px;54 border-radius: 10px;55 background: rgba(255,255,255,0.06);56 }57 .tab svg { width: 44px; height: 44px; fill: #fff; }58 .tab .label { font-size: 34px; letter-spacing: 0.5px; }59 60 /* Search / toolbar area */61 .toolbar {62 height: 160px;63 background: #5a54a8;64 display: flex;65 align-items: center;66 padding: 0 24px;67 box-sizing: border-box;68 gap: 18px;69 }70 .menu-btn {71 width: 130px; height: 90px;72 background: #3c3f5d;73 border-radius: 10px;74 display: flex; align-items: center; justify-content: center;75 box-shadow: inset 0 1px rgba(255,255,255,0.06);76 }77 .menu-btn svg { width: 56px; height: 56px; fill: #fff; }78 .search-field {79 flex: 1;80 height: 90px;81 background: #6f739f;82 border-radius: 12px;83 display: flex; align-items: center;84 padding: 0 28px;85 color: #ffffff;86 font-size: 36px;87 box-shadow: inset 0 2px rgba(255,255,255,0.06);88 }89 .pill {90 width: 120px; height: 90px;91 background: #6f739f; color: #fff;92 border-radius: 12px; display: flex; justify-content: center; align-items: center;93 font-size: 36px;94 box-shadow: inset 0 2px rgba(255,255,255,0.06);95 }96 .sort {97 width: 240px; height: 90px; background: #6f739f; border-radius: 12px;98 display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-size: 36px;99 }100 .view-toggle {101 width: 120px; height: 90px; background: #6f739f; border-radius: 12px;102 display: flex; align-items: center; justify-content: center;103 }104 .toolbar svg { fill: #fff; width: 40px; height: 40px; }105 106 /* Content grid */107 .content {108 position: relative;109 background: #1e1e1e;110 height: 1890px; /* remaining space before gesture bar */111 overflow: hidden;112 }113 .grid {114 padding: 24px;115 display: flex;116 flex-wrap: wrap;117 gap: 26px;118 box-sizing: border-box;119 }120 .card {121 width: calc((1080px - 24px*2 - 26px*2)/3);122 background: #2a2a2a;123 border-radius: 12px;124 overflow: hidden;125 box-shadow: 0 6px 10px rgba(0,0,0,0.35);126 }127 .thumb {128 height: 420px;129 background: #E0E0E0;130 border-bottom: 1px solid #BDBDBD;131 display: flex; align-items: center; justify-content: center;132 color: #757575; font-size: 30px;133 }134 .title-bar {135 background: #383838;136 color: #d9d9d9;137 padding: 18px 20px;138 font-size: 34px;139 }140 .meta {141 display: flex; align-items: center;142 padding: 16px 20px;143 gap: 18px;144 background: #3a3a3a;145 color: #bfbfbf;146 font-size: 30px;147 }148 .meta .spacer { margin-left: auto; display: flex; align-items: center; gap: 18px; }149 .icon-btn svg { width: 34px; height: 34px; fill: #bfbfbf; }150 151 /* Gesture bar */152 .gesture {153 position: absolute; left: 0; bottom: 0;154 width: 100%; height: 140px; background: #2f56cf;155 display: flex; align-items: center; justify-content: center;156 }157 .gesture .pill-shape {158 width: 240px; height: 16px; background: #ffffff; border-radius: 30px;159 }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Status Bar -->166 <div class="status-bar">167 <div class="status-left">168 <div style="font-size: 40px;">9:36</div>169 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M12 2l7 6-7 6-7-6 7-6zm0 10l7 6-7 6-7-6 7-6z"/></svg>170 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm2 2v8h14V8H5z"/></svg>171 </div>172 <div class="status-right">173 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 9l10-7 10 7v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9zm10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>174 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M4 10c3-3 13-3 16 0v7H4v-7z"/></svg>175 <div class="battery"><div class="level"></div></div>176 </div>177 </div>178 179 <!-- Top Tabs -->180 <div class="top-tabs">181 <div class="tabs-row">182 <div class="tab">183 <svg viewBox="0 0 24 24"><path d="M4 5h15a2 2 0 0 1 2 2v11H4V5zm0 13H2V7a2 2 0 0 1 2-2v13zm6-9h7v2h-7V9zm0 4h7v2h-7v-2z"/></svg>184 <div class="label">LIBRARY</div>185 </div>186 <div class="tab">187 <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3V4zm2 2v10h14V6H5zm0 14h6v2H5v-2z"/></svg>188 <div class="label">FOLDER</div>189 </div>190 <div class="tab">191 <svg viewBox="0 0 24 24"><path d="M12 2l5 9H7l5-9zm-9 19v-2h18v2H3z"/></svg>192 <div class="label">RECENT</div>193 </div>194 <div class="tab">195 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg>196 <div class="label">FAVORITES</div>197 </div>198 </div>199 </div>200 201 <!-- Toolbar -->202 <div class="toolbar">203 <div class="menu-btn">204 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>205 </div>206 <div class="search-field">Find</div>207 <div class="pill">11</div>208 <div class="sort">209 <svg viewBox="0 0 24 24"><path d="M12 5v4l3-3-3-1zm7 7a7 7 0 1 1-14 0H3l3-3 3 3H7a5 5 0 1 0 10 0h2z"/></svg>210 <div>Date</div>211 <svg viewBox="0 0 24 24"><path d="M7 14l5-5 5 5H7z"/></svg>212 </div>213 <div class="view-toggle">214 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>215 </div>216 </div>217 218 <!-- Content Grid -->219 <div class="content">220 <div class="grid">221 <!-- Row 1 -->222 <div class="card">223 <div class="thumb">[IMG: Document preview - Amsterdam]</div>224 <div class="title-bar">Amsterdam 1</div>225 <div class="meta">226 <div>PDF</div>227 <div class="spacer">228 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>229 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>230 </div>231 </div>232 </div>233 234 <div class="card">235 <div class="thumb">[IMG: Document preview - Venice]</div>236 <div class="title-bar">Venice tour</div>237 <div class="meta">238 <div>PDF</div>239 <div>0%</div>240 <div class="spacer">241 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>242 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>243 </div>244 </div>245 </div>246 247 <div class="card">248 <div class="thumb">[IMG: Document preview - Amsterdam]</div>249 <div class="title-bar">Amsterdam (1)</div>250 <div class="meta">251 <div>PDF</div>252 <div class="spacer">253 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>254 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>255 </div>256 </div>257 </div>258 259 <!-- Row 2 -->260 <div class="card">261 <div class="thumb">[IMG: Document preview - Tomorrowland festival]</div>262 <div class="title-bar">Tomorrowland</div>263 <div class="meta">264 <div>PDF</div>265 <div class="spacer">266 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>267 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>268 </div>269 </div>270 </div>271 272 <div class="card">273 <div class="thumb">[IMG: Document preview - Venice]</div>274 <div class="title-bar">Venice tour</div>275 <div class="meta">276 <div>PDF</div>277 <div class="spacer">278 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>279 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>280 </div>281 </div>282 </div>283 284 <div class="card">285 <div class="thumb">[IMG: Document preview - Amsterdam]</div>286 <div class="title-bar">Amsterdam</div>287 <div class="meta">288 <div>PDF</div>289 <div class="spacer">290 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>291 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>292 </div>293 </div>294 </div>295 296 <!-- Row 3 -->297 <div class="card">298 <div class="thumb">[IMG: Book cover - Romeo and Juliet]</div>299 <div class="title-bar">Romeo and Juliet</div>300 <div class="meta">301 <div>EPUB</div>302 <div>0%</div>303 <div class="spacer">304 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>305 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>306 </div>307 </div>308 </div>309 310 <div class="card">311 <div class="thumb">[IMG: Book cover - Alice's Adventures in Wonderland]</div>312 <div class="title-bar">Alice's Adventure...</div>313 <div class="meta">314 <div>EPUB</div>315 <div class="spacer">316 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>317 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>318 </div>319 </div>320 </div>321 322 <div class="card">323 <div class="thumb">[IMG: Empty slot / document preview]</div>324 <div class="title-bar">Amsterdam</div>325 <div class="meta">326 <div>PDF</div>327 <div class="spacer">328 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></svg></div>329 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></div>330 </div>331 </div>332 </div>333 </div>334 335 <!-- Gesture Bar -->336 <div class="gesture"><div class="pill-shape"></div></div>337 </div>338 339</div>340</body>341</html>