GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background:14      radial-gradient(1200px 900px at 20% 15%, rgba(30,30,30,0.9), rgba(20,20,20,0.95)),15      repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, rgba(0,0,0,0.08) 6px);16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 96px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 34px;30    box-sizing: border-box;31    color: #ffffff;32    font-weight: 600;33  }34  .status-left { display: flex; align-items: center; gap: 18px; }35  .status-time { font-size: 40px; letter-spacing: 0.5px; }36  .status-icons { display: flex; align-items: center; gap: 22px; }37  .status-icons svg { width: 34px; height: 34px; opacity: 0.95; }38 39  /* App grid */40  .app-grid {41    position: absolute;42    top: 160px;43    left: 0;44    width: 100%;45    padding: 0 60px;46    box-sizing: border-box;47    display: flex;48    flex-wrap: wrap;49    column-gap: 40px;50    row-gap: 90px;51  }52  .app {53    width: calc((100% - 120px) / 4);54    display: flex;55    flex-direction: column;56    align-items: center;57  }58  .app-icon {59    width: 176px;60    height: 176px;61    border-radius: 50%;62    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);63    display: grid;64    place-items: center;65    color: #fff;66    font-weight: 700;67  }68  .app-label {69    margin-top: 22px;70    font-size: 34px;71    text-align: center;72    color: #fff;73    text-shadow: 0 2px 2px rgba(0,0,0,0.35);74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77    max-width: 240px;78  }79  .badge-dot {80    position: absolute;81    right: 14px;82    top: -6px;83    width: 28px;84    height: 28px;85    background: #b69df2;86    border-radius: 50%;87    border: 4px solid rgba(255,255,255,0.9);88    box-shadow: 0 2px 6px rgba(0,0,0,0.25);89  }90 91  /* Dock icons */92  .dock {93    position: absolute;94    bottom: 430px;95    left: 0;96    width: 100%;97    display: flex;98    justify-content: center;99    gap: 80px;100  }101  .dock-icon {102    width: 156px;103    height: 156px;104    border-radius: 50%;105    background: #ffffff;106    display: grid;107    place-items: center;108    box-shadow: 0 6px 20px rgba(0,0,0,0.35);109  }110  .dock-icon svg { width: 84px; height: 84px; }111 112  /* Search pill */113  .search-pill {114    position: absolute;115    bottom: 168px;116    left: 60px;117    width: 960px;118    height: 120px;119    background: rgba(60,60,60,0.85);120    border-radius: 60px;121    box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 10px 25px rgba(0,0,0,0.45);122    display: flex;123    align-items: center;124    justify-content: space-between;125    padding: 0 34px;126    box-sizing: border-box;127  }128  .search-left { display: flex; align-items: center; gap: 24px; color: #fff; }129  .g-icon {130    width: 64px;131    height: 64px;132    border-radius: 50%;133    background: conic-gradient(#4285F4 0 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);134    display: grid; place-items: center;135    box-shadow: 0 2px 6px rgba(0,0,0,0.3);136  }137  .search-text {138    font-size: 36px;139    opacity: 0.9;140  }141  .search-right { display: flex; align-items: center; gap: 22px; }142  .search-btn {143    width: 68px;144    height: 68px;145    border-radius: 34px;146    background: rgba(255,255,255,0.06);147    display: grid; place-items: center;148    border: 1px solid rgba(255,255,255,0.15);149  }150  .search-btn svg { width: 40px; height: 40px; }151 152  /* Gesture bar */153  .gesture {154    position: absolute;155    bottom: 86px;156    left: 50%;157    transform: translateX(-50%);158    width: 300px;159    height: 16px;160    border-radius: 12px;161    background: rgba(255,255,255,0.85);162  }163 164  /* Color presets for app icons */165  .c-dbws { background: #3e6f8e; }166  .c-homecentre { background: #ffffff; color: #333; border: 8px solid rgba(255,255,255,0.6); }167  .c-learnmath { background: #7e63e6; }168  .c-oppia { background: #eaf7f2; color: #2c8a78; }169  .c-math { background: #49a8e0; }170  .c-extramarks { background: #d86a3a; }171  .c-pepperfry { background: #ffe8df; color: #b4462a; }172  .c-brainly { background: #000; color: #fff; }173  .c-mathtests { background: #9bd93a; }174 175  /* Simple icon glyphs inside app icons */176  .app-icon svg { width: 96px; height: 96px; }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status Bar -->183  <div class="status-bar">184    <div class="status-left">185      <div class="status-time">10:20</div>186      <div class="status-icons">187        <!-- info circle -->188        <svg viewBox="0 0 24 24" fill="none">189          <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"></circle>190          <rect x="11" y="10" width="2" height="7" fill="#fff"></rect>191          <rect x="11" y="6" width="2" height="2" fill="#fff"></rect>192        </svg>193        <!-- square icon -->194        <svg viewBox="0 0 24 24" fill="none">195          <rect x="4" y="4" width="16" height="16" rx="2" stroke="#fff" stroke-width="2"></rect>196        </svg>197        <!-- download icon -->198        <svg viewBox="0 0 24 24" fill="none">199          <path d="M12 4v10" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>200          <path d="M7 10l5 5 5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>201          <rect x="5" y="18" width="14" height="2" fill="#fff"></rect>202        </svg>203      </div>204    </div>205    <div class="status-icons">206      <!-- Wi-Fi -->207      <svg viewBox="0 0 24 24" fill="none">208        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>209        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>210        <path d="M8 16c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>211        <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>212      </svg>213      <!-- Battery -->214      <svg viewBox="0 0 26 24" fill="none">215        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>216        <rect x="23" y="9" width="2" height="6" rx="1" fill="#fff"></rect>217        <rect x="4" y="8" width="14" height="8" rx="1" fill="#fff"></rect>218      </svg>219    </div>220  </div>221 222  <!-- App Grid -->223  <div class="app-grid">224 225    <div class="app">226      <div class="app-icon c-dbws">227        <!-- Android head grid placeholder -->228        <svg viewBox="0 0 64 64">229          <circle cx="22" cy="22" r="3" fill="#cde2ef"></circle>230          <circle cx="42" cy="22" r="3" fill="#cde2ef"></circle>231          <rect x="16" y="28" width="32" height="20" rx="10" fill="#cde2ef"></rect>232        </svg>233      </div>234      <div class="app-label">DBW Show...</div>235    </div>236 237    <div class="app">238      <div class="app-icon c-homecentre">239        <svg viewBox="0 0 64 64">240          <path d="M14 42 L32 24 L50 42" stroke="#6b5d8a" stroke-width="6" fill="none"></path>241          <circle cx="32" cy="32" r="12" fill="#9c8eb9" opacity="0.35"></circle>242        </svg>243      </div>244      <div class="app-label">Homecentre</div>245    </div>246 247    <div class="app">248      <div class="app-icon c-learnmath">249        <svg viewBox="0 0 64 64">250          <rect x="10" y="12" width="44" height="32" rx="6" fill="#fff" opacity="0.85"></rect>251          <path d="M16 28h32M24 20v24" stroke="#7e63e6" stroke-width="4"></path>252        </svg>253      </div>254      <div class="app-label">Learn Math</div>255    </div>256 257    <div class="app">258      <div class="app-icon c-oppia" style="position:relative;">259        <svg viewBox="0 0 64 64">260          <circle cx="32" cy="32" r="22" stroke="#2c8a78" stroke-width="6" fill="none"></circle>261          <circle cx="22" cy="32" r="6" fill="#2c8a78"></circle>262          <circle cx="42" cy="32" r="6" fill="#2c8a78"></circle>263        </svg>264      </div>265      <div class="app-label">Oppia</div>266    </div>267 268    <div class="app">269      <div class="app-icon c-math">270        <svg viewBox="0 0 64 64">271          <path d="M16 48c6-24 26-24 32 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"></path>272        </svg>273      </div>274      <div class="app-label">Math</div>275    </div>276 277    <div class="app">278      <div class="app-icon c-extramarks">279        <svg viewBox="0 0 64 64">280          <path d="M16 36l16-16 16 16" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>281        </svg>282      </div>283      <div class="app-label">Extramarks</div>284    </div>285 286    <div class="app">287      <div class="app-icon c-pepperfry" style="position:relative;">288        <div class="badge-dot"></div>289        <svg viewBox="0 0 64 64">290          <rect x="20" y="30" width="24" height="18" fill="#b4462a"></rect>291          <path d="M24 30l6-8 6 8" stroke="#b4462a" stroke-width="4" fill="none"></path>292        </svg>293      </div>294      <div class="app-label">Pepperfry</div>295    </div>296 297    <div class="app">298      <div class="app-icon c-brainly">299        <svg viewBox="0 0 64 64">300          <rect x="10" y="26" width="44" height="18" rx="3" fill="#fff"></rect>301          <rect x="14" y="30" width="16" height="10" fill="#000"></rect>302        </svg>303      </div>304      <div class="app-label">Brainly</div>305    </div>306 307    <div class="app">308      <div class="app-icon c-mathtests">309        <svg viewBox="