GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Drive Actions Sheet</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #181315; color: #F5F5F5;11  }12  /* Status bar */13  .status-bar {14    height: 90px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;15    color: #EDEDED; font-size: 34px; letter-spacing: 0.3px;16  }17  .status-icons { display: flex; align-items: center; gap: 26px; }18  .dot { width: 12px; height: 12px; background: #BEBEBE; border-radius: 50%; }19  /* Header / search */20  .header {21    padding: 24px 28px 12px 28px;22  }23  .search-row { display: flex; align-items: center; gap: 22px; }24  .hamburger {25    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;26  }27  .search-bar {28    flex: 1;29    height: 80px; border-radius: 40px; background: #2A2225;30    display: flex; align-items: center; padding: 0 28px; color: #CFCFCF;31    font-size: 32px;32  }33  .avatar {34    width: 72px; height: 72px; border-radius: 50%;35    display: flex; align-items: center; justify-content: center;36    overflow: hidden;37    border: 1px solid #BDBDBD; background: #E0E0E0; color: #757575; font-size: 18px;38  }39  .tabs { display: flex; gap: 54px; padding: 22px 40px 10px 40px; color: #BFA9AF; font-size: 32px; }40  .tab { position: relative; padding-bottom: 18px; }41  .tab.active { color: #F1D1D8; }42  .tab.active::after {43    content: ""; position: absolute; left: 0; bottom: 0; width: 140px; height: 10px; border-radius: 5px; background: #D89AA9;44  }45  /* File list preview above sheet */46  .list {47    padding: 20px 40px; color: #D7C9CD;48  }49  .file-row {50    display: flex; align-items: center; justify-content: space-between;51    padding: 24px 0; border-bottom: 1px solid #2E2528; font-size: 34px;52  }53  .file-left { display: flex; align-items: center; gap: 24px; }54  /* Bottom sheet */55  .bottom-sheet {56    position: absolute; left: 0; right: 0; bottom: 0;57    width: 1080px; height: 1760px; background: #3A2D30; border-top-left-radius: 40px; border-top-right-radius: 40px;58    box-shadow: 0 -20px 40px rgba(0,0,0,0.4);59  }60  .sheet-header {61    display: flex; align-items: center; gap: 22px; padding: 36px 40px 24px 40px; font-size: 38px; color: #F3EAED;62  }63  .divider { height: 1px; background: #5B4A4E; margin: 0 40px; }64  .sheet-list { padding: 10px 0; }65  .action {66    display: flex; align-items: center; gap: 28px; padding: 26px 40px; font-size: 36px; color: #EDE4E7;67  }68  .action .label { flex: 1; }69  .action-icon svg { width: 48px; height: 48px; stroke: #C8B5BA; fill: none; stroke-width: 3; }70  .action-icon.fill svg { fill: #C8B5BA; stroke: none; }71  .section-break { margin: 22px 40px; height: 1px; background: #5B4A4E; }72  /* Gesture bar */73  .gesture {74    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);75    width: 360px; height: 12px; border-radius: 12px; background: #FFFFFF;76    opacity: 0.75;77  }78</style>79</head>80<body>81<div id="render-target">82 83  <!-- Top status bar -->84  <div class="status-bar">85    <div>5:17</div>86    <div class="status-icons">87      <div class="dot"></div>88      <div class="dot"></div>89      <div class="dot"></div>90      <svg width="36" height="36" viewBox="0 0 24 24">91        <rect x="2" y="8" width="20" height="10" rx="2" ry="2" fill="#D9D9D9"></rect>92        <rect x="3" y="9" width="12" height="8" fill="#181315"></rect>93      </svg>94      <svg width="36" height="36" viewBox="0 0 24 24">95        <path d="M4 6h16v12H4z" fill="#D9D9D9"></path>96        <rect x="18" y="9" width="2" height="6" fill="#181315"></rect>97      </svg>98    </div>99  </div>100 101  <!-- Drive header -->102  <div class="header">103    <div class="search-row">104      <div class="hamburger">105        <svg width="40" height="40" viewBox="0 0 24 24">106          <path d="M3 6h18M3 12h18M3 18h18" stroke="#D8C7CC" stroke-width="2" stroke-linecap="round" fill="none"></path>107        </svg>108      </div>109      <div class="search-bar">110        <svg width="34" height="34" viewBox="0 0 24 24" style="margin-right:14px;">111          <circle cx="10" cy="10" r="7" stroke="#BFA9AF" stroke-width="2" fill="none"></circle>112          <path d="M15 15l6 6" stroke="#BFA9AF" stroke-width="2" stroke-linecap="round"></path>113        </svg>114        <span>Search in Drive</span>115      </div>116      <div class="avatar">117        [IMG: User Avatar]118      </div>119    </div>120 121    <div class="tabs">122      <div class="tab active">Suggested</div>123      <div class="tab">Notifications</div>124    </div>125  </div>126 127  <!-- Small content preview area -->128  <div class="list">129    <div class="file-row">130      <div class="file-left">131        <svg width="42" height="42" viewBox="0 0 24 24">132          <rect x="4" y="4" width="16" height="12" rx="2" stroke="#BFA9AF" stroke-width="2" fill="none"></rect>133          <path d="M4 16l5-4 3 3 4-5 4 6" stroke="#BFA9AF" stroke-width="2" fill="none"></path>134        </svg>135        <span>Outdoor yoga.mp4</span>136      </div>137      <svg width="36" height="36" viewBox="0 0 24 24">138        <circle cx="12" cy="5" r="2" fill="#BFA9AF"></circle>139        <circle cx="12" cy="12" r="2" fill="#BFA9AF"></circle>140        <circle cx="12" cy="19" r="2" fill="#BFA9AF"></circle>141      </svg>142    </div>143  </div>144 145  <!-- Bottom sheet -->146  <div class="bottom-sheet">147    <div class="sheet-header">148      <div class="action-icon fill">149        <svg viewBox="0 0 24 24">150          <rect x="3" y="5" width="18" height="14" rx="2"></rect>151          <path d="M7 15l4-5 3 4 2-3 3 4" fill="none" stroke="#3A2D30" stroke-width="1.5"></path>152        </svg>153      </div>154      <div>Pizza.jpeg</div>155    </div>156    <div class="divider"></div>157 158    <div class="sheet-list">159      <div class="action">160        <div class="action-icon">161          <svg viewBox="0 0 24 24">162            <path d="M4 12h8M12 12l-3-3M12 12l-3 3" stroke-linecap="round"></path>163            <path d="M14 6h6v12h-6" opacity="0.7"></path>164          </svg>165        </div>166        <div class="label">Share</div>167      </div>168 169      <div class="action">170        <div class="action-icon">171          <svg viewBox="0 0 24 24">172            <circle cx="8" cy="9" r="3"></circle>173            <circle cx="16" cy="9" r="3"></circle>174            <path d="M3 20c0-3 4-5 8-5s8 2 8 5" stroke-linecap="round"></path>175          </svg>176        </div>177        <div class="label">Manage access</div>178      </div>179 180      <div class="action">181        <div class="action-icon">182          <svg viewBox="0 0 24 24">183            <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>184          </svg>185        </div>186        <div class="label">Add to Starred</div>187      </div>188 189      <div class="action">190        <div class="action-icon">191          <svg viewBox="0 0 24 24">192            <circle cx="12" cy="12" r="9"></circle>193            <path d="M7 12l3 3 7-7" stroke-linecap="round"></path>194          </svg>195        </div>196        <div class="label">Make available offline</div>197      </div>198 199      <div class="section-break"></div>200 201      <div class="action">202        <div class="action-icon">203          <svg viewBox="0 0 24 24">204            <path d="M4 12h12" stroke-linecap="round"></path>205            <rect x="16" y="7" width="4" height="10" rx="1"></rect>206            <path d="M7 8h6v8H7z" opacity="0.7"></path>207          </svg>208        </div>209        <div class="label">Copy link</div>210      </div>211 212      <div class="action">213        <div class="action-icon">214          <svg viewBox="0 0 24 24">215            <rect x="4" y="4" width="8" height="12" rx="1"></rect>216            <rect x="12" y="8" width="8" height="12" rx="1"></rect>217          </svg>218        </div>219        <div class="label">Make a copy</div>220      </div>221 222      <div class="action">223        <div class="action-icon">224          <svg viewBox="0 0 24 24">225            <path d="M5 12h9" stroke-linecap="round"></path>226            <path d="M12 5l7 7-7 7" stroke-linecap="round"></path>227          </svg>228        </div>229        <div class="label">Send a copy</div>230      </div>231 232      <div class="section-break"></div>233 234      <div class="action">235        <div class="action-icon">236          <svg viewBox="0 0 24 24">237            <path d="M4 4l16 16M4 20L20 4" stroke-linecap="round"></path>238          </svg>239        </div>240        <div class="label">Open with</div>241      </div>242 243      <div class="action">244        <div class="action-icon">245          <svg viewBox="0 0 24 24">246            <path d="M12 3v12" stroke-linecap="round"></path>247            <path d="M6 12l6 6 6-6" stroke-linecap="round"></path>248          </svg>249        </div>250        <div class="label">Download</div>251      </div>252 253      <div class="action">254        <div class="action-icon">255          <svg viewBox="0 0 24 24">256            <path d="M5 19l14-14" stroke-linecap="round"></path>257            <path d="M8 5h11v11" stroke-linecap="round"></path>258          </svg>259        </div>260        <div class="label">Rename</div>261      </div>262 263      <div class="action">264        <div class="action-icon">265          <svg viewBox="0 0 24 24">266            <path d="M3 7h12l3 3v7H3z"></path>267            <path d="M7 11h10" stroke-linecap="round"></path>268          </svg>269        </div>270        <div class="label">Show file location</div>271      </div>272 273    </div>274  </div>275 276  <div class="gesture"></div>277</div>278</body>279</html>