GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Select Destination - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F6F8F3;13    color: #1e1e1e;14  }15 16  /* Top status and app bar */17  .status-bar {18    height: 88px;19    background: #E5EBDD;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 34px;25    color: #2a2a2a;26  }27  .status-icons { display: flex; align-items: center; gap: 22px; }28  .dot { width: 10px; height: 10px; background: #2a2a2a; border-radius: 50%; display: inline-block; }29  .signal {30    width: 36px; height: 24px; border: 2px solid #2a2a2a; border-top: none; position: relative;31  }32  .wifi {33    width: 34px; height: 24px; border: 2px solid #2a2a2a; border-radius: 4px; position: relative;34  }35  .battery {36    width: 54px; height: 24px; border: 2px solid #2a2a2a; border-radius: 4px; position: relative;37  }38  .battery:after {39    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #2a2a2a; border-radius: 2px;40  }41 42  .app-bar {43    background: #E5EBDD;44    padding: 18px 36px 26px 36px;45    border-bottom: 1px solid #e0e3d8;46  }47  .bar-row {48    display: flex; align-items: center; gap: 22px;49  }50  .back-btn {51    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;52  }53  .title-wrap { display: flex; align-items: baseline; gap: 18px; }54  .title {55    font-size: 64px; font-weight: 700; color: #1f2b22;56  }57  .subtitle {58    margin-left: 82px;59    font-size: 40px; color: #324335; margin-top: 8px;60  }61  .right-actions { margin-left: auto; display: flex; align-items: center; gap: 24px; }62  .add-square {63    width: 68px; height: 56px; border: 3px solid #3a4a36; border-radius: 10px; position: relative;64  }65  .add-square:before, .add-square:after {66    content: ""; position: absolute; background: #3a4a36; left: 50%; top: 50%; transform: translate(-50%,-50%);67  }68  .add-square:before { width: 26px; height: 3px; }69  .add-square:after { width: 3px; height: 26px; }70 71  /* Sort row */72  .sort-row {73    padding: 26px 40px;74    display: flex; align-items: center; justify-content: space-between;75    font-size: 34px; color: #36463a;76  }77  .sort-left { display: flex; align-items: center; gap: 14px; }78  .up-tri {79    width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid #3d6447;80  }81  .toggle-list {82    width: 48px; height: 36px; position: relative;83  }84  .toggle-list span {85    position: absolute; left: 0; right: 0; height: 4px; background: #3b3b3b; border-radius: 2px;86  }87  .toggle-list span:nth-child(1){ top: 2px; }88  .toggle-list span:nth-child(2){ top: 14px; }89  .toggle-list span:nth-child(3){ top: 26px; }90 91  /* Grid */92  .content {93    padding: 20px 40px 220px 40px;94  }95  .grid {96    display: grid;97    grid-template-columns: 1fr 1fr;98    column-gap: 70px;99    row-gap: 80px;100  }101  .tile { }102  .thumb { width: 440px; height: 280px; border: 1px solid #cfcfcf; background: #E0E0E0; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #727272; font-size: 28px; }103  .label { margin-top: 26px; font-size: 42px; color: #2b322f; }104 105  /* Folder icon */106  .folder-icon {107    width: 330px; height: 220px; border-radius: 24px; position: relative;108  }109  .folder-icon:before {110    content: ""; position: absolute; left: 24px; top: -34px; width: 160px; height: 70px; border-top-left-radius: 16px; border-top-right-radius: 16px;111  }112  .folder-green { background: #3E8F56; }113  .folder-green:before { background: #3E8F56; }114  .folder-dark { background: #2F3632; }115  .folder-dark:before { background: #2F3632; }116 117  /* Shared indicator */118  .shared {119    position: absolute; right: -6px; bottom: -10px; width: 80px; height: 80px;120  }121  .shared .bubble1, .shared .bubble2 {122    position: absolute; background: #E9ECE7; border: 3px solid #E9ECE7; border-radius: 50%;123  }124  .shared .bubble1 { width: 28px; height: 28px; right: 18px; bottom: 18px; }125  .shared .bubble2 { width: 22px; height: 22px; right: 2px; bottom: 30px; }126 127  /* Image specific previews */128  .img {129    width: 440px; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;130  }131  .filename {132    display: flex; align-items: center; gap: 18px; margin-top: 22px; color: #6b6b6b; font-size: 36px;133  }134  .mini-img {135    width: 40px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;136  }137 138  /* Bottom action bar */139  .bottom-bar {140    position: absolute; left: 0; right: 0; bottom: 0;141    background: #E5EBDD;142    height: 180px;143    display: flex; align-items: center; justify-content: space-between;144    padding: 0 80px;145    font-size: 46px;146  }147  .bottom-bar .cancel { color: #2F7C4A; font-weight: 600; }148  .bottom-bar .move { color: #9aa19b; }149 150  /* Gesture bar */151  .gesture {152    position: absolute; left: 50%; transform: translateX(-50%);153    bottom: 190px; width: 340px; height: 12px; background: #BDBDBD; border-radius: 8px; opacity: .8;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div>10:17</div>163    <div class="status-icons">164      <div class="dot"></div>165      <div class="signal"></div>166      <div class="wifi"></div>167      <div class="battery"></div>168    </div>169  </div>170 171  <!-- App bar with title and actions -->172  <div class="app-bar">173    <div class="bar-row">174      <div class="back-btn">175        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">176          <path d="M14.5 4 L6 12 L14.5 20" stroke="#203126" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>177        </svg>178      </div>179      <div class="title">My Drive</div>180      <div class="right-actions">181        <div class="add-square"></div>182      </div>183    </div>184    <div class="subtitle">Select destination</div>185  </div>186 187  <!-- Sort row -->188  <div class="sort-row">189    <div class="sort-left">190      <span>Name</span>191      <div class="up-tri"></div>192    </div>193    <div class="toggle-list">194      <span></span><span></span><span></span>195    </div>196  </div>197 198  <!-- Content grid -->199  <div class="content">200    <div class="grid">201 202      <!-- Folder: Green -->203      <div class="tile">204        <div class="folder-icon folder-green"></div>205        <div class="label">Green</div>206      </div>207 208      <!-- Folder: Memories (shared) -->209      <div class="tile" style="position: relative;">210        <div class="folder-icon folder-dark" style="position: relative;">211          <div class="shared">212            <div class="bubble1"></div>213            <div class="bubble2"></div>214          </div>215        </div>216        <div class="label">Memories</div>217      </div>218 219      <!-- Folder: Untitled -->220      <div class="tile">221        <div class="folder-icon folder-dark"></div>222        <div class="label">Untitled<br>folder</div>223      </div>224 225      <!-- Image: behance_download... -->226      <div class="tile">227        <div class="img">[IMG: Office plant close-up]</div>228        <div class="filename">229          <div class="mini-img"></div>230          <div>behance_do<br>wnload_16...</div>231        </div>232      </div>233 234      <!-- Image: Plant -->235      <div class="tile">236        <div class="img">[IMG: Office lobby with plants]</div>237        <div class="filename">238          <div class="mini-img"></div>239          <div>Plant</div>240        </div>241      </div>242 243      <!-- Empty spacer to balance grid -->244      <div class="tile"></div>245 246    </div>247  </div>248 249  <!-- Gesture bar -->250  <div class="gesture"></div>251 252  <!-- Bottom actions -->253  <div class="bottom-bar">254    <div class="cancel">Cancel</div>255    <div class="move">Move</div>256  </div>257 258</div>259</body>260</html>