GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Drive - Action Sheet (Dark)</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;10    position: relative; overflow: hidden;11    background: #0f1f1f; color: #E8F0F0;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; background: #111A1A;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; font-size: 44px; color: #DDE5E5;20  }21  .status-left { display: flex; align-items: center; gap: 20px; }22  .status-right { display: flex; align-items: center; gap: 26px; }23 24  /* Header / search */25  .header {26    position: absolute; top: 120px; left: 0; right: 0;27    height: 180px; padding: 26px 32px;28    display: flex; align-items: center; gap: 24px;29  }30  .hamburger {31    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;32  }33  .search-pill {34    flex: 1; height: 92px; border-radius: 46px;35    background: #283536; color: #B9C7C7;36    display: flex; align-items: center; gap: 20px; padding: 0 28px; font-size: 38px;37    box-shadow: inset 0 0 0 1px #334344;38  }39  .avatar {40    width: 86px; height: 86px; border-radius: 50%;41    background: #D9782A; display: flex; align-items: center; justify-content: center;42    font-weight: bold; color: #fff; font-size: 42px;43  }44 45  /* Tabs */46  .tabs {47    position: absolute; top: 300px; left: 0; right: 0;48    padding: 0 36px; height: 90px;49    display: flex; align-items: center; gap: 40px;50    font-size: 44px;51  }52  .tab { color: #9AA9A9; padding-bottom: 16px; }53  .tab.active { color: #8EE28E; border-bottom: 6px solid #8EE28E; }54 55  /* File row */56  .file-row {57    position: absolute; top: 390px; left: 0; right: 0;58    height: 180px; display: flex; align-items: center;59    padding: 0 36px; gap: 26px; background: #152424;60    border-top: 1px solid #2a3a3a; border-bottom: 1px solid #2a3a3a;61  }62  .pdf-badge {63    width: 70px; height: 70px; border-radius: 8px; background: #E05A58;64    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px;65    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);66  }67  .file-name {68    flex: 1; font-size: 40px; color: #E6EFEF;69    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;70  }71  .more {72    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;73  }74 75  /* Action sheet (options list) */76  .sheet {77    position: absolute; top: 570px; left: 0; right: 0;78    padding: 24px 36px 60px 36px; background: #122121;79  }80  .action-row {81    height: 120px; display: flex; align-items: center; gap: 32px;82    color: #E8F0F0; font-size: 44px;83  }84  .action-icon {85    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;86    background: #223233; border-radius: 16px; box-shadow: inset 0 0 0 1px #2f4040;87  }88  .divider {89    margin: 18px 0; height: 1px; background: #2a3a3a;90  }91 92  /* Simple utility SVG styles */93  svg { width: 44px; height: 44px; fill: none; stroke: #CFE1E1; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }94 95  .muted { color: #A7B6B6; font-size: 36px; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status Bar -->102  <div class="status-bar">103    <div class="status-left">104      <div>11:03</div>105      <!-- Cloud icon -->106      <svg viewBox="0 0 24 24">107        <path d="M8 16h8a4 4 0 0 0 0-8h-.3A5.5 5.5 0 0 0 6 9.5a3.5 3.5 0 0 0 2 6.5z"></path>108      </svg>109    </div>110    <div class="status-right">111      <!-- WiFi -->112      <svg viewBox="0 0 24 24">113        <path d="M3 9c4.4-3.7 13.6-3.7 18 0"></path>114        <path d="M6 12c3-2.5 9-2.5 12 0"></path>115        <path d="M9 15c1.6-1.4 4.4-1.4 6 0"></path>116        <circle cx="12" cy="18" r="1.8" fill="#CFE1E1" stroke="none"></circle>117      </svg>118      <!-- Battery with 100% -->119      <svg viewBox="0 0 28 18">120        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#CFE1E1"></rect>121        <rect x="24" y="6" width="3" height="6" rx="1" ry="1" stroke="#CFE1E1"></rect>122        <rect x="3" y="5" width="18" height="8" fill="#CFE1E1" stroke="none"></rect>123      </svg>124      <div>100%</div>125    </div>126  </div>127 128  <!-- Header with search -->129  <div class="header">130    <div class="hamburger">131      <svg viewBox="0 0 24 24">132        <path d="M3 6h18M3 12h18M3 18h18"></path>133      </svg>134    </div>135    <div class="search-pill">136      <svg viewBox="0 0 24 24">137        <circle cx="10" cy="10" r="6"></circle>138        <path d="M15 15l6 6"></path>139      </svg>140      <span>Search in Drive</span>141    </div>142    <div class="avatar">R</div>143  </div>144 145  <!-- Tabs -->146  <div class="tabs">147    <div class="tab active">My Drive</div>148    <div class="tab">Computers</div>149  </div>150 151  <!-- File row -->152  <div class="file-row">153    <div class="pdf-badge">PDF</div>154    <div class="file-name">A_short_history_of_Germany_(IA_shorthist...</div>155    <div class="more">156      <svg viewBox="0 0 24 24">157        <circle cx="12" cy="5" r="2" fill="#CFE1E1" stroke="none"></circle>158        <circle cx="12" cy="12" r="2" fill="#CFE1E1" stroke="none"></circle>159        <circle cx="12" cy="19" r="2" fill="#CFE1E1" stroke="none"></circle>160      </svg>161    </div>162  </div>163 164  <!-- Action sheet list -->165  <div class="sheet">166    <div class="action-row">167      <div class="action-icon">168        <!-- Share icon -->169        <svg viewBox="0 0 24 24">170          <circle cx="6" cy="12" r="3"></circle>171          <circle cx="18" cy="6" r="3"></circle>172          <circle cx="18" cy="18" r="3"></circle>173          <path d="M8.7 11l6-3M8.7 13l6 3"></path>174        </svg>175      </div>176      <div>Share</div>177    </div>178 179    <div class="action-row">180      <div class="action-icon">181        <!-- Manage access / people -->182        <svg viewBox="0 0 24 24">183          <circle cx="8" cy="8" r="4"></circle>184          <path d="M2 20c2-4 10-4 12 0"></path>185          <circle cx="18" cy="10" r="3"></circle>186          <path d="M14 20c1.2-2.4 5.6-2.4 6.8 0"></path>187        </svg>188      </div>189      <div>Manage access</div>190    </div>191 192    <div class="action-row">193      <div class="action-icon">194        <!-- Star -->195        <svg viewBox="0 0 24 24">196          <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3 1.2-6.2L3 9.8 9 9z"></path>197        </svg>198      </div>199      <div>Add to Starred</div>200    </div>201 202    <div class="action-row">203      <div class="action-icon">204        <!-- Offline check -->205        <svg viewBox="0 0 24 24">206          <circle cx="12" cy="12" r="9"></circle>207          <path d="M8 12l3 3 6-6"></path>208        </svg>209      </div>210      <div>Make available offline</div>211    </div>212 213    <div class="divider"></div>214 215    <div class="action-row">216      <div class="action-icon">217        <!-- Link -->218        <svg viewBox="0 0 24 24">219          <path d="M7 14l-2 2a4 4 0 0 0 6 6l2-2"></path>220          <path d="M17 10l2-2a4 4 0 0 0-6-6l-2 2"></path>221        </svg>222      </div>223      <div>Copy link</div>224    </div>225 226    <div class="action-row">227      <div class="action-icon">228        <!-- Copy document -->229        <svg viewBox="0 0 24 24">230          <rect x="6" y="6" width="12" height="14" rx="2"></rect>231          <rect x="10" y="2" width="8" height="4" rx="1"></rect>232        </svg>233      </div>234      <div>Make a copy</div>235    </div>236 237    <div class="action-row">238      <div class="action-icon">239        <!-- Send -->240        <svg viewBox="0 0 24 24">241          <path d="M3 12l18-9-6 18-4-7-8-2z"></path>242        </svg>243      </div>244      <div>Send a copy</div>245    </div>246 247    <div class="divider"></div>248 249    <div class="action-row">250      <div class="action-icon">251        <!-- Open with (grid) -->252        <svg viewBox="0 0 24 24">253          <rect x="3" y="3" width="7" height="7"></rect>254          <rect x="14" y="3" width="7" height="7"></rect>255          <rect x="3" y="14" width="7" height="7"></rect>256          <rect x="14" y="14" width="7" height="7"></rect>257        </svg>258      </div>259      <div>Open with</div>260    </div>261 262    <div class="action-row">263      <div class="action-icon">264        <!-- Download -->265        <svg viewBox="0 0 24 24">266          <path d="M12 4v10"></path>267          <path d="M7 10l5 5 5-5"></path>268          <path d="M4 20h16"></path>269        </svg>270      </div>271      <div>Download</div>272    </div>273 274    <div class="action-row">275      <div class="action-icon">276        <!-- Rename pencil -->277        <svg viewBox="0 0 24 24">278          <path d="M4 20l5-1 9-9-4-4-9 9-1 5z"></path>279          <path d="M14 6l4 4"></path>280        </svg>281      </div>282      <div>Rename</div>283    </div>284 285    <div class="action-row">286      <div class="action-icon">287        <!-- Add shortcut -->288        <svg viewBox="0 0 24 24">289          <rect x="4" y="4" width="12" height="12" rx="2"></rect>290          <path d="M20 8v8"></path>291          <path d="M16 12h8"></path>292        </svg>293      </div>294      <div>Add shortcut to Drive</div>295    </div>296 297    <div class="action-row">298      <div class="action-icon">299        <!-- Move -->300        <svg viewBox="0 0 24 24">301          <path d="M12 2v20"></path>302          <path d="M5 9l7-7 7 7"></path>303          <path d="M5 15l7 7 7-7"></path>304        </svg>305      </div>306      <div>Move</div>307    </div>308  </div>309 310</div>311</body>312</html>