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 - Dark Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f191b; /* deep dark with slight warm tint */15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #F3EDF7;17 }18 .top-area { padding: 36px 36px 0; }19 .searchbar {20 height: 120px;21 background: #3a2e34;22 border-radius: 32px;23 display: flex;24 align-items: center;25 padding: 0 28px;26 gap: 24px;27 color: #CBBBC2;28 font-size: 38px;29 }30 .spacer { flex: 1; }31 .circle-avatar {32 width: 74px; height: 74px; border-radius: 50%;33 background: #2E7DFF;34 display: flex; align-items: center; justify-content: center;35 color: #fff; font-weight: 600;36 }37 .tabs {38 display: flex;39 gap: 54px;40 padding: 28px 12px 0 12px;41 margin-left: 12px;42 align-items: flex-end;43 }44 .tab {45 color: #CBBBC2;46 font-size: 40px;47 }48 .tab.active { color: #F48FB1; font-weight: 600; position: relative; }49 .tab.active::after {50 content: "";51 position: absolute;52 left: 0;53 bottom: -18px;54 width: 160px;55 height: 10px;56 border-radius: 8px;57 background: #F48FB1;58 }59 .section-header {60 display: flex;61 align-items: center;62 padding: 42px 36px 12px 36px;63 color: #B9AEB4;64 font-size: 36px;65 }66 .section-header .title { font-weight: 600; color: #E8DEE4; }67 .grid-btn {68 margin-left: auto;69 width: 64px; height: 64px;70 display: flex; align-items: center; justify-content: center;71 }72 .list {73 padding: 8px 0 0 0;74 }75 .row {76 display: flex;77 align-items: center;78 gap: 28px;79 padding: 28px 24px 28px 36px;80 border-bottom: 1px solid #332a2f;81 }82 .icon-box, .thumb {83 width: 100px; height: 100px; border-radius: 18px;84 display: flex; align-items: center; justify-content: center;85 }86 .icon-folder { background: #5d4a52; }87 .icon-doc { background: #4c5fd4; }88 .icon-video { background: #C7515B; }89 .file-text { display: flex; flex-direction: column; gap: 6px; }90 .file-name { font-size: 42px; }91 .file-meta { font-size: 32px; color: #B9AEB4; }92 .more {93 margin-left: auto;94 width: 64px; height: 64px;95 display: flex; align-items: center; justify-content: center;96 color: #CBBBC2;97 }98 .thumb {99 background: #E0E0E0;100 border: 1px solid #BDBDBD;101 color: #757575;102 font-size: 26px;103 text-align: center;104 padding: 6px;105 }106 /* Floating action button */107 .fab {108 position: absolute;109 right: 56px;110 bottom: 310px;111 width: 150px; height: 150px;112 border-radius: 38px;113 background: #6a4c56;114 box-shadow: 0 10px 30px rgba(0,0,0,0.45);115 display: flex; align-items: center; justify-content: center;116 }117 /* Bottom navigation */118 .bottom-nav {119 position: absolute;120 left: 0; right: 0; bottom: 0;121 height: 220px;122 background: #2b2226;123 border-top: 1px solid #3a2f35;124 display: flex;125 padding: 14px 24px 20px;126 }127 .nav-item {128 flex: 1;129 display: flex; flex-direction: column; align-items: center; justify-content: center;130 gap: 12px;131 color: #CBBBC2;132 font-size: 30px;133 }134 .nav-active {135 background: #6a4c56;136 color: #fff;137 padding: 14px 28px;138 border-radius: 28px;139 }140 /* Gesture pill */141 .gesture {142 position: absolute;143 bottom: 220px;144 left: 50%;145 transform: translateX(-50%);146 width: 240px;147 height: 10px;148 border-radius: 8px;149 background: #EAEAEA;150 opacity: 0.9;151 }152 /* Simple helpers */153 svg { display: block; }154</style>155</head>156<body>157<div id="render-target">158 159 <div class="top-area">160 <div class="searchbar">161 <!-- hamburger -->162 <svg width="44" height="44" viewBox="0 0 24 24" fill="#CBBBC2" aria-hidden="true">163 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>164 </svg>165 <span>Search in Drive</span>166 <div class="spacer"></div>167 <div class="circle-avatar">K</div>168 </div>169 170 <div class="tabs">171 <div class="tab active">My Drive</div>172 <div class="tab">Computers</div>173 </div>174 </div>175 176 <div class="section-header">177 <span class="title">Name ↑</span>178 <div class="grid-btn">179 <!-- grid icon -->180 <svg width="48" height="48" viewBox="0 0 24 24" fill="#CBBBC2" aria-hidden="true">181 <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/>182 </svg>183 </div>184 </div>185 186 <div class="list">187 <!-- Folder: Yoga video -->188 <div class="row">189 <div class="icon-box icon-folder">190 <svg width="56" height="56" viewBox="0 0 24 24" fill="#EADFE3" aria-hidden="true">191 <path d="M10 4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h6z"/>192 </svg>193 </div>194 <div class="file-text">195 <div class="file-name">Yoga video</div>196 <div class="file-meta">Modified 10:02 PM</div>197 </div>198 <div class="more">199 <!-- more vertical -->200 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>201 </div>202 </div>203 204 <!-- actuation_result.txt -->205 <div class="row">206 <div class="icon-box icon-doc">207 <svg width="52" height="52" viewBox="0 0 24 24" fill="#EAF1FF" aria-hidden="true">208 <path d="M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1.5V9h5.5"/>209 </svg>210 </div>211 <div class="file-text">212 <div class="file-name">actuation_result.txt</div>213 <div class="file-meta">Modified 5:11 PM</div>214 </div>215 <div class="more">216 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>217 </div>218 </div>219 220 <!-- agents.txt -->221 <div class="row">222 <div class="icon-box icon-doc">223 <svg width="52" height="52" viewBox="0 0 24 24" fill="#EAF1FF"><path d="M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1.5V9h5.5"/></svg>224 </div>225 <div class="file-text">226 <div class="file-name">agents.txt</div>227 <div class="file-meta">Modified 5:11 PM</div>228 </div>229 <div class="more">230 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>231 </div>232 </div>233 234 <!-- images (1).jpeg preview -->235 <div class="row">236 <div class="thumb">[IMG: Taco photo]</div>237 <div class="file-text">238 <div class="file-name">images (1).jpeg</div>239 <div class="file-meta">Modified 5:11 PM</div>240 </div>241 <div class="more">242 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>243 </div>244 </div>245 246 <!-- Maki-zushi.jpg -->247 <div class="row">248 <div class="thumb">[IMG: Sushi image]</div>249 <div class="file-text">250 <div class="file-name">Maki-zushi.jpg</div>251 <div class="file-meta">Modified 5:11 PM</div>252 </div>253 <div class="more">254 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>255 </div>256 </div>257 258 <!-- os_info.txt -->259 <div class="row">260 <div class="icon-box icon-doc">261 <svg width="52" height="52" viewBox="0 0 24 24" fill="#EAF1FF"><path d="M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1.5V9h5.5"/></svg>262 </div>263 <div class="file-text">264 <div class="file-name">os_info.txt</div>265 <div class="file-meta">Modified 5:11 PM</div>266 </div>267 <div class="more">268 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>269 </div>270 </div>271 272 <!-- Outdoor yoga.mp4 -->273 <div class="row">274 <div class="icon-box icon-video">275 <svg width="60" height="60" viewBox="0 0 24 24" fill="#FFECEE" aria-hidden="true">276 <path d="M4 5h12a2 2 0 012 2v10a2 2 0 01-2 2H4z"/>277 <path d="M16 10l6-3v10l-6-3z" fill="#FFD1D6"/>278 </svg>279 </div>280 <div class="file-text">281 <div class="file-name">Outdoor yoga.mp4</div>282 <div class="file-meta">Modified 5:11 PM</div>283 </div>284 <div class="more">285 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>286 </div>287 </div>288 289 <!-- Pizza.jpeg -->290 <div class="row">291 <div class="thumb">[IMG: Pizza slice]</div>292 <div class="file-text">293 <div class="file-name">Pizza.jpeg</div>294 <div class="file-meta">Modified 5:12 PM</div>295 </div>296 <div class="more">297 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>298 </div>299 </div>300 </div>301 302 <!-- Floating Action Button -->303 <div class="fab">304 <svg width="64" height="64" viewBox="0 0 24 24" fill="#F3EDF7">305 <path d="M11 4h2v16h-2zM4 11h16v2H4z"/>306 </svg>307 </div>308 309 <!-- Gesture pill -->310 <div class="gesture"></div>311 312 <!-- Bottom Navigation -->313 <div class="bottom-nav">314 <div class="nav-item">315 <svg width="44" height="44" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>316 <div>Home</div>317 </div>318 <div class="nav-item">319 <svg width="44" height="44" viewBox="0 0 24 24" fill="#CBBBC2"><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>320 <div>Starred</div>321 </div>322 <div class="nav-item">323 <svg width="44" height="44" viewBox="0 0 24 24" fill="#CBBBC2"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.94 1.97 3.45V20h7v-3.5c0-2.33-4.67-3.5-8-3.5z"/></svg>324 <div>Shared</div>325 </div>326 <div class="nav-item">327 <div class="nav-active">328 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M10 4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h6z"/></svg>329 </div>330 <div style="margin-top:6px;">Files</div>331 </div>332 </div>333 334</div>335</body>336</html>