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 Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #263238; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top blue status/app bar */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 160px;24 background: #0ea5e9;25 color: #fff;26 display: flex;27 align-items: flex-start;28 padding: 24px 36px 0 36px;29 box-sizing: border-box;30 }31 .statusbar .time { font-weight: 600; font-size: 38px; margin-top: 8px; }32 .status-icons { margin-left: auto; display: flex; gap: 22px; align-items: center; margin-top: 8px; }33 .icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; }34 35 /* Header content */36 .header {37 position: absolute;38 top: 160px;39 left: 0;40 width: 100%;41 background: #ffffff;42 padding: 36px 40px 0 40px;43 box-sizing: border-box;44 }45 .heading-row {46 display: flex;47 align-items: center;48 }49 h1.title {50 margin: 0;51 font-size: 96px;52 font-weight: 800;53 letter-spacing: -1px;54 color: #24323a;55 flex: 1;56 }57 .header-actions {58 display: flex;59 align-items: center;60 gap: 28px;61 margin-right: 8px;62 }63 .avatar {64 width: 72px; height: 72px; border-radius: 36px;65 border: 4px solid #6ab3d9; background: #d7eef9; display: flex; align-items: center; justify-content: center;66 }67 .avatar svg { width: 40px; height: 40px; stroke: #2f6e87; }68 69 /* Tabs */70 .tabs {71 margin-top: 18px;72 display: flex;73 align-items: flex-end;74 gap: 48px;75 padding-right: 40px;76 }77 .tab {78 font-size: 42px;79 color: #8da0a6;80 padding: 18px 8px;81 position: relative;82 }83 .tab.active {84 color: #1f87c9;85 font-weight: 700;86 }87 .tab.active::after {88 content: "";89 position: absolute;90 left: 0; right: 0; bottom: 0;91 height: 6px; background: #09a7f3; border-radius: 3px;92 }93 94 /* Sort / meta row */95 .meta-row {96 margin-top: 32px;97 padding: 0 40px;98 display: flex; align-items: center;99 color: #607d8b;100 font-size: 34px;101 letter-spacing: 2px;102 }103 .meta-row .left { text-transform: uppercase; flex: 1; font-weight: 700; }104 .meta-row .right { display: flex; align-items: center; gap: 18px; letter-spacing: 0; font-weight: 600; color: #7a8e96; }105 .divider { height: 2px; background: #e6ebee; margin: 24px 40px 0 40px; }106 107 /* Content list */108 .list {109 padding: 24px 40px;110 }111 .item {112 display: flex;113 align-items: center;114 gap: 36px;115 padding: 28px 0;116 }117 .folder-thumb {118 width: 320px; height: 220px; background: #bde8fb; border-radius: 18px; border: 2px solid #a9d8ee;119 display: flex; align-items: center; justify-content: center; color: #3b6c86; font-weight: 700;120 }121 .item .info {122 flex: 1;123 }124 .item .info .name { font-size: 54px; font-weight: 800; color: #24323a; }125 .item .info .sub { font-size: 36px; color: #8da0a6; margin-top: 6px; }126 .item .menu { width: 60px; display: flex; justify-content: flex-end; margin-right: 8px; }127 128 /* Floating create folder button */129 .fab {130 position: absolute; right: 48px; bottom: 300px;131 width: 132px; height: 132px; border-radius: 66px; background: #ffffff;132 box-shadow: 0 10px 24px rgba(0,0,0,0.18);133 display: flex; align-items: center; justify-content: center;134 }135 .fab svg { width: 54px; height: 54px; }136 137 /* Bottom navigation */138 .bottom-nav {139 position: absolute; left: 0; bottom: 0; width: 100%; height: 188px;140 background: #ffffff; border-top: 2px solid #e6ebee;141 display: flex; align-items: flex-start; justify-content: space-around;142 padding-top: 22px; box-sizing: border-box;143 }144 .nav-item { width: 18%; text-align: center; color: #8da0a6; font-size: 30px; }145 .nav-item .icon svg { width: 54px; height: 54px; }146 .nav-item.active { color: #0d2b3a; font-weight: 700; }147 .center-plus {148 position: absolute; left: 50%; transform: translateX(-50%);149 bottom: 78px; width: 152px; height: 152px; background: #09a7f3; border-radius: 76px; box-shadow: 0 10px 24px rgba(0,0,0,0.2);150 display: flex; align-items: center; justify-content: center;151 }152 .center-plus svg { width: 84px; height: 84px; stroke: #fff; }153 154 /* Gesture pill */155 .gesture {156 position: absolute; left: 50%; transform: translateX(-50%);157 bottom: 18px; width: 300px; height: 14px; background: #d8dde1; border-radius: 8px;158 }159</style>160</head>161<body>162<div id="render-target">163 <!-- Top status/app bar -->164 <div class="statusbar">165 <div class="time">10:48</div>166 <div class="status-icons">167 <!-- WiFi icon -->168 <span class="icon">169 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">170 <path d="M2 8c5-4 15-4 20 0" />171 <path d="M5 11c3-2 11-2 14 0" />172 <path d="M8 14c2-1 6-1 8 0" />173 <circle cx="12" cy="18" r="1.8" fill="#fff"></circle>174 </svg>175 </span>176 <!-- Battery icon -->177 <span class="icon">178 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">179 <rect x="3" y="6" width="16" height="12" rx="2"></rect>180 <rect x="5" y="8" width="12" height="8" fill="#fff" stroke="none"></rect>181 <rect x="19" y="10" width="2" height="4" rx="1" fill="#fff" stroke="none"></rect>182 </svg>183 </span>184 </div>185 </div>186 187 <!-- Header and actions -->188 <div class="header">189 <div class="heading-row">190 <h1 class="title">Library</h1>191 <div class="header-actions">192 <!-- Search icon -->193 <span class="icon" title="Search">194 <svg viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2">195 <circle cx="10" cy="10" r="7"></circle>196 <path d="M21 21l-5.2-5.2"></path>197 </svg>198 </span>199 <!-- Smiley avatar -->200 <div class="avatar" title="Profile">201 <svg viewBox="0 0 24 24" fill="none" stroke-width="1.6">202 <circle cx="12" cy="12" r="8" fill="none" stroke="#2f6e87"></circle>203 <circle cx="9" cy="11" r="1" fill="#2f6e87"></circle>204 <circle cx="15" cy="11" r="1" fill="#2f6e87"></circle>205 <path d="M8.5 14.2c1.5 1.4 5.5 1.4 7 0" stroke="#2f6e87" fill="none" stroke-linecap="round"/>206 </svg>207 </div>208 </div>209 </div>210 211 <!-- Tabs -->212 <div class="tabs">213 <div class="tab active">Library</div>214 <div class="tab">Showcases</div>215 </div>216 217 <!-- Meta row -->218 <div class="meta-row">219 <div class="left">1 item</div>220 <div class="right">221 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#7a8e96" stroke-width="2">222 <path d="M6 9l6 6 6-6"></path>223 </svg>224 <span>DATE ADDED</span>225 <svg width="36" height="36" viewBox="0 0 24 24" fill="#7a8e96">226 <rect x="3" y="3" width="6" height="6" rx="1"></rect>227 <rect x="15" y="3" width="6" height="6" rx="1"></rect>228 <rect x="3" y="15" width="6" height="6" rx="1"></rect>229 <rect x="15" y="15" width="6" height="6" rx="1"></rect>230 </svg>231 </div>232 </div>233 <div class="divider"></div>234 235 <!-- List -->236 <div class="list">237 <div class="item">238 <div class="folder-thumb">Folder</div>239 <div class="info">240 <div class="name">Yoga</div>241 <div class="sub">1 item</div>242 </div>243 <div class="menu">244 <svg width="40" height="40" viewBox="0 0 24 24" fill="#7a8e96">245 <circle cx="12" cy="4" r="2"></circle>246 <circle cx="12" cy="12" r="2"></circle>247 <circle cx="12" cy="20" r="2"></circle>248 </svg>249 </div>250 </div>251 </div>252 </div>253 254 <!-- Floating action button (create folder) -->255 <div class="fab" title="New Folder">256 <svg viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2">257 <rect x="4" y="7" width="14" height="10" rx="2" fill="none"></rect>258 <path d="M4 7h6l2 2h6"></path>259 <path d="M12 10v6"></path>260 <path d="M9 13h6"></path>261 </svg>262 </div>263 264 <!-- Bottom Navigation -->265 <div class="bottom-nav">266 <div class="nav-item">267 <div class="icon">268 <svg viewBox="0 0 24 24" fill="none" stroke="#8da0a6" stroke-width="2">269 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-4H8v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>270 </svg>271 </div>272 <div>Home</div>273 </div>274 <div class="nav-item active">275 <div class="icon">276 <svg viewBox="0 0 24 24" fill="#0d2b3a">277 <rect x="4" y="5" width="16" height="12" rx="2"></rect>278 <polygon points="11,9 16,12 11,15" fill="#fff"></polygon>279 </svg>280 </div>281 <div>Library</div>282 </div>283 284 <!-- Center floating plus overlaps the bar -->285 <div class="center-plus">286 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">287 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-linecap="round"/>288 </svg>289 </div>290 291 <div class="nav-item">292 <div class="icon">293 <svg viewBox="0 0 24 24" fill="none" stroke="#8da0a6" stroke-width="2">294 <path d="M4 19V9"></path>295 <path d="M10 19V5"></path>296 <path d="M16 19v-8"></path>297 <path d="M22 19v-12"></path>298 </svg>299 </div>300 <div>Analytics</div>301 </div>302 <div class="nav-item">303 <div class="icon">304 <svg viewBox="0 0 24 24" fill="none" stroke="#8da0a6" stroke-width="2">305 <rect x="3" y="5" width="18" height="14" rx="2"></rect>306 <polygon points="10,9 15,12 10,15" fill="#8da0a6" stroke="none"></polygon>307 </svg>308 </div>309 <div>Watch</div>310 </div>311 </div>312 313 <!-- Gesture bar -->314 <div class="gesture"></div>315</div>316</body>317</html>