GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI Mock</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: radial-gradient(1200px 900px at 50% 40%, #1b1b1b 0%, #121212 60%, #0f0f0f 100%);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    color: #ffffff;23    display: flex;24    align-items: center;25    padding: 0 30px;26    font-size: 40px;27    letter-spacing: 0.5px;28  }29  .status-left { flex: 1; }30  .status-center {31    width: 260px;32    text-align: center;33    position: relative;34  }35  .page-dots {36    position: absolute;37    top: 18px;38    left: 50%;39    transform: translateX(-50%);40    display: flex;41    gap: 16px;42  }43  .dot {44    width: 16px;45    height: 16px;46    border-radius: 50%;47    background: #9e9e9e;48    opacity: 0.6;49  }50  .dot.active { opacity: 1; background: #ffffff; }51  .status-right {52    display: flex;53    gap: 18px;54    align-items: center;55    font-size: 30px;56  }57  .status-icon {58    width: 38px;59    height: 38px;60    border-radius: 8px;61    background: rgba(255,255,255,0.12);62  }63 64  /* App icons grid (top row) */65  .apps-top {66    position: absolute;67    top: 190px;68    left: 68px;69    display: flex;70    gap: 140px;71    align-items: flex-start;72  }73  .app {74    width: 180px;75    text-align: center;76    color: #ffffff;77    font-size: 34px;78  }79  .app .icon {80    width: 170px;81    height: 170px;82    border-radius: 50%;83    background: #ffffff;84    box-shadow: 0 8px 20px rgba(0,0,0,0.35);85    margin: 0 auto 22px;86    position: relative;87  }88 89  /* Simple SVGs inside icons */90  .icon svg {91    position: absolute;92    left: 50%;93    top: 50%;94    transform: translate(-50%,-50%);95  }96 97  /* Bottom dock */98  .dock {99    position: absolute;100    bottom: 260px;101    left: 0;102    width: 1080px;103    display: flex;104    justify-content: space-around;105    padding: 0 80px;106  }107  .dock .icon {108    width: 170px;109    height: 170px;110    border-radius: 50%;111    background: #ffffff;112    box-shadow: 0 8px 22px rgba(0,0,0,0.35);113    position: relative;114  }115 116  /* Google search bar */117  .search-bar {118    position: absolute;119    bottom: 120px;120    left: 70px;121    width: 940px;122    height: 140px;123    background: #2b2b2b;124    border-radius: 72px;125    box-shadow: 0 10px 24px rgba(0,0,0,0.5);126    display: flex;127    align-items: center;128    padding: 0 34px;129    color: #e0e0e0;130    font-size: 42px;131  }132  .search-left {133    display: flex;134    align-items: center;135    gap: 22px;136  }137  .g-badge {138    width: 82px;139    height: 82px;140    border-radius: 50%;141    background: #ffffff;142    display: flex;143    align-items: center;144    justify-content: center;145    font-weight: bold;146    color: #4285F4;147    font-size: 40px;148  }149  .search-actions {150    margin-left: auto;151    display: flex;152    gap: 26px;153  }154  .action-btn {155    width: 80px;156    height: 80px;157    border-radius: 22px;158    background: rgba(255,255,255,0.08);159    display: flex;160    align-items: center;161    justify-content: center;162  }163 164  /* Navigation handle */165  .nav-handle {166    position: absolute;167    bottom: 24px;168    left: 50%;169    transform: translateX(-50%);170    width: 320px;171    height: 12px;172    border-radius: 8px;173    background: #e9e9e9;174    opacity: 0.9;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- STATUS BAR -->182  <div class="status-bar">183    <div class="status-left">10:44</div>184    <div class="status-center">185      <div class="page-dots">186        <div class="dot"></div>187        <div class="dot active"></div>188      </div>189    </div>190    <div class="status-right">191      <div class="status-icon"></div>192      <div class="status-icon"></div>193      <div class="status-icon"></div>194    </div>195  </div>196 197  <!-- TOP ROW APPS -->198  <div class="apps-top">199    <!-- Houzz -->200    <div class="app">201      <div class="icon">202        <svg width="120" height="120" viewBox="0 0 120 120">203          <!-- simple green house-like logo -->204          <rect x="20" y="50" width="30" height="45" fill="#34C759"></rect>205          <polygon points="35,26 70,50 70,95 50,95 50,65 35,65" fill="#34C759"></polygon>206        </svg>207      </div>208      <div>Houzz</div>209    </div>210 211    <!-- Pepperfry -->212    <div class="app">213      <div class="icon">214        <svg width="120" height="120" viewBox="0 0 120 120">215          <!-- a simple orange chair -->216          <rect x="28" y="40" width="64" height="32" rx="6" fill="#ff7a2e"></rect>217          <rect x="40" y="72" width="40" height="18" rx="4" fill="#ff9a57"></rect>218          <rect x="34" y="90" width="8" height="18" fill="#cc5f22"></rect>219          <rect x="78" y="90" width="8" height="18" fill="#cc5f22"></rect>220        </svg>221      </div>222      <div>Pepperfry</div>223    </div>224  </div>225 226  <!-- BOTTOM DOCK ICONS -->227  <div class="dock">228    <!-- Phone -->229    <div class="icon">230      <svg width="110" height="110" viewBox="0 0 110 110">231        <path d="M28 32c2-4 7-6 10-3l9 9c3 3 2 7-1 10l-4 3c6 10 15 18 25 24l3-4c3-3 7-4 10-1l9 9c3 3 1 8-3 10-9 4-21 1-36-10S24 58 20 49c-5-13-3-25 8-31z" fill="#3A77FF"></path>232      </svg>233    </div>234 235    <!-- Pepperfry (dock) -->236    <div class="icon">237      <svg width="110" height="110" viewBox="0 0 120 120">238        <rect x="30" y="42" width="60" height="30" rx="6" fill="#ff7a2e"></rect>239        <rect x="42" y="72" width="36" height="16" rx="4" fill="#ff9a57"></rect>240        <rect x="36" y="88" width="8" height="18" fill="#cc5f22"></rect>241        <rect x="76" y="88" width="8" height="18" fill="#cc5f22"></rect>242      </svg>243    </div>244 245    <!-- Chrome -->246    <div class="icon">247      <svg width="120" height="120" viewBox="0 0 120 120">248        <!-- simplified chrome-like emblem -->249        <circle cx="60" cy="60" r="50" fill="#EA4335"></circle>250        <path d="M60 10 A50 50 0 0 1 110 60 L80 60 Z" fill="#FBBC04"></path>251        <path d="M60 110 A50 50 0 0 1 10 60 L40 60 Z" fill="#34A853"></path>252        <circle cx="60" cy="60" r="26" fill="#4285F4"></circle>253        <circle cx="60" cy="60" r="16" fill="#ffffff"></circle>254      </svg>255    </div>256 257    <!-- Camera -->258    <div class="icon">259      <svg width="110" height="110" viewBox="0 0 120 120">260        <rect x="22" y="42" width="76" height="48" rx="8" fill="#4f4f4f"></rect>261        <rect x="36" y="30" width="18" height="14" rx="4" fill="#666"></rect>262        <circle cx="60" cy="66" r="16" fill="#9ec1ff"></circle>263        <circle cx="60" cy="66" r="10" fill="#2f5fd3"></circle>264      </svg>265    </div>266  </div>267 268  <!-- Google Search Bar -->269  <div class="search-bar">270    <div class="search-left">271      <div class="g-badge">G</div>272      <div>Search</div>273    </div>274    <div class="search-actions">275      <div class="action-btn">276        <!-- Mic -->277        <svg width="40" height="40" viewBox="0 0 24 24">278          <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#ff4b4b"></path>279          <path d="M6 11a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6zM11 20h2v-2h-2v2z" fill="#ffffff"></path>280        </svg>281      </div>282      <div class="action-btn">283        <!-- Lens/Camera -->284        <svg width="40" height="40" viewBox="0 0 24 24">285          <rect x="4" y="7" width="16" height="12" rx="3" fill="#ffffff" opacity="0.8"></rect>286          <circle cx="12" cy="13" r="4" fill="#4c87ff"></circle>287          <rect x="8" y="5" width="4" height="3" rx="1" fill="#ffffff" opacity="0.8"></rect>288        </svg>289      </div>290    </div>291  </div>292 293  <!-- Navigation Handle -->294  <div class="nav-handle"></div>295 296</div>297</body>298</html>