GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock - Drive Dark</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f0b08;14 color: #d1c6bc;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 }17 .status-bar {18 height: 110px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #eee7e2;24 font-size: 40px;25 letter-spacing: 1px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 28px;31 }32 .search-area {33 padding: 20px 36px 0 36px;34 }35 .search-pill {36 height: 116px;37 border-radius: 58px;38 background: #231812;39 display: flex;40 align-items: center;41 padding: 0 16px 0 20px;42 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);43 }44 .hamburger {45 width: 80px; height: 80px; border-radius: 40px;46 display: flex; align-items: center; justify-content: center;47 }48 .search-text {49 flex: 1;50 color: #9d8e84;51 font-size: 44px;52 padding-left: 8px;53 }54 .avatar {55 width: 88px; height: 88px; border-radius: 44px;56 background: #6a57c9;57 color: #fff;58 display: flex; align-items: center; justify-content: center;59 font-weight: 700;60 margin-right: 8px;61 }62 .tabs {63 display: flex;64 gap: 56px;65 padding: 26px 36px 10px 36px;66 align-items: flex-end;67 color: #8e7f74;68 font-size: 42px;69 }70 .tab {71 position: relative;72 padding-bottom: 18px;73 }74 .tab.active { color: #e8b377; font-weight: 600; }75 .tab.active::after {76 content: "";77 position: absolute;78 left: 0; right: 0; bottom: 0;79 height: 8px; width: 140px;80 background: #e8b377;81 border-radius: 4px;82 }83 .divider { height: 2px; background: #211610; opacity: 0.8; }84 .subheader {85 display: flex; align-items: center; justify-content: space-between;86 padding: 28px 36px;87 color: #9d8e84;88 font-size: 38px;89 border-bottom: 1px solid rgba(255,255,255,0.04);90 }91 .subheader .left { display: flex; align-items: center; gap: 14px; }92 .file-list { padding: 10px 0 520px 0; } /* leave space above bottom sheet */93 .file-item {94 display: flex; align-items: center; justify-content: space-between;95 padding: 28px 36px;96 gap: 24px;97 }98 .file-left { display: flex; align-items: center; gap: 28px; }99 .icon-box {100 width: 84px; height: 84px; border-radius: 16px;101 display: flex; align-items: center; justify-content: center;102 font-size: 34px; font-weight: 700;103 color: #1b120e;104 }105 .icon-folder { background: #c9b7a7; }106 .icon-doc { background: #88a2e9; color: #0b1733; }107 .icon-img { background: #afc6a8; color: #0f2b15; }108 .file-main { display: flex; flex-direction: column; }109 .file-name { font-size: 44px; color: #d7cbc2; }110 .file-meta { font-size: 34px; color: #8e7f74; margin-top: 8px; }111 .menu-dots { color: #8e7f74; font-size: 60px; padding: 0 12px; }112 .pdf-badge {113 background: #c95c56; color: #fff; border-radius: 10px;114 padding: 6px 12px; font-size: 26px; font-weight: 700;115 margin-right: 6px;116 }117 118 /* Bottom action sheet */119 .sheet {120 position: absolute;121 left: 0; right: 0; bottom: 0;122 height: 640px;123 background: #3a271c;124 border-top-left-radius: 56px;125 border-top-right-radius: 56px;126 box-shadow: 0 -10px 30px rgba(0,0,0,0.6);127 padding-top: 40px;128 }129 .sheet-grid {130 display: grid;131 grid-template-columns: repeat(3, 1fr);132 row-gap: 42px;133 padding: 40px 70px 0 70px;134 text-align: center;135 }136 .sheet-item { color: #d1c6bc; }137 .circle {138 width: 140px; height: 140px; border-radius: 70px;139 border: 2px solid rgba(255,255,255,0.22);140 margin: 0 auto 20px auto;141 display: flex; align-items: center; justify-content: center;142 color: #e2d8cf;143 }144 .label { font-size: 36px; color: #c6b7ac; }145 .handle {146 position: absolute; left: 50%; transform: translateX(-50%);147 bottom: 18px; width: 260px; height: 14px; border-radius: 7px;148 background: #e9e1db; opacity: 0.8;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status bar -->156 <div class="status-bar">157 <div class="time">8:42</div>158 <div class="status-right">159 <!-- small temperature / alert text to hint -->160 <div style="font-size:32px; opacity:.8;">20° △ 18°</div>161 <!-- wifi icon -->162 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">163 <path d="M2 9c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>164 <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>165 <path d="M8 15c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>166 <circle cx="12" cy="18" r="1.2" fill="#ffffff"/>167 </svg>168 <!-- battery icon -->169 <svg width="56" height="56" viewBox="0 0 26 26" fill="none">170 <rect x="1.5" y="6.5" width="18" height="13" rx="2" stroke="#ffffff" stroke-width="2"/>171 <rect x="4" y="9.5" width="13" height="7" rx="1" fill="#ffffff"/>172 <rect x="20.5" y="10" width="3.5" height="6" rx="1" fill="#ffffff"/>173 </svg>174 </div>175 </div>176 177 <!-- Search -->178 <div class="search-area">179 <div class="search-pill">180 <div class="hamburger">181 <svg width="54" height="54" viewBox="0 0 24 24">182 <path d="M3 6h18M3 12h18M3 18h14" stroke="#d1c6bc" stroke-width="2" stroke-linecap="round"/>183 </svg>184 </div>185 <div class="search-text">Search in Drive</div>186 <div class="avatar">M</div>187 </div>188 </div>189 190 <!-- Tabs -->191 <div class="tabs">192 <div class="tab active">My Drive</div>193 <div class="tab">Computers</div>194 </div>195 <div class="divider"></div>196 197 <!-- Subheader -->198 <div class="subheader">199 <div class="left">200 <span>Last modified by me</span>201 <svg width="28" height="28" viewBox="0 0 24 24">202 <path d="M8 10l4 4 4-4" stroke="#9d8e84" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 <div class="right">206 <!-- Grid/list toggle icon -->207 <svg width="48" height="48" viewBox="0 0 24 24">208 <rect x="3" y="4" width="6" height="6" fill="#9d8e84"/><rect x="3" y="14" width="6" height="6" fill="#9d8e84"/>209 <rect x="13" y="4" width="8" height="6" fill="#9d8e84"/><rect x="13" y="14" width="8" height="6" fill="#9d8e84"/>210 </svg>211 </div>212 </div>213 214 <!-- Files -->215 <div class="file-list">216 <div class="file-item">217 <div class="file-left">218 <div class="icon-box icon-folder"></div>219 <div class="file-main">220 <div class="file-name">Important Docs</div>221 <div class="file-meta">Modified by me Oct 11</div>222 </div>223 </div>224 <div class="menu-dots">⋮</div>225 </div>226 227 <div class="file-item">228 <div class="file-left">229 <div class="icon-box icon-folder"></div>230 <div class="file-main">231 <div class="file-name">Yoga Video</div>232 <div class="file-meta">Modified by me Oct 11</div>233 </div>234 </div>235 <div class="menu-dots">⋮</div>236 </div>237 238 <div class="file-item">239 <div class="file-left">240 <div class="icon-box" style="background:#edb4b0; color:#5f1e1a; display:flex; align-items:center; justify-content:center;">241 <span style="background:#c95c56;color:#fff;border-radius:8px;padding:6px 10px;font-size:26px;font-weight:700;">PDF</span>242 </div>243 <div class="file-main">244 <div class="file-name">dance steps and positions.pdf</div>245 <div class="file-meta"><span class="pdf-badge">PDF</span>Modified by me Oct 11</div>246 </div>247 </div>248 <div class="menu-dots">⋮</div>249 </div>250 251 <div class="file-item">252 <div class="file-left">253 <div class="icon-box" style="background:#edb4b0; color:#5f1e1a; display:flex; align-items:center; justify-content:center;">254 <span style="background:#c95c56;color:#fff;border-radius:8px;padding:6px 10px;font-size:26px;font-weight:700;">PDF</span>255 </div>256 <div class="file-main">257 <div class="file-name">completeguidetod.pdf</div>258 <div class="file-meta">Modified by me Oct 11</div>259 </div>260 </div>261 <div class="menu-dots">⋮</div>262 </div>263 264 <div class="file-item">265 <div class="file-left">266 <div class="icon-box icon-doc">D</div>267 <div class="file-main">268 <div class="file-name">ToDoReminder_Backup</div>269 <div class="file-meta">Modified by me Oct 11</div>270 </div>271 </div>272 <div class="menu-dots">⋮</div>273 </div>274 275 <div class="file-item">276 <div class="file-left">277 <div class="icon-box icon-img">IMG</div>278 <div class="file-main">279 <div class="file-name">Plantum_1689052714923.jpg</div>280 <div class="file-meta">Modified by me Oct 11</div>281 </div>282 </div>283 <div class="menu-dots">⋮</div>284 </div>285 </div>286 287 <!-- Bottom creation sheet -->288 <div class="sheet">289 <div class="sheet-grid">290 <div class="sheet-item">291 <div class="circle">292 <svg width="64" height="64" viewBox="0 0 24 24">293 <path d="M4 6h10l4 4v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6z" stroke="#e2d8cf" stroke-width="2" fill="none"/>294 <path d="M14 6v4h4" stroke="#e2d8cf" stroke-width="2" fill="none"/>295 </svg>296 </div>297 <div class="label">Folder</div>298 </div>299 <div class="sheet-item">300 <div class="circle">301 <svg width="64" height="64" viewBox="0 0 24 24">302 <path d="M12 3v14m0 0l-4-4m4 4l4-4" stroke="#e2d8cf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>303 </svg>304 </div>305 <div class="label">Upload</div>306 </div>307 <div class="sheet-item">308 <div class="circle">309 <svg width="64" height="64" viewBox="0 0 24 24">310 <rect x="5" y="5" width="14" height="14" rx="2" stroke="#e2d8cf" stroke-width="2" fill="none"/>311 <path d="M8 8h8v8H8z" stroke="#e2d8cf" stroke-width="2" fill="none"/>312 </svg>313 </div>314 <div class="label">Scan</div>315 </div>316 317 <div class="sheet-item">318 <div class="circle">319 <div style="width:32px;height:32px;background:#5a86f1;border-radius:4px"></div>320 </div>321 <div class="label">Google Docs</div>322 </div>323 <div class="sheet-item">324 <div class="circle">325 <div style="width:32px;height:32px;background:#4caf50;border-radius:4px"></div>326 </div>327 <div class="label">Google Sheets</div>328 </div>329 <div class="sheet-item">330 <div class="circle">331 <div style="width:42px;height:28px;background:#f1c232;border-radius:4px"></div>332 </div>333 <div class="label">Google Slides</div>334 </div>335 </div>336 <div class="handle"></div>337 </div>338 339</div>340</body>341</html>