GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #5B8A8B; /* teal wallpaper base */14 }15 16 /* soft vignette at the top like Android home */17 .top-fade {18 position: absolute;19 top: 0; left: 0; right: 0;20 height: 220px;21 background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.0));22 pointer-events: none;23 }24 25 /* pattern icons (clouds and stars) */26 .pattern svg { position: absolute; stroke: #CFE46F; fill: none; stroke-width: 6; opacity: 0.9; }27 .pattern .cloud { width: 100px; height: 70px; }28 .pattern .star { width: 86px; height: 86px; }29 30 /* Status bar */31 .status-bar {32 position: absolute; top: 30px; left: 32px; right: 32px; height: 60px; color: #fff;33 display: flex; align-items: center; justify-content: space-between;34 font-size: 38px; font-weight: 500;35 }36 .status-left { display: flex; align-items: center; gap: 14px; }37 .status-right { display: flex; align-items: center; gap: 28px; }38 39 /* Date text */40 .date {41 position: absolute;42 top: 250px;43 left: 60px;44 color: #fff;45 font-size: 64px;46 font-weight: 500;47 letter-spacing: 0.2px;48 }49 50 /* App rows */51 .app-row {52 position: absolute; left: 0; width: 100%;53 display: flex; justify-content: space-evenly; align-items: flex-start;54 }55 .row-1 { top: 1420px; }56 .row-2 { top: 1690px; }57 .app {58 width: 180px;59 text-align: center;60 color: #EFEFEF;61 text-shadow: 0 2px 4px rgba(0,0,0,0.45);62 }63 .icon {64 width: 170px;65 height: 170px;66 border-radius: 50%;67 margin: 0 auto 22px;68 box-shadow: 0 6px 20px rgba(0,0,0,0.35);69 display: flex; align-items: center; justify-content: center;70 }71 .label {72 font-size: 34px;73 white-space: nowrap;74 overflow: hidden;75 text-overflow: ellipsis;76 max-width: 180px;77 margin: 0 auto;78 }79 80 /* Dock / Search pill */81 .search-pill {82 position: absolute;83 left: 60px;84 bottom: 210px;85 width: 960px;86 height: 150px;87 background: #2E2E2E;88 border-radius: 76px;89 box-shadow: 0 8px 30px rgba(0,0,0,0.5);90 display: flex; align-items: center; justify-content: space-between;91 padding: 0 38px;92 }93 .g-logo {94 width: 72px; height: 72px; border-radius: 50%;95 position: relative;96 background: conic-gradient(#4285F4 0 90deg, #DB4437 90deg 180deg, #F4B400 180deg 270deg, #0F9D58 270deg 360deg);97 display: flex; align-items: center; justify-content: center;98 }99 .g-logo span {100 font-weight: 700; font-size: 44px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4);101 }102 .search-actions { display: flex; align-items: center; gap: 36px; }103 .nav-pill {104 position: absolute; left: 50%; transform: translateX(-50%);105 bottom: 60px; width: 260px; height: 12px; background: #EDEDED; border-radius: 8px; opacity: 0.92;106 }107 108 /* Simple icon SVG styles */109 .svg-icon { width: 80px; height: 80px; }110 .white { color: #fff; }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- wallpaper pattern -->117 <div class="pattern">118 <!-- Clouds -->119 <svg class="cloud" style="left:60px; top:340px" viewBox="0 0 120 80">120 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22c-11 0-20-9-20-20 0-1 0-2 0-2" />121 </svg>122 <svg class="cloud" style="left:240px; top:520px" viewBox="0 0 120 80">123 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22" />124 </svg>125 <svg class="cloud" style="left:470px; top:410px" viewBox="0 0 120 80">126 <path d="M24 50c-6 0-11-5-11-11s5-11 11-11c3 0 6 1 7 3 3-9 10-15 19-15 12 0 22 10 22 22h6c10 0 18 8 18 18s-8 18-18 18H24" />127 </svg>128 <svg class="cloud" style="left:740px; top:540px" viewBox="0 0 120 80">129 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22" />130 </svg>131 <svg class="cloud" style="left:880px; top:340px" viewBox="0 0 120 80">132 <path d="M20 50c-7 0-13-6-13-13s6-13 13-13c3 0 6 1 7 3 3-9 10-15 19-15 12 0 22 10 22 22h5c10 0 18 8 18 18s-8 18-18 18H20" />133 </svg>134 135 <!-- Stars/Sun -->136 <svg class="star" style="left:160px; top:380px" viewBox="0 0 100 100">137 <circle cx="50" cy="50" r="20"></circle>138 <path d="M50 6v20M50 74v20M6 50h20M74 50h20M20 20l14 14M80 80L66 66M80 20L66 34M20 80l14-14" />139 </svg>140 <svg class="star" style="left:420px; top:600px" viewBox="0 0 100 100">141 <circle cx="50" cy="50" r="20"></circle>142 <path d="M50 6v20M50 74v20M6 50h20M74 50h20M20 20l14 14M80 80L66 66M80 20L66 34M20 80l14-14" />143 </svg>144 <svg class="star" style="left:680px; top:360px" viewBox="0 0 100 100">145 <circle cx="50" cy="50" r="20"></circle>146 <path d="M50 6v20M50 74v20M6 50h20M74 50h20M20 20l14 14M80 80L66 66M80 20L66 34M20 80l14-14" />147 </svg>148 149 <!-- Middle-area scatter -->150 <svg class="cloud" style="left:110px; top:960px" viewBox="0 0 120 80">151 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22" />152 </svg>153 <svg class="star" style="left:320px; top:1040px" viewBox="0 0 100 100">154 <circle cx="50" cy="50" r="18"></circle>155 <path d="M50 8v18M50 74v18M8 50h18M74 50h18M22 22l12 12M78 78L66 66M78 22L66 34M22 78l12-12" />156 </svg>157 <svg class="cloud" style="left:540px; top:980px" viewBox="0 0 120 80">158 <path d="M24 50c-6 0-11-5-11-11s5-11 11-11c3 0 6 1 7 3 3-9 10-15 19-15 12 0 22 10 22 22h6c10 0 18 8 18 18s-8 18-18 18H24" />159 </svg>160 <svg class="star" style="left:760px; top:1060px" viewBox="0 0 100 100">161 <circle cx="50" cy="50" r="18"></circle>162 <path d="M50 8v18M50 74v18M8 50h18M74 50h18M22 22l12 12M78 78L66 66M78 22L66 34M22 78l12-12" />163 </svg>164 165 <!-- Lower-area pattern -->166 <svg class="cloud" style="left:80px; top:1340px" viewBox="0 0 120 80">167 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22" />168 </svg>169 <svg class="cloud" style="left:300px; top:1300px" viewBox="0 0 120 80">170 <path d="M24 50c-6 0-11-5-11-11s5-11 11-11c3 0 6 1 7 3 3-9 10-15 19-15 12 0 22 10 22 22h6c10 0 18 8 18 18s-8 18-18 18H24" />171 </svg>172 <svg class="star" style="left:520px; top:1320px" viewBox="0 0 100 100">173 <circle cx="50" cy="50" r="18"></circle>174 <path d="M50 8v18M50 74v18M8 50h18M74 50h18M22 22l12 12M78 78L66 66M78 22L66 34M22 78l12-12" />175 </svg>176 <svg class="cloud" style="left:740px; top:1280px" viewBox="0 0 120 80">177 <path d="M22 57c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3 3-10 12-17 22-17 13 0 24 11 24 24h6c11 0 20 9 20 20s-9 20-20 20H22" />178 </svg>179 <svg class="star" style="left:920px; top:1340px" viewBox="0 0 100 100">180 <circle cx="50" cy="50" r="18"></circle>181 <path d="M50 8v18M50 74v18M8 50h18M74 50h18M22 22l12 12M78 78L66 66M78 22L66 34M22 78l12-12" />182 </svg>183 </div>184 185 <!-- top fade overlay -->186 <div class="top-fade"></div>187 188 <!-- Status bar -->189 <div class="status-bar">190 <div class="status-left">191 <div>8:26</div>192 <!-- Small weather cloud -->193 <svg class="svg-icon" viewBox="0 0 100 70">194 <path stroke="#FFFFFF" stroke-width="6" fill="none" d="M16 48c-6 0-11-5-11-11s5-11 11-11c3 0 6 1 8 3 3-9 10-15 19-15 12 0 22 10 22 22h6c9 0 16 7 16 16s-7 16-16 16H16" />195 </svg>196 </div>197 <div class="status-right">198 <!-- Wi-Fi -->199 <svg class="svg-icon" viewBox="0 0 80 80">200 <path stroke="#FFFFFF" stroke-width="6" fill="none" d="M10 30c16-16 44-16 60 0M22 42c10-10 26-10 36 0M34 54c4-4 12-4 16 0M42 66l-4 4 4 4 4-4-4-4z" />201 </svg>202 <!-- Battery -->203 <svg class="svg-icon" viewBox="0 0 100 80">204 <rect x="8" y="20" width="74" height="40" rx="6" ry="6" stroke="#FFFFFF" stroke-width="6" fill="none"></rect>205 <rect x="14" y="26" width="54" height="28" fill="#FFFFFF"></rect>206 <rect x="84" y="30" width="8" height="20" rx="2" fill="#FFFFFF"></rect>207 </svg>208 </div>209 </div>210 211 <!-- Date -->212 <div class="date">Tue, Jul 18</div>213 214 <!-- First row of apps -->215 <div class="app-row row-1">216 <!-- Contacts -->217 <div class="app">218 <div class="icon" style="background: #FFFFFF;">219 <svg viewBox="0 0 120 120" width="100" height="100">220 <circle cx="60" cy="42" r="22" fill="#1E73F1"></circle>221 <path d="M30 92c10-18 40-18 60 0" fill="#1E73F1"></path>222 </svg>223 </div>224 <div class="label">Contacts</div>225 </div>226 227 <!-- Smart Contacts (blue) -->228 <div class="app">229 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #2E6BF0, #0F43C5);">230 <svg viewBox="0 0 120 120" width="100" height="100">231 <circle cx="60" cy="42" r="22" fill="#FFFFFF" opacity="0.85"></circle>232 <path d="M30 92c10-18 40-18 60 0" fill="#FFFFFF" opacity="0.85"></path>233 </svg>234 </div>235 <div class="label">Smart Cont...</div>236 </div>237 238 <!-- Contacts+ (green phone) -->239 <div class="app">240 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #2CC382, #0CA76B);">241 <svg viewBox="0 0 120 120" width="92" height="92">242 <path d="M40 38c4 0 8 4 10 8l-10 10c10 18 24 28 42 34l10-10c6 2 10 6 10 12-2 10-18 16-28 14-32-6-58-32-64-64-2-10 4-26 14-28 6 0 10 4 12 10l-10 10c4-2 8-6 12-6z" fill="#FFFFFF" opacity="0.9"/>243 </svg>244 </div>245 <div class="label">Contacts+</div>246 </div>247 </div>248 249 <!-- Second row of apps -->250 <div class="app-row row-2">251 <!-- Phone -->252 <div class="app">253 <div class="icon" style="background: #FFFFFF;">254 <svg viewBox="0 0 120 120" width="92" height="92">255 <path d="M40 38c4 0 8 4 10 8l-10 10c10 18 24 28 42 34l10-10c6 2 10 6 10 12-2 10-18 16-28 14-32-6-58-32-64-64-2-10 4-26 14-28 6 0 10 4 12 10l-10 10c4-2 8-6 12-6z" fill="#2E6BF0"/>256 </svg>257 </div>258 <div class="label"></div>259 </div>260 261 <!-- Messages -->262 <div class="app">263 <div class="icon" style="background: #FFFFFF;">264 <svg viewBox="0 0 120 120" width="92" height="92">265 <rect x="22" y="30" width="76" height="50" rx="16" fill="#5998FF"></rect>266 <path d="M32 98l20-18h38" fill="#5998FF"></path>267 </svg>268 </div>269 <div class="label"></div>270 </div>271 272 <!-- Chrome -->273 <div class="app">274 <div class="icon" style="background: #FFFFFF;">275 <svg viewBox="0 0 120 120" width="110" height="110">276 <circle cx="60" cy="60" r="26" fill="#4285F4"></circle>277 <path d="M60 18a42 42 0 0 1 36 20H60l-18-30z" fill="#DB4437"></path>278 <path d="M96 38a42 42 0 0 1-8 52L72 60h24z" fill="#F4B400"></path>279 <path d="M88 90a42 42 0 0 1-56-6l28-24 28 30z" fill="#0F9D58"></path>280 </svg>281 </div>282 <div class="label"></div>283 </div>284 285 <!-- Camera -->286 <div class="app">287 <div class="icon" style="background: #FFFFFF;">288 <svg viewBox="0 0 120 120" width="100" height="100">289 <rect x="16" y="34" width="88" height="56" rx="12" fill="#2E2E2E" opacity="0.9"></rect>290 <circle cx="60" cy="62" r="20" fill="#3C76F0"></circle>291 <rect x="30" y="26" width="24" height="14" rx="6" fill="#2E2E2E"></rect>292 </svg>293 </div>294 <div class="label"></div>295 </div>296 </div>297 298 <!-- Search pill -->299 <div class="search-pill">300 <div class="g-logo"><span>G</span></div>301 <div class="search-actions">302 <!-- Mic icon -->303 <svg class="svg-icon" viewBox="0 0 80 80">304 <rect x="28" y="16" width="24" height="36" rx="12" fill="#FFFFFF"></rect>305 <path d="M20 38c0 14 12 22 20 22s20-8 20-22" stroke="#FFFFFF" stroke-width="6" fill="none"></path>306 <rect x="38" y="60" width="4" height="10" fill="#FFFFFF"></rect>307 <rect x="30" y="68" width="22" height="4" rx="2" fill="#FFFFFF"></rect>308 </svg>309 <!-- Google Lens-like colorful camera -->310 <svg class="svg-icon" viewBox="0 0 90 90">311 <rect x="16" y="16" width="58" height="58" rx="14" fill="none" stroke="#FFFFFF" stroke-width="6"></rect>312 <path d="M16 40h14" stroke="#DB4437" stroke-width="8" />313 <path d="M60 16v14" stroke="#0F9D58" stroke-width="8" />314 <path d="M74 50H60" stroke="#F4B400" stroke-width="8" />315 <path d="M40 74V60" stroke="#4285F4" stroke-width="8" />316 <circle cx="45" cy="45" r="12" fill="#4285F4"></circle>317 </svg>318 </div>319 </div>320 321 <!-- Navigation pill at the bottom -->322 <div class="nav-pill"></div>323</div>324</body>325</html>