GD-ML/AndroidCode

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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f7f7f7;13    border-radius: 30px;14    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);15  }16 17  /* Wallpaper placeholder */18  .wallpaper {19    position: absolute;20    left: 0; top: 0;21    width: 1080px; height: 2400px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex; align-items: center; justify-content: center;26    font-size: 42px;27    text-align: center;28  }29 30  /* Status bar */31  .statusbar {32    position: absolute; top: 0; left: 0;33    width: 100%; height: 110px;34    display: flex; align-items: center; justify-content: space-between;35    padding: 0 36px;36    color: #1f1f1f;37    z-index: 2;38  }39  .status-left { font-size: 46px; font-weight: 600; }40  .status-right { display: flex; align-items: center; gap: 26px; }41  .status-icon { width: 46px; height: 46px; }42 43  /* App grid */44  .app-grid {45    position: absolute;46    left: 34px; right: 34px;47    top: 180px;48    z-index: 3;49    display: grid;50    grid-template-columns: repeat(4, 1fr);51    grid-row-gap: 88px;52    grid-column-gap: 12px;53  }54  .app {55    display: flex; flex-direction: column; align-items: center;56  }57  .icon {58    width: 160px; height: 160px; border-radius: 50%;59    display: flex; align-items: center; justify-content: center;60    font-weight: 700; font-size: 48px; color: #fff;61    box-shadow: 0 6px 14px rgba(0,0,0,0.12);62    position: relative;63  }64  .label {65    margin-top: 18px;66    font-size: 40px;67    color: #1f1f1f;68    text-align: center;69  }70  .badge {71    position: absolute; width: 34px; height: 34px;72    border-radius: 50%;73    background: #8fd1c8;74    border: 2px solid #ffffff;75    right: 14px; top: 10px;76  }77  /* Individual icon colors */78  .medito { background: #ffffff; color: #7a57d9; }79  .mindfulness { background: #48a9f2; }80  .breethe { background: #4a556b; }81  .insight { background: #ffffff; color: #c18a3a; }82  .calm { background: #5aa4ff; }83  .balance { background: #ffffff; color: #2ea8a7; }84  .atom { background: #ffffff; color: #1f1f1f; }85  .idanim { background: #3aa3bb; }86  .dailyyoga { background: #8b90ff; }87  .evolve { 88    background: linear-gradient(180deg, #f9bb2d 0%, #f9bb2d 33%, #2fa04a 33%, #2fa04a 66%, #2a67ff 66%, #2a67ff 100%);89    color: #ffffff;90  }91 92  /* Bottom dock */93  .dock {94    position: absolute; left: 0; right: 0;95    bottom: 380px;96    display: flex; justify-content: space-around; align-items: center;97    padding: 0 120px;98    z-index: 3;99  }100  .dock-icon {101    width: 160px; height: 160px; border-radius: 50%;102    background: #ffffff; box-shadow: 0 6px 14px rgba(0,0,0,0.15);103    display: flex; align-items: center; justify-content: center;104  }105  .dock-icon span { font-size: 56px; color: #2d62ff; font-weight: 700; }106 107  /* Search bar */108  .search-bar {109    position: absolute; left: 60px; right: 60px; bottom: 220px;110    height: 130px; border-radius: 65px;111    background: #ffffff;112    box-shadow: 0 10px 22px rgba(0,0,0,0.12);113    display: flex; align-items: center; justify-content: space-between;114    padding: 0 40px;115    z-index: 3;116  }117  .search-left { display: flex; align-items: center; gap: 26px; }118  .g-logo {119    width: 60px; height: 60px; border-radius: 12px;120    background: #E0E0E0; border: 1px solid #BDBDBD;121    display: flex; align-items: center; justify-content: center;122    color: #757575; font-weight: 700;123  }124  .search-placeholder { color: #666; font-size: 42px; }125  .search-right { display: flex; align-items: center; gap: 24px; }126  .search-btn {127    width: 60px; height: 60px; border-radius: 50%;128    background: #E0E0E0; border: 1px solid #BDBDBD;129    display: flex; align-items: center; justify-content: center;130  }131 132  /* Gesture bar */133  .gesture {134    position: absolute; left: 370px; bottom: 24px;135    width: 340px; height: 14px;136    background: #D9D9D9; border-radius: 7px;137    z-index: 3;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <div class="wallpaper">[IMG: Colorful painting wallpaper]</div>145 146  <!-- Status bar -->147  <div class="statusbar">148    <div class="status-left">9:38</div>149    <div class="status-right">150      <!-- simple signal icon -->151      <svg class="status-icon" viewBox="0 0 24 24">152        <rect x="2" y="16" width="3" height="6" fill="#333"></rect>153        <rect x="8" y="12" width="3" height="10" fill="#333"></rect>154        <rect x="14" y="8" width="3" height="14" fill="#333"></rect>155        <rect x="20" y="4" width="3" height="18" fill="#333"></rect>156      </svg>157      <!-- wifi icon -->158      <svg class="status-icon" viewBox="0 0 24 24">159        <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" />160        <path d="M5 12c4-3 10-3 14 0" stroke="#333" stroke-width="2" fill="none" />161        <path d="M9 16c2-2 4-2 6 0" stroke="#333" stroke-width="2" fill="none" />162        <circle cx="12" cy="20" r="2" fill="#333"/>163      </svg>164      <!-- battery icon -->165      <svg class="status-icon" viewBox="0 0 30 24">166        <rect x="2" y="6" width="22" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>167        <rect x="4" y="8" width="16" height="8" fill="#333"></rect>168        <rect x="24" y="9" width="3" height="6" fill="#333"></rect>169      </svg>170    </div>171  </div>172 173  <!-- App grid -->174  <div class="app-grid">175 176    <div class="app">177      <div class="icon medito">M</div>178      <div class="label">Medito</div>179    </div>180 181    <div class="app">182      <div class="icon mindfulness">🧘</div>183      <div class="label">Mindfulnes…</div>184    </div>185 186    <div class="app">187      <div class="icon breethe">B</div>188      <div class="label">Breethe</div>189    </div>190 191    <div class="app">192      <div class="icon insight">⟡</div>193      <div class="label">Insight Timer</div>194    </div>195 196    <div class="app">197      <div class="icon calm">198        <span style="font-size:40px;font-weight:600;">Calm</span>199        <div class="badge"></div>200      </div>201      <div class="label">Calm</div>202    </div>203 204    <div class="app">205      <div class="icon balance">206        B207        <div class="badge"></div>208      </div>209      <div class="label">Balance</div>210    </div>211 212    <div class="app">213      <div class="icon atom">214        A215        <div class="badge"></div>216      </div>217      <div class="label">Atom</div>218    </div>219 220    <div class="app">221      <div class="icon idanim">222        Id223        <div class="badge"></div>224      </div>225      <div class="label">Idanim</div>226    </div>227 228    <div class="app">229      <div class="icon dailyyoga">Y</div>230      <div class="label">Daily Yoga</div>231    </div>232 233    <div class="app">234      <div class="icon evolve">E</div>235      <div class="label">Evolve</div>236    </div>237 238    <!-- Empty spots to match layout spacing -->239    <div></div>240    <div></div>241 242  </div>243 244  <!-- Bottom dock -->245  <div class="dock">246    <div class="dock-icon"><span>📞</span></div>247    <div class="dock-icon"><span>💬</span></div>248    <div class="dock-icon"><span>🌐</span></div>249    <div class="dock-icon"><span>📷</span></div>250  </div>251 252  <!-- Search bar -->253  <div class="search-bar">254    <div class="search-left">255      <div class="g-logo">G</div>256      <div class="search-placeholder">Search</div>257    </div>258    <div class="search-right">259      <div class="search-btn">260        <svg width="26" height="26" viewBox="0 0 24 24">261          <path d="M12 3v18" stroke="#555" stroke-width="2" />262          <circle cx="12" cy="17" r="3" fill="#555"></circle>263        </svg>264      </div>265      <div class="search-btn">266        <svg width="26" height="26" viewBox="0 0 24 24">267          <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="#555"></rect>268          <rect x="9" y="10" width="6" height="6" fill="#fff"></rect>269        </svg>270      </div>271    </div>272  </div>273 274  <!-- Gesture bar -->275  <div class="gesture"></div>276 277</div>278</body>279</html>