GD-ML/AndroidCode

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>Yoga Folder UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13    box-sizing: border-box;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Top App Bar */24  .appbar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 220px;30    background: #039be5;31    display: flex;32    align-items: center;33    padding: 0 40px;34    color: #fff;35  }36  .appbar .title {37    font-size: 48px;38    font-weight: 700;39    margin-left: 24px;40  }41  .appbar .spacer {42    margin-left: auto;43  }44  .icon-btn {45    width: 64px;46    height: 64px;47    display: inline-flex;48    align-items: center;49    justify-content: center;50  }51  .icon-btn svg {52    width: 44px;53    height: 44px;54    fill: none;55    stroke: #ffffff;56    stroke-width: 6;57    stroke-linecap: round;58    stroke-linejoin: round;59  }60  .more-vert svg circle {61    fill: #ffffff;62    stroke: none;63  }64 65  /* List header row */66  .list-meta {67    position: absolute;68    top: 240px;69    left: 40px;70    right: 40px;71    height: 120px;72    display: flex;73    align-items: center;74  }75  .items-count {76    font-size: 36px;77    font-weight: 700;78    letter-spacing: 2px;79    color: #212121;80  }81  .sort-row {82    margin-left: auto;83    display: inline-flex;84    align-items: center;85    color: #8ea4b2;86    font-weight: 700;87    font-size: 34px;88  }89  .sort-row svg {90    width: 40px;91    height: 40px;92    margin-right: 12px;93    stroke: #8ea4b2;94    fill: none;95    stroke-width: 6;96    stroke-linecap: round;97    stroke-linejoin: round;98  }99 100  /* Empty state */101  .empty-state {102    position: absolute;103    top: 820px;104    left: 0;105    width: 1080px;106    text-align: center;107    color: #37474f;108  }109  .illustration {110    width: 520px;111    height: 520px;112    margin: 0 auto;113    border-radius: 50%;114    background: #e8f8ff;115    display: flex;116    align-items: center;117    justify-content: center;118  }119  .illustration svg {120    width: 320px;121    height: 260px;122  }123  .empty-state .headline {124    margin-top: 60px;125    font-size: 48px;126    font-weight: 700;127  }128  .cta-btn {129    margin: 40px auto 0;130    width: 840px;131    height: 120px;132    background: #03a9f4;133    color: #fff;134    border-radius: 28px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 44px;139    font-weight: 800;140    box-shadow: 0 2px 0 rgba(0,0,0,0.08);141  }142 143  /* Floating action button */144  .fab {145    position: absolute;146    right: 60px;147    bottom: 280px;148    width: 160px;149    height: 160px;150    background: #ffffff;151    border-radius: 50%;152    box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.12);153    display: flex;154    align-items: center;155    justify-content: center;156  }157  .fab svg {158    width: 72px;159    height: 72px;160    stroke: #263238;161    fill: none;162    stroke-width: 6;163    stroke-linecap: round;164    stroke-linejoin: round;165  }166 167  /* Bottom system bar */168  .bottom-bar {169    position: absolute;170    left: 0;171    bottom: 0;172    width: 1080px;173    height: 160px;174    background: #000000;175  }176  .gesture-pill {177    position: absolute;178    left: 50%;179    bottom: 54px;180    transform: translateX(-50%);181    width: 300px;182    height: 16px;183    background: #cfd8dc;184    border-radius: 10px;185    opacity: 0.85;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Top App Bar -->193  <div class="appbar">194    <div class="icon-btn">195      <svg viewBox="0 0 24 24" aria-hidden="true">196        <path d="M5 5 L19 19"></path>197        <path d="M19 5 L5 19"></path>198      </svg>199    </div>200    <div class="title">Yoga</div>201    <div class="spacer"></div>202    <div class="icon-btn more-vert" aria-label="More">203      <svg viewBox="0 0 24 24">204        <circle cx="12" cy="4.5" r="2.5"></circle>205        <circle cx="12" cy="12" r="2.5"></circle>206        <circle cx="12" cy="19.5" r="2.5"></circle>207      </svg>208    </div>209  </div>210 211  <!-- Row with items count and sort -->212  <div class="list-meta">213    <div class="items-count">0 ITEMS</div>214    <div class="sort-row">215      <svg viewBox="0 0 24 24" aria-hidden="true">216        <path d="M12 5 v12"></path>217        <path d="M7 12 l5 5 l5 -5"></path>218      </svg>219      <span>DATE ADDED</span>220    </div>221  </div>222 223  <!-- Empty state content -->224  <div class="empty-state">225    <div class="illustration" aria-hidden="true">226      <svg viewBox="0 0 64 52">227        <!-- Folder back -->228        <path d="M4 16 H24 L28 22 H58 V48 H4 Z" stroke="#000" fill="none"></path>229        <!-- Folder front -->230        <path d="M12 24 H30 L34 28 H52 V48 H12 Z" stroke="#000" fill="none"></path>231        <!-- Slight rounding -->232        <path d="M4 16 Q4 14 6 14 H24 Q26 14 27 16" stroke="#000" fill="none"></path>233      </svg>234    </div>235    <div class="headline">Start by adding videos.</div>236    <div class="cta-btn">Upload a video</div>237  </div>238 239  <!-- Floating Action Button -->240  <div class="fab" title="Add to folder">241    <svg viewBox="0 0 24 24">242      <path d="M3 8 H12 L14 11 H21 V20 H3 Z"></path>243      <path d="M17 5 V11"></path>244      <path d="M14 8 H20"></path>245    </svg>246  </div>247 248  <!-- Bottom system bar -->249  <div class="bottom-bar">250    <div class="gesture-pill"></div>251  </div>252 253</div>254</body>255</html>