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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: radial-gradient(1400px 1200px at 20% 10%, #2a2d31 0%, #1e2125 35%, #15181c 70%, #101216 100%);20  }21 22  /* subtle feather-like overlay */23  #render-target:before {24    content: "";25    position: absolute;26    inset: 0;27    opacity: 0.18;28    background-image:29      repeating-linear-gradient(75deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 8px),30      repeating-linear-gradient(115deg, rgba(0,0,0,0.35) 0 3px, transparent 3px 10px);31    mix-blend-mode: overlay;32    pointer-events: none;33  }34 35  /* Status bar */36  .status-time {37    position: absolute;38    top: 28px;39    left: 36px;40    color: #ffffff;41    font-size: 38px;42    font-weight: 600;43    letter-spacing: 0.5px;44  }45  .status-icons {46    position: absolute;47    top: 28px;48    right: 28px;49    display: flex;50    align-items: center;51    gap: 26px;52    color: #ffffff;53  }54  .status-icons svg {55    display: block;56    width: 40px;57    height: 40px;58    fill: none;59    stroke: #ffffff;60    stroke-width: 2.2;61  }62 63  /* Date + Weather */64  .date-weather {65    position: absolute;66    top: 360px;67    left: 72px;68    color: #ffffff;69  }70  .date-weather .date {71    font-size: 60px;72    font-weight: 500;73    margin-bottom: 16px;74  }75  .date-weather .weather {76    display: flex;77    align-items: center;78    gap: 18px;79    color: rgba(255,255,255,0.88);80    font-size: 36px;81  }82  .weather svg { width: 46px; height: 46px; }83 84  /* App grid */85  .apps-row {86    position: absolute;87    left: 64px;88    right: 64px;89    display: grid;90    grid-template-columns: repeat(4, 1fr);91    justify-items: center;92    gap: 8px 24px;93  }94  .row-1 { top: 1480px; }95  .row-2 { top: 1760px; }96 97  .app {98    width: 220px;99    text-align: center;100    color: #e9ecef;101  }102  .app .app-icon {103    width: 160px;104    height: 160px;105    border-radius: 50%;106    background: #ffffff;107    box-shadow: 0 6px 18px rgba(0,0,0,0.3);108    margin: 0 auto 20px auto;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .app .label {114    font-size: 32px;115    letter-spacing: 0.2px;116  }117  .app svg { width: 104px; height: 104px; }118 119  /* Google search pill */120  .search-pill {121    position: absolute;122    left: 60px;123    right: 60px;124    bottom: 150px;125    height: 132px;126    background: #2f3439;127    border-radius: 66px;128    display: flex;129    align-items: center;130    padding: 0 34px;131    box-shadow: 0 8px 24px rgba(0,0,0,0.45);132    color: rgba(255,255,255,0.9);133  }134  .search-pill .g-icon {135    width: 62px;136    height: 62px;137    margin-right: 22px;138    border-radius: 50%;139    overflow: hidden;140    display: inline-block;141    background:142      conic-gradient(#4285F4 0 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);143  }144  .search-pill .hint {145    font-size: 36px;146    color: rgba(255,255,255,0.85);147    flex: 1;148  }149  .search-pill .actions {150    display: flex;151    align-items: center;152    gap: 26px;153  }154  .search-pill .actions .icon {155    width: 68px;156    height: 68px;157    border-radius: 50%;158    background: rgba(255,255,255,0.09);159    display: flex;160    align-items: center;161    justify-content: center;162  }163  .search-pill .actions svg { width: 36px; height: 36px; stroke: #9EC1FF; stroke-width: 2.2; fill: none; }164 165  /* Gesture bar */166  .gesture {167    position: absolute;168    bottom: 24px;169    left: 50%;170    transform: translateX(-50%);171    width: 250px;172    height: 10px;173    background: rgba(255,255,255,0.92);174    border-radius: 6px;175  }176</style>177</head>178<body>179<div id="render-target">180  <!-- Status -->181  <div class="status-time">9:44</div>182  <div class="status-icons">183    <!-- Wi‑Fi -->184    <svg viewBox="0 0 24 24" aria-label="wifi">185      <path d="M2 8c4-3.2 16-3.2 20 0" />186      <path d="M5 12c3-2.2 11-2.2 14 0" />187      <path d="M8 16c2-1.2 6-1.2 8 0" />188      <circle cx="12" cy="19" r="1.7" fill="#ffffff" stroke="none"/>189    </svg>190    <!-- Battery -->191    <svg viewBox="0 0 28 24" aria-label="battery">192      <rect x="1.5" y="6" width="20" height="12" rx="2" />193      <rect x="22.5" y="9" width="3.5" height="6" rx="1" />194      <rect x="3.8" y="8.2" width="15.6" height="7.6" fill="#ffffff" stroke="none"/>195    </svg>196  </div>197 198  <!-- Date and Weather -->199  <div class="date-weather">200    <div class="date">Fri, Nov 3</div>201    <div class="weather">202      <!-- Cloud icon -->203      <svg viewBox="0 0 48 48" aria-label="cloud">204        <circle cx="18" cy="24" r="10" fill="#ffffff" opacity="0.95"/>205        <circle cx="28" cy="20" r="8" fill="#ffffff" opacity="0.95"/>206        <rect x="10" y="24" width="26" height="10" rx="5" fill="#ffffff" opacity="0.95"/>207      </svg>208      <span>23°C · Today 31° / 19° · Cloudy</span>209    </div>210  </div>211 212  <!-- First row of apps -->213  <div class="apps-row row-1">214    <!-- Play Store -->215    <div class="app">216      <div class="app-icon">217        <svg viewBox="0 0 64 64" aria-label="Play Store">218          <!-- simplified triangle with color shards -->219          <polygon points="10,12 42,32 10,52" fill="#34A853"/>220          <polygon points="18,8 42,32 52,24" fill="#4285F4"/>221          <polygon points="42,32 18,56 52,40" fill="#FBBC05"/>222          <polygon points="18,8 18,56 10,52 10,12" fill="#EA4335"/>223        </svg>224      </div>225      <div class="label">Play Store</div>226    </div>227 228    <!-- Gmail -->229    <div class="app">230      <div class="app-icon">231        <svg viewBox="0 0 64 64" aria-label="Gmail">232          <rect x="10" y="16" width="44" height="32" rx="4" fill="#ffffff" stroke="#DADCE0" stroke-width="2"/>233          <path d="M12 20 L32 34 L52 20" fill="none" stroke="#EA4335" stroke-width="6" />234          <path d="M12 20 L12 44" stroke="#34A853" stroke-width="6" />235          <path d="M52 20 L52 44" stroke="#4285F4" stroke-width="6" />236          <path d="M12 20 L32 34 L52 20" stroke="#FBBC05" stroke-width="4" />237        </svg>238      </div>239      <div class="label">Gmail</div>240    </div>241 242    <!-- Photos -->243    <div class="app">244      <div class="app-icon">245        <svg viewBox="0 0 64 64" aria-label="Photos">246          <path d="M32 10 A12 12 0 0 1 44 22 L32 22 Z" fill="#EA4335"/>247          <path d="M54 32 A12 12 0 0 1 42 44 L42 32 Z" fill="#FBBC05"/>248          <path d="M32 54 A12 12 0 0 1 20 42 L32 42 Z" fill="#34A853"/>249          <path d="M10 32 A12 12 0 0 1 22 20 L22 32 Z" fill="#4285F4"/>250          <circle cx="32" cy="32" r="6" fill="#ffffff"/>251        </svg>252      </div>253      <div class="label">Photos</div>254    </div>255 256    <!-- YouTube -->257    <div class="app">258      <div class="app-icon">259        <svg viewBox="0 0 64 64" aria-label="YouTube">260          <rect x="10" y="18" width="44" height="28" rx="8" fill="#FF0000"/>261          <polygon points="28,22 28,42 44,32" fill="#ffffff"/>262        </svg>263      </div>264      <div class="label">YouTube</div>265    </div>266  </div>267 268  <!-- Second row of apps -->269  <div class="apps-row row-2">270    <!-- Phone -->271    <div class="app">272      <div class="app-icon">273        <svg viewBox="0 0 64 64" aria-label="Phone">274          <path d="M20 14 L28 14 C30 14 32 16 32 18 L32 26 C32 28 30.5 29 29 30 L25 32 C28 38 32 42 38 45 L41 41 C42 39.5 44 38 46 38 L54 38 C56 38 58 40 58 42 L58 50 C58 52 56 54 54 54 C38 54 22 38 10 22 C10 20 12 18 14 18 L20 18 C22 18 20 14 20 14 Z"275                fill="#1E88E5"/>276        </svg>277      </div>278      <div class="label">Phone</div>279    </div>280 281    <!-- Messages -->282    <div class="app">283      <div class="app-icon">284        <svg viewBox="0 0 64 64" aria-label="Messages">285          <rect x="10" y="14" width="44" height="30" rx="8" fill="#4D8DFF"/>286          <rect x="18" y="22" width="28" height="6" rx="3" fill="#ffffff"/>287          <rect x="18" y="32" width="20" height="6" rx="3" fill="#ffffff"/>288          <polygon points="22,44 28,38 34,44" fill="#4D8DFF"/>289        </svg>290      </div>291      <div class="label">Messages</div>292    </div>293 294    <!-- Chrome -->295    <div class="app">296      <div class="app-icon">297        <svg viewBox="0 0 64 64" aria-label="Chrome">298          <circle cx="32" cy="32" r="26" fill="#DB4437"/>299          <path d="M32 6 A26 26 0 0 1 58 32 L38 32 Z" fill="#F4B400"/>300          <path d="M12 48 A26 26 0 0 1 10 22 L30 22 Z" fill="#0F9D58"/>301          <circle cx="32" cy="32" r="12" fill="#4285F4" stroke="#ffffff" stroke-width="3"/>302        </svg>303      </div>304      <div class="label">Chrome</div>305    </div>306 307    <!-- Camera -->308    <div class="app">309      <div class="app-icon">310        <svg viewBox="0 0 64 64" aria-label="Camera">311          <rect x="10" y="20" width="44" height="28" rx="6" fill="#E0E0E0" stroke="#444" stroke-width="2"/>312          <rect x="20" y="16" width="10" height="8" rx="3" fill="#555"/>313          <circle cx="32" cy="34" r="10" fill="#3C86FF" stroke="#ffffff" stroke-width="4"/>314        </svg>315      </div>316      <div class="label">Camera</div>317    </div>318  </div>319 320  <!-- Google search pill -->321  <div class="search-pill">322    <span class="g-icon" aria-hidden="true"></span>323    <div class="hint">Search</div>324    <div class="actions">325      <!-- Mic -->326      <div class="icon" title="Voice search">327        <svg viewBox="0 0 24 24" aria-label="mic">328          <rect x="9" y="4" width="6" height="10" rx="3" />329          <path d="M6 12 C6 16 18 16 18 12" />330          <path d="M12 18 L12 21" />331        </svg>332      </div>333      <!-- Lens/Camera -->334      <div class="icon" title="Lens">335        <svg viewBox="0 0 24 24" aria-label="camera">336          <rect x="4" y="6" width="16" height="12" rx="3" />337          <circle cx="12" cy="12" r="4" />338        </svg>339      </div>340    </div>341  </div>342 343  <!-- Gesture handle -->344  <div class="gesture"></div>345</div>346</body>347</html>