GD-ML/AndroidCode

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: radial-gradient(1200px 900px at 20% 20%, #a3d6a9 0%, #7fc08b 30%, #58aa7b 55%, #3e946b 70%, #2f7a5b 85%, #256b50 100%);14  }15 16  /* Subtle wallpaper texture using layered gradients */17  #render-target::before {18    content: "";19    position: absolute;20    inset: 0;21    background:22      repeating-linear-gradient(130deg, rgba(255,255,255,0.06) 0 14px, rgba(0,0,0,0.0) 14px 28px),23      repeating-linear-gradient(60deg, rgba(255,255,255,0.05) 0 12px, rgba(0,0,0,0.0) 12px 24px);24    mix-blend-mode: soft-light;25    opacity: 0.55;26    pointer-events: none;27  }28 29  .status-bar {30    position: absolute;31    top: 24px;32    left: 28px;33    right: 28px;34    height: 72px;35    color: #fff;36    display: flex;37    align-items: center;38    justify-content: space-between;39    text-shadow: 0 1px 3px rgba(0,0,0,0.35);40    font-size: 36px;41    letter-spacing: 0.5px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 26px;47    font-size: 28px;48  }49  .dot-group { display: flex; gap: 14px; align-items: center; }50  .dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.85); }51  .status-icon { width: 38px; height: 38px; display: inline-block; }52  .battery { width: 46px; height: 26px; border-radius: 5px; border: 3px solid #fff; position: relative; }53  .battery::after { content: ""; position: absolute; right: -9px; top: 6px; width: 6px; height: 14px; background: #fff; border-radius: 2px; }54  .battery .level { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 9px; background: #fff; border-radius: 3px; }55 56  .date-block {57    position: absolute;58    top: 250px;59    left: 64px;60    color: #fff;61    text-shadow: 0 2px 8px rgba(0,0,0,0.45);62  }63  .date-text { font-size: 64px; font-weight: 600; margin-bottom: 24px; }64  .weather-row {65    display: flex;66    align-items: center;67    gap: 18px;68    font-size: 34px;69    opacity: 0.95;70  }71  .weather-row .sep { opacity: 0.7; margin: 0 12px; }72 73  .cloud-icon {74    width: 44px; height: 44px;75    display: inline-flex; align-items: center; justify-content: center;76  }77  .cloud-icon svg { width: 44px; height: 44px; }78 79  /* App grid */80  .app-row {81    position: absolute;82    left: 64px;83    width: 952px;84    display: flex;85    justify-content: space-between;86    align-items: flex-start;87  }88  .row-1 { top: 1520px; }89  .row-2 { top: 1810px; }90 91  .app-group {92    width: 200px;93    text-align: center;94    color: #fff;95    text-shadow: 0 2px 6px rgba(0,0,0,0.45);96  }97  .app {98    width: 160px;99    height: 160px;100    margin: 0 auto 18px auto;101    background: #fff;102    border-radius: 50%;103    box-shadow: 0 8px 24px rgba(0,0,0,0.35);104    position: relative;105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .app svg { width: 92px; height: 92px; }110  .badge {111    position: absolute;112    right: 18px; top: 18px;113    width: 28px; height: 28px; border-radius: 50%;114    background: #9ad5f7; border: 3px solid #fff;115    box-shadow: 0 2px 6px rgba(0,0,0,0.25);116  }117  .label { font-size: 32px; font-weight: 500; }118 119  /* Search bar */120  .search-bar {121    position: absolute;122    left: 64px;123    top: 2040px;124    width: 952px;125    height: 120px;126    background: #ffffff;127    border-radius: 60px;128    box-shadow: 0 10px 30px rgba(0,0,0,0.35);129    display: flex;130    align-items: center;131    padding: 0 36px;132    gap: 26px;133  }134  .search-input {135    flex: 1;136    color: #777;137    font-size: 36px;138  }139  .search-icon { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }140  .search-icon svg { width: 42px; height: 42px; }141 142  /* Bottom home indicator */143  .home-indicator {144    position: absolute;145    left: 50%;146    transform: translateX(-50%);147    bottom: 36px;148    width: 240px;149    height: 8px;150    border-radius: 4px;151    background: rgba(255,255,255,0.9);152    box-shadow: 0 2px 6px rgba(0,0,0,0.35);153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="status-bar">161    <div class="status-left">9:46</div>162    <div class="status-right">163      <div class="dot-group">164        <div class="dot"></div>165        <div class="dot"></div>166        <div class="dot"></div>167        <div style="width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85);"></div>168      </div>169      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">170        <path d="M3 17h2a16 16 0 0116-16v2A14 14 0 005 19v-2z"></path>171        <path d="M3 13h2a12 12 0 0112-12v2A10 10 0 005 15v-2z"></path>172      </svg>173      <div class="battery"><div class="level"></div></div>174    </div>175  </div>176 177  <!-- Date + Weather -->178  <div class="date-block">179    <div class="date-text">Wed, Dec 6</div>180    <div class="weather-row">181      <div class="cloud-icon">182        <svg viewBox="0 0 64 64">183          <path d="M25 44h22a12 12 0 000-24c-2 0-4 .4-6 1.3A16 16 0 0018 23a11 11 0 000 21h7" fill="rgba(255,255,255,0.95)"></path>184        </svg>185      </div>186      <span>19°C</span>187      <span class="sep">·</span>188      <span>Today 25° / 11°</span>189      <span class="sep">·</span>190      <span>Mostly cloudy</span>191    </div>192  </div>193 194  <!-- First row of apps -->195  <div class="app-row row-1">196    <div class="app-group">197      <div class="app">198        <svg viewBox="0 0 100 100">199          <polygon points="30,20 80,50 30,80" fill="#36c16e"></polygon>200          <polygon points="32,24 46,50 32,76" fill="#f6c63f"></polygon>201          <polygon points="45,50 78,50 60,63" fill="#4aa8f5"></polygon>202        </svg>203      </div>204      <div class="label">Play Store</div>205    </div>206    <div class="app-group">207      <div class="app">208        <div class="badge"></div>209        <svg viewBox="0 0 100 100">210          <path d="M20 30h60v40H20z" fill="#fff" stroke="#e53935" stroke-width="10"></path>211          <path d="M20 30l30 30 30-30" stroke="#e53935" stroke-width="10" fill="none"></path>212        </svg>213      </div>214      <div class="label">Gmail</div>215    </div>216    <div class="app-group">217      <div class="app">218        <svg viewBox="0 0 100 100">219          <circle cx="50" cy="28" r="18" fill="#fbbc04"></circle>220          <circle cx="72" cy="50" r="18" fill="#34a853"></circle>221          <circle cx="50" cy="72" r="18" fill="#4285f4"></circle>222          <circle cx="28" cy="50" r="18" fill="#ea4335"></circle>223        </svg>224      </div>225      <div class="label">Photos</div>226    </div>227    <div class="app-group">228      <div class="app">229        <div class="badge"></div>230        <svg viewBox="0 0 100 100">231          <rect x="18" y="28" width="64" height="44" rx="12" fill="#ff0000"></rect>232          <polygon points="46,50 66,40 66,60" fill="#fff"></polygon>233        </svg>234      </div>235      <div class="label">YouTube</div>236    </div>237  </div>238 239  <!-- Second row of apps -->240  <div class="app-row row-2">241    <div class="app-group">242      <div class="app">243        <svg viewBox="0 0 100 100">244          <path d="M28 36c-6 6-6 12 0 18l12 8c6 4 12 4 18 0l4-4-20-20-4 4" fill="#1a73e8"></path>245        </svg>246      </div>247      <div class="label">Phone</div>248    </div>249    <div class="app-group">250      <div class="app">251        <svg viewBox="0 0 100 100">252          <path d="M24 26h52v48H24z" fill="#e7f0ff" stroke="#3b78e7" stroke-width="8" rx="12"></path>253          <path d="M38 58c8 6 16 6 24 0v10H38V58z" fill="#3b78e7"></path>254        </svg>255      </div>256      <div class="label">Messages</div>257    </div>258    <div class="app-group">259      <div class="app">260        <svg viewBox="0 0 100 100">261          <circle cx="50" cy="50" r="40" fill="#fbbc04"></circle>262          <path d="M50 10A40 40 0 0188 50H50z" fill="#ea4335"></path>263          <path d="M50 50h38A40 40 0 0150 90z" fill="#34a853"></path>264          <circle cx="50" cy="50" r="18" fill="#4285f4"></circle>265        </svg>266      </div>267      <div class="label">Chrome</div>268    </div>269    <div class="app-group">270      <div class="app">271        <svg viewBox="0 0 100 100">272          <rect x="20" y="32" width="60" height="36" rx="10" fill="#3b78e7"></rect>273          <circle cx="50" cy="50" r="12" fill="#fff"></circle>274          <rect x="34" y="24" width="32" height="10" rx="4" fill="#3b78e7"></rect>275        </svg>276      </div>277      <div class="label">Camera</div>278    </div>279  </div>280 281  <!-- Search bar -->282  <div class="search-bar">283    <div class="search-icon" style="margin-right: 6px;">284      <svg viewBox="0 0 48 48">285        <text x="10" y="34" font-size="28" font-weight="700" fill="#4285f4">G</text>286      </svg>287    </div>288    <div class="search-input">Search...</div>289    <div class="search-icon">290      <svg viewBox="0 0 48 48">291        <path d="M24 10a8 8 0 018 8v8a8 8 0 01-16 0v-8a8 8 0 018-8z" fill="#ea4335"></path>292        <rect x="20" y="28" width="8" height="10" rx="3" fill="#ea4335"></rect>293      </svg>294    </div>295    <div class="search-icon">296      <svg viewBox="0 0 48 48">297        <rect x="10" y="14" width="28" height="20" rx="5" fill="#34a853"></rect>298        <circle cx="24" cy="24" r="6" fill="#fff"></circle>299      </svg>300    </div>301  </div>302 303  <!-- Home indicator -->304  <div class="home-indicator"></div>305 306</div>307</body>308</html>