GD-ML/AndroidCode
13.4k
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 Menu 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;11 position: relative; overflow: hidden;12 background: #1b1618; color: #f1e9ee;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 20px; left: 30px; right: 30px;18 height: 60px; display: flex; align-items: center; justify-content: space-between;19 color: #eae1e7; font-weight: 600; font-size: 40px;20 }21 .status-icons { display: flex; align-items: center; gap: 22px; }22 .status-dot { width: 14px; height: 14px; background: #cfc6cc; border-radius: 50%; opacity: .8; }23 .battery {24 width: 44px; height: 22px; border: 2px solid #cfc6cc; border-radius: 6px; position: relative;25 }26 .battery::after {27 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #cfc6cc; border-radius: 2px;28 }29 .battery-level { position: absolute; left: 3px; top: 3px; height: 14px; width: 28px; background: #cfc6cc; }30 31 /* Header search */32 .header {33 position: absolute; top: 100px; left: 30px; right: 30px; display: flex; align-items: center; gap: 24px;34 }35 .hamburger {36 width: 66px; height: 66px; display: flex; align-items: center; justify-content: center;37 }38 .search-pill {39 flex: 1; height: 92px; background: #2a2226; border: 1px solid #4a3c43; border-radius: 46px;40 display: flex; align-items: center; padding: 0 26px; color: #cfc3ca; font-size: 36px;41 }42 .search-pill .label { margin-left: 18px; }43 .avatar {44 width: 80px; height: 80px; border-radius: 40px; background: #4a8fb9; display: flex; align-items: center; justify-content: center;45 font-weight: 700; font-size: 40px;46 }47 48 /* Tabs */49 .tabs {50 position: absolute; top: 220px; left: 30px; right: 30px; display: flex; align-items: center; gap: 40px;51 color: #cbb2be; font-size: 34px;52 }53 .tab-active { color: #d7a4c8; position: relative; }54 .tab-active::after {55 content: ""; position: absolute; left: 0; bottom: -18px; width: 120px; height: 8px; background: #d7a4c8; border-radius: 4px;56 }57 .divider-line {58 position: absolute; top: 290px; left: 0; right: 0; height: 2px; background: #453a40;59 }60 61 /* File header + item */62 .file-header {63 position: absolute; top: 320px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between;64 color: #cfc3ca; font-size: 34px;65 }66 .grid-icon { width: 50px; height: 50px; opacity: .8; }67 .file-item {68 position: absolute; top: 390px; left: 30px; right: 30px;69 height: 140px; border-radius: 24px; background: #2d2328; display: flex; align-items: center; gap: 30px; padding: 0 24px;70 }71 .doc-icon {72 width: 72px; height: 90px; background: #6ea8ff; border-radius: 10px; position: relative;73 }74 .doc-icon::after { content: ""; position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: #9fc3ff; border-top-right-radius: 10px; border-bottom-left-radius: 8px; }75 .file-name { font-size: 38px; color: #e6dbe1; }76 77 /* Bottom sheet */78 .sheet {79 position: absolute; left: 0; right: 0; top: 560px; bottom: 120px;80 background: #3a2b31; border-top-left-radius: 42px; border-top-right-radius: 42px;81 box-shadow: 0 -10px 20px rgba(0,0,0,0.35);82 overflow: hidden;83 }84 .sheet-inner { padding-top: 34px; }85 .sheet-grabber {86 width: 140px; height: 10px; background: #67565e; border-radius: 6px; margin: 0 auto 24px;87 }88 .sheet-item {89 height: 96px; display: flex; align-items: center; gap: 26px; padding: 0 36px; color: #e9dee4; font-size: 36px;90 }91 .sheet-sep { height: 1px; background: #4a3d43; margin-left: 36px; margin-right: 36px; }92 .item-icon { width: 48px; height: 48px; opacity: .9; }93 94 /* Home indicator */95 .home-indicator {96 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);97 width: 320px; height: 12px; background: #ffffff; border-radius: 8px; opacity: 0.8;98 }99 100 /* SVG coloring */101 svg { display: block; }102 .icon-stroke { stroke: #e9dee4; stroke-width: 6; fill: none; }103 .icon-fill { fill: #e9dee4; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status Bar -->110 <div class="status-bar">111 <div>10:31</div>112 <div class="status-icons">113 <div class="status-dot"></div>114 <div class="status-dot"></div>115 <div class="status-dot"></div>116 <div class="battery"><div class="battery-level"></div></div>117 </div>118 </div>119 120 <!-- Header Search -->121 <div class="header">122 <div class="hamburger">123 <svg width="50" height="50">124 <path d="M5 12 H45 M5 25 H45 M5 38 H45" class="icon-stroke"></path>125 </svg>126 </div>127 <div class="search-pill">128 <svg width="40" height="40">129 <circle cx="16" cy="16" r="12" class="icon-stroke"></circle>130 <path d="M27 27 L38 38" class="icon-stroke"></path>131 </svg>132 <div class="label">Search in Drive</div>133 </div>134 <div class="avatar">K</div>135 </div>136 137 <!-- Tabs -->138 <div class="tabs">139 <div class="tab-active">My Drive</div>140 <div>Computers</div>141 </div>142 <div class="divider-line"></div>143 144 <!-- File header -->145 <div class="file-header">146 <div>Name ↑</div>147 <svg class="grid-icon" viewBox="0 0 24 24">148 <rect x="2" y="2" width="7" height="7" class="icon-stroke"></rect>149 <rect x="15" y="2" width="7" height="7" class="icon-stroke"></rect>150 <rect x="2" y="15" width="7" height="7" class="icon-stroke"></rect>151 <rect x="15" y="15" width="7" height="7" class="icon-stroke"></rect>152 </svg>153 </div>154 155 <!-- Single file item -->156 <div class="file-item">157 <div class="doc-icon"></div>158 <div class="file-name">agents.txt</div>159 </div>160 161 <!-- Bottom Sheet Menu -->162 <div class="sheet">163 <div class="sheet-inner">164 <div class="sheet-grabber"></div>165 166 <div class="sheet-item">167 <svg class="item-icon" viewBox="0 0 24 24">168 <path d="M18 8 L22 4 L18 0" class="icon-stroke"></path>169 <path d="M22 4 H10 C5 4 3 6 3 11" class="icon-stroke"></path>170 <circle cx="3" cy="19" r="3" class="icon-stroke"></circle>171 </svg>172 <div>Share</div>173 </div>174 <div class="sheet-item">175 <svg class="item-icon" viewBox="0 0 24 24">176 <circle cx="8" cy="10" r="4" class="icon-stroke"></circle>177 <path d="M18 6 v12" class="icon-stroke"></path>178 <path d="M14 10 h8" class="icon-stroke"></path>179 </svg>180 <div>Manage access</div>181 </div>182 <div class="sheet-item">183 <svg class="item-icon" viewBox="0 0 24 24">184 <path d="M12 2 L14.5 9 H22 L16 13 L18.5 20 L12 16 L5.5 20 L8 13 L2 9 H9.5 Z" class="icon-stroke"></path>185 </svg>186 <div>Add to Starred</div>187 </div>188 <div class="sheet-item">189 <svg class="item-icon" viewBox="0 0 24 24">190 <circle cx="12" cy="12" r="10" class="icon-stroke"></circle>191 <path d="M7 12 L10 15 L17 8" class="icon-stroke"></path>192 </svg>193 <div>Make available offline</div>194 </div>195 196 <div class="sheet-sep"></div>197 198 <div class="sheet-item">199 <svg class="item-icon" viewBox="0 0 24 24">200 <path d="M3 12 H21" class="icon-stroke"></path>201 <path d="M15 6 L21 12 L15 18" class="icon-stroke"></path>202 </svg>203 <div>Copy link</div>204 </div>205 <div class="sheet-item">206 <svg class="item-icon" viewBox="0 0 24 24">207 <rect x="3" y="3" width="12" height="12" class="icon-stroke"></rect>208 <rect x="9" y="9" width="12" height="12" class="icon-stroke"></rect>209 </svg>210 <div>Make a copy</div>211 </div>212 <div class="sheet-item">213 <svg class="item-icon" viewBox="0 0 24 24">214 <path d="M4 12 H16" class="icon-stroke"></path>215 <path d="M10 6 L16 12 L10 18" class="icon-stroke"></path>216 </svg>217 <div>Send a copy</div>218 </div>219 220 <div class="sheet-sep"></div>221 222 <div class="sheet-item">223 <svg class="item-icon" viewBox="0 0 24 24">224 <path d="M4 4 H20 V20 H4 Z" class="icon-stroke"></path>225 <path d="M6 6 L18 18" class="icon-stroke"></path>226 <path d="M18 6 L6 18" class="icon-stroke"></path>227 </svg>228 <div>Open with</div>229 </div>230 <div class="sheet-item">231 <svg class="item-icon" viewBox="0 0 24 24">232 <path d="M12 3 V17" class="icon-stroke"></path>233 <path d="M5 10 L12 17 L19 10" class="icon-stroke"></path>234 <rect x="4" y="19" width="16" height="2" class="icon-fill"></rect>235 </svg>236 <div>Download</div>237 </div>238 <div class="sheet-item">239 <svg class="item-icon" viewBox="0 0 24 24">240 <path d="M4 20 H20" class="icon-stroke"></path>241 <path d="M6 16 L6 8 L14 8" class="icon-stroke"></path>242 <path d="M14 8 L14 12 L10 12" class="icon-stroke"></path>243 </svg>244 <div>Rename</div>245 </div>246 <div class="sheet-item">247 <svg class="item-icon" viewBox="0 0 24 24">248 <rect x="3" y="3" width="14" height="14" class="icon-stroke"></rect>249 <path d="M18 6 V18 H6" class="icon-stroke"></path>250 <path d="M18 6 H6 V18" class="icon-stroke"></path>251 <path d="M21 12 H17 M19 10 V14" class="icon-stroke"></path>252 </svg>253 <div>Add shortcut to Drive</div>254 </div>255 <div class="sheet-item">256 <svg class="item-icon" viewBox="0 0 24 24">257 <path d="M4 4 H12 V12 H4 Z" class="icon-stroke"></path>258 <path d="M14 8 L20 8 V20 H8 L8 14" class="icon-stroke"></path>259 <path d="M12 8 L8 12" class="icon-stroke"></path>260 </svg>261 <div>Move</div>262 </div>263 </div>264 </div>265 266 <!-- Home indicator -->267 <div class="home-indicator"></div>268</div>269</body>270</html>