GD-ML/AndroidCode

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>Yoga - Video List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar + App bar */18  .statusbar {19    height: 90px;20    background: #42a5f5;21    color: #fff;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    box-sizing: border-box;27  }28  .status-time { font-size: 34px; letter-spacing: 0.5px; }29  .status-icons { display: flex; align-items: center; gap: 24px; }30  .status-icons svg { width: 38px; height: 38px; fill: #fff; }31 32  .appbar {33    height: 150px;34    background: #42a5f5;35    color: #fff;36    display: flex;37    align-items: center;38    padding: 0 16px;39    box-sizing: border-box;40  }41  .appbar .left, .appbar .right {42    width: 120px;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  .appbar .title {48    flex: 1;49    display: flex;50    align-items: center;51    gap: 18px;52  }53  .appbar .title-text {54    font-size: 54px;55    font-weight: 500;56  }57  .appbar svg { fill: #fff; width: 54px; height: 54px; }58 59  /* Sort / meta bar */60  .meta-bar {61    height: 140px;62    background: #fff;63    display: flex;64    align-items: center;65    justify-content: space-between;66    padding: 0 36px;67    box-sizing: border-box;68    border-bottom: 1px solid #e0e0e0;69  }70  .meta-left {71    font-size: 30px;72    color: #616161;73    letter-spacing: 1px;74  }75  .meta-right {76    font-size: 28px;77    color: #757575;78    display: flex;79    align-items: center;80    gap: 14px;81  }82  .meta-right svg { width: 36px; height: 36px; fill: #9e9e9e; }83 84  /* List item */85  .list {86    padding: 24px 0;87  }88  .item {89    display: flex;90    padding: 28px 36px;91    box-sizing: border-box;92    align-items: flex-start;93    gap: 28px;94    border-bottom: 1px solid #eeeeee;95  }96  .thumb {97    width: 420px;98    height: 240px;99    border-radius: 18px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    position: relative;103    overflow: hidden;104    display: flex;105    align-items: center;106    justify-content: center;107    color: #757575;108    font-size: 26px;109    text-align: center;110    line-height: 1.2;111  }112  .time-badge {113    position: absolute;114    right: 10px;115    bottom: 10px;116    background: rgba(0,0,0,0.7);117    color: #fff;118    padding: 6px 12px;119    border-radius: 8px;120    font-size: 24px;121  }122  .details {123    flex: 1;124    min-width: 0;125    padding-top: 6px;126  }127  .title-row {128    display: flex;129    align-items: flex-start;130    justify-content: space-between;131  }132  .item-title {133    font-size: 42px;134    color: #212121;135    font-weight: 600;136  }137  .item-menu {138    width: 60px;139    height: 60px;140    display: flex;141    align-items: center;142    justify-content: center;143  }144  .item-menu svg { width: 36px; height: 36px; fill: #9e9e9e; }145  .item-sub {146    margin-top: 12px;147    font-size: 28px;148    color: #757575;149  }150 151  /* Floating Action Button */152  .fab {153    position: absolute;154    right: 60px;155    bottom: 210px;156    width: 140px;157    height: 140px;158    border-radius: 50%;159    background: #ffffff;160    box-shadow: 0 10px 24px rgba(0,0,0,0.25), 0 6px 10px rgba(0,0,0,0.15);161    display: flex;162    align-items: center;163    justify-content: center;164  }165  .fab svg { width: 64px; height: 64px; fill: #263238; }166 167  /* Bottom gesture/nav area */168  .bottom-nav {169    position: absolute;170    left: 0;171    right: 0;172    bottom: 0;173    height: 140px;174    background: #000000;175  }176  .gesture {177    position: absolute;178    left: 50%;179    transform: translateX(-50%);180    bottom: 40px;181    width: 220px;182    height: 12px;183    background: #e0e0e0;184    border-radius: 8px;185  }186</style>187</head>188<body>189<div id="render-target">190  <!-- Status Bar -->191  <div class="statusbar">192    <div class="status-time">10:52</div>193    <div class="status-icons">194      <!-- WiFi -->195      <svg viewBox="0 0 24 24" aria-hidden="true">196        <path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM2 8.5c5.5-4.7 14.5-4.7 20 0l-1.7 1.7c-4.3-3.6-12.3-3.6-16.6 0L2 8.5zm4 4c3.9-3.2 10.1-3.2 14 0l-1.7 1.7c-2.8-2.3-7.8-2.3-10.6 0L6 12.5zm4 4c2.2-1.8 5.8-1.8 8 0L16.3 18c-1.6-1.3-5-1.3-6.6 0L10 16.5z"/>197      </svg>198      <!-- Battery -->199      <svg viewBox="0 0 24 24" aria-hidden="true">200        <path d="M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2h-2v-2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h8zm2 10V8H6v8h12z"/>201      </svg>202    </div>203  </div>204 205  <!-- App Bar -->206  <div class="appbar">207    <div class="left">208      <!-- Close (X) icon -->209      <svg viewBox="0 0 24 24" aria-hidden="true">210        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>211      </svg>212    </div>213    <div class="title">214      <span class="title-text">Yoga</span>215    </div>216    <div class="right">217      <!-- More vert -->218      <svg viewBox="0 0 24 24" aria-hidden="true">219        <circle cx="12" cy="5" r="2"></circle>220        <circle cx="12" cy="12" r="2"></circle>221        <circle cx="12" cy="19" r="2"></circle>222      </svg>223    </div>224  </div>225 226  <!-- Meta / sort bar -->227  <div class="meta-bar">228    <div class="meta-left">1 ITEM</div>229    <div class="meta-right">230      <svg viewBox="0 0 24 24" aria-hidden="true">231        <path d="M7 10l5 5 5-5H7z"/>232      </svg>233      <span>DATE ADDED</span>234    </div>235  </div>236 237  <!-- Content list -->238  <div class="list">239    <div class="item">240      <div class="thumb">241        [IMG: Yoga pose video thumbnail]242        <div class="time-badge">00:29</div>243      </div>244      <div class="details">245        <div class="title-row">246          <div class="item-title">Untitled</div>247          <div class="item-menu">248            <svg viewBox="0 0 24 24" aria-hidden="true">249              <circle cx="12" cy="5" r="2"></circle>250              <circle cx="12" cy="12" r="2"></circle>251              <circle cx="12" cy="19" r="2"></circle>252            </svg>253          </div>254        </div>255        <div class="item-sub">0 views • 15 minutes ago</div>256      </div>257    </div>258  </div>259 260  <!-- Floating Action Button -->261  <div class="fab" title="New folder">262    <svg viewBox="0 0 24 24" aria-hidden="true">263      <path d="M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7l-3-2zM12 11h2v3h3v2h-3v3h-2v-3H9v-2h3v-3z"/>264    </svg>265  </div>266 267  <!-- Bottom navigation / gesture bar -->268  <div class="bottom-nav">269    <div class="gesture"></div>270  </div>271</div>272</body>273</html>