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 UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#121212; color:#FFFFFF;12 }13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:96px;15 display:flex; align-items:center; justify-content:space-between;16 padding:0 36px; color:#fff; font-size:40px; letter-spacing:0.5px;17 }18 .status-right { display:flex; align-items:center; gap:26px; }19 .top-icons {20 position:absolute; top:110px; left:0; right:0; height:180px;21 display:flex; justify-content:space-around; align-items:flex-start;22 padding:0 40px;23 }24 .app-shortcut { display:flex; flex-direction:column; align-items:center; color:#EDEDED; }25 .app-shortcut .bubble {26 width:130px; height:130px; border-radius:50%;27 display:flex; align-items:center; justify-content:center;28 font-weight:700; color:#fff;29 }30 .app-shortcut span { margin-top:18px; font-size:34px; color:#E0E0E0; }31 .ad-row {32 position:absolute; top:320px; left:0; right:0; height:150px;33 background:#1F1F1F; border-top:1px solid #2A2A2A; border-bottom:1px solid #2A2A2A;34 display:flex; align-items:center; padding:0 28px; gap:24px;35 }36 .img-ph {37 width:140px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;38 color:#757575; display:flex; align-items:center; justify-content:center; font-size:26px;39 }40 .ad-center { flex:1; display:flex; flex-direction:column; gap:10px; }41 .ad-title { font-size:36px; color:#FFFFFF; display:flex; align-items:center; gap:14px; }42 .badge-ad {43 font-size:24px; color:#111; background:#FFD54F; padding:4px 10px; border-radius:6px; font-weight:700;44 }45 .rating { display:flex; align-items:center; gap:12px; color:#BDBDBD; font-size:26px; }46 .ad-right .btn-install {47 background:#2D8CFF; color:#fff; border:none; padding:16px 32px; border-radius:10px;48 font-size:34px; font-weight:700;49 }50 .section-header {51 position:absolute; top:488px; left:0; right:0; padding:0 32px;52 display:flex; justify-content:space-between; align-items:center;53 }54 .section-header .title { font-size:40px; color:#EDEDED; }55 .section-header .more { font-size:34px; color:#BDBDBD; display:flex; align-items:center; gap:10px; }56 .grid {57 position:absolute; top:560px; left:20px; right:20px; bottom:180px;58 overflow:hidden;59 }60 .cards {61 display:flex; gap:28px; flex-wrap:wrap;62 }63 .card {64 width:505px; height:330px; background:#FFFFFF; color:#111; border-radius:22px;65 position:relative; box-shadow:0 2px 0 #D5D5D5 inset;66 padding:28px;67 }68 .card h3 {69 margin:0; font-size:44px; line-height:1.15; font-weight:700; color:#111;70 max-height:220px; overflow:hidden;71 }72 .check-badge {73 position:absolute; top:16px; right:16px;74 width:56px; height:56px; border-radius:50%; background:#EEEEEE; display:flex; align-items:center; justify-content:center;75 border:2px solid #CFCFCF;76 }77 .thumb-strip {78 position:absolute; bottom:26px; left:28px; right:28px;79 height:70px; display:flex; align-items:center; justify-content:space-between; color:#6B6B6B;80 font-size:28px;81 }82 .more-dots { width:40px; text-align:right; letter-spacing:6px; }83 /* Floating contextual menu */84 .context-menu {85 position:absolute; top:760px; left:40px; width:760px;86 background:#3A3A3A; color:#fff; border-radius:16px;87 box-shadow:0 12px 40px rgba(0,0,0,0.6);88 padding:18px 0;89 }90 .menu-item {91 display:flex; align-items:center; gap:26px; padding:26px 32px; font-size:34px;92 border-bottom:1px solid rgba(255,255,255,0.06);93 }94 .menu-item:last-child { border-bottom:none; }95 .menu-item .icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }96 .menu-item span { flex:1; }97 .switch {98 width:108px; height:56px; border-radius:28px; background:#6B6B6B; position:relative;99 }100 .switch::after {101 content:""; position:absolute; top:6px; left:6px; width:44px; height:44px; border-radius:50%; background:#CFCFCF;102 }103 /* Bottom gesture bar */104 .home-indicator {105 position:absolute; left:50%; transform:translateX(-50%);106 bottom:22px; width:300px; height:10px; background:#FFFFFF; border-radius:8px; opacity:0.9;107 }108 .subtitle { color:#9E9E9E; font-size:28px; }109 .hidden-scroll { overflow:hidden; }110</style>111</head>112<body>113<div id="render-target">114 <!-- Status bar -->115 <div class="status-bar">116 <div>10:56</div>117 <div class="status-right">118 <!-- simple signal icon -->119 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v-2H2v2zm3-3h2v-3H5v3zm3-4h2V9H8v4zm3-5h2V4h-2v4zm3-3v14h2V5h-2zm3 6v8h2v-8h-2z"/></svg>120 <!-- WiFi -->121 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5l-1.5-1.5a2 2 0 0 1 3 0L12 18.5zm4.5-4.5a6 6 0 0 0-9 0l1.5 1.5a4 4 0 0 1 6 0l1.5-1.5zM12 7a12 12 0 0 0-8.5 3.5L5 12a9 9 0 0 1 14 0l1.5-1.5A12 12 0 0 0 12 7z"/></svg>122 <!-- Battery -->123 <svg width="46" height="40" viewBox="0 0 28 24" fill="#fff"><path d="M22 6h2v12h-2V6zM2 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7zm2 0v10h14V7H4z"/></svg>124 </div>125 </div>126 127 <!-- Quick create icons -->128 <div class="top-icons">129 <div class="app-shortcut">130 <div class="bubble" style="background:#4285F4;">D</div>131 <span>Document</span>132 </div>133 <div class="app-shortcut">134 <div class="bubble" style="background:#34A853;">S</div>135 <span>Spreadsheet</span>136 </div>137 <div class="app-shortcut">138 <div class="bubble" style="background:#FB8C00;">P</div>139 <span>Presentation</span>140 </div>141 <div class="app-shortcut">142 <div class="bubble" style="background:#EA4335;">PDF</div>143 <span>PDF</span>144 </div>145 </div>146 147 <!-- Ad row -->148 <div class="ad-row">149 <div class="img-ph">[IMG: Ad Image]</div>150 <div class="ad-center">151 <div class="ad-title">152 <span>Kiss Girls—Live Video Cha</span>153 <span class="badge-ad">Ad</span>154 <span class="subtitle">FREE</span>155 </div>156 <div class="rating">157 <!-- five stars -->158 <svg width="30" height="30" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 17l-5.2 3 1.4-5.8L3 9.8l5.9-.5L12 4l3.1 5.3 5.9.5-5.2 4.4 1.4 5.8z"/></svg>159 <svg width="30" height="30" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 17l-5.2 3 1.4-5.8L3 9.8l5.9-.5L12 4l3.1 5.3 5.9.5-5.2 4.4 1.4 5.8z"/></svg>160 <svg width="30" height="30" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 17l-5.2 3 1.4-5.8L3 9.8l5.9-.5L12 4l3.1 5.3 5.9.5-5.2 4.4 1.4 5.8z"/></svg>161 <svg width="30" height="30" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 17l-5.2 3 1.4-5.8L3 9.8l5.9-.5L12 4l3.1 5.3 5.9.5-5.2 4.4 1.4 5.8z"/></svg>162 <svg width="30" height="30" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 17l-5.2 3 1.4-5.8L3 9.8l5.9-.5L12 4l3.1 5.3 5.9.5-5.2 4.4 1.4 5.8z"/></svg>163 </div>164 </div>165 <div class="ad-right">166 <button class="btn-install">INSTALL</button>167 </div>168 </div>169 170 <!-- Section header -->171 <div class="section-header">172 <div class="title">Last opened</div>173 <div class="more">174 3 More175 <svg width="30" height="30" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M7 10l5 5 5-5z"/></svg>176 </div>177 </div>178 179 <!-- Content grid -->180 <div class="grid">181 <div class="cards">182 <div class="card">183 <div class="check-badge">184 <svg width="32" height="32" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.2l-3.5-3.6L4 14.1 9 19l11-11-1.4-1.4z"/></svg>185 </div>186 <h3>Training will be held on July 25</h3>187 <div class="thumb-strip">188 <span class="subtitle">Document</span>189 <span class="more-dots">⋮</span>190 </div>191 </div>192 193 <div class="card">194 <div class="check-badge">195 <svg width="32" height="32" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.2l-3.5-3.6L4 14.1 9 19l11-11-1.4-1.4z"/></svg>196 </div>197 <h3>PPT on management training</h3>198 <div class="thumb-strip">199 <span class="subtitle">Presentation</span>200 <span class="more-dots">⋮</span>201 </div>202 </div>203 204 <!-- Partially visible lower cards -->205 <div class="card" style="height:300px;">206 <div class="img-ph" style="position:absolute; right:22px; bottom:18px; width:220px; height:140px; font-size:22px;">[IMG: Slide Thumbnail]</div>207 <h3 style="max-width:240px;">Getting_Started</h3>208 <div class="thumb-strip">209 <span class="subtitle">Guide</span>210 <span class="more-dots">⋮</span>211 </div>212 </div>213 214 <div class="card" style="height:300px;">215 <div class="img-ph" style="position:absolute; right:22px; bottom:18px; width:230px; height:140px; font-size:22px;">[IMG: Spreadsheet Preview]</div>216 <h3 style="max-width:260px;">Budget_Overview</h3>217 <div class="thumb-strip">218 <span class="subtitle">Spreadsheet</span>219 <span class="more-dots">⋮</span>220 </div>221 </div>222 </div>223 </div>224 225 <!-- Floating context menu -->226 <div class="context-menu">227 <div class="menu-item">228 <div class="icon">229 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.47.09-.7s-.04-.47-.09-.7l7.02-4.11A2.99 2.99 0 1 0 15 4a2.99 2.99 0 0 0 .09.7L8.07 8.81A3 3 0 1 0 6 12c0 .23.04.47.09.7l7.02 4.11c.5-.46 1.18-.73 1.89-.73A3 3 0 1 0 18 16.08z"/></svg>230 </div>231 <span>Share</span>232 </div>233 <div class="menu-item">234 <div class="icon">235 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>236 </div>237 <span>Add to favorites</span>238 </div>239 <div class="menu-item">240 <div class="icon">241 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M10 3H5a2 2 0 0 0-2 2v5h2V5h5V3zm4 18h5a2 2 0 0 0 2-2v-5h-2v5h-5v2zM3 14v5a2 2 0 0 0 2 2h5v-2H5v-5H3zm18-4V5a2 2 0 0 0-2-2h-5v2h5v5h2z"/></svg>242 </div>243 <span>Create shortcut</span>244 </div>245 <div class="menu-item">246 <div class="icon">247 <svg width="42" height="42" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M17 7H7a2 2 0 0 0-2 2v6h2V9h10v6h2V9a2 2 0 0 0-2-2zm-3 11H10l-1 2h6l-1-2z"/></svg>248 </div>249 <span>Available offline</span>250 <div class="switch"></div>251 </div>252 <div class="menu-item">253 <div class="icon">254 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M10 4H4v16h16V8h-8zM6 6h7v3h5v9H6V6z"/></svg>255 </div>256 <span>Show in folder</span>257 </div>258 <div class="menu-item">259 <div class="icon">260 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M3 6h18v2H3V6zm3 3h12l-1 11H7L6 9zm4-6h4v2h-4V3z"/></svg>261 </div>262 <span>Rename</span>263 </div>264 <div class="menu-item">265 <div class="icon">266 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E57373"><path d="M6 7h12l-1 12H7L6 7zm3-4h6l1 3H8l1-3z"/></svg>267 </div>268 <span>Delete</span>269 </div>270 <div class="menu-item">271 <div class="icon">272 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M10 4H4v16h16V8h-8zM6 6h7v3h5v9H6V6z"/></svg>273 </div>274 <span>Manage in File Commander</span>275 </div>276 <div class="menu-item">277 <div class="icon">278 <svg width="38" height="38" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M19 13H5v-2h14v2z"/></svg>279 </div>280 <span>Remove from list</span>281 </div>282 <div class="menu-item">283 <div class="icon">284 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M13 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3zm-1 5h2v6h-2V8zm0 8h2v2h-2v-2z"/></svg>285 </div>286 <span>Version history</span>287 </div>288 <div class="menu-item">289 <div class="icon">290 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>291 </div>292 <span>Properties</span>293 </div>294 </div>295 296 <div class="home-indicator"></div>297</div>298</body>299</html>