GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #ECECEC;14 }15 16 /* Top status bar */17 .statusbar {18 height: 130px;19 padding: 0 60px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #F5F5F5;24 font-size: 48px;25 letter-spacing: 0.5px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 30px;31 }32 .status-icon {33 width: 44px; height: 44px; border-radius: 6px; background: #2A2A2A;34 display: inline-flex; align-items: center; justify-content: center; color: #CFCFCF; font-size: 32px;35 }36 37 /* Search bar */38 .search-bar {39 margin: 20px 60px 0 60px;40 height: 140px;41 background: #273A2D;42 border-radius: 90px;43 display: flex;44 align-items: center;45 padding: 0 40px;46 box-shadow: inset 0 0 0 1px #31493A;47 }48 .hamburger {49 width: 90px; height: 90px; margin-right: 28px; display: flex; align-items: center; justify-content: center;50 }51 .hamburger svg { fill: none; stroke: #C7D2C9; stroke-width: 12; }52 .search-text {53 flex: 1; color: #C7D2C9; font-size: 54px;54 }55 .profile {56 width: 110px; height: 110px;57 background: #1E3E2D; color: #CFE6D6; border-radius: 55px;58 display: flex; align-items: center; justify-content: center;59 font-weight: 600; font-size: 52px;60 box-shadow: inset 0 0 0 2px #3C5645;61 }62 63 /* Tabs */64 .tabs {65 margin: 30px 60px 20px 60px;66 display: flex; gap: 80px; align-items: center;67 position: relative;68 }69 .tab {70 font-size: 56px; color: #DCDCDC;71 }72 .tab.active { color: #B7E1B7; }73 .tab-underline {74 position: absolute; left: 0; bottom: -10px;75 width: 280px; height: 8px; background: #8BCB8A; border-radius: 8px;76 }77 78 /* File card generic */79 .file-section { margin: 40px 0 20px 0; }80 .file-header {81 margin: 0 60px;82 display: flex; align-items: center;83 }84 .pill {85 background: #B23A3A; color: #fff; font-weight: 700;86 font-size: 40px; padding: 12px 22px; border-radius: 16px; margin-right: 28px;87 }88 .title {89 font-size: 52px; font-weight: 600; color: #F0F0F0;90 }91 .kebab {92 margin-left: auto; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;93 }94 .kebab svg { fill: #BFBFBF; }95 96 .card {97 margin: 26px 60px 0 60px;98 background: #191919; border-radius: 36px; padding: 40px;99 box-shadow: 0 2px 0 #0d0d0d inset, 0 1px 0 #222;100 }101 .preview {102 width: 100%;103 height: 680px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 border-radius: 20px;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-size: 44px;109 }110 111 .activity {112 margin: 24px 60px;113 display: flex; align-items: center; gap: 28px; color: #CFCFCF; font-size: 48px;114 }115 .avatar {116 width: 92px; height: 92px; border-radius: 46px; background: #1E5C40; color: #D5F2E1;117 display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 46px;118 }119 120 /* Shopping list header icon */121 .doc-icon {122 width: 64px; height: 64px; background: #3A64C9; border-radius: 12px;123 margin-right: 28px; display: inline-flex; align-items: center; justify-content: center;124 }125 .doc-icon svg { fill: #CDE0FF; }126 127 /* Second card preview a bit taller */128 .preview.tall { height: 820px; }129 130 /* Floating action button */131 .fab {132 position: absolute; right: 80px; bottom: 480px;133 width: 180px; height: 180px; border-radius: 90px;134 background: #2E4A33; box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 0 0 2px #35543A;135 display: flex; align-items: center; justify-content: center;136 }137 .fab svg { fill: none; stroke: #EAF7E8; stroke-width: 24; }138 139 /* Bottom navigation */140 .bottom-nav {141 position: absolute; left: 0; right: 0; bottom: 0;142 height: 300px; background: #0F140F;143 display: flex; align-items: center; justify-content: space-around;144 padding-bottom: 80px;145 box-shadow: 0 -1px 0 #1E1E1E inset;146 }147 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 26px; color: #CFCFCF; }148 .nav-item .label { font-size: 48px; }149 .nav-item .icon { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }150 .nav-item svg { fill: none; stroke: #CFCFCF; stroke-width: 8; }151 .nav-item.active {152 color: #EAF7E8;153 }154 .nav-item.active .icon {155 background: rgba(77, 108, 77, 0.45);156 border-radius: 36px;157 }158 .nav-item.active svg { stroke: #EAF7E8; }159 160 /* Gesture bar */161 .gesture {162 position: absolute; left: 50%; transform: translateX(-50%);163 bottom: 30px; width: 600px; height: 16px; background: #DADADA; border-radius: 10px; opacity: 0.85;164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status bar -->171 <div class="statusbar">172 <div class="status-left">9:42</div>173 <div class="status-right">174 <div class="status-icon">⟡</div>175 <div class="status-icon">S</div>176 <div class="status-icon">CNN</div>177 <div class="status-icon">▲</div>178 <!-- Wi-Fi icon -->179 <svg width="60" height="40" viewBox="0 0 60 40">180 <path d="M4 10 Q30 -4 56 10" stroke="#CFCFCF" stroke-width="6" fill="none"/>181 <path d="M12 18 Q30 6 48 18" stroke="#CFCFCF" stroke-width="6" fill="none"/>182 <circle cx="30" cy="30" r="5" fill="#CFCFCF"/>183 </svg>184 <!-- Battery icon -->185 <svg width="80" height="36" viewBox="0 0 80 36">186 <rect x="2" y="6" width="66" height="24" rx="6" stroke="#CFCFCF" stroke-width="4" fill="none"/>187 <rect x="6" y="10" width="56" height="16" rx="4" fill="#CFCFCF"/>188 <rect x="70" y="12" width="8" height="12" rx="2" fill="#CFCFCF"/>189 </svg>190 </div>191 </div>192 193 <!-- Search bar -->194 <div class="search-bar">195 <div class="hamburger">196 <svg width="70" height="50" viewBox="0 0 100 70">197 <line x1="10" y1="12" x2="90" y2="12"></line>198 <line x1="10" y1="35" x2="90" y2="35"></line>199 <line x1="10" y1="58" x2="90" y2="58"></line>200 </svg>201 </div>202 <div class="search-text">Search in Drive</div>203 <div class="profile">C</div>204 </div>205 206 <!-- Tabs -->207 <div class="tabs">208 <div class="tab active">Suggested</div>209 <div class="tab">Notifications</div>210 <div class="tab-underline"></div>211 </div>212 213 <!-- First file section -->214 <div class="file-section">215 <div class="file-header">216 <div class="pill">PDF</div>217 <div class="title">dinner-vegetable (3).pdf</div>218 <div class="kebab">219 <svg width="28" height="80" viewBox="0 0 28 80">220 <circle cx="14" cy="16" r="6"></circle>221 <circle cx="14" cy="40" r="6"></circle>222 <circle cx="14" cy="64" r="6"></circle>223 </svg>224 </div>225 </div>226 <div class="card">227 <div class="preview">[IMG: PDF Preview - Restaurant Menu]</div>228 </div>229 <div class="activity">230 <div class="avatar">C</div>231 <div>You opened today</div>232 </div>233 </div>234 235 <!-- Second file section -->236 <div class="file-section">237 <div class="file-header">238 <div class="doc-icon">239 <svg width="40" height="40" viewBox="0 0 24 24">240 <rect x="4" y="4" width="16" height="16" rx="3"></rect>241 <line x1="7" y1="9" x2="17" y2="9" stroke="#CDE0FF" stroke-width="2"></line>242 <line x1="7" y1="13" x2="17" y2="13" stroke="#CDE0FF" stroke-width="2"></line>243 <line x1="7" y1="17" x2="14" y2="17" stroke="#CDE0FF" stroke-width="2"></line>244 </svg>245 </div>246 <div class="title">Shopping list</div>247 <div class="kebab">248 <svg width="28" height="80" viewBox="0 0 28 80">249 <circle cx="14" cy="16" r="6"></circle>250 <circle cx="14" cy="40" r="6"></circle>251 <circle cx="14" cy="64" r="6"></circle>252 </svg>253 </div>254 </div>255 <div class="card">256 <div class="preview tall">[IMG: Document Preview]</div>257 </div>258 <div class="activity">259 <div class="avatar">C</div>260 <div>You modified in the past month</div>261 </div>262 </div>263 264 <!-- Floating action button -->265 <div class="fab">266 <svg width="90" height="90" viewBox="0 0 100 100">267 <line x1="50" y1="20" x2="50" y2="80"></line>268 <line x1="20" y1="50" x2="80" y2="50"></line>269 </svg>270 </div>271 272 <!-- Bottom navigation -->273 <div class="bottom-nav">274 <div class="nav-item active">275 <div class="icon">276 <svg width="70" height="70" viewBox="0 0 24 24">277 <path d="M3 10 L12 3 L21 10"></path>278 <path d="M5 10 V21 H19 V10" ></path>279 </svg>280 </div>281 <div class="label">Home</div>282 </div>283 <div class="nav-item">284 <div class="icon">285 <svg width="70" height="70" viewBox="0 0 24 24">286 <path d="M12 2 L14.9 8.1 L22 9.3 L16.9 13.9 L18.3 21 L12 17.4 L5.7 21 L7.1 13.9 L2 9.3 L9.1 8.1 Z"></path>287 </svg>288 </div>289 <div class="label">Starred</div>290 </div>291 <div class="nav-item">292 <div class="icon">293 <svg width="70" height="70" viewBox="0 0 24 24">294 <circle cx="8" cy="10" r="4"></circle>295 <circle cx="16" cy="14" r="4"></circle>296 <path d="M2 20 Q8 16 14 20" ></path>297 </svg>298 </div>299 <div class="label">Shared</div>300 </div>301 <div class="nav-item">302 <div class="icon">303 <svg width="70" height="70" viewBox="0 0 24 24">304 <path d="M3 7 H9 L11 9 H21 V20 H3 Z"></path>305 </svg>306 </div>307 <div class="label">Files</div>308 </div>309 </div>310 311 <!-- Gesture bar -->312 <div class="gesture"></div>313 314</div>315</body>316</html>