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>Documents - Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #212121;15 color: #FFFFFF;16 border-radius: 0;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 padding: 0 40px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #FFFFFF;32 font-size: 40px;33 letter-spacing: 0.5px;34 }35 .status-left { display: flex; align-items: center; gap: 24px; }36 .status-right { display: flex; align-items: center; gap: 24px; }37 .status-dot {38 width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%;39 }40 41 /* App bar */42 .app-bar {43 position: absolute;44 top: 110px;45 left: 0;46 width: 1080px;47 height: 150px;48 padding: 0 28px;49 box-sizing: border-box;50 display: flex;51 align-items: center;52 gap: 20px;53 border-bottom: 1px solid #3A3A3A;54 }55 .app-title {56 font-size: 56px;57 font-weight: 600;58 margin-right: auto;59 }60 .icon-btn {61 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;62 border-radius: 12px;63 }64 .icon-btn svg { width: 56px; height: 56px; fill: #FFFFFF; }65 66 /* Ad card */67 .ad-card {68 position: absolute;69 top: 260px;70 left: 0;71 width: 1080px;72 padding: 24px 36px;73 box-sizing: border-box;74 display: flex;75 align-items: center;76 gap: 28px;77 border-bottom: 1px solid #3A3A3A;78 }79 .ad-left {80 display: flex;81 align-items: center;82 gap: 20px;83 flex: 1;84 min-width: 0;85 }86 .ad-logo {87 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;88 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;89 border-radius: 16px;90 }91 .ad-badge {92 background: #FFCE54; color: #212121; font-weight: 700; font-size: 26px;93 padding: 6px 12px; border-radius: 10px;94 }95 .ad-brand {96 font-size: 40px; font-weight: 600;97 }98 .ad-btn {99 background: #3D6DF8; color: #FFFFFF; font-size: 36px; font-weight: 600;100 padding: 26px 40px; border-radius: 60px;101 white-space: nowrap;102 }103 104 /* File list */105 .file-list {106 position: absolute;107 top: 390px;108 left: 0;109 width: 1080px;110 box-sizing: border-box;111 padding-bottom: 140px;112 }113 .file-item {114 display: flex; align-items: center;115 padding: 34px 36px;116 box-sizing: border-box;117 border-bottom: 1px solid #3A3A3A;118 }119 .file-icon {120 width: 120px; height: 120px; border-radius: 18px;121 background: #E8E4FF; border: 1px solid #C7BFFF;122 display: flex; align-items: center; justify-content: center;123 color: #5B47B9; font-weight: 800; font-size: 36px;124 margin-right: 28px;125 }126 .file-meta {127 flex: 1; min-width: 0;128 }129 .file-name {130 font-size: 40px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;131 margin-bottom: 12px;132 }133 .file-sub {134 font-size: 30px; color: #B0BEC5;135 }136 .file-size {137 font-size: 30px; color: #B0BEC5; margin-left: 20px;138 }139 .kebab {140 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;141 }142 .kebab svg { width: 32px; height: 32px; fill: #B0BEC5; }143 144 /* Bottom gesture bar */145 .gesture-bar {146 position: absolute;147 bottom: 40px;148 left: 50%;149 transform: translateX(-50%);150 width: 320px; height: 14px; background: #FFFFFF; border-radius: 8px; opacity: 0.9;151 }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status bar -->158 <div class="status-bar">159 <div class="status-left">160 <div>1:06</div>161 <div class="status-dot"></div>162 <div class="status-dot"></div>163 </div>164 <div class="status-right">165 <!-- Network -->166 <svg width="38" height="38" viewBox="0 0 24 24">167 <path fill="#FFFFFF" d="M2 18h2v3H2v-3zm4-5h2v8H6v-8zm4-4h2v12h-2V9zm4-3h2v15h-2V6zm4-3h2v18h-2V3z"/>168 </svg>169 <!-- WiFi -->170 <svg width="38" height="38" viewBox="0 0 24 24">171 <path fill="#FFFFFF" d="M12 20l-1.5-1.5a2 2 0 013 0L12 20zm6.5-6.5a7.5 7.5 0 00-13 0l1.5 1.5a5.5 5.5 0 019.9 0l1.6-1.5zm3.5-3.5a12 12 0 00-20 0l1.5 1.5a10 10 0 0117 0L22 10z"/>172 </svg>173 <!-- Battery -->174 <svg width="42" height="42" viewBox="0 0 24 24">175 <path fill="#FFFFFF" d="M16 6h2v2h2v8h-2v2h-2v-2H6V8h10V6zM8 10v4h8v-4H8z"/>176 </svg>177 </div>178 </div>179 180 <!-- App bar -->181 <div class="app-bar">182 <div class="icon-btn">183 <svg viewBox="0 0 24 24">184 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>185 </svg>186 </div>187 <div class="app-title">Documents</div>188 <div class="icon-btn">189 <svg viewBox="0 0 24 24">190 <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-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>191 </svg>192 </div>193 <div class="icon-btn">194 <svg viewBox="0 0 24 24">195 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>196 </svg>197 </div>198 <div class="icon-btn">199 <svg viewBox="0 0 24 24">200 <path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/>201 </svg>202 </div>203 </div>204 205 <!-- Ad card -->206 <div class="ad-card">207 <div class="ad-left">208 <div class="ad-logo">[IMG: Adidas Logo]</div>209 <span class="ad-badge">AD</span>210 <div class="ad-brand">adidas</div>211 </div>212 <div class="ad-btn">Get Discount...</div>213 </div>214 215 <!-- File list -->216 <div class="file-list">217 218 <div class="file-item">219 <div class="file-icon">TXT</div>220 <div class="file-meta">221 <div class="file-name">Copy of screenshot-1.txt</div>222 <div class="file-sub">06/28/23</div>223 </div>224 <div class="file-size">885.83 KB</div>225 <div class="kebab">226 <svg viewBox="0 0 24 24">227 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>228 </svg>229 </div>230 </div>231 232 <div class="file-item">233 <div class="file-icon">TXT</div>234 <div class="file-meta">235 <div class="file-name">Copy of screenshot.txt</div>236 <div class="file-sub">06/28/23</div>237 </div>238 <div class="file-size">885.83 KB</div>239 <div class="kebab">240 <svg viewBox="0 0 24 24">241 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>242 </svg>243 </div>244 </div>245 246 <div class="file-item">247 <div class="file-icon">TXT</div>248 <div class="file-meta">249 <div class="file-name">actuation_result.txt</div>250 <div class="file-sub">07/05/23</div>251 </div>252 <div class="file-size">8 Bytes</div>253 <div class="kebab">254 <svg viewBox="0 0 24 24">255 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>256 </svg>257 </div>258 </div>259 260 <div class="file-item">261 <div class="file-icon">TXT</div>262 <div class="file-meta">263 <div class="file-name">screenshot.txt</div>264 <div class="file-sub">07/05/23</div>265 </div>266 <div class="file-size">347.14 KB</div>267 <div class="kebab">268 <svg viewBox="0 0 24 24">269 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>270 </svg>271 </div>272 </div>273 274 <div class="file-item">275 <div class="file-icon">TXT</div>276 <div class="file-meta">277 <div class="file-name">agents.txt</div>278 <div class="file-sub">07/05/23</div>279 </div>280 <div class="file-size">1.12 KB</div>281 <div class="kebab">282 <svg viewBox="0 0 24 24">283 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>284 </svg>285 </div>286 </div>287 288 <div class="file-item">289 <div class="file-icon">TXT</div>290 <div class="file-meta">291 <div class="file-name">os_info.txt</div>292 <div class="file-sub">07/05/23</div>293 </div>294 <div class="file-size">32 Bytes</div>295 <div class="kebab">296 <svg viewBox="0 0 24 24">297 <path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/>298 </svg>299 </div>300 </div>301 302 </div>303 304 <!-- Bottom gesture bar -->305 <div class="gesture-bar"></div>306</div>307</body>308</html>