GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>My Files UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #FAFAFA;14 }15 16 /* Status bar */17 .statusbar {18 height: 110px;19 background: #FFFFFF;20 display: flex;21 align-items: center;22 padding: 0 28px;23 color: #616161;24 font-size: 32px;25 box-shadow: 0 1px 0 rgba(0,0,0,0.06);26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }29 .icon24 { width: 40px; height: 40px; fill: #757575; }30 31 /* App bar */32 .appbar {33 background: #FFFFFF;34 padding: 26px 36px 22px 36px;35 }36 .appbar-top {37 display: flex;38 align-items: center;39 }40 .hamburger {41 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 20px;42 }43 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 34px; }44 .title-block { margin-left: 16px; }45 .title { font-size: 56px; color: #333; line-height: 1.15; }46 .subtitle { font-size: 28px; color: #9E9E9E; margin-top: 6px; }47 48 /* Breadcrumb */49 .breadcrumb {50 background: #FFFFFF;51 border-top: 1px solid #EEEEEE;52 border-bottom: 1px solid #E0E0E0;53 padding: 28px 40px;54 display: flex;55 align-items: center;56 gap: 18px;57 letter-spacing: 0.6px;58 }59 .crumb-active { color: #3F8FF7; font-weight: 600; font-size: 32px; text-transform: uppercase; }60 .crumb-sep { width: 20px; height: 20px; border-right: 3px solid #BDBDBD; border-bottom: 3px solid #BDBDBD; transform: rotate(-45deg); margin: 0 6px; }61 .crumb { color: #9E9E9E; font-size: 32px; text-transform: uppercase; }62 63 /* List */64 .list { background: #FFFFFF; }65 .item {66 display: flex;67 align-items: center;68 padding: 34px 40px;69 border-bottom: 1px solid #EEEEEE;70 }71 .avatar {72 width: 120px; height: 120px; border-radius: 60px; background: #2E7DD6;73 display: flex; align-items: center; justify-content: center; margin-right: 30px;74 }75 .item-text { display: flex; flex-direction: column; }76 .item-title { font-size: 44px; color: #444; line-height: 1.1; }77 .item-sub { font-size: 28px; color: #9E9E9E; margin-top: 8px; }78 .item-date { margin-left: auto; color: #9E9E9E; font-size: 26px; }79 80 /* Ad card */81 .ad-wrap {82 position: relative;83 padding: 16px 40px 32px 40px;84 background: #FFFFFF;85 border-bottom: 1px solid #EEEEEE;86 }87 .ad-label {88 position: absolute;89 left: 52px;90 top: -6px;91 background: #FFB300;92 color: #FFFFFF;93 font-size: 24px;94 padding: 8px 16px;95 border-radius: 14px;96 }97 .ad-card {98 width: 940px;99 margin: 22px auto 0;100 background: #FFFFFF;101 border-radius: 28px;102 box-shadow: 0 6px 20px rgba(0,0,0,0.08);103 padding: 28px 34px;104 display: flex;105 align-items: center;106 gap: 26px;107 }108 .ad-img {109 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;110 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 20px;111 }112 .ad-text { flex: 1; }113 .ad-title { font-size: 36px; color: #2F2F2F; }114 .ad-sub { margin-top: 8px; font-size: 26px; color: #616161; }115 .stars { color: #FFB300; font-size: 26px; margin-left: 12px; }116 .ad-btn {117 background: #FFB300;118 color: #FFFFFF;119 font-size: 28px;120 font-weight: 600;121 border-radius: 999px;122 padding: 20px 34px;123 border: none;124 }125 126 /* Floating Action Button */127 .fab {128 position: absolute;129 right: 48px;130 bottom: 220px;131 width: 132px; height: 132px; border-radius: 66px;132 background: #FFCA28;133 box-shadow: 0 10px 24px rgba(0,0,0,0.25);134 display: flex; align-items: center; justify-content: center;135 }136 .fab svg { width: 72px; height: 72px; fill: #FFFFFF; }137 138 /* Gesture bar */139 .gesturebar {140 position: absolute;141 bottom: 36px;142 left: 50%;143 transform: translateX(-50%);144 width: 250px;145 height: 12px;146 background: #C9C9C9;147 border-radius: 8px;148 }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="statusbar">156 <div class="status-left">157 <div>11:19</div>158 <div>33°</div>159 <svg class="icon24 viewBox" viewBox="0 0 24 24">160 <path d="M12 3l4 6H8l4-6zm-7 9h14l-2 9H7l-2-9z"/>161 </svg>162 <svg class="icon24" viewBox="0 0 24 24">163 <circle cx="12" cy="12" r="10" opacity="0.2"></circle>164 <path d="M12 6v6l4 2" stroke="#757575" stroke-width="2" fill="none"/>165 </svg>166 </div>167 <div class="status-right">168 <svg class="icon24" viewBox="0 0 24 24">169 <path d="M2 16s4-5 10-5 10 5 10 5-4 5-10 5S2 16 2 16zm10-3a3 3 0 110 6 3 3 0 010-6z"/>170 </svg>171 <svg class="icon24" viewBox="0 0 24 24">172 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#9E9E9E"/>173 <rect x="5" y="8" width="14" height="8" fill="#FFFFFF"/>174 <rect x="21" y="10" width="2" height="4" fill="#9E9E9E"/>175 </svg>176 </div>177 </div>178 179 <!-- App Bar -->180 <div class="appbar">181 <div class="appbar-top">182 <div class="hamburger">183 <svg width="54" height="54" viewBox="0 0 24 24" fill="#4285F4">184 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>185 </svg>186 </div>187 <div class="title-block">188 <div class="title">My Files</div>189 <div class="subtitle">15 folders</div>190 </div>191 <div class="app-actions">192 <svg width="52" height="52" viewBox="0 0 24 24" fill="#4A90E2">193 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14A4.5 4.5 0 115 9.5 4.5 4.5 0 019.5 14z"/>194 </svg>195 <svg width="52" height="52" viewBox="0 0 24 24" fill="#4A4A4A">196 <circle cx="12" cy="5" r="2"></circle>197 <circle cx="12" cy="12" r="2"></circle>198 <circle cx="12" cy="19" r="2"></circle>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Breadcrumb -->205 <div class="breadcrumb">206 <div class="crumb-active">INTERNAL MEMORY</div>207 <div class="crumb-sep"></div>208 <div class="crumb">MUSIC</div>209 </div>210 211 <!-- File list -->212 <div class="list">213 214 <div class="item">215 <div class="avatar">216 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">217 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>218 </svg>219 </div>220 <div class="item-text">221 <div class="item-title">Alarms</div>222 <div class="item-sub">Empty</div>223 </div>224 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>225 </div>226 227 <div class="item">228 <div class="avatar">229 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">230 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>231 </svg>232 </div>233 <div class="item-text">234 <div class="item-title">Android</div>235 <div class="item-sub">3 items</div>236 </div>237 <div class="item-date">Feb 27, 2023, 9:35:57 PM</div>238 </div>239 240 <div class="item">241 <div class="avatar">242 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">243 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>244 </svg>245 </div>246 <div class="item-text">247 <div class="item-title">Audiobooks</div>248 <div class="item-sub">Empty</div>249 </div>250 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>251 </div>252 253 <div class="item">254 <div class="avatar">255 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">256 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>257 </svg>258 </div>259 <div class="item-text">260 <div class="item-title">com.google.intelligence.dbw.showcase</div>261 <div class="item-sub">1 item</div>262 </div>263 <div class="item-date">Jun 08, 2023, 3:17:27 PM</div>264 </div>265 266 <div class="item">267 <div class="avatar">268 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">269 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>270 </svg>271 </div>272 <div class="item-text">273 <div class="item-title">DCIM</div>274 <div class="item-sub">1 item</div>275 </div>276 <div class="item-date">Jun 08, 2023, 12:19:47 PM</div>277 </div>278 279 <div class="item">280 <div class="avatar">281 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">282 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>283 </svg>284 </div>285 <div class="item-text">286 <div class="item-title">Documents</div>287 <div class="item-sub">Empty</div>288 </div>289 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>290 </div>291 292 <div class="item">293 <div class="avatar">294 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">295 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>296 </svg>297 </div>298 <div class="item-text">299 <div class="item-title">Download</div>300 <div class="item-sub">Empty</div>301 </div>302 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>303 </div>304 305 <div class="item">306 <div class="avatar">307 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">308 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>309 </svg>310 </div>311 <div class="item-text">312 <div class="item-title">Movies</div>313 <div class="item-sub">1 item</div>314 </div>315 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>316 </div>317 318 <!-- Ad section -->319 <div class="ad-wrap">320 <div class="ad-label">Ad</div>321 <div class="ad-card">322 <div class="ad-img">[IMG: Tango App Logo]</div>323 <div class="ad-text">324 <div class="ad-title">Tango-Live Stream & Video Chat</div>325 <div class="ad-sub">Tango <span class="stars">★★★★★</span></div>326 </div>327 <button class="ad-btn">DOWNLOAD</button>328 </div>329 </div>330 331 <div class="item">332 <div class="avatar">333 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">334 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>335 </svg>336 </div>337 <div class="item-text">338 <div class="item-title">Music</div>339 <div class="item-sub">2 items</div>340 </div>341 <div class="item-date">Jul 05, 2023, 9:58:19 AM</div>342 </div>343 344 <div class="item">345 <div class="avatar">346 <svg width="64" height="64" viewBox="0 0 24 24" fill="#FFFFFF">347 <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z"/>348 </svg>349 </div>350 <div class="item-text">351 <div class="item-title">Notifications</div>352 <div class="item-sub">Empty</div>353 </div>354 <div class="item-date">Feb 27, 2023, 9:36:00 PM</div>355 </div>356 357 </div>358 359 <!-- Floating Action Button -->360 <div class="fab">361 <svg viewBox="0 0 24 24">362 <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>363 </svg>364 </div>365 366 <!-- Gesture bar -->367 <div class="gesturebar"></div>368 369</div>370</body>371</html>