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 Options Sheet</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: #f1f3f4;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #0e5b73;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 40px;31    letter-spacing: 0.5px;32  }33  .status-bar .icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 22px;38  }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 110px;44    left: 0;45    width: 1080px;46    height: 150px;47    background: #0e5b73;48    color: #d1e6ed;49    display: flex;50    align-items: center;51    padding: 0 30px;52    box-sizing: border-box;53  }54  .app-bar .title {55    font-size: 56px;56    font-weight: 600;57    color: #d2eef6;58    margin-left: 20px;59  }60  .app-bar .left-icon, .app-bar .right-icon {61    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;62  }63  .app-bar .right-icon { margin-left: auto; }64 65  /* Underlying content (faded) */66  .content {67    position: absolute;68    top: 260px;69    left: 0;70    width: 1080px;71    height: 1880px;72    padding: 30px;73    box-sizing: border-box;74    color: #5f6b73;75  }76  .content .list-header {77    font-size: 36px;78    letter-spacing: 2px;79    margin: 24px 0;80    color: #7d8c96;81  }82  .content .thumb-row {83    width: 960px;84    height: 220px;85    background: #ffffff;86    border-radius: 18px;87    box-shadow: 0 2px 6px rgba(0,0,0,0.08);88    display: flex;89    align-items: center;90    padding: 24px;91    box-sizing: border-box;92  }93  .thumb {94    width: 320px; height: 170px;95    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;96    display: flex; align-items: center; justify-content: center;97    border-radius: 6px;98    font-size: 26px;99  }100 101  /* Dim overlay */102  .scrim {103    position: absolute;104    left: 0; top: 0; right: 0; bottom: 0;105    background: rgba(0,0,0,0.45);106  }107 108  /* Modal sheet */109  .sheet {110    position: absolute;111    left: 115px;112    top: 360px;113    width: 850px;114    background: #ffffff;115    border-radius: 18px;116    box-shadow: 0 22px 50px rgba(0,0,0,0.35);117    overflow: hidden;118  }119  .sheet-header {120    padding: 28px 30px;121    display: flex;122    align-items: center;123    gap: 24px;124    background: #ffffff;125  }126  .sheet-header .thumb-small {127    width: 260px; height: 140px;128    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;129    display: flex; align-items: center; justify-content: center;130    border-radius: 6px;131    font-size: 26px;132  }133  .sheet-header .meta .title {134    font-size: 46px; color: #0b3040; margin-bottom: 10px;135  }136  .sheet-header .meta .sub {137    font-size: 30px; color: #7b909c;138  }139 140  .item {141    display: flex;142    align-items: center;143    gap: 26px;144    padding: 30px;145    height: 110px;146    box-sizing: border-box;147    border-top: 1px solid #eef1f3;148  }149  .item svg { width: 48px; height: 48px; }150  .item .label { font-size: 38px; color: #223843; }151  .item.red .label { color: #e53935; }152  .item .icon-dark { fill: none; stroke: #203b46; stroke-width: 3; }153  .item .icon-fill { fill: #203b46; }154  .item.red .icon-dark { stroke: #e53935; }155  .spacer { height: 10px; }156 157  /* Bottom nav pill */158  .nav-pill {159    position: absolute;160    bottom: 30px;161    left: 50%;162    transform: translateX(-50%);163    width: 250px;164    height: 12px;165    background: #ffffff;166    border-radius: 8px;167    box-shadow: 0 0 0 2px rgba(0,0,0,0.2) inset;168    opacity: 0.95;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div>10:50</div>178    <div class="icons">179      <!-- WiFi -->180      <svg viewBox="0 0 24 24" width="42" height="42">181        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>182        <path d="M6 12c3-2 9-2 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>183        <path d="M10 16c2-1 4-1 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>184        <circle cx="17" cy="18" r="1.2" fill="#fff"/>185      </svg>186      <!-- Battery -->187      <svg viewBox="0 0 24 24" width="42" height="42">188        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>189        <rect x="4" y="8" width="12" height="8" rx="1" fill="#fff"/>190        <rect x="20" y="10" width="2" height="4" rx="1" fill="#fff"/>191      </svg>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="left-icon">198      <svg viewBox="0 0 24 24" width="60" height="60">199        <path d="M6 6l12 12M18 6L6 18" stroke="#cde8ef" stroke-width="2" stroke-linecap="round"/>200      </svg>201    </div>202    <div class="title">Yoga</div>203    <div class="right-icon">204      <svg viewBox="0 0 24 24" width="60" height="60">205        <circle cx="12" cy="4" r="2" fill="#cde8ef"/>206        <circle cx="12" cy="12" r="2" fill="#cde8ef"/>207        <circle cx="12" cy="20" r="2" fill="#cde8ef"/>208      </svg>209    </div>210  </div>211 212  <!-- Underlying page (dimmed by scrim) -->213  <div class="content">214    <div class="list-header">1 ITEM</div>215    <div class="thumb-row">216      <div class="thumb">[IMG: Yoga video thumbnail]</div>217      <div style="margin-left: 28px;">218        <div style="font-size: 46px; color: #223843; margin-bottom: 6px;">Untitled</div>219        <div style="font-size: 30px; color: #7b909c;">0 views • 17 minutes ago</div>220      </div>221      <div style="margin-left: auto; padding-right: 12px;">222        <svg viewBox="0 0 24 24" width="50" height="50">223          <circle cx="12" cy="4" r="2" fill="#7b909c"/>224          <circle cx="12" cy="12" r="2" fill="#7b909c"/>225          <circle cx="12" cy="20" r="2" fill="#7b909c"/>226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Dim overlay -->232  <div class="scrim"></div>233 234  <!-- Modal options sheet -->235  <div class="sheet">236    <div class="sheet-header">237      <div class="thumb-small">[IMG: Yoga video]</div>238      <div class="meta">239        <div class="title">Untitled</div>240        <div class="sub">0 views • 17 minutes ago</div>241      </div>242    </div>243 244    <div class="item">245      <!-- Share -->246      <svg viewBox="0 0 24 24">247        <path class="icon-dark" d="M15 7l-6 3m6 7l-6-3" />248        <circle cx="18" cy="6" r="3" class="icon-dark"/>249        <circle cx="18" cy="18" r="3" class="icon-dark"/>250        <circle cx="6" cy="12" r="3" class="icon-dark"/>251      </svg>252      <div class="label">Share</div>253    </div>254 255    <div class="item">256      <!-- Settings -->257      <svg viewBox="0 0 24 24">258        <circle cx="12" cy="12" r="3" class="icon-dark"/>259        <path class="icon-dark" d="M3 12h3M18 12h3M12 3v3M12 18v3M5.2 5.2l2.1 2.1M16.7 16.7l2.1 2.1M5.2 18.8l2.1-2.1M16.7 7.3l2.1-2.1"/>260      </svg>261      <div class="label">Video settings</div>262    </div>263 264    <div class="item">265      <!-- Analytics -->266      <svg viewBox="0 0 24 24">267        <path class="icon-dark" d="M4 18V6m5 12V9m5 9V7m5 11V4"/>268      </svg>269      <div class="label">Analytics</div>270    </div>271 272    <div class="item">273      <!-- Edit -->274      <svg viewBox="0 0 24 24">275        <path class="icon-dark" d="M4 20l4-1 11-11-3-3L5 16l-1 4zM15 6l3 3"/>276      </svg>277      <div class="label">Edit video</div>278    </div>279 280    <div class="item">281      <!-- Download -->282      <svg viewBox="0 0 24 24">283        <path class="icon-dark" d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/>284      </svg>285      <div class="label">Save to device</div>286    </div>287 288    <div class="item">289      <!-- Add to offline playlist -->290      <svg viewBox="0 0 24 24">291        <path class="icon-dark" d="M3 6h14M3 12h10M3 18h14"/>292        <path class="icon-dark" d="M18 14v8m-4-4h8"/>293      </svg>294      <div class="label">Add to offline playlist</div>295    </div>296 297    <div class="item">298      <!-- Move to folder -->299      <svg viewBox="0 0 24 24">300        <path class="icon-dark" d="M3 7h6l2 2h10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>301      </svg>302      <div class="label">Move to folder</div>303    </div>304 305    <div class="item">306      <!-- Watch later -->307      <svg viewBox="0 0 24 24">308        <circle cx="12" cy="12" r="9" class="icon-dark"/>309        <path class="icon-dark" d="M12 7v6l4 2"/>310      </svg>311      <div class="label">Watch Later</div>312    </div>313 314    <div class="item">315      <!-- Add to showcase -->316      <svg viewBox="0 0 24 24">317        <rect x="3" y="3" width="8" height="8" class="icon-dark"/>318        <rect x="13" y="3" width="8" height="12" class="icon-dark"/>319        <rect x="3" y="13" width="8" height="8" class="icon-dark"/>320      </svg>321      <div class="label">Add to showcase</div>322    </div>323 324    <div class="item">325      <!-- Report -->326      <svg viewBox="0 0 24 24">327        <path class="icon-dark" d="M12 3L2 21h20L12 3z"/>328        <path class="icon-dark" d="M12 9v5M12 18h.01"/>329      </svg>330      <div class="label">Report video</div>331    </div>332 333    <div class="item red">334      <!-- Delete -->335      <svg viewBox="0 0 24 24">336        <path class="icon-dark" d="M4 7h16M9 7V5h6v2M7 7l1 13h8l1-13M10 11v7M14 11v7"/>337        <path class="icon-dark" d="M8 7l8 0"/>338      </svg>339      <div class="label">Delete video</div>340    </div>341  </div>342 343  <!-- Bottom navigation pill -->344  <div class="nav-pill"></div>345</div>346</body>347</html>