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; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: radial-gradient(1200px 900px at 40% 60%, #2b2a3d 0%, #1f1e30 45%, #17162a 100%);12    border-radius: 36px;13    box-shadow: 0 20px 50px rgba(0,0,0,0.35);14    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;15  }16  /* Wallpaper placeholder (semantic image) */17  .wallpaper {18    position: absolute;19    inset: 0;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex; align-items: center; justify-content: center;24    font-size: 28px; letter-spacing: 0.3px;25    opacity: 0.14; /* dim so foreground pops like dark rock wallpaper */26  }27 28  /* Status bar */29  .status-bar {30    position: absolute; top: 24px; left: 0; right: 0;31    height: 72px; pointer-events: none;32  }33  .sb-left { position: absolute; left: 32px; top: 12px; color: #fff; font-size: 34px; font-weight: 500; }34  .sb-center { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; }35  .sb-dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }36  .sb-pill { width: 42px; height: 18px; background: #fff; border-radius: 10px; }37  .sb-right { position: absolute; right: 28px; top: 10px; display: flex; gap: 20px; align-items: center; }38  .sb-right svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; }39 40  /* Date */41  .date {42    position: absolute; left: 64px; top: 250px;43    color: #ffffff; font-size: 64px; font-weight: 500;44    text-shadow: 0 2px 6px rgba(0,0,0,0.35);45  }46 47  /* App grid row */48  .apps-row {49    position: absolute; top: 1500px; left: 0; width: 100%;50    display: flex; justify-content: space-evenly; align-items: flex-start;51  }52  .app { width: 220px; text-align: center; }53  .icon {54    width: 180px; height: 180px; border-radius: 50%;55    background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.35);56    margin: 0 auto;57    display: flex; align-items: center; justify-content: center;58  }59  .label {60    margin-top: 22px; color: #eaeaea; font-size: 38px; font-weight: 500;61  }62 63  /* Dock row */64  .dock-row {65    position: absolute; top: 1780px; left: 0; width: 100%;66    display: flex; justify-content: space-evenly; align-items: center;67  }68  .dock .icon { width: 160px; height: 160px; }69 70  /* Search bar */71  .search-bar {72    position: absolute; left: 68px; top: 1960px;73    width: 944px; height: 140px;74    background: #fff; border-radius: 70px;75    box-shadow: 0 16px 40px rgba(0,0,0,0.35);76    display: flex; align-items: center; justify-content: space-between;77    padding: 0 38px;78  }79  .search-left { display: flex; align-items: center; gap: 22px; }80  .search-g {81    width: 86px; height: 86px; border-radius: 43px; display: flex; align-items: center; justify-content: center;82  }83  .search-input-placeholder {84    color: #8a8a8a; font-size: 40px;85  }86  .search-right { display: flex; align-items: center; gap: 26px; }87  .search-right .icon { width: 92px; height: 92px; border-radius: 50%; background: transparent; box-shadow: none; }88 89  /* Home indicator */90  .home-indicator {91    position: absolute; left: 50%; transform: translateX(-50%);92    bottom: 56px; width: 300px; height: 10px; border-radius: 6px;93    background: rgba(255,255,255,0.8);94  }95 96  /* Helper: center SVGs within icons */97  .icon svg { width: 70%; height: 70%; display: block; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Wallpaper semantic placeholder -->104  <div class="wallpaper">[IMG: Rocky mountain wallpaper]</div>105 106  <!-- Status bar -->107  <div class="status-bar">108    <div class="sb-left">11:18</div>109    <div class="sb-center">110      <div class="sb-dot"></div>111      <div class="sb-pill"></div>112      <div class="sb-dot"></div>113      <div class="sb-dot"></div>114    </div>115    <div class="sb-right">116      <!-- Wi‑Fi icon -->117      <svg viewBox="0 0 24 24">118        <path d="M2 9c5-4 15-4 20 0"></path>119        <path d="M5 12c3-2 11-2 14 0"></path>120        <path d="M8 15c2-1 6-1 8 0"></path>121        <circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"></circle>122      </svg>123      <!-- Battery icon -->124      <svg viewBox="0 0 28 24">125        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff"></rect>126        <rect x="23" y="9" width="3" height="6" rx="1" fill="#fff" stroke="none"></rect>127        <rect x="4" y="8" width="16" height="8" rx="1" fill="#fff" stroke="none" opacity="0.9"></rect>128      </svg>129    </div>130  </div>131 132  <!-- Date -->133  <div class="date">Fri, Sep 8</div>134 135  <!-- App icons row -->136  <div class="apps-row">137    <!-- Play Store -->138    <div class="app">139      <div class="icon">140        <svg viewBox="0 0 100 100">141          <!-- Simple triangular logo -->142          <polygon points="20,20 80,50 20,80" fill="#4CAF50"></polygon>143          <polygon points="32,32 80,50 32,68" fill="#2196F3" opacity="0.85"></polygon>144          <polygon points="20,20 32,32 32,68 20,80" fill="#FFC107"></polygon>145          <polygon points="32,32 48,50 32,68" fill="#F44336"></polygon>146        </svg>147      </div>148      <div class="label">Play Store</div>149    </div>150 151    <!-- Gmail -->152    <div class="app">153      <div class="icon">154        <svg viewBox="0 0 100 100">155          <!-- Envelope base -->156          <rect x="18" y="30" width="64" height="40" rx="8" fill="#fff" stroke="#E0E0E0" stroke-width="4"></rect>157          <!-- Multicolor M -->158          <path d="M18 30 L50 55 L82 30" stroke="#F44336" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>159          <path d="M18 30 V70" stroke="#34A853" stroke-width="12" stroke-linecap="round"></path>160          <path d="M82 30 V70" stroke="#4285F4" stroke-width="12" stroke-linecap="round"></path>161          <path d="M32 40 L50 55 L68 40" stroke="#FBBC05" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>162        </svg>163      </div>164      <div class="label">Gmail</div>165    </div>166 167    <!-- Photos -->168    <div class="app">169      <div class="icon">170        <svg viewBox="0 0 100 100">171          <!-- Four petals -->172          <circle cx="50" cy="32" r="18" fill="#FBBC05"></circle>173          <circle cx="68" cy="50" r="18" fill="#34A853"></circle>174          <circle cx="50" cy="68" r="18" fill="#4285F4"></circle>175          <circle cx="32" cy="50" r="18" fill="#EA4335"></circle>176          <circle cx="50" cy="50" r="10" fill="#fff"></circle>177        </svg>178      </div>179      <div class="label">Photos</div>180    </div>181 182    <!-- YouTube -->183    <div class="app">184      <div class="icon">185        <svg viewBox="0 0 100 100">186          <rect x="18" y="30" width="64" height="40" rx="12" fill="#FF0000"></rect>187          <polygon points="44,50 44,40 60,50 44,60" fill="#fff"></polygon>188        </svg>189      </div>190      <div class="label">YouTube</div>191    </div>192  </div>193 194  <!-- Dock icons -->195  <div class="dock-row">196    <div class="app dock">197      <div class="icon">198        <svg viewBox="0 0 100 100">199          <path d="M30 30 C45 52, 48 55, 30 70" stroke="#4285F4" stroke-width="10" fill="none" stroke-linecap="round"></path>200          <path d="M38 62 L45 55" stroke="#4285F4" stroke-width="10" stroke-linecap="round"></path>201        </svg>202      </div>203    </div>204    <div class="app dock">205      <div class="icon">206        <svg viewBox="0 0 100 100">207          <rect x="22" y="28" width="56" height="40" rx="14" fill="#1E88E5"></rect>208          <path d="M46 68 L60 78 L60 68" fill="#90CAF9"></path>209        </svg>210      </div>211    </div>212    <div class="app dock">213      <div class="icon">214        <svg viewBox="0 0 100 100">215          <circle cx="50" cy="50" r="30" fill="#4CAF50"></circle>216          <path d="M50 20 A30 30 0 0 1 82 50 L50 50 Z" fill="#F44336"></path>217          <path d="M50 80 A30 30 0 0 1 18 50 L50 50 Z" fill="#FFC107"></path>218          <circle cx="50" cy="50" r="14" fill="#1E88E5"></circle>219        </svg>220      </div>221    </div>222    <div class="app dock">223      <div class="icon">224        <svg viewBox="0 0 100 100">225          <rect x="26" y="32" width="48" height="36" rx="8" fill="#9E9E9E"></rect>226          <rect x="40" y="24" width="20" height="10" rx="3" fill="#757575"></rect>227          <circle cx="50" cy="50" r="12" fill="#4285F4"></circle>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Google Search bar -->234  <div class="search-bar">235    <div class="search-left">236      <div class="search-g">237        <svg viewBox="0 0 100 100">238          <!-- Simplified multicolor G -->239          <path d="M50 20 A30 30 0 1 0 80 50" stroke="#4285F4" stroke-width="12" fill="none" stroke-linecap="round"></path>240          <path d="M50 20 A30 30 0 0 1 80 50" stroke="#34A853" stroke-width="12" fill="none" stroke-linecap="round"></path>241          <path d="M80 50 H60" stroke="#FBBC05" stroke-width="12" stroke-linecap="round"></path>242          <path d="M60 50 L80 50" stroke="#EA4335" stroke-width="12" stroke-linecap="round"></path>243        </svg>244      </div>245      <div class="search-input-placeholder">Search</div>246    </div>247    <div class="search-right">248      <!-- Mic -->249      <div class="icon">250        <svg viewBox="0 0 100 100">251          <rect x="40" y="26" width="20" height="36" rx="10" fill="#EA4335"></rect>252          <path d="M32 50 A18 18 0 0 0 68 50" stroke="#4285F4" stroke-width="8" fill="none" stroke-linecap="round"></path>253          <rect x="48" y="62" width="4" height="16" fill="#34A853"></rect>254          <rect x="42" y="76" width="16" height="4" rx="2" fill="#FBBC05"></rect>255        </svg>256      </div>257      <!-- Lens/Camera -->258      <div class="icon">259        <svg viewBox="0 0 100 100">260          <rect x="22" y="30" width="56" height="40" rx="12" fill="#fff" stroke="#E0E0E0" stroke-width="4"></rect>261          <circle cx="50" cy="50" r="12" fill="#4285F4"></circle>262          <rect x="38" y="22" width="24" height="12" rx="4" fill="#34A853"></rect>263          <circle cx="72" cy="40" r="6" fill="#FBBC05"></circle>264          <circle cx="28" cy="40" r="6" fill="#EA4335"></circle>265        </svg>266      </div>267    </div>268  </div>269 270  <!-- Home indicator -->271  <div class="home-indicator"></div>272 273</div>274</body>275</html>