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>Options Sheet - beach.mp4</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0f1313;15    color: #E8F0EF;16  }17 18  /* Status bar */19  .statusbar {20    height: 96px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #d5dddd;26    font-size: 38px;27    letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .status-icons svg { width: 36px; height: 36px; fill: none; stroke: #d5dddd; stroke-width: 2.5; }35 36  /* App bar */37  .appbar {38    height: 112px;39    display: flex;40    align-items: center;41    padding: 0 24px;42    color: #8aa19d;43  }44  .appbar .left { display: flex; align-items: center; gap: 24px; }45  .appbar .title { font-size: 50px; font-weight: 500; }46  .appbar .right { margin-left: auto; display: flex; align-items: center; gap: 28px; }47  .appbar svg { width: 48px; height: 48px; stroke: #8aa19d; fill: none; stroke-width: 2.8; }48 49  /* Content preview (video) */50  .video-preview {51    width: 100%;52    height: 520px;53    background: #000;54  }55 56  /* Bottom sheet */57  .sheet {58    position: absolute;59    left: 0;60    right: 0;61    bottom: 0;62    top: 500px;63    background: #223533;64    border-top-left-radius: 36px;65    border-top-right-radius: 36px;66    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);67    overflow: hidden;68  }69  .sheet-inner {70    padding: 24px 32px 140px;71    height: 100%;72    overflow-y: hidden;73  }74 75  .file-row {76    display: flex;77    align-items: center;78    gap: 22px;79    padding: 18px 8px 28px;80    border-bottom: 1px solid rgba(255,255,255,0.08);81  }82  .file-icon {83    width: 64px;84    height: 64px;85    background: #f48fb1;86    border-radius: 12px;87    display: flex;88    align-items: center;89    justify-content: center;90    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18);91  }92  .file-icon:before {93    content: "";94    width: 36px;95    height: 20px;96    border: 3px solid rgba(255,255,255,0.9);97    border-top: 0;98    display: block;99  }100  .file-name { font-size: 46px; color: #EAF3F2; }101 102  .menu {103    padding-top: 6px;104  }105  .row {106    display: flex;107    align-items: center;108    gap: 28px;109    padding: 26px 8px;110    min-height: 98px;111    color: #E8F0EF;112    font-size: 40px;113  }114  .row + .divider { margin: 8px 0; }115  .icon {116    width: 64px;117    height: 64px;118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .icon svg { width: 46px; height: 46px; stroke: #CFE2DF; fill: none; stroke-width: 2.8; }123  .divider { height: 1px; background: rgba(255,255,255,0.08); margin-left: 92px; }124 125  /* Gesture pill */126  .gesture-pill {127    position: absolute;128    left: 50%;129    transform: translateX(-50%);130    bottom: 20px;131    width: 280px;132    height: 10px;133    border-radius: 8px;134    background: rgba(255,255,255,0.85);135  }136</style>137</head>138<body>139<div id="render-target">140  <!-- Status bar -->141  <div class="statusbar">142    <div class="time">3:39</div>143    <div class="status-icons">144      <!-- cellular -->145      <svg viewBox="0 0 24 24"><path d="M3 20h2v-4H3zM8 20h2v-7H8zM13 20h2v-10h-2zM18 20h2V6h-2z"/></svg>146      <!-- wifi -->147      <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"/><path d="M5 12c3.5-3 10.5-3 14 0"/><path d="M8.5 15.5c2-2 5-2 7 0"/><circle cx="12" cy="19" r="1.4" fill="#d5dddd" stroke="none"/></svg>148      <!-- battery -->149      <svg viewBox="0 0 26 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect><rect x="20.5" y="9" width="3" height="6"></rect><rect x="4.5" y="8.5" width="13" height="7" fill="#d5dddd" stroke="none"></rect></svg>150    </div>151  </div>152 153  <!-- App bar -->154  <div class="appbar">155    <div class="left">156      <!-- Back arrow -->157      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>158      <div class="title">beach.mp4</div>159    </div>160    <div class="right">161      <!-- Comment icon -->162      <svg viewBox="0 0 24 24"><path d="M4 4h16v11H7l-3 3z"/></svg>163      <!-- Overflow -->164      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2" fill="#8aa19d" stroke="none"/><circle cx="12" cy="12" r="2.2" fill="#8aa19d" stroke="none"/><circle cx="12" cy="19" r="2.2" fill="#8aa19d" stroke="none"/></svg>165    </div>166  </div>167 168  <!-- Video preview area -->169  <div class="video-preview"></div>170 171  <!-- Bottom sheet -->172  <div class="sheet">173    <div class="sheet-inner">174      <div class="file-row">175        <div class="file-icon"></div>176        <div class="file-name">beach.mp4</div>177      </div>178 179      <div class="menu">180        <div class="row">181          <div class="icon">182            <!-- person + -->183            <svg viewBox="0 0 24 24">184              <circle cx="9" cy="8" r="3.2"></circle>185              <path d="M4 18c0-3 3.2-4.5 5-4.5S14 15 14 18" />186              <circle cx="18" cy="9" r="3.0"></circle>187              <path d="M18 12v3" />188              <path d="M16.5 13.5h3" />189            </svg>190          </div>191          <div>Share</div>192        </div>193 194        <div class="row">195          <div class="icon">196            <!-- two people -->197            <svg viewBox="0 0 24 24">198              <circle cx="8" cy="9" r="3"></circle>199              <circle cx="16.5" cy="10" r="2.5"></circle>200              <path d="M3.5 19c0-3 3-4.5 4.5-4.5S12.5 16 12.5 19" />201              <path d="M14 19c.3-2 2.4-3.2 3.9-3.2S22 17 22 19" />202            </svg>203          </div>204          <div>Manage access</div>205        </div>206 207        <div class="row">208          <div class="icon">209            <!-- star -->210            <svg viewBox="0 0 24 24">211              <path d="M12 3l3 6 6 .9-4.3 4.1 1 6-5.7-3.1L6.3 20l1-6L3 9.9 9 9z"/>212            </svg>213          </div>214          <div>Add to Starred</div>215        </div>216 217        <div class="row">218          <div class="icon">219            <!-- offline circle check -->220            <svg viewBox="0 0 24 24">221              <circle cx="12" cy="12" r="8"></circle>222              <path d="M8 12l3 3 5-6"/>223            </svg>224          </div>225          <div>Make available offline</div>226        </div>227 228        <div class="divider"></div>229 230        <div class="row">231          <div class="icon">232            <!-- link -->233            <svg viewBox="0 0 24 24">234              <path d="M10 8H8a5 5 0 0 0 0 10h2"/>235              <path d="M14 16h2a5 5 0 0 0 0-10h-2"/>236              <path d="M9 12h6"/>237            </svg>238          </div>239          <div>Copy link</div>240        </div>241 242        <div class="row">243          <div class="icon">244            <!-- copy -->245            <svg viewBox="0 0 24 24">246              <rect x="9" y="9" width="10" height="10" rx="2"></rect>247              <rect x="5" y="5" width="10" height="10" rx="2"></rect>248            </svg>249          </div>250          <div>Make a copy</div>251        </div>252 253        <div class="row">254          <div class="icon">255            <!-- send/arrow -->256            <svg viewBox="0 0 24 24">257              <path d="M3 12h12"/>258              <path d="M11 6l6 6-6 6"/>259            </svg>260          </div>261          <div>Send a copy</div>262        </div>263 264        <div class="divider"></div>265 266        <div class="row">267          <div class="icon">268            <!-- open with (arrows out) -->269            <svg viewBox="0 0 24 24">270              <path d="M4 9V4h5"/>271              <path d="M20 9V4h-5"/>272              <path d="M4 15v5h5"/>273              <path d="M20 15v5h-5"/>274            </svg>275          </div>276          <div>Open with</div>277        </div>278 279        <div class="row">280          <div class="icon">281            <!-- download -->282            <svg viewBox="0 0 24 24">283              <path d="M12 4v10"/>284              <path d="M8 10l4 4 4-4"/>285              <path d="M4 20h16"/>286            </svg>287          </div>288          <div>Download</div>289        </div>290 291        <div class="row">292          <div class="icon">293            <!-- rename (pencil) -->294            <svg viewBox="0 0 24 24">295              <path d="M4 20l4-1 9-9-3-3-9 9-1 4z"/>296              <path d="M14 5l3 3"/>297            </svg>298          </div>299          <div>Rename</div>300        </div>301 302        <div class="row">303          <div class="icon">304            <!-- shortcut to drive (plus in diamond) -->305            <svg viewBox="0 0 24 24">306              <path d="M12 3l7 7-7 7-7-7 7-7z"/>307              <path d="M12 8v8M8 12h8"/>308            </svg>309          </div>310          <div>Add shortcut to Drive</div>311        </div>312      </div>313    </div>314  </div>315 316  <!-- Gesture pill -->317  <div class="gesture-pill"></div>318</div>319</body>320</html>