GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Drive UI Mock</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; position: relative; overflow: hidden;11 background: #FBF9FD; color: #222;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 90px;17 padding: 0 36px; display: flex; align-items: center; justify-content: space-between;18 font-size: 34px; color: #4A4A4A;19 }20 .status-icons { display: flex; align-items: center; gap: 26px; }21 .icon-shape { width: 30px; height: 30px; background: #6E6E6E; border-radius: 4px; opacity: 0.7; }22 23 /* Search header */24 .search-header {25 position: absolute; top: 90px; left: 0; width: 100%; height: 160px;26 display: flex; align-items: center; gap: 28px; padding: 24px 36px;27 }28 .menu-btn {29 width: 72px; height: 72px; border-radius: 36px; background: #EFEFF6; display: flex; align-items: center; justify-content: center;30 }31 .menu-btn svg { width: 40px; height: 40px; }32 .search-pill {33 flex: 1; height: 78px; background: #EFEFF6; border-radius: 40px;34 display: flex; align-items: center; padding: 0 28px; color: #777; font-size: 36px;35 box-shadow: inset 0 0 0 1px #E1E1E8;36 }37 .avatar {38 width: 76px; height: 76px; border-radius: 38px; background: #5FA5AE; color: #fff;39 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 40px;40 }41 42 /* Tabs */43 .tabs {44 position: absolute; top: 250px; left: 0; width: 100%; height: 90px;45 padding: 0 36px; display: flex; align-items: flex-end; gap: 60px;46 font-size: 40px;47 }48 .tab { color: #7B7B8A; padding-bottom: 22px; position: relative; }49 .tab.active { color: #5C55A7; font-weight: 600; }50 .tab.active::after {51 content: ""; position: absolute; left: 0; bottom: 0;52 width: 120px; height: 6px; background: #5C55A7; border-radius: 3px;53 }54 .divider { position: absolute; top: 330px; left: 0; width: 100%; height: 2px; background: #E6E6EB; }55 56 /* Name header */57 .name-row {58 position: absolute; top: 352px; left: 36px; right: 36px; height: 56px;59 display: flex; align-items: center; justify-content: space-between; color: #686873; font-size: 34px;60 }61 .name-row .left { display: flex; align-items: center; gap: 12px; }62 .name-row .right { display: flex; align-items: center; }63 .name-row svg { width: 28px; height: 28px; }64 65 /* Grid */66 .grid {67 position: absolute; top: 410px; left: 36px; right: 36px;68 display: grid; grid-template-columns: 1fr 1fr; gap: 64px 64px;69 }70 .tile { display: flex; flex-direction: column; gap: 18px; }71 .img-placeholder {72 width: 100%; height: 260px; background: #E0E0E0; border: 1px solid #BDBDBD;73 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 20px;74 font-size: 34px;75 }76 .label-row { display: flex; align-items: center; justify-content: space-between; }77 .item-title { font-size: 36px; color: #2F2F35; }78 .kebab { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }79 .kebab svg { width: 8px; height: 28px; }80 81 /* File tiles look softer */82 .file-preview { background: #F4F4F8; border: 1px solid #DADAE0; }83 .file-meta { display: flex; align-items: center; gap: 12px; }84 .file-icon {85 width: 32px; height: 32px; border-radius: 6px; background: #5D86FF; color: #fff;86 display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold;87 }88 .file-icon.pdf { background: #D74B36; }89 90 /* Floating action button */91 .fab {92 position: absolute; right: 36px; bottom: 310px;93 width: 118px; height: 118px; border-radius: 32px; background: #E7E5FF;94 box-shadow: 0 6px 16px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center;95 }96 .fab svg { width: 46px; height: 46px; fill: #4E48A3; }97 98 /* Snackbar */99 .snackbar {100 position: absolute; left: 50%; transform: translateX(-50%);101 bottom: 210px; width: 980px; height: 110px; background: #2E2E2E; color: #fff;102 border-radius: 16px; display: flex; align-items: center; padding: 0 28px; font-size: 34px;103 box-shadow: 0 6px 18px rgba(0,0,0,0.25);104 }105 106 /* Gesture pill */107 .gesture-pill {108 position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);109 width: 260px; height: 12px; background: #BDBDBD; border-radius: 10px; opacity: 0.8;110 }111 112 /* Bottom nav */113 .bottom-nav {114 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #FFFFFF;115 border-top: 1px solid #E6E6EB; display: flex; align-items: center; justify-content: space-around;116 }117 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #6F6F7A; font-size: 28px; }118 .nav-item svg { width: 42px; height: 42px; }119 .nav-item.active { color: #4E48A3; }120 .nav-item.active .icon-circle {121 width: 60px; height: 60px; background: #E8E6FF; border-radius: 20px; display: flex; align-items: center; justify-content: center;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status Bar -->129 <div class="status-bar">130 <div>10:18</div>131 <div class="status-icons">132 <div class="icon-shape" style="border-radius: 50%; width: 18px; height: 18px;"></div>133 <div class="icon-shape" style="width: 34px; height: 22px; border-radius: 3px;"></div>134 <div class="icon-shape" style="width: 22px; height: 22px; border-radius: 3px;"></div>135 <div class="icon-shape" style="width: 30px; height: 30px; border-radius: 6px;"></div>136 </div>137 </div>138 139 <!-- Search Header -->140 <div class="search-header">141 <div class="menu-btn">142 <svg viewBox="0 0 24 24">143 <rect x="3" y="5" width="18" height="2" fill="#5C5C69"></rect>144 <rect x="3" y="11" width="18" height="2" fill="#5C5C69"></rect>145 <rect x="3" y="17" width="18" height="2" fill="#5C5C69"></rect>146 </svg>147 </div>148 <div class="search-pill">Search in Drive</div>149 <div class="avatar">C</div>150 </div>151 152 <!-- Tabs -->153 <div class="tabs">154 <div class="tab active">My Drive</div>155 <div class="tab">Computers</div>156 </div>157 <div class="divider"></div>158 159 <!-- Name row -->160 <div class="name-row">161 <div class="left">162 <span>Name</span>163 <svg viewBox="0 0 24 24">164 <path d="M7 14l5-5 5 5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>165 </svg>166 </div>167 <div class="right">168 <!-- list/grid toggle icon -->169 <svg viewBox="0 0 24 24">170 <rect x="4" y="5" width="16" height="2" fill="#777"></rect>171 <rect x="4" y="11" width="16" height="2" fill="#777"></rect>172 <rect x="4" y="17" width="16" height="2" fill="#777"></rect>173 </svg>174 </div>175 </div>176 177 <!-- Content Grid -->178 <div class="grid">179 180 <!-- Row 1: Folders -->181 <div class="tile">182 <div class="img-placeholder">[IMG: Folder Icon]</div>183 <div class="label-row">184 <div class="item-title">Official_Docs</div>185 <div class="kebab">186 <svg viewBox="0 0 4 16">187 <circle cx="2" cy="2" r="1.4" fill="#8A8A93"></circle>188 <circle cx="2" cy="8" r="1.4" fill="#8A8A93"></circle>189 <circle cx="2" cy="14" r="1.4" fill="#8A8A93"></circle>190 </svg>191 </div>192 </div>193 </div>194 195 <div class="tile">196 <div class="img-placeholder">[IMG: Folder Icon]</div>197 <div class="label-row">198 <div class="item-title">YMCA 2023</div>199 <div class="kebab">200 <svg viewBox="0 0 4 16">201 <circle cx="2" cy="2" r="1.4" fill="#8A8A93"></circle>202 <circle cx="2" cy="8" r="1.4" fill="#8A8A93"></circle>203 <circle cx="2" cy="14" r="1.4" fill="#8A8A93"></circle>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Row 2: Files -->210 <div class="tile">211 <div class="img-placeholder file-preview">[IMG: Doc Preview]</div>212 <div class="label-row">213 <div class="file-meta">214 <div class="file-icon">G</div>215 <div class="item-title">BACKUP_REMINDER_M...</div>216 </div>217 <div class="kebab">218 <svg viewBox="0 0 4 16">219 <circle cx="2" cy="2" r="1.4" fill="#8A8A93"></circle>220 <circle cx="2" cy="8" r="1.4" fill="#8A8A93"></circle>221 <circle cx="2" cy="14" r="1.4" fill="#8A8A93"></circle>222 </svg>223 </div>224 </div>225 </div>226 227 <div class="tile">228 <div class="img-placeholder file-preview">[IMG: PDF Page Preview]</div>229 <div class="label-row">230 <div class="file-meta">231 <div class="file-icon pdf">PDF</div>232 <div class="item-title">Presentation_sample.pdf</div>233 </div>234 <div class="kebab">235 <svg viewBox="0 0 4 16">236 <circle cx="2" cy="2" r="1.4" fill="#8A8A93"></circle>237 <circle cx="2" cy="8" r="1.4" fill="#8A8A93"></circle>238 <circle cx="2" cy="14" r="1.4" fill="#8A8A93"></circle>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Row 3: Single file on left -->245 <div class="tile">246 <div class="img-placeholder file-preview">[IMG: Document Preview]</div>247 <div class="label-row">248 <div class="file-meta">249 <div class="file-icon">G</div>250 <div class="item-title">Untitled document</div>251 </div>252 <div class="kebab">253 <svg viewBox="0 0 4 16">254 <circle cx="2" cy="2" r="1.4" fill="#8A8A93"></circle>255 <circle cx="2" cy="8" r="1.4" fill="#8A8A93"></circle>256 <circle cx="2" cy="14" r="1.4" fill="#8A8A93"></circle>257 </svg>258 </div>259 </div>260 </div>261 262 <!-- Spacer on the right for layout balance -->263 <div class="tile"></div>264 </div>265 266 <!-- Floating Action Button -->267 <div class="fab">268 <svg viewBox="0 0 24 24">269 <rect x="11" y="4" width="2" height="16" fill="#4E48A3"></rect>270 <rect x="4" y="11" width="16" height="2" fill="#4E48A3"></rect>271 </svg>272 </div>273 274 <!-- Snackbar -->275 <div class="snackbar">File will be made available offline</div>276 277 <!-- Gesture pill -->278 <div class="gesture-pill"></div>279 280 <!-- Bottom Navigation -->281 <div class="bottom-nav">282 <div class="nav-item">283 <svg viewBox="0 0 24 24">284 <path d="M3 11l9-7 9 7v9H3z" fill="none" stroke="#6F6F7A" stroke-width="2"></path>285 </svg>286 <div>Home</div>287 </div>288 <div class="nav-item">289 <svg viewBox="0 0 24 24">290 <path d="M12 17.3l-5.6 3 1.1-6.4-4.7-4.6 6.5-.9L12 2l2.7 6.4 6.5.9-4.7 4.6 1.1 6.4z"291 fill="none" stroke="#6F6F7A" stroke-width="2"></path>292 </svg>293 <div>Starred</div>294 </div>295 <div class="nav-item">296 <svg viewBox="0 0 24 24">297 <circle cx="8" cy="8" r="4" fill="none" stroke="#6F6F7A" stroke-width="2"></circle>298 <circle cx="17" cy="7" r="3" fill="none" stroke="#6F6F7A" stroke-width="2"></circle>299 <path d="M3 20c2-4 8-4 10 0" stroke="#6F6F7A" stroke-width="2" fill="none"></path>300 <path d="M14 20c1.4-2.5 4.6-2.5 6 0" stroke="#6F6F7A" stroke-width="2" fill="none"></path>301 </svg>302 <div>Shared</div>303 </div>304 <div class="nav-item active">305 <div class="icon-circle">306 <svg viewBox="0 0 24 24">307 <path d="M3 6h8l2 3h8v11H3z" fill="none" stroke="#4E48A3" stroke-width="2"></path>308 </svg>309 </div>310 <div>Files</div>311 </div>312 </div>313 314</div>315</body>316</html>