GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Drive Bottom Sheet UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#121417; color:#E7E9EC;10  }11 12  /* Status bar */13  .statusbar {14    position:absolute; top:0; left:0; width:100%; height:110px;15    padding:0 36px; box-sizing:border-box; color:#eaeef3; font-weight:600;16    display:flex; align-items:center; justify-content:space-between;17    letter-spacing:0.5px;18  }19  .sb-left { font-size:44px; }20  .sb-right { display:flex; align-items:center; gap:30px; }21  .sb-icon { width:42px; height:42px; border-radius:8px; background:#eaeef3; opacity:0.9; }22 23  /* Top search area */24  .top-area {25    position:absolute; top:110px; left:0; width:100%; height:210px;26    padding:0 36px; box-sizing:border-box;27    display:flex; align-items:center; justify-content:space-between;28  }29  .hamburger {30    width:80px; height:80px; border-radius:16px; background:#1c1f24;31    display:flex; align-items:center; justify-content:center;32  }33  .hamburger svg { fill:#B0BEC5; }34  .search-box {35    flex:1; margin:0 24px; height:96px; border-radius:48px;36    background:#1c1f24; color:#9aa5b1; display:flex; align-items:center; padding:0 32px;37    box-sizing:border-box; font-size:40px;38  }39  .avatar {40    width:96px; height:96px; border-radius:48px; background:#2b2f35; color:#9aa5b1;41    display:flex; align-items:center; justify-content:center; font-weight:700;42  }43 44  /* Tabs */45  .tabs {46    position:absolute; top:320px; left:0; width:100%; height:100px;47    padding:0 36px; box-sizing:border-box; display:flex; align-items:flex-end; gap:44px;48  }49  .tab { font-size:46px; color:#9aa5b1; padding-bottom:16px; }50  .tab.active { color:#8ab4f8; position:relative; }51  .tab.active::after {52    content:""; position:absolute; left:0; bottom:0; width:160px; height:6px; background:#8ab4f8; border-radius:3px;53  }54 55  /* Behind content placeholders */56  .content-area {57    position:absolute; top:420px; left:0; right:0; bottom:0;58    padding:40px; box-sizing:border-box;59  }60  .folder-row { display:flex; gap:40px; }61  .folder {62    width:420px; height:220px; background:#1a1d22; border:1px solid #2a2e35; border-radius:28px;63    display:flex; align-items:center; justify-content:center; color:#8592a0; font-size:38px;64  }65 66  /* Bottom sheet */67  .sheet {68    position:absolute; left:0; bottom:0; width:100%; height:1750px;69    background:#24272d; border-top-left-radius:48px; border-top-right-radius:48px;70    box-shadow:0 -20px 40px rgba(0,0,0,0.6);71    padding:40px 44px 160px; box-sizing:border-box;72  }73  .sheet-header {74    display:flex; align-items:center; gap:28px; margin-bottom:20px;75    font-size:50px; font-weight:700; color:#e9edf2;76  }77  .doc-icon {78    width:64px; height:64px; border-radius:8px; background:#3b6df6;79    display:flex; align-items:center; justify-content:center;80  }81  .doc-icon svg { fill:#e9edf2; }82 83  .item { display:flex; align-items:center; gap:28px; padding:28px 0; }84  .item .i {85    width:64px; height:64px; border-radius:16px; background:#2b2f35; display:flex; align-items:center; justify-content:center;86  }87  .item svg { fill:#b9c3d0; }88  .item .label { font-size:46px; color:#e7e9ec; }89 90  .divider {91    height:1px; background:#333841; margin:22px 0;92  }93 94  /* Bottom home indicator */95  .home-indicator {96    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);97    width:500px; height:14px; border-radius:14px; background:#a8adb5; opacity:0.6;98  }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="statusbar">106    <div class="sb-left">10:58</div>107    <div class="sb-right">108      <div class="sb-icon"></div>109      <div class="sb-icon"></div>110      <div class="sb-icon"></div>111      <div class="sb-icon"></div>112    </div>113  </div>114 115  <!-- Top search area -->116  <div class="top-area">117    <div class="hamburger">118      <svg width="44" height="44" viewBox="0 0 24 24">119        <rect x="3" y="5" width="18" height="2"></rect>120        <rect x="3" y="11" width="18" height="2"></rect>121        <rect x="3" y="17" width="18" height="2"></rect>122      </svg>123    </div>124    <div class="search-box">Search in Drive</div>125    <div class="avatar">C</div>126  </div>127 128  <!-- Tabs -->129  <div class="tabs">130    <div class="tab active">My Drive</div>131    <div class="tab">Computers</div>132  </div>133 134  <!-- Content area placeholders -->135  <div class="content-area">136    <div class="folder-row">137      <div class="folder">[FOLDER]</div>138      <div class="folder">[FOLDER]</div>139    </div>140  </div>141 142  <!-- Bottom sheet with options -->143  <div class="sheet">144    <div class="sheet-header">145      <div class="doc-icon">146        <svg width="34" height="34" viewBox="0 0 24 24">147          <path d="M6 2h9l5 5v15H6z" opacity="0.35"></path>148          <path d="M15 2v5h5" ></path>149        </svg>150      </div>151      <div>My Doc</div>152    </div>153 154    <div class="item">155      <div class="i">156        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM5 20v-2c0-2.8 4-4 7-4s7 1.2 7 4v2H5z"/></svg>157      </div>158      <div class="label">Share</div>159    </div>160 161    <div class="item">162      <div class="i">163        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 12a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm-7 8v-2c0-3.3 3.7-5 7-5s7 1.7 7 5v2z"/></svg>164      </div>165      <div class="label">Manage access</div>166    </div>167 168    <div class="item">169      <div class="i">170        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.9l6-0.5L12 4l3 5.4 6 .5-5.2 4.6 1.4 5.9z"/></svg>171      </div>172      <div class="label">Add to Starred</div>173    </div>174 175    <div class="item">176      <div class="i">177        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm-1 14l-4-4 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 7z"/></svg>178      </div>179      <div class="label">Make available offline</div>180    </div>181 182    <div class="divider"></div>183 184    <div class="item">185      <div class="i">186        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 12v-2h12v2H4zm10-6V4h6v6h-2V6l-4 4-1.4-1.4L18.2 5H14z"/></svg>187      </div>188      <div class="label">Copy link</div>189    </div>190 191    <div class="item">192      <div class="i">193        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M8 3h8v6h5v12H8V3zm-5 6h5v12H3V9z"/></svg>194      </div>195      <div class="label">Make a copy</div>196    </div>197 198    <div class="item">199      <div class="i">200        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 12l8-8 8 8-1.4 1.4L13 7.8V20h-2V7.8L5.4 13.4z"/></svg>201      </div>202      <div class="label">Send a copy</div>203    </div>204 205    <div class="divider"></div>206 207    <div class="item">208      <div class="i">209        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 4h16v12H4zM2 18h20v2H2z"/></svg>210      </div>211      <div class="label">Open with</div>212    </div>213 214    <div class="item">215      <div class="i">216        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 3v10l4-4h-3V3h-2zm-7 16h14v2H5z"/></svg>217      </div>218      <div class="label">Download</div>219    </div>220 221    <div class="item">222      <div class="i">223        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm19-11.5l-3.75-3.75-2.12 2.12 3.75 3.75L22 5.75z"/></svg>224      </div>225      <div class="label">Rename</div>226    </div>227 228    <div class="item">229      <div class="i">230        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M10 4H4v16h16V10h-2v8H6V6h4V4zm10 0l-6 6h4v4l6-6h-4z"/></svg>231      </div>232      <div class="label">Add shortcut to Drive</div>233    </div>234 235    <div class="item">236      <div class="i">237        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M10 4H4v16h16V10h-2v8H6V6h4V4zm8 0l-6 6h10V4h-4z"/></svg>238      </div>239      <div class="label">Move</div>240    </div>241  </div>242 243  <!-- Home indicator -->244  <div class="home-indicator"></div>245</div>246</body>247</html>