GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Drive UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #EDEDED; font-family: Roboto, Arial, sans-serif;12 }13 14 /* Status bar */15 .status {16 position: absolute; top: 0; left: 0; width: 100%; height: 88px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; font-size: 28px; color: #fff;19 }20 .status .right { display: flex; gap: 18px; align-items: center; }21 .status .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.6; }22 .status .icon-bar {23 width: 30px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative;24 }25 .status .icon-bar::after {26 content: ""; position: absolute; top: 2px; left: 8px; width: 12px; height: 12px; background: #fff;27 }28 29 /* Header search row */30 .header {31 position: absolute; top: 88px; left: 0; width: 100%; height: 160px;32 display: flex; align-items: center; padding: 0 32px; gap: 24px;33 }34 .hamburger {35 width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center;36 }37 .hamburger svg { width: 42px; height: 42px; fill: none; stroke: #EDEDED; stroke-width: 6; }38 .searchbar {39 flex: 1; height: 88px; border-radius: 44px; background: #252525;40 display: flex; align-items: center; padding: 0 32px; color: #BDBDBD; font-size: 32px;41 }42 .avatar {43 width: 66px; height: 66px; border-radius: 33px; background: #6336C8;44 display: flex; align-items: center; justify-content: center; font-weight: 600;45 box-shadow: 0 2px 8px rgba(0,0,0,0.4);46 }47 48 /* Tabs */49 .tabs {50 position: absolute; top: 248px; left: 0; width: 100%; height: 72px;51 display: flex; align-items: center; gap: 48px; padding: 0 48px; font-size: 30px;52 }53 .tab { color: #BDBDBD; }54 .tab.active { color: #8AB4F8; position: relative; }55 .tab.active::after {56 content: ""; position: absolute; left: 0; bottom: -8px; width: 140px; height: 4px; background: #8AB4F8; border-radius: 2px;57 }58 .divider {59 position: absolute; top: 320px; left: 0; width: 100%; height: 2px; background: #1E1E1E;60 }61 62 /* Section header */63 .section-title {64 position: absolute; top: 340px; left: 48px; right: 48px; height: 60px;65 display: flex; align-items: center; justify-content: space-between; font-size: 30px; color: #CFCFCF;66 }67 .title-right { display: flex; align-items: center; gap: 24px; }68 .view-toggle, .more-vert {69 width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center;70 }71 .view-toggle svg, .more-vert svg { width: 32px; height: 32px; fill: #CFCFCF; }72 73 /* Grid content */74 .content {75 position: absolute; top: 410px; left: 0; right: 0; bottom: 190px; padding: 0 36px;76 }77 .grid {78 display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 140px;79 }80 .card {81 background: #1A1A1A; border-radius: 24px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.4);82 }83 .preview {84 width: 100%; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;85 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;86 }87 .card .row {88 margin-top: 18px; display: flex; align-items: center; justify-content: space-between;89 }90 .name { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }91 .dots svg { width: 28px; height: 28px; fill: #CFCFCF; }92 .chip {93 margin-top: 10px; display: inline-block; padding: 8px 12px; border-radius: 8px; font-size: 22px; color: #111;94 }95 .chip.red { background: #F48B87; }96 .chip.green { background: #CDECA4; }97 .chip.blue { background: #8AB4F8; color: #0C0C0C; }98 99 /* Floating Action Button */100 .fab {101 position: absolute; right: 42px; bottom: 260px; width: 118px; height: 118px; border-radius: 59px;102 background: #2F3E49; box-shadow: 0 8px 20px rgba(0,0,0,0.6);103 display: flex; align-items: center; justify-content: center;104 }105 .fab svg { width: 54px; height: 54px; fill: none; stroke: #EDEDED; stroke-width: 10; }106 107 /* Bottom navigation */108 .bottom-nav {109 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #1A1A1A;110 display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #202020;111 }112 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #CFCFCF; font-size: 26px; }113 .nav-item svg { width: 42px; height: 42px; fill: #CFCFCF; }114 .nav-item.active { color: #8AB4F8; }115 .nav-item.active svg { fill: #8AB4F8; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="status">123 <div>10:24</div>124 <div class="right">125 <div class="dot"></div>126 <div class="dot"></div>127 <div class="dot"></div>128 <div class="icon-bar"></div>129 <div style="width:20px;height:34px;border:3px solid #fff;border-radius:4px;position:relative;">130 <div style="position:absolute;top:4px;left:4px;width:10px;height:24px;background:#fff;"></div>131 </div>132 </div>133 </div>134 135 <!-- Search header -->136 <div class="header">137 <div class="hamburger">138 <svg viewBox="0 0 24 24">139 <path d="M3 6h18M3 12h18M3 18h18"/>140 </svg>141 </div>142 <div class="searchbar">Search in Drive</div>143 <div class="avatar">C</div>144 </div>145 146 <!-- Tabs -->147 <div class="tabs">148 <div class="tab active">My Drive</div>149 <div class="tab">Computers</div>150 <div style="margin-left:auto;">151 <svg width="44" height="44" viewBox="0 0 24 24" style="fill:#CFCFCF;">152 <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/>153 </svg>154 </div>155 </div>156 <div class="divider"></div>157 158 <!-- Section title -->159 <div class="section-title">160 <div>Last modified by me</div>161 <div class="title-right">162 <div class="view-toggle">163 <svg viewBox="0 0 24 24">164 <path d="M3 4h8v7H3zM13 4h8v7h-8zM3 13h8v7H3zM13 13h8v7h-8z"/>165 </svg>166 </div>167 </div>168 </div>169 170 <!-- Content grid -->171 <div class="content">172 <div class="grid">173 174 <!-- Folders -->175 <div class="card">176 <div class="preview">[IMG: Folder Preview]</div>177 <div class="row">178 <div class="name">Nature</div>179 <div class="dots">180 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>181 </div>182 </div>183 </div>184 185 <div class="card">186 <div class="preview">[IMG: Folder Preview]</div>187 <div class="row">188 <div class="name">ToDoReminder_Backup</div>189 <div class="dots">190 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>191 </div>192 </div>193 </div>194 195 <!-- Files -->196 <div class="card">197 <div class="preview">[IMG: PDF Preview]</div>198 <div class="row">199 <div class="name">landscape design</div>200 <div class="dots">201 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>202 </div>203 </div>204 <span class="chip red">PDF</span>205 </div>206 207 <div class="card">208 <div class="preview">[IMG: APK Icon]</div>209 <div class="row">210 <div class="name">landscaping-ideas.apk</div>211 <div class="dots">212 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>213 </div>214 </div>215 <span class="chip green">APK</span>216 </div>217 218 <div class="card">219 <div class="preview">[IMG: Document Preview]</div>220 <div class="row">221 <div class="name">screenshot.txt</div>222 <div class="dots">223 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>224 </div>225 </div>226 <span class="chip blue">DOC</span>227 </div>228 229 <div class="card">230 <div class="preview">[IMG: PDF Preview]</div>231 <div class="row">232 <div class="name">tableau_blueprint.pdf</div>233 <div class="dots">234 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>235 </div>236 </div>237 <span class="chip red">PDF</span>238 </div>239 240 <!-- Extra tiles to fill the screen visually -->241 <div class="card">242 <div class="preview">[IMG: Document Preview]</div>243 <div class="row">244 <div class="name">project_notes.txt</div>245 <div class="dots">246 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>247 </div>248 </div>249 <span class="chip blue">TXT</span>250 </div>251 252 <div class="card">253 <div class="preview">[IMG: PDF Preview]</div>254 <div class="row">255 <div class="name">design_brief.pdf</div>256 <div class="dots">257 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>258 </div>259 </div>260 <span class="chip red">PDF</span>261 </div>262 263 </div>264 </div>265 266 <!-- Floating action button -->267 <div class="fab">268 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>269 </div>270 271 <!-- Bottom navigation -->272 <div class="bottom-nav">273 <div class="nav-item">274 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>275 <div>Home</div>276 </div>277 <div class="nav-item">278 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.7 7.1-.6L12 2l2.9 6.8 7.1.6-5.4 4.7 1.6 6.9z"/></svg>279 <div>Starred</div>280 </div>281 <div class="nav-item">282 <svg viewBox="0 0 24 24"><path d="M16 11a4 4 0 10-8 0 4 4 0 008 0zm-12 9c0-4 4-6 8-6s8 2 8 6v2H4v-2z"/></svg>283 <div>Shared</div>284 </div>285 <div class="nav-item active">286 <svg viewBox="0 0 24 24"><path d="M10 4h10v7H10l-2-2H4V6h4l2-2zM4 12h16v8H4z"/></svg>287 <div>Files</div>288 </div>289 </div>290 291</div>292</body>293</html>