GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Options Sheet</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0E0F0F;14    color: #ECECEC;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 84px;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    color: #EAEAEA;29  }30  .status-time { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }31  .status-icons {32    margin-left: 20px;33    display: flex;34    gap: 22px;35    align-items: center;36  }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .dot {44    width: 10px; height: 10px; background: #CFCFCF; border-radius: 50%;45  }46 47  /* Header / search */48  .header {49    position: absolute;50    top: 84px;51    left: 0;52    width: 1080px;53    height: 160px;54    display: flex;55    align-items: center;56    padding: 0 36px;57    box-sizing: border-box;58  }59  .hamburger {60    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;61    background: rgba(255,255,255,0.06); border-radius: 12px;62  }63  .search-box {64    margin-left: 20px;65    flex: 1;66    height: 96px;67    border-radius: 48px;68    background: #1A1A1A;69    display: flex;70    align-items: center;71    padding: 0 32px;72    box-sizing: border-box;73    color: #B8B8B8;74    font-size: 36px;75  }76  .search-box .folder-icon {77    margin-left: auto;78    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;79    background: rgba(255,255,255,0.06); border-radius: 12px;80  }81  .avatar {82    margin-left: 24px;83    width: 88px; height: 88px; border-radius: 44px; background: #4A3FD3;84    display: flex; align-items: center; justify-content: center; font-weight: 700;85  }86 87  /* Subtitle */88  .subtitle {89    position: absolute;90    top: 260px;91    left: 36px;92    color: #9AA0A6;93    font-size: 34px;94  }95 96  /* Options bottom sheet */97  .sheet {98    position: absolute;99    left: 0;100    top: 360px;101    width: 1080px;102    height: 1580px;103    background: #223029; /* deep greenish dark */104    border-top-left-radius: 52px;105    border-top-right-radius: 52px;106    box-shadow: 0 -20px 60px rgba(0,0,0,0.5) inset;107    padding-top: 40px;108    box-sizing: border-box;109  }110 111  .sheet-list { padding: 0 60px; }112  .item {113    height: 120px;114    display: flex;115    align-items: center;116    gap: 36px;117    color: #E7EAE7;118    font-size: 40px;119    border-bottom: 1px solid transparent;120  }121  .item .icon {122    width: 64px; height: 64px;123    display: flex; align-items: center; justify-content: center;124  }125  .item .small-note { color: #BFC7BE; font-size: 34px; }126 127  .divider {128    height: 1px;129    background: rgba(255,255,255,0.12);130    margin: 18px 0 8px 100px;131  }132 133  /* simple icons */134  .star { color: #FFD54F; }135  .orange-square {136    width: 64px; height: 64px; border-radius: 8px; background: #F5A623; position: relative;137  }138  .orange-square::after {139    content: ""; position: absolute; left: 10px; top: 16px; width: 44px; height: 32px; background: rgba(0,0,0,0.25);140    border-radius: 2px;141  }142  .link-chip {143    padding: 10px 18px;144    background: rgba(255,255,255,0.08);145    border-radius: 22px;146    font-size: 32px;147  }148 149  /* Footer bar (bottom gesture) */150  .gesture {151    position: absolute;152    bottom: 62px;153    left: 50%;154    transform: translateX(-50%);155    width: 520px;156    height: 10px;157    background: #CFCFCF;158    border-radius: 6px;159    opacity: 0.7;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status bar -->167  <div class="status-bar">168    <div class="status-time">12:40</div>169    <div class="status-icons">170      <!-- Simple small icons -->171      <svg width="40" height="40"><rect x="6" y="8" width="28" height="24" fill="#DADADA" rx="3"/></svg>172      <svg width="40" height="40"><rect x="8" y="8" width="24" height="24" fill="#DADADA" rx="12"/></svg>173      <svg width="40" height="40"><circle cx="20" cy="20" r="12" fill="#DADADA"/></svg>174      <div class="dot"></div>175    </div>176    <div class="status-right">177      <svg width="38" height="38"><path d="M6 30h26v-2H6v2zm4-4h18l-2-6h-14l-2 6zm8-18a6 6 0 1 1 0 12 6 6 0 0 1 0-12z" fill="#EDEDED"/></svg>178      <svg width="38" height="38"><rect x="6" y="10" width="26" height="18" fill="#EDEDED" rx="3"/><rect x="12" y="16" width="14" height="6" fill="#0E0F0F"/></svg>179    </div>180  </div>181 182  <!-- Header search -->183  <div class="header">184    <div class="hamburger">185      <svg width="44" height="44"><rect x="8" y="10" width="28" height="4" fill="#CCCCCC"/><rect x="8" y="20" width="28" height="4" fill="#CCCCCC"/><rect x="8" y="30" width="28" height="4" fill="#CCCCCC"/></svg>186    </div>187    <div class="search-box">188      <span>Search Slides</span>189      <div class="folder-icon">190        <svg width="36" height="36"><path d="M4 26v-12h10l2-4h16v16H4z" fill="#D0D0D0"/></svg>191      </div>192    </div>193    <div class="avatar">C</div>194  </div>195 196  <div class="subtitle">Last opened by me</div>197 198  <!-- Bottom sheet with options -->199  <div class="sheet">200    <div class="sheet-list">201      <div class="item">202        <div class="icon orange-square"></div>203        <div style="font-size:44px; font-weight:600;">Book report</div>204      </div>205 206      <div class="item">207        <div class="icon">208          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 7-1 3-6.3 3 6.3 7 1-5 4.9 1.2 6.9z"/></svg>209        </div>210        <div>Add to Starred</div>211      </div>212 213      <div class="item">214        <div class="icon">215          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M18 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6 20v-2a6 6 0 0 1 12 0v2H6z"/></svg>216        </div>217        <div>Share</div>218      </div>219 220      <div class="item">221        <div class="icon">222          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm-9 8v-2a9 9 0 0 1 18 0v2H3z"/></svg>223        </div>224        <div>Manage access</div>225      </div>226 227      <div class="item">228        <div class="icon">229          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M12 2l4 6h-8l4-6zm0 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg>230        </div>231        <div>Available offline</div>232      </div>233 234      <div class="divider"></div>235 236      <div class="item">237        <div class="icon">238          <svg width="56" height="56" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#EAEAEA" stroke-width="2"/><circle cx="12" cy="12" r="1.5" fill="#EAEAEA"/></svg>239        </div>240        <div>Details</div>241      </div>242 243      <div class="item">244        <div class="icon">245          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M14 3H6a2 2 0 0 0-2 2v14l4-3h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path fill="#EAEAEA" d="M20 7v8l-3-2h-3V7h6z"/></svg>246        </div>247        <div>Copy link</div>248      </div>249 250      <div class="item">251        <div class="icon">252          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M3 12l7-7v4h7v6h-7v4L3 12z"/></svg>253        </div>254        <div>Send a copy</div>255      </div>256 257      <div class="item">258        <div class="icon">259          <svg width="56" height="56" viewBox="0 0 24 24"><rect x="4" y="5" width="10" height="14" fill="#EAEAEA" rx="2"/><rect x="16" y="7" width="4" height="10" fill="#A0A8A0" rx="1"/></svg>260        </div>261        <div>Make a copy</div>262      </div>263 264      <div class="item">265        <div class="icon">266          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M12 3v10H7l5 5 5-5h-5V3z"/></svg>267        </div>268        <div>Download</div>269      </div>270 271      <div class="item">272        <div class="icon">273          <svg width="56" height="56" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" fill="#EAEAEA" rx="2"/><path d="M8 10h8v4H8z" fill="#1B1B1B"/></svg>274        </div>275        <div>Save as PowerPoint (.pptx)</div>276      </div>277 278      <div class="item">279        <div class="icon">280          <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#EAEAEA" d="M4 17h16v2H4v-2zm0-4h10v2H4v-2zm0-4h16v2H4V9z"/></svg>281        </div>282        <div>Rename</div>283      </div>284 285    </div>286  </div>287 288  <div class="gesture"></div>289</div>290</body>291</html>