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>Mobile UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F6F7F9;13    font-family: Arial, Helvetica, sans-serif;14    color: #2C2C2C;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 110px;21    background: #6E6E74;22    color: #fff;23    display: flex; align-items: center;24    padding: 0 36px;25    font-size: 40px; font-weight: 600;26    letter-spacing: 0.5px;27  }28  .sb-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }29  .icon-sb { width: 40px; height: 40px; }30 31  /* Search row */32  .search-area {33    position: absolute; top: 130px; left: 40px; right: 40px;34  }35  .search-pill {36    height: 110px; border-radius: 56px;37    background: #ECEDEF;38    display: flex; align-items: center;39    box-shadow: inset 0 0 0 1px #DADDE1;40    padding: 0 28px;41  }42  .menu-icon { margin-right: 24px; }43  .search-text { font-size: 40px; color: #6B6E72; }44  .avatar {45    margin-left: auto;46    width: 90px; height: 90px;47    background: #1FA4A3;48    color: white; border-radius: 50%;49    display: flex; align-items: center; justify-content: center;50    font-size: 46px; font-weight: 700;51    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);52  }53 54  /* Tabs */55  .tabs {56    position: absolute; top: 270px; left: 54px; right: 54px;57    display: flex; align-items: center; justify-content: space-between;58    font-size: 38px;59  }60  .tab { color: #5B5E63; }61  .tab.active { color: #3D4BC0; position: relative; font-weight: 600; }62  .tab.active::after {63    content: ""; position: absolute; left: 0; bottom: -16px;64    width: 140px; height: 8px; background: #3D4BC0; border-radius: 4px;65  }66 67  /* List header */68  .list-header {69    position: absolute; top: 360px; left: 0; right: 0;70    padding: 20px 54px;71    border-top: 1px solid #E3E4E8;72    border-bottom: 1px solid #E3E4E8;73    display: flex; align-items: center;74    background: #FFFFFF;75  }76  .header-title { font-size: 36px; color: #4B4E53; display: flex; align-items: center; gap: 12px; }77  .header-actions { margin-left: auto; }78 79  /* Dim overlay behind the sheet */80  .overlay {81    position: absolute; top: 0; left: 0; width: 100%; height: 100%;82    background: rgba(0,0,0,0.22);83  }84 85  /* Bottom sheet */86  .sheet {87    position: absolute; left: 0; right: 0; top: 470px;88    height: 1680px;89    background: #ECE8F3;90    border-top-left-radius: 48px; border-top-right-radius: 48px;91    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);92    padding: 34px 48px 140px 48px;93  }94  .sheet .sheet-top {95    display: flex; align-items: center; gap: 26px;96    background: transparent;97    padding-bottom: 24px;98    border-bottom: 1px solid #D8DAE0;99  }100  .pdf-badge {101    width: 84px; height: 84px; border-radius: 12px;102    background: #D84B43; color: #fff; font-size: 30px;103    display: flex; align-items: center; justify-content: center; font-weight: 700;104  }105  .file-name { font-size: 42px; color: #333; font-weight: 600; }106 107  .action-list { margin-top: 14px; }108  .action-item {109    height: 100px; display: flex; align-items: center;110    gap: 34px; font-size: 40px; color: #3F4248;111  }112  .action-icon {113    width: 56px; height: 56px;114  }115  .divider {116    height: 1px; background: #D8DAE0; margin: 22px 0;117  }118 119  /* Gesture bar */120  .gesture {121    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);122    width: 400px; height: 12px; background: #BDBDBD; border-radius: 10px;123  }124 125  /* Common svg styling */126  svg line, svg path, svg circle, svg polyline, svg rect {127    stroke: #666B72; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div>10:18</div>137    <div class="sb-right">138      <!-- simple signal bars -->139      <svg class="icon-sb" viewBox="0 0 24 24">140        <line x1="3" y1="21" x2="3" y2="13"></line>141        <line x1="9" y1="21" x2="9" y2="9"></line>142        <line x1="15" y1="21" x2="15" y2="5"></line>143        <line x1="21" y1="21" x2="21" y2="2"></line>144      </svg>145      <!-- wifi -->146      <svg class="icon-sb" viewBox="0 0 24 24">147        <path d="M2 9c5-4 15-4 20 0"></path>148        <path d="M5 12c3-3 11-3 14 0"></path>149        <path d="M8 15c2-2 6-2 8 0"></path>150        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"></circle>151      </svg>152      <!-- battery -->153      <svg class="icon-sb" viewBox="0 0 32 24">154        <rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"></rect>155        <rect x="5" y="9" width="18" height="6" rx="1" ry="1" fill="#fff" stroke="none"></rect>156        <rect x="27" y="9" width="3" height="6" rx="1" ry="1" fill="#fff" stroke="none"></rect>157      </svg>158    </div>159  </div>160 161  <!-- Search row -->162  <div class="search-area">163    <div class="search-pill">164      <svg class="menu-icon" width="56" height="56" viewBox="0 0 24 24">165        <line x1="3" y1="6" x2="21" y2="6"></line>166        <line x1="3" y1="12" x2="21" y2="12"></line>167        <line x1="3" y1="18" x2="21" y2="18"></line>168      </svg>169      <div class="search-text">Search in Drive</div>170      <div class="avatar">C</div>171    </div>172  </div>173 174  <!-- Tabs -->175  <div class="tabs">176    <div class="tab active">My Drive</div>177    <div class="tab">Computers</div>178  </div>179 180  <!-- List header -->181  <div class="list-header">182    <div class="header-title">183      <span>Name</span>184      <svg width="28" height="28" viewBox="0 0 24 24">185        <polyline points="6,15 12,9 18,15"></polyline>186      </svg>187    </div>188    <div class="header-actions">189      <svg width="54" height="54" viewBox="0 0 24 24">190        <line x1="3" y1="6" x2="21" y2="6"></line>191        <line x1="3" y1="12" x2="21" y2="12"></line>192        <line x1="3" y1="18" x2="21" y2="18"></line>193      </svg>194    </div>195  </div>196 197  <!-- Overlay dim -->198  <div class="overlay"></div>199 200  <!-- Bottom sheet -->201  <div class="sheet">202    <div class="sheet-top">203      <div class="pdf-badge">PDF</div>204      <div class="file-name">Presentation_sample.pdf</div>205    </div>206 207    <div class="action-list">208      <!-- Share -->209      <div class="action-item">210        <svg class="action-icon" viewBox="0 0 24 24">211          <circle cx="6" cy="12" r="3"></circle>212          <circle cx="18" cy="6" r="3"></circle>213          <circle cx="18" cy="18" r="3"></circle>214          <line x1="8.5" y1="10.5" x2="15.5" y2="7.5"></line>215          <line x1="8.5" y1="13.5" x2="15.5" y2="16.5"></line>216        </svg>217        <div>Share</div>218      </div>219 220      <!-- Manage access -->221      <div class="action-item">222        <svg class="action-icon" viewBox="0 0 24 24">223          <circle cx="12" cy="8" r="4"></circle>224          <path d="M4 20c2-4 14-4 16 0"></path>225          <line x1="19" y1="7" x2="19" y2="13"></line>226          <line x1="16" y1="10" x2="22" y2="10"></line>227        </svg>228        <div>Manage access</div>229      </div>230 231      <!-- Add to Starred -->232      <div class="action-item">233        <svg class="action-icon" viewBox="0 0 24 24">234          <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6 20l1-6L2.5 10 9 9z"></path>235        </svg>236        <div>Add to Starred</div>237      </div>238 239      <!-- Make available offline -->240      <div class="action-item">241        <svg class="action-icon" viewBox="0 0 24 24">242          <circle cx="12" cy="12" r="9"></circle>243          <polyline points="8,12 11,15 16,9"></polyline>244        </svg>245        <div>Make available offline</div>246      </div>247 248      <div class="divider"></div>249 250      <!-- Copy link -->251      <div class="action-item">252        <svg class="action-icon" viewBox="0 0 24 24">253          <path d="M9 7c0-2 2-4 4-4s4 2 4 4-2 4-4 4"></path>254          <path d="M9 17c0 2-2 4-4 4s-4-2-4-4 2-4 4-4"></path>255          <path d="M7 12h6"></path>256        </svg>257        <div>Copy link</div>258      </div>259 260      <!-- Make a copy -->261      <div class="action-item">262        <svg class="action-icon" viewBox="0 0 24 24">263          <rect x="6" y="7" width="12" height="12" rx="2" ry="2"></rect>264          <rect x="3" y="4" width="12" height="12" rx="2" ry="2"></rect>265        </svg>266        <div>Make a copy</div>267      </div>268 269      <!-- Send a copy -->270      <div class="action-item">271        <svg class="action-icon" viewBox="0 0 24 24">272          <path d="M4 12h12"></path>273          <polyline points="12,6 18,12 12,18"></polyline>274        </svg>275        <div>Send a copy</div>276      </div>277 278      <div class="divider"></div>279 280      <!-- Open with -->281      <div class="action-item">282        <svg class="action-icon" viewBox="0 0 24 24">283          <line x1="12" y1="3" x2="12" y2="21"></line>284          <line x1="3" y1="12" x2="21" y2="12"></line>285          <circle cx="12" cy="12" r="3"></circle>286        </svg>287        <div>Open with</div>288      </div>289 290      <!-- Download -->291      <div class="action-item">292        <svg class="action-icon" viewBox="0 0 24 24">293          <polyline points="6,9 12,15 18,9"></polyline>294          <line x1="12" y1="4" x2="12" y2="15"></line>295          <line x1="5" y1="20" x2="19" y2="20"></line>296        </svg>297        <div>Download</div>298      </div>299 300      <!-- Rename -->301      <div class="action-item">302        <svg class="action-icon" viewBox="0 0 24 24">303          <path d="M4 20l4-1 9-9-3-3-9 9-1 4z"></path>304          <path d="M14 7l3 3"></path>305        </svg>306        <div>Rename</div>307      </div>308 309      <!-- Add shortcut to Drive -->310      <div class="action-item">311        <svg class="action-icon" viewBox="0 0 24 24">312          <polygon points="12,4 19,16 5,16"></polygon>313          <line x1="19" y1="6" x2="19" y2="12"></line>314          <line x1="16" y1="9" x2="22" y2="9"></line>315        </svg>316        <div>Add shortcut to Drive</div>317      </div>318 319      <!-- Move -->320      <div class="action-item">321        <svg class="action-icon" viewBox="0 0 24 24">322          <rect x="3" y="6" width="18" height="12" rx="2" ry="2"></rect>323          <polyline points="10,9 14,12 10,15"></polyline>324        </svg>325        <div>Move</div>326      </div>327    </div>328  </div>329 330  <!-- Gesture bar -->331  <div class="gesture"></div>332</div>333</body>334</html>