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>Drive Bottom Sheet UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F2F0F6;12    border-radius: 0;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 96px; background: #DCD7E0;19    display: flex; align-items: center; padding: 0 36px; color: #403F45; font-weight: 600;20    font-size: 36px;21  }22  .status-center { margin: 0 auto; display: flex; gap: 22px; align-items: center; opacity: 0.9; }23  .status-right { display: flex; gap: 26px; align-items: center; }24 25  /* Header/search */26  .header {27    position: absolute; top: 108px; left: 24px; right: 24px;28  }29  .search-row {30    display: flex; align-items: center; gap: 24px;31  }32  .hamburger {33    width: 72px; height: 72px; border-radius: 18px; display: flex; justify-content: center; align-items: center;34  }35  .search-pill {36    flex: 1; height: 88px; border-radius: 44px; background: #EFEFF3; border: 1px solid #D2D0D8;37    display: flex; align-items: center; padding: 0 28px; color: #6A6A73; font-size: 34px;38    box-sizing: border-box;39  }40  .avatar {41    width: 72px; height: 72px; border-radius: 36px; background: #1FA5A6; color: #fff;42    display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 34px;43  }44 45  .tabs {46    margin-top: 36px; display: flex; align-items: center; justify-content: space-between; color: #55565F;47    font-size: 34px;48  }49  .tab-labels { display: flex; gap: 42px; align-items: center; }50  .tab { padding-bottom: 12px; position: relative; }51  .tab.active { color: #2D5AF3; font-weight: 700; }52  .tab.active::after {53    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #2D5AF3; border-radius: 4px;54  }55 56  /* List header */57  .list-header {58    margin-top: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px;59    color: #4B4B54; font-size: 30px;60  }61 62  /* Dimmed app background to simulate modal overlay */63  .dim {64    position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.06);65  }66 67  /* Bottom sheet */68  .sheet {69    position: absolute; left: 0; right: 0; top: 530px; height: 1650px;70    background: #ECE8F3; border-top-left-radius: 44px; border-top-right-radius: 44px;71    box-shadow: 0 -10px 24px rgba(0,0,0,0.08);72  }73  .sheet-header {74    display: flex; align-items: center; gap: 24px; padding: 32px 36px; background: #EDE9F5;75    border-top-left-radius: 44px; border-top-right-radius: 44px; font-size: 34px; color: #1F1F24;76  }77  .pdf-badge {78    width: 84px; height: 84px; background: #E55245; border: 1px solid #C54438;79    display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 800; border-radius: 12px;80  }81  .options {82    padding: 10px 0;83  }84  .option {85    display: flex; align-items: center; gap: 30px; padding: 28px 36px; color: #3E3E45; font-size: 34px;86  }87  .option .icon {88    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;89  }90  .divider {91    height: 2px; background: #D4D2DB; margin: 18px 36px;92  }93 94  /* Bottom gesture bar */95  .gesture {96    position: absolute; left: 50%; transform: translateX(-50%);97    bottom: 32px; width: 360px; height: 18px; background: #A9A8B2; border-radius: 14px; opacity: 0.7;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div>2:52</div>107    <div class="status-center">108      <!-- small dots/indicators -->109      <svg width="22" height="22"><circle cx="11" cy="11" r="6" fill="#606068"/></svg>110      <svg width="22" height="22"><rect x="4" y="4" width="14" height="14" rx="3" fill="#606068"/></svg>111      <svg width="22" height="22"><circle cx="11" cy="11" r="3" fill="#606068"/><circle cx="11" cy="11" r="10" stroke="#606068" stroke-width="2" fill="none"/></svg>112    </div>113    <div class="status-right">114      <!-- WiFi -->115      <svg width="42" height="42" viewBox="0 0 24 24">116        <path d="M2 8c5-4 15-4 20 0" stroke="#404048" stroke-width="2" fill="none" />117        <path d="M5 12c4-3 10-3 14 0" stroke="#404048" stroke-width="2" fill="none" />118        <path d="M9 16c2-2 4-2 6 0" stroke="#404048" stroke-width="2" fill="none" />119        <circle cx="12" cy="19" r="1.8" fill="#404048"/>120      </svg>121      <!-- Battery -->122      <svg width="46" height="42" viewBox="0 0 28 18">123        <rect x="1" y="3" width="22" height="12" rx="3" stroke="#404048" stroke-width="2" fill="none"/>124        <rect x="4" y="6" width="16" height="6" rx="2" fill="#404048"/>125        <rect x="23" y="6" width="3" height="6" rx="1" fill="#404048"/>126      </svg>127    </div>128  </div>129 130  <!-- Header content -->131  <div class="header">132    <div class="search-row">133      <div class="hamburger">134        <svg width="44" height="44" viewBox="0 0 24 24">135          <path d="M3 6h18M3 12h18M3 18h18" stroke="#3C3C46" stroke-width="2" stroke-linecap="round"/>136        </svg>137      </div>138      <div class="search-pill">139        <svg width="36" height="36" viewBox="0 0 24 24" style="margin-right:12px;">140          <circle cx="11" cy="11" r="7" stroke="#7A7A84" stroke-width="2" fill="none"/>141          <path d="M20 20l-4-4" stroke="#7A7A84" stroke-width="2" stroke-linecap="round"/>142        </svg>143        Search in Drive144      </div>145      <div class="avatar">C</div>146    </div>147 148    <div class="tabs">149      <div class="tab-labels">150        <div class="tab active">My Drive</div>151        <div class="tab">Computers</div>152      </div>153      <div class="hamburger" style="width:64px;height:64px;">154        <svg width="40" height="40" viewBox="0 0 24 24">155          <path d="M5 7h14M5 12h14M5 17h14" stroke="#4B4B54" stroke-width="2" stroke-linecap="round"/>156        </svg>157      </div>158    </div>159 160    <div class="list-header">161      <div>Name ↑</div>162      <svg width="48" height="48" viewBox="0 0 24 24">163        <path d="M4 6h16M7 12h10M10 18h4" stroke="#4B4B54" stroke-width="2" stroke-linecap="round"/>164      </svg>165    </div>166  </div>167 168  <!-- Dim overlay -->169  <div class="dim"></div>170 171  <!-- Bottom sheet -->172  <div class="sheet">173    <div class="sheet-header">174      <div class="pdf-badge">PDF</div>175      <div>YMCA Org..pdf</div>176    </div>177 178    <div class="options">179      <div class="option">180        <div class="icon">181          <!-- person plus -->182          <svg width="56" height="56" viewBox="0 0 24 24">183            <circle cx="10" cy="8" r="4" stroke="#6E6E78" stroke-width="2" fill="none"/>184            <path d="M3 20c2-4 12-4 14 0" stroke="#6E6E78" stroke-width="2" fill="none"/>185            <path d="M18 7v6M15 10h6" stroke="#6E6E78" stroke-width="2" stroke-linecap="round"/>186          </svg>187        </div>188        <div>Share</div>189      </div>190 191      <div class="option">192        <div class="icon">193          <!-- people -->194          <svg width="56" height="56" viewBox="0 0 24 24">195            <circle cx="8" cy="9" r="3.5" stroke="#6E6E78" stroke-width="2" fill="none"/>196            <circle cx="16" cy="9" r="3" stroke="#6E6E78" stroke-width="2" fill="none"/>197            <path d="M2 20c2-4 10-4 12 0M10 18c2-3 8-3 10 0" stroke="#6E6E78" stroke-width="2" fill="none"/>198          </svg>199        </div>200        <div>Manage access</div>201      </div>202 203      <div class="option">204        <div class="icon">205          <!-- star -->206          <svg width="56" height="56" viewBox="0 0 24 24">207            <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 10l6-1z" fill="none" stroke="#6E6E78" stroke-width="2" stroke-linejoin="round"/>208          </svg>209        </div>210        <div>Add to Starred</div>211      </div>212 213      <div class="option">214        <div class="icon">215          <!-- offline -->216          <svg width="56" height="56" viewBox="0 0 24 24">217            <circle cx="12" cy="12" r="9" stroke="#6E6E78" stroke-width="2" fill="none"/>218            <path d="M12 7v6l4 2" stroke="#6E6E78" stroke-width="2" stroke-linecap="round"/>219          </svg>220        </div>221        <div>Make available offline</div>222      </div>223 224      <div class="divider"></div>225 226      <div class="option">227        <div class="icon">228          <!-- link -->229          <svg width="56" height="56" viewBox="0 0 24 24">230            <path d="M7 12a4 4 0 0 1 4-4h3M17 12a4 4 0 0 1-4 4h-3" stroke="#6E6E78" stroke-width="2" fill="none" />231            <path d="M9 12h6" stroke="#6E6E78" stroke-width="2"/>232          </svg>233        </div>234        <div>Copy link</div>235      </div>236 237      <div class="option">238        <div class="icon">239          <!-- copy -->240          <svg width="56" height="56" viewBox="0 0 24 24">241            <rect x="8" y="8" width="10" height="10" rx="2" stroke="#6E6E78" stroke-width="2" fill="none"/>242            <rect x="4" y="4" width="10" height="10" rx="2" stroke="#6E6E78" stroke-width="2" fill="none"/>243          </svg>244        </div>245        <div>Make a copy</div>246      </div>247 248      <div class="option">249        <div class="icon">250          <!-- send -->251          <svg width="56" height="56" viewBox="0 0 24 24">252            <path d="M4 20l16-8L4 4l4 6 8 2-8 2z" fill="none" stroke="#6E6E78" stroke-width="2" stroke-linejoin="round"/>253          </svg>254        </div>255        <div>Send a copy</div>256      </div>257 258      <div class="divider"></div>259 260      <div class="option">261        <div class="icon">262          <!-- open with four squares -->263          <svg width="56" height="56" viewBox="0 0 24 24">264            <rect x="4" y="4" width="6" height="6" rx="1.5" stroke="#6E6E78" stroke-width="2" fill="none"/>265            <rect x="14" y="4" width="6" height="6" rx="1.5" stroke="#6E6E78" stroke-width="2" fill="none"/>266            <rect x="4" y="14" width="6" height="6" rx="1.5" stroke="#6E6E78" stroke-width="2" fill="none"/>267            <rect x="14" y="14" width="6" height="6" rx="1.5" stroke="#6E6E78" stroke-width="2" fill="none"/>268          </svg>269        </div>270        <div>Open with</div>271      </div>272 273      <div class="option">274        <div class="icon">275          <!-- download -->276          <svg width="56" height="56" viewBox="0 0 24 24">277            <path d="M12 4v9M8 9l4 4 4-4" stroke="#6E6E78" stroke-width="2" stroke-linecap="round" fill="none"/>278            <path d="M5 18h14" stroke="#6E6E78" stroke-width="2" stroke-linecap="round"/>279          </svg>280        </div>281        <div>Download</div>282      </div>283 284      <div class="option">285        <div class="icon">286          <!-- pencil -->287          <svg width="56" height="56" viewBox="0 0 24 24">288            <path d="M4 20l4-1 9-9-3-3-9 9-1 4z" stroke="#6E6E78" stroke-width="2" fill="none"/>289            <path d="M14 5l3 3" stroke="#6E6E78" stroke-width="2"/>290          </svg>291        </div>292        <div>Rename</div>293      </div>294 295      <div class="option">296        <div class="icon">297          <!-- add shortcut -->298          <svg width="56" height="56" viewBox="0 0 24 24">299            <rect x="4" y="6" width="12" height="10" rx="2" stroke="#6E6E78" stroke-width="2" fill="none"/>300            <path d="M20 11v6h-6" stroke="#6E6E78" stroke-width="2" fill="none"/>301            <path d="M17 11v6M14 14h6" stroke="#6E6E78" stroke-width="2" stroke-linecap="round"/>302          </svg>303        </div>304        <div>Add shortcut to Drive</div>305      </div>306 307      <div class="option">308        <div class="icon">309          <!-- move/folder -->310          <svg width="56" height="56" viewBox="0 0 24 24">311            <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="#6E6E78" stroke-width="2" fill="none"/>312          </svg>313        </div>314        <div>Move</div>315      </div>316 317    </div>318  </div>319 320  <!-- Bottom gesture bar -->321  <div class="gesture"></div>322</div>323</body>324</html>