GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Library Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Top system/status bar */18 .status-bar {19 height: 120px;20 background: #4391d8;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-left { display: flex; gap: 24px; align-items: center; }29 .status-right { margin-left: auto; display: flex; gap: 28px; align-items: center; opacity: 0.95; }30 31 /* Header area */32 .header {33 position: relative;34 padding: 36px 48px 12px 48px;35 background: #fff;36 }37 .header .notify {38 position: absolute;39 left: 48px;40 top: -36px;41 display: flex;42 align-items: center;43 gap: 10px;44 }45 .badge {46 position: absolute;47 top: -10px;48 left: 26px;49 background: #e74c3c;50 color: #fff;51 font-size: 26px;52 line-height: 26px;53 padding: 6px 10px;54 border-radius: 20px;55 font-weight: 700;56 border: 2px solid #fff;57 }58 .header-title {59 font-size: 116px;60 font-weight: 800;61 color: #1f2d3d;62 margin: 48px 0 24px 0;63 }64 .header-actions {65 position: absolute;66 right: 48px;67 top: 52px;68 display: flex;69 align-items: center;70 gap: 36px;71 }72 .avatar {73 width: 80px; height: 80px; border-radius: 40px;74 background: #d6ecfb; border: 3px solid #90c8f6; display: flex; align-items: center; justify-content: center;75 }76 77 /* Tabs */78 .tabs {79 display: flex;80 padding: 0 48px;81 gap: 48px;82 align-items: flex-end;83 }84 .tab {85 font-size: 44px;86 color: #94a3b8;87 padding: 12px 0;88 }89 .tab.active {90 color: #2b6cb0;91 border-bottom: 6px solid #3aa0e6;92 }93 94 .divider { height: 2px; background: #e9eef3; margin: 24px 0; }95 96 /* Toolbar */97 .toolbar {98 display: flex;99 align-items: center;100 padding: 18px 48px;101 color: #6b7c93;102 font-size: 36px;103 }104 .toolbar .left {105 font-weight: 700;106 letter-spacing: 1px;107 }108 .toolbar .right {109 margin-left: auto; display: flex; align-items: center; gap: 24px; color: #9aa8b7;110 }111 112 /* List */113 .list {114 padding: 0 28px 220px 28px;115 }116 .row {117 position: relative;118 display: flex;119 align-items: center;120 padding: 28px 20px;121 }122 .row + .row { border-top: 2px solid #f0f4f7; }123 .row .meta {124 margin-left: 28px;125 }126 .title {127 font-size: 48px; font-weight: 700; color: #1f2d3d; margin-bottom: 8px;128 }129 .subtle {130 font-size: 32px; color: #8aa0b3;131 }132 .kebab {133 position: absolute; right: 36px;134 }135 136 /* Folder icon block */137 .folder {138 width: 260px; height: 170px;139 }140 141 /* Video thumb placeholder */142 .thumb {143 width: 440px; height: 240px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 border-radius: 14px;147 display: flex; align-items: center; justify-content: center;148 color: #757575; font-size: 32px;149 position: relative; overflow: hidden;150 }151 .duration {152 position: absolute; right: 10px; bottom: 10px;153 background: rgba(0,0,0,0.8); color: #fff; font-size: 30px; padding: 6px 12px; border-radius: 6px;154 }155 156 /* Bottom nav */157 .bottom-bar {158 position: absolute; left: 0; right: 0; bottom: 0;159 height: 180px; background: #ffffff; border-top: 2px solid #e9eef3;160 display: flex; align-items: center; justify-content: space-around;161 padding: 0 24px;162 }163 .nav-item {164 display: flex; flex-direction: column; align-items: center; gap: 8px;165 color: #98a7b6; font-size: 30px;166 width: 160px;167 }168 .nav-item.active { color: #1f2d3d; font-weight: 700; }169 .fab {170 position: absolute; left: 50%; transform: translateX(-50%);171 bottom: 80px; width: 140px; height: 140px; border-radius: 70px;172 background: #4fb6f0; display: flex; align-items: center; justify-content: center;173 box-shadow: 0 12px 28px rgba(0,0,0,0.18);174 }175 .mini-fab {176 position: absolute; right: 48px; bottom: 280px;177 width: 120px; height: 120px; border-radius: 60px; background: #fff;178 box-shadow: 0 10px 26px rgba(0,0,0,0.18);179 display: flex; align-items: center; justify-content: center;180 }181 182 /* Helpers */183 svg { display: block; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status bar -->190 <div class="status-bar">191 <div class="status-left">192 <span>8:47</span>193 <span>•</span>194 <span>20°</span>195 </div>196 <div class="status-right">197 <!-- simple status icons -->198 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>199 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M12 4l-8 8h3v6h10v-6h3L12 4z"/></svg>200 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M21 8V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v1h18zM3 9v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9H3z"/></svg>201 </div>202 </div>203 204 <!-- Header -->205 <div class="header">206 <div class="notify">207 <!-- Bell icon -->208 <div style="position: relative;">209 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">210 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z" stroke="#1f2d3d" stroke-width="1.6" fill="none"/>211 </svg>212 <span class="badge">4</span>213 </div>214 </div>215 216 <div class="header-actions">217 <!-- Search -->218 <svg width="62" height="62" viewBox="0 0 24 24" fill="none">219 <circle cx="11" cy="11" r="7" stroke="#0f172a" stroke-width="2"></circle>220 <path d="M20 20l-3.5-3.5" stroke="#0f172a" stroke-width="2" stroke-linecap="round"></path>221 </svg>222 <!-- Avatar icon -->223 <div class="avatar">224 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">225 <circle cx="12" cy="8.5" r="3.2" stroke="#2b6cb0" stroke-width="1.6"/>226 <path d="M5 19c1.5-3 12.5-3 14 0" stroke="#2b6cb0" stroke-width="1.6" stroke-linecap="round"/>227 <path d="M9 9.5c.6.6 1.4.9 3 .9s2.4-.3 3-.9" stroke="#2b6cb0" stroke-width="1.4" stroke-linecap="round"/>228 </svg>229 </div>230 </div>231 232 <div class="header-title">Library</div>233 234 <div class="tabs">235 <div class="tab active">Library</div>236 <div class="tab">Showcases</div>237 </div>238 </div>239 240 <div class="divider"></div>241 242 <!-- Toolbar -->243 <div class="toolbar">244 <div class="left">3 ITEMS</div>245 <div class="right">246 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M7 10l5 5 5-5" stroke="#9aa8b7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>247 <span>DATE ADDED</span>248 <svg width="40" height="40" viewBox="0 0 24 24" fill="#9aa8b7">249 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/>250 </svg>251 </div>252 </div>253 254 <!-- List -->255 <div class="list">256 257 <!-- Row 1: Folder -->258 <div class="row">259 <svg class="folder" viewBox="0 0 64 42">260 <path d="M6 6h18l6 6h28a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z" fill="#bfe5fb" stroke="#a6d4f5" stroke-width="1.5" />261 </svg>262 <div class="meta">263 <div class="title">Good night</div>264 <div class="subtle">0 items</div>265 </div>266 <div class="kebab">267 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9aa8b7">268 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>269 </svg>270 </div>271 </div>272 273 <!-- Row 2: Folder -->274 <div class="row">275 <svg class="folder" viewBox="0 0 64 42">276 <path d="M6 6h18l6 6h28a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z" fill="#bfe5fb" stroke="#a6d4f5" stroke-width="1.5" />277 </svg>278 <div class="meta">279 <div class="title">Workout</div>280 <div class="subtle">1 item</div>281 </div>282 <div class="kebab">283 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9aa8b7">284 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>285 </svg>286 </div>287 </div>288 289 <!-- Row 3: Video item -->290 <div class="row">291 <div class="thumb">292 [IMG: Yoga video thumbnail]293 <div class="duration">00:29</div>294 </div>295 <div class="meta" style="margin-left: 36px;">296 <div class="title">Untitled</div>297 <div class="subtle">3 views • 3 weeks ago</div>298 </div>299 <div class="kebab">300 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9aa8b7">301 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>302 </svg>303 </div>304 </div>305 306 </div>307 308 <!-- Mini FAB (folder +) -->309 <div class="mini-fab">310 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">311 <path d="M4 7h6l2 2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z" stroke="#222" stroke-width="1.5" fill="none"/>312 <path d="M12 12v6M9 15h6" stroke="#222" stroke-width="1.6" stroke-linecap="round"/>313 </svg>314 </div>315 316 <!-- Bottom navigation -->317 <div class="bottom-bar">318 <div class="nav-item">319 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">320 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" stroke="#98a7b6" stroke-width="1.8"/>321 </svg>322 <div>Home</div>323 </div>324 <div class="nav-item active">325 <svg width="42" height="42" viewBox="0 0 24 24" fill="#1f2d3d">326 <path d="M8 5v14l11-7-11-7z"/>327 </svg>328 <div>Library</div>329 </div>330 <div style="width:160px;"></div>331 <div class="nav-item">332 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">333 <path d="M4 20V10M10 20V4M16 20v-8M22 20v-6" stroke="#98a7b6" stroke-width="1.8" stroke-linecap="round"/>334 </svg>335 <div>Analytics</div>336 </div>337 <div class="nav-item">338 <svg width="42" height="42" viewBox="0 0 24 24" fill="#98a7b6">339 <path d="M8 5v14l11-7-11-7z"/>340 </svg>341 <div>Watch</div>342 </div>343 344 <!-- Center FAB -->345 <div class="fab">346 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">347 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>348 </svg>349 </div>350 </div>351 352</div>353</body>354</html>