GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Android Home Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1400px 1400px at 30% 20%, #2c2f33 0%, #1f2125 60%, #16181b 100%);15  }16 17  /* Subtle feather-like lines */18  .noise::before {19    content: "";20    position: absolute;21    inset: 0;22    background:23      repeating-linear-gradient(120deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px),24      repeating-linear-gradient(60deg, rgba(0,0,0,0.2) 0 3px, transparent 3px 7px);25    mix-blend-mode: overlay;26    opacity: 0.35;27    pointer-events: none;28  }29 30  .status-bar {31    position: absolute;32    top: 0;33    left: 0;34    right: 0;35    height: 110px;36    color: #FFF;37    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;38    font-size: 32px;39    line-height: 110px;40    padding: 0 34px;41  }42  .status-left {43    position: absolute; left: 34px; top: 0; height: 110px; display: flex; align-items: center; gap: 18px;44  }45  .status-right {46    position: absolute; right: 24px; top: 0; height: 110px; display: flex; align-items: center; gap: 22px;47  }48  .status-time { font-weight: 600; }49  .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0.8; }50 51  .icon-mini { width: 30px; height: 30px; opacity: 0.9; }52 53  .date-widget {54    position: absolute;55    top: 320px;56    left: 70px;57    color: #ffffff;58    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;59  }60  .date-widget .date {61    font-size: 72px;62    font-weight: 500;63    letter-spacing: 0.5px;64    margin-bottom: 18px;65  }66  .weather {67    display: flex; align-items: center; gap: 18px;68    font-size: 42px; opacity: 0.9;69  }70  .wave-icon {71    width: 56px; height: 36px;72  }73 74  /* App grid */75  .app-row {76    position: absolute;77    left: 0;78    width: 100%;79    display: flex;80    justify-content: space-around;81    padding: 0 40px;82  }83  .row-1 { top: 1560px; }84  .row-2 { top: 1790px; }85  .app {86    width: 220px;87    text-align: center;88    color: #e9e9e9;89    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;90  }91  .app .label {92    margin-top: 18px;93    font-size: 34px;94    letter-spacing: 0.2px;95  }96  .icon-wrap {97    width: 160px;98    height: 160px;99    margin: 0 auto;100    background: #ffffff;101    border-radius: 50%;102    box-shadow: 0 8px 18px rgba(0,0,0,0.35);103    display: flex;104    align-items: center;105    justify-content: center;106  }107  .icon-svg { width: 112px; height: 112px; }108 109  /* Dock search bar */110  .search-dock {111    position: absolute;112    left: 64px;113    right: 64px;114    bottom: 150px;115    height: 120px;116    background: #2f3438;117    border-radius: 60px;118    box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);119    display: flex;120    align-items: center;121    padding: 0 36px;122    color: #dfe4ea;123    font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;124    font-size: 40px;125    gap: 18px;126  }127  .search-dock .spacer { flex: 1; }128  .pill-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }129  .g-logo { font-weight: 700; font-size: 50px; color: #4c8bf5; }130  .search-placeholder { opacity: 0.65; font-size: 36px; }131 132  /* Home indicator */133  .home-indicator {134    position: absolute;135    bottom: 60px;136    left: 50%;137    transform: translateX(-50%);138    width: 280px;139    height: 10px;140    background: rgba(255,255,255,0.75);141    border-radius: 8px;142  }143</style>144</head>145<body>146<div id="render-target" class="noise">147 148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="status-left">151      <div class="status-time">5:22</div>152      <!-- a few bell-like notification icons -->153      <svg class="icon-mini" viewBox="0 0 24 24" fill="#fff"><path d="M12 2c1 0 2 .8 2 1.8v1.2c2.6 1 4 3 4 5.7V15l2 1v1H4v-1l2-1v-4.3c0-2.7 1.4-4.7 4-5.7V3.8C10 2.8 11 2 12 2zM9 19c0 1.2 1.3 2 3 2s3-.8 3-2H9z"/></svg>154      <svg class="icon-mini" viewBox="0 0 24 24" fill="#fff"><path d="M12 2c1 0 2 .8 2 1.8v1.2c2.6 1 4 3 4 5.7V15l2 1v1H4v-1l2-1v-4.3c0-2.7 1.4-4.7 4-5.7V3.8C10 2.8 11 2 12 2zM9 19c0 1.2 1.3 2 3 2s3-.8 3-2H9z"/></svg>155      <svg class="icon-mini" viewBox="0 0 24 24" fill="#fff"><path d="M12 2c1 0 2 .8 2 1.8v1.2c2.6 1 4 3 4 5.7V15l2 1v1H4v-1l2-1v-4.3c0-2.7 1.4-4.7 4-5.7V3.8C10 2.8 11 2 12 2zM9 19c0 1.2 1.3 2 3 2s3-.8 3-2H9z"/></svg>156      <div class="dot"></div>157    </div>158    <div class="status-right">159      <!-- wifi -->160      <svg class="icon-mini" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5 2.5-2.5z"/><path d="M2 8.8C4.6 6.7 8.2 5.5 12 5.5s7.4 1.2 10 3.3l-2 2C18.8 9 15.5 8 12 8s-6.8 1-8 2.8l-2-2z" opacity="0.9"/><path d="M5.5 12.3C7 11.1 9.3 10.5 12 10.5s5 .6 6.5 1.8l-2 2c-1.1-.8-2.6-1.3-4.5-1.3s-3.4.5-4.5 1.3l-2-2z" opacity="0.9"/></svg>161      <!-- battery -->162      <svg class="icon-mini" viewBox="0 0 28 24" fill="#fff"><rect x="2" y="6" width="22" height="12" rx="2"/><rect x="24" y="9" width="3" height="6"/></svg>163    </div>164  </div>165 166  <!-- Date & Weather Widget -->167  <div class="date-widget">168    <div class="date">Wed, Oct 11</div>169    <div class="weather">170      <svg class="wave-icon" viewBox="0 0 64 32" stroke="#ffffff" fill="none" stroke-width="4">171        <path d="M4 20c8 8 16-8 24 0s16-8 24 0"/>172        <path d="M4 10c8 8 16-8 24 0s16-8 24 0" opacity="0.75"/>173        <path d="M4 26c8 8 16-8 24 0s16-8 24 0" opacity="0.5"/>174      </svg>175      <div>32°C</div>176    </div>177  </div>178 179  <!-- First row of apps -->180  <div class="app-row row-1">181    <!-- Play Store -->182    <div class="app">183      <div class="icon-wrap">184        <svg class="icon-svg" viewBox="0 0 100 100">185          <polygon points="20,15 75,50 20,85" fill="#34a853"/>186          <polygon points="20,15 55,40 45,50 20,35" fill="#4285f4"/>187          <polygon points="20,85 55,60 45,50 20,65" fill="#fbbc05"/>188          <polygon points="55,40 75,50 55,60 45,50" fill="#ea4335"/>189        </svg>190      </div>191      <div class="label">Play Store</div>192    </div>193 194    <!-- Gmail -->195    <div class="app">196      <div class="icon-wrap">197        <svg class="icon-svg" viewBox="0 0 100 100">198          <rect x="18" y="28" width="64" height="44" rx="8" fill="#fff"/>199          <path d="M18 36l32 22 32-22v-8H18v8z" fill="#ea4335"/>200          <path d="M18 36l32 22 32-22" fill="none" stroke="#34a853" stroke-width="10" stroke-linejoin="round"/>201          <path d="M18 28v44M82 28v44" stroke="#4285f4" stroke-width="8" />202        </svg>203      </div>204      <div class="label">Gmail</div>205    </div>206 207    <!-- Photos -->208    <div class="app">209      <div class="icon-wrap">210        <svg class="icon-svg" viewBox="0 0 100 100">211          <path d="M50 10v30H20a30 30 0 0130-30z" fill="#fbbc05"/>212          <path d="M90 50H60V20a30 30 0 0130 30z" fill="#34a853"/>213          <path d="M50 90V60h30a30 30 0 01-30 30z" fill="#ea4335"/>214          <path d="M10 50h30v30A30 30 0 0110 50z" fill="#4285f4"/>215          <circle cx="50" cy="50" r="10" fill="#fff" opacity="0.9"/>216        </svg>217      </div>218      <div class="label">Photos</div>219    </div>220 221    <!-- YouTube -->222    <div class="app">223      <div class="icon-wrap">224        <svg class="icon-svg" viewBox="0 0 100 100">225          <rect x="15" y="28" width="70" height="44" rx="10" fill="#ff0000"/>226          <polygon points="43,35 70,50 43,65" fill="#fff"/>227        </svg>228      </div>229      <div class="label">YouTube</div>230    </div>231  </div>232 233  <!-- Second row of apps -->234  <div class="app-row row-2">235    <!-- Phone -->236    <div class="app">237      <div class="icon-wrap">238        <svg class="icon-svg" viewBox="0 0 100 100">239          <path d="M28 35c5-5 8-6 10-4l7 7c2 2 2 5-1 8l-3 3c5 9 12 16 21 21l3-3c3-3 6-3 8-1l7 7c2 2 1 5-4 10-5 5-10 6-15 4-24-9-39-24-48-48-2-5-1-10 4-15z" fill="#4285f4"/>240        </svg>241      </div>242      <div class="label">Phone</div>243    </div>244 245    <!-- Messages -->246    <div class="app">247      <div class="icon-wrap">248        <svg class="icon-svg" viewBox="0 0 100 100">249          <rect x="16" y="18" width="68" height="50" rx="12" fill="#1a73e8"/>250          <rect x="26" y="28" width="48" height="8" rx="4" fill="#fff" opacity="0.9"/>251          <rect x="26" y="42" width="32" height="8" rx="4" fill="#fff" opacity="0.9"/>252          <path d="M28 68l14-10h26l-10 10H28z" fill="#1a73e8"/>253        </svg>254      </div>255      <div class="label">Messages</div>256    </div>257 258    <!-- Chrome -->259    <div class="app">260      <div class="icon-wrap">261        <svg class="icon-svg" viewBox="0 0 100 100">262          <circle cx="50" cy="50" r="40" fill="#db4437"/>263          <path d="M50 50L78 30a40 40 0 010 40H50" fill="#0f9d58"/>264          <path d="M50 50H22a40 40 0 0156-20L50 50z" fill="#f4b400"/>265          <circle cx="50" cy="50" r="18" fill="#4285f4" stroke="#fff" stroke-width="6"/>266        </svg>267      </div>268      <div class="label">Chrome</div>269    </div>270 271    <!-- Camera -->272    <div class="app">273      <div class="icon-wrap">274        <svg class="icon-svg" viewBox="0 0 100 100">275          <rect x="18" y="30" width="64" height="40" rx="8" fill="#5f6368"/>276          <rect x="30" y="22" width="20" height="12" rx="4" fill="#80868b"/>277          <circle cx="50" cy="50" r="14" fill="#1a73e8"/>278          <circle cx="50" cy="50" r="8" fill="#8ab4f8"/>279        </svg>280      </div>281      <div class="label">Camera</div>282    </div>283  </div>284 285  <!-- Search Dock -->286  <div class="search-dock">287    <div class="pill-icon" aria-hidden="true">288      <span class="g-logo">G</span>289    </div>290    <div class="search-placeholder">Search</div>291    <div class="spacer"></div>292    <div class="pill-icon">293      <svg width="36" height="36" viewBox="0 0 24 24" fill="#4c8bf5"><path d="M12 3a4 4 0 014 4v5a4 4 0 11-8 0V7a4 4 0 014-4zm0 14a6 6 0 006-6h2a8 8 0 11-16 0h2a6 6 0 006 6z"/></svg>294    </div>295    <div class="pill-icon">296      <svg width="36" height="36" viewBox="0 0 24 24" fill="#34a853"><path d="M5 7h3l2-2h4l2 2h3a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2z"/><circle cx="12" cy="14" r="4" fill="#8ab4f8"/></svg>297    </div>298  </div>299 300  <!-- Home Indicator -->301  <div class="home-indicator"></div>302</div>303</body>304</html>