GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Library UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 42px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.12);17 color: #263238;18 }19 20 /* Top header */21 .app-header {22 position: relative;23 height: 420px;24 background: #56A9E9;25 padding-top: 40px;26 }27 .header-actions {28 position: absolute;29 right: 40px;30 top: 120px;31 display: flex;32 align-items: center;33 gap: 34px;34 }35 .icon-btn {36 width: 64px; height: 64px; border-radius: 32px;37 display: flex; align-items: center; justify-content: center;38 background: rgba(255,255,255,0.0);39 }40 .profile-pill {41 width: 72px; height: 72px; border-radius: 36px;42 background: #CDE9FF;43 border: 3px solid #90CAF9;44 display: flex; align-items: center; justify-content: center;45 }46 .bell-wrap {47 position: absolute;48 left: 42px;49 top: 122px;50 width: 64px; height: 64px;51 display: flex; align-items: center; justify-content: center;52 }53 .badge {54 position: absolute;55 top: -6px; right: -6px;56 background: #E53935; color: #fff;57 border-radius: 14px; font-size: 24px; font-weight: 700;58 padding: 2px 10px;59 box-shadow: 0 2px 6px rgba(0,0,0,0.25);60 }61 .header-title {62 position: absolute;63 left: 42px;64 bottom: 150px;65 font-size: 96px;66 font-weight: 800;67 letter-spacing: 0.5px;68 color: #173B53;69 }70 71 /* Tabs */72 .tabs {73 position: absolute;74 left: 42px; right: 42px;75 bottom: -2px;76 height: 90px;77 display: flex;78 align-items: flex-end;79 gap: 60px;80 }81 .tab {82 font-size: 46px;83 color: #8A9AAA;84 padding-bottom: 22px;85 }86 .tab.active {87 color: #1C7BBE;88 border-bottom: 6px solid #55B9F4;89 }90 91 /* Sort bar */92 .sort-bar {93 height: 120px;94 display: flex;95 align-items: center;96 justify-content: space-between;97 padding: 0 42px;98 border-bottom: 2px solid #ECEFF1;99 color: #90A4AE;100 }101 .sort-left {102 display: flex; align-items: center; gap: 18px; font-size: 34px; letter-spacing: 1px;103 }104 .sort-right {105 display: flex; align-items: center; gap: 22px; font-size: 36px;106 }107 108 /* List */109 .list {110 padding: 0 42px;111 }112 .row {113 display: grid;114 grid-template-columns: 280px 1fr 90px;115 gap: 36px;116 align-items: center;117 min-height: 240px;118 border-bottom: 2px solid #ECEFF1;119 }120 .thumb-folder {121 width: 280px; height: 190px; border-radius: 22px;122 background: #BFE6FF; border: 1px solid #9ED2F4;123 display: flex; align-items: center; justify-content: center;124 color: #4A90AF; font-weight: 600;125 }126 .thumb-video {127 width: 400px; height: 230px; border-radius: 18px;128 background: #E0E0E0; border: 1px solid #BDBDBD;129 display: flex; align-items: center; justify-content: center; color: #757575;130 position: relative;131 }132 .time-pill {133 position: absolute; right: 12px; bottom: 12px;134 background: rgba(33,33,33,0.85); color: #fff;135 font-size: 30px; padding: 6px 14px; border-radius: 8px;136 }137 .row-text {138 display: flex; flex-direction: column; gap: 18px;139 }140 .title {141 font-size: 52px; font-weight: 700; color: #263238;142 }143 .subtitle {144 font-size: 34px; color: #90A4AE;145 }146 .kebab {147 width: 60px; height: 60px; border-radius: 30px;148 display: flex; align-items: center; justify-content: center; color: #90A4AE;149 }150 151 /* Floating action */152 .fab {153 position: absolute;154 right: 42px; bottom: 310px;155 width: 128px; height: 128px; border-radius: 64px;156 background: #FFFFFF;157 box-shadow: 0 18px 40px rgba(0,0,0,0.2);158 display: flex; align-items: center; justify-content: center;159 }160 161 /* Bottom nav */162 .bottom-nav {163 position: absolute;164 left: 0; right: 0; bottom: 0;165 height: 220px; background: #FFFFFF; border-top: 2px solid #ECEFF1;166 display: flex; align-items: flex-start; justify-content: space-around;167 padding-top: 36px;168 }169 .nav-item {170 display: flex; flex-direction: column; align-items: center; gap: 18px;171 color: #90A4AE; font-size: 32px;172 }173 .nav-item.active { color: #000; }174 .nav-plus {175 position: absolute;176 left: 50%; transform: translateX(-50%);177 top: -40px;178 width: 144px; height: 144px; border-radius: 72px; background: #55B9F4;179 box-shadow: 0 24px 40px rgba(85,185,244,0.5);180 display: flex; align-items: center; justify-content: center;181 }182 .home-indicator {183 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);184 width: 360px; height: 12px; border-radius: 6px; background: #000; opacity: 0.1;185 }186 187 /* Utility SVG colors */188 .svg-white { fill: #FFFFFF; }189 .svg-dark { fill: #173B53; }190 .svg-gray { fill: #90A4AE; }191 .svg-black { fill: #263238; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Header -->198 <div class="app-header">199 <div class="bell-wrap">200 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-white">201 <path d="M12 22c1.1 0 2-.9 2-2H10c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.7-6-6-6S6 7.7 6 11v5l-2 3h16l-2-3z"/>202 </svg>203 <div class="badge">4</div>204 </div>205 206 <div class="header-actions">207 <div class="icon-btn">208 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-white">209 <circle cx="11" cy="11" r="7" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>210 <path d="M20 20l-4-4" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>211 </svg>212 </div>213 <div class="profile-pill">214 <svg width="40" height="40" viewBox="0 0 24 24" class="svg-dark">215 <circle cx="12" cy="9" r="3" fill="#173B53"></circle>216 <path d="M4 20a8 8 0 0 1 16 0H4z" class="svg-dark"></path>217 </svg>218 </div>219 </div>220 221 <div class="header-title">Library</div>222 223 <div class="tabs">224 <div class="tab active">Library</div>225 <div class="tab">Showcases</div>226 </div>227 </div>228 229 <!-- Sort bar -->230 <div class="sort-bar">231 <div class="sort-left">232 <span>4 ITEMS</span>233 </div>234 <div class="sort-right">235 <svg width="42" height="42" viewBox="0 0 24 24" class="svg-gray">236 <path d="M7 10l5 5 5-5" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>237 </svg>238 <span>DATE ADDED</span>239 <svg width="42" height="42" viewBox="0 0 24 24" class="svg-gray">240 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/>241 </svg>242 </div>243 </div>244 245 <!-- List -->246 <div class="list">247 248 <!-- Row 1 -->249 <div class="row" style="border-bottom: 2px solid #ECEFF1;">250 <div class="thumb-folder">Folder</div>251 <div class="row-text">252 <div class="title">Yoga</div>253 <div class="subtitle">1 item</div>254 </div>255 <div class="kebab">256 <svg width="36" height="36" viewBox="0 0 24 24" class="svg-gray">257 <circle cx="12" cy="5" r="2"></circle>258 <circle cx="12" cy="12" r="2"></circle>259 <circle cx="12" cy="19" r="2"></circle>260 </svg>261 </div>262 </div>263 264 <!-- Row 2 -->265 <div class="row" style="border-bottom: 2px solid #ECEFF1;">266 <div class="thumb-folder">Folder</div>267 <div class="row-text">268 <div class="title">Good night</div>269 <div class="subtitle">0 items</div>270 </div>271 <div class="kebab">272 <svg width="36" height="36" viewBox="0 0 24 24" class="svg-gray">273 <circle cx="12" cy="5" r="2"></circle>274 <circle cx="12" cy="12" r="2"></circle>275 <circle cx="12" cy="19" r="2"></circle>276 </svg>277 </div>278 </div>279 280 <!-- Row 3 -->281 <div class="row" style="border-bottom: 2px solid #ECEFF1;">282 <div class="thumb-folder">Folder</div>283 <div class="row-text">284 <div class="title">Workout</div>285 <div class="subtitle">1 item</div>286 </div>287 <div class="kebab">288 <svg width="36" height="36" viewBox="0 0 24 24" class="svg-gray">289 <circle cx="12" cy="5" r="2"></circle>290 <circle cx="12" cy="12" r="2"></circle>291 <circle cx="12" cy="19" r="2"></circle>292 </svg>293 </div>294 </div>295 296 <!-- Row 4 (video) -->297 <div class="row" style="border-bottom: none; grid-template-columns: 420px 1fr 90px; min-height: 260px;">298 <div class="thumb-video">299 [IMG: Yoga pose video thumbnail]300 <div class="time-pill">00:29</div>301 </div>302 <div class="row-text">303 <div class="title">Untitled</div>304 <div class="subtitle">3 views • 3 weeks ago</div>305 </div>306 <div class="kebab">307 <svg width="36" height="36" viewBox="0 0 24 24" class="svg-gray">308 <circle cx="12" cy="5" r="2"></circle>309 <circle cx="12" cy="12" r="2"></circle>310 <circle cx="12" cy="19" r="2"></circle>311 </svg>312 </div>313 </div>314 315 </div>316 317 <!-- Floating action button -->318 <div class="fab">319 <svg width="72" height="72" viewBox="0 0 24 24" class="svg-black">320 <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#55B9F4"></path>321 <path d="M12 10v6M9 13h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>322 </svg>323 </div>324 325 <!-- Bottom navigation -->326 <div class="bottom-nav">327 <div class="nav-item">328 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-gray">329 <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>330 </svg>331 <div>Home</div>332 </div>333 334 <div class="nav-item active">335 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-black">336 <path d="M4 4h16v12H4zM8 18h8v2H8z"/>337 </svg>338 <div>Library</div>339 </div>340 341 <div class="nav-plus">342 <svg width="64" height="64" viewBox="0 0 24 24" class="svg-white">343 <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>344 </svg>345 </div>346 347 <div class="nav-item">348 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-gray">349 <path d="M3 3h18v4H3zM3 10h18v11H3z"/>350 <path d="M7 10v11M12 10v11M17 10v11" fill="none" stroke="#90A4AE" stroke-width="1"></path>351 </svg>352 <div>Analytics</div>353 </div>354 355 <div class="nav-item">356 <svg width="48" height="48" viewBox="0 0 24 24" class="svg-gray">357 <path d="M4 5h16v14H4zM9 9l7 4-7 4z"/>358 </svg>359 <div>Watch</div>360 </div>361 362 <div class="home-indicator"></div>363 </div>364 365</div>366</body>367</html>