GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Roboto, Arial, Helvetica, sans-serif;11  }12  #render-target {13    position: relative;14    width: 1080px;15    height: 2400px;16    overflow: hidden;17    border-radius: 0;18    background: #121315;19  }20  /* Wallpaper texture */21  .wallpaper {22    position: absolute;23    inset: 0;24    background:25      radial-gradient(1600px 1200px at 60% 40%, #1f2124 10%, #15171a 60%, #101214 100%),26      repeating-linear-gradient(70deg, rgba(255,255,255,0.02) 0 3px, rgba(0,0,0,0) 3px 12px);27    opacity: 0.98;28  }29 30  /* Status bar */31  .status-bar {32    position: absolute;33    top: 24px;34    left: 36px;35    right: 36px;36    height: 60px;37    display: flex;38    align-items: center;39    justify-content: space-between;40    color: #ffffff;41  }42  .status-bar .time {43    font-weight: 600;44    font-size: 36px;45    letter-spacing: 0.5px;46  }47  .status-right {48    display: flex;49    align-items: center;50    gap: 26px;51  }52  .status-right svg {53    width: 40px;54    height: 40px;55    stroke: #ffffff;56    fill: none;57    stroke-width: 2.2;58    opacity: 0.95;59  }60 61  /* Weather widget */62  .weather-widget {63    position: absolute;64    top: 120px;65    left: 60px;66    right: 60px;67    color: #ffffff;68  }69  .weather-widget .date {70    font-size: 64px;71    font-weight: 500;72    margin-bottom: 18px;73  }74  .weather-line {75    display: flex;76    align-items: center;77    gap: 18px;78    font-size: 34px;79    color: #eaeaea;80  }81  .weather-line svg {82    width: 56px;83    height: 56px;84    stroke: #eaeaea;85    fill: none;86    stroke-width: 2.4;87  }88 89  /* App rows */90  .apps-row {91    position: absolute;92    left: 60px;93    right: 60px;94    display: flex;95    justify-content: space-between;96    align-items: flex-start;97  }98  .apps-row.top { top: 1500px; }99  .apps-row.dock { top: 1820px; }100 101  .app {102    width: 210px;103    text-align: center;104    color: #ffffff;105  }106  .app .icon {107    width: 190px;108    height: 190px;109    border-radius: 50%;110    background: #ffffff;111    display: flex;112    align-items: center;113    justify-content: center;114    box-shadow: 0 14px 26px rgba(0,0,0,0.45);115    margin: 0 auto 18px;116  }117  .app .label {118    font-size: 36px;119    letter-spacing: 0.2px;120  }121 122  /* Search bar */123  .search-bar {124    position: absolute;125    left: 60px;126    right: 60px;127    bottom: 160px;128    height: 130px;129    border-radius: 65px;130    background: #2b2d31;131    display: flex;132    align-items: center;133    padding: 0 30px;134    box-shadow: 0 10px 24px rgba(0,0,0,0.45);135    color: #dfe2e6;136  }137  .g-chip {138    width: 78px;139    height: 78px;140    border-radius: 39px;141    background: #1f2124;142    display: inline-flex;143    align-items: center;144    justify-content: center;145    margin-right: 22px;146    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);147  }148  .search-placeholder {149    flex: 1;150    font-size: 36px;151    color: #bfc3c8;152  }153  .search-actions {154    display: flex;155    align-items: center;156    gap: 26px;157  }158  .search-actions .action {159    width: 72px;160    height: 72px;161    border-radius: 36px;162    background: #232529;163    display: flex;164    align-items: center;165    justify-content: center;166  }167  .search-actions svg {168    width: 40px;169    height: 40px;170    stroke: #f1f4f8;171    fill: none;172    stroke-width: 2.2;173  }174 175  /* Gesture pill */176  .gesture {177    position: absolute;178    bottom: 36px;179    left: 50%;180    transform: translateX(-50%);181    width: 360px;182    height: 14px;183    border-radius: 7px;184    background: rgba(255,255,255,0.85);185  }186</style>187</head>188<body>189<div id="render-target">190  <div class="wallpaper"></div>191 192  <!-- Status Bar -->193  <div class="status-bar">194    <div class="time">8:09</div>195    <div class="status-right">196      <!-- WiFi icon -->197      <svg viewBox="0 0 24 24">198        <path d="M2 8 Q12 1 22 8"></path>199        <path d="M5 11 Q12 6 19 11"></path>200        <path d="M8 14 Q12 11 16 14"></path>201        <circle cx="12" cy="17" r="1.8" fill="#fff" stroke="none"></circle>202      </svg>203      <!-- Battery icon -->204      <svg viewBox="0 0 24 24">205        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none"></rect>206        <rect x="21" y="9" width="2" height="6" rx="1" ry="1" fill="#ffffff" stroke="none"></rect>207        <rect x="4.5" y="8" width="12" height="8" rx="1.5" ry="1.5" fill="#ffffff" stroke="none" opacity="0.85"></rect>208      </svg>209    </div>210  </div>211 212  <!-- Weather Widget -->213  <div class="weather-widget">214    <div class="date">Tue, Aug 1</div>215    <div class="weather-line">216      <!-- Fog icon -->217      <svg viewBox="0 0 24 24">218        <path d="M2 7 H22" stroke-linecap="round"></path>219        <path d="M2 12 H22" stroke-linecap="round" opacity="0.85"></path>220        <path d="M4 17 H20" stroke-linecap="round" opacity="0.7"></path>221      </svg>222      <span>29°C</span>223      <span>·</span>224      <span>Today 36° / 28°</span>225      <span>·</span>226      <span>Fog</span>227    </div>228  </div>229 230  <!-- Top row apps -->231  <div class="apps-row top">232    <!-- Play Store -->233    <div class="app">234      <div class="icon">235        <svg viewBox="0 0 100 100">236          <polygon points="22,18 84,50 22,82" fill="#4CAF50"></polygon>237          <polygon points="22,18 42,40 22,60" fill="#FFC107"></polygon>238          <polygon points="22,60 42,82 22,82" fill="#03A9F4"></polygon>239          <polygon points="42,40 84,50 42,82" fill="#E91E63" opacity="0.85"></polygon>240        </svg>241      </div>242      <div class="label">Play Store</div>243    </div>244 245    <!-- Gmail -->246    <div class="app">247      <div class="icon">248        <svg viewBox="0 0 100 100">249          <rect x="14" y="26" width="72" height="48" rx="8" fill="#ffffff" stroke="#d1d1d1"></rect>250          <polyline points="14,32 50,58 86,32" fill="none" stroke="#DB4437" stroke-width="10"></polyline>251          <path d="M14 26 L50 50 L86 26" fill="none" stroke="#DB4437" stroke-width="10"></path>252          <path d="M20 74 V36 L50 58 L80 36 V74" fill="none" stroke="#0F9D58" stroke-width="8" opacity="0.6"></path>253        </svg>254      </div>255      <div class="label">Gmail</div>256    </div>257 258    <!-- Photos -->259    <div class="app">260      <div class="icon">261        <svg viewBox="0 0 100 100">262          <path d="M50 10 A40 40 0 0 1 90 50 H50 Z" fill="#F44336"></path>263          <path d="M90 50 A40 40 0 0 1 50 90 V50 Z" fill="#FFC107"></path>264          <path d="M50 90 A40 40 0 0 1 10 50 H50 Z" fill="#4CAF50"></path>265          <path d="M10 50 A40 40 0 0 1 50 10 V50 Z" fill="#2196F3"></path>266        </svg>267      </div>268      <div class="label">Photos</div>269    </div>270 271    <!-- YouTube -->272    <div class="app">273      <div class="icon">274        <svg viewBox="0 0 100 100">275          <rect x="18" y="32" width="64" height="36" rx="12" fill="#FF0000"></rect>276          <polygon points="44,40 68,50 44,60" fill="#ffffff"></polygon>277        </svg>278      </div>279      <div class="label">YouTube</div>280    </div>281  </div>282 283  <!-- Dock row apps -->284  <div class="apps-row dock">285    <!-- Phone -->286    <div class="app">287      <div class="icon">288        <svg viewBox="0 0 100 100">289          <path d="M30 24 C42 24 44 48 34 54 C42 66 56 74 66 66 C72 58 78 60 78 72 C78 76 72 84 64 84 C48 84 28 72 20 56 C12 40 16 24 24 24 C26 24 28 24 30 24 Z" fill="#22c15e"></path>290        </svg>291      </div>292      <div class="label">Phone</div>293    </div>294 295    <!-- Messages -->296    <div class="app">297      <div class="icon">298        <svg viewBox="0 0 100 100">299          <rect x="18" y="22" width="64" height="44" rx="14" fill="#4285F4"></rect>300          <path d="M40 66 L40 86 L58 66" fill="#4285F4"></path>301          <circle cx="34" cy="44" r="5" fill="#ffffff"></circle>302          <circle cx="50" cy="44" r="5" fill="#ffffff"></circle>303          <circle cx="66" cy="44" r="5" fill="#ffffff"></circle>304        </svg>305      </div>306      <div class="label">Messages</div>307    </div>308 309    <!-- Chrome -->310    <div class="app">311      <div class="icon">312        <svg viewBox="0 0 100 100">313          <circle cx="50" cy="50" r="40" fill="#DB4437"></circle>314          <path d="M50 50 L86 50 A40 40 0 0 1 36 86 Z" fill="#0F9D58"></path>315          <path d="M50 50 L36 86 A40 40 0 0 1 14 36 L50 50 Z" fill="#F4B400"></path>316          <circle cx="50" cy="50" r="20" fill="#4285F4" stroke="#ffffff" stroke-width="4"></circle>317        </svg>318      </div>319      <div class="label">Chrome</div>320    </div>321 322    <!-- Camera -->323    <div class="app">324      <div class="icon">325        <svg viewBox="0 0 100 100">326          <rect x="20" y="34" width="60" height="40" rx="8" fill="#3f4247"></rect>327          <rect x="34" y="24" width="32" height="14" rx="6" fill="#3f4247"></rect>328          <circle cx="50" cy="54" r="14" fill="#8ea0b5"></circle>329          <circle cx="50" cy="54" r="8" fill="#273342"></circle>330        </svg>331      </div>332      <div class="label">Camera</div>333    </div>334  </div>335 336  <!-- Google Search Bar -->337  <div class="search-bar">338    <div class="g-chip">339      <svg viewBox="0 0 36 36">340        <path d="M18 6 A12 12 0 1 0 30 18 H18" fill="#4285F4"></path>341        <path d="M18 6 A12 12 0 0 0 6 18 H18" fill="#EA4335"></path>342        <path d="M6 18 A12 12 0 0 0 18 30 V18" fill="#FBBC05"></path>343        <path d="M18 30 A12 12 0 0 0 30 18 H18" fill="#34A853"></path>344      </svg>345    </div>346    <div class="search-placeholder">Search</div>347    <div class="search-actions">348      <!-- Microphone -->349      <div class="action">350        <svg viewBox="0 0 24 24">351          <rect x="8" y="5" width="8" height="10" rx="4" fill="#ffffff" stroke="none"></rect>352          <path d="M6 11 C6 15 10 17 12 17 C14 17 18 15 18 11" stroke="#ffffff"></path>353          <path d="M12 17 V21" stroke="#ffffff"></path>354          <path d="M9 21 H15" stroke="#ffffff"></path>355        </svg>356      </div>357      <!-- Camera -->358      <div class="action">359        <svg viewBox="0 0 24 24">360          <rect x="3" y="7" width="18" height="12" rx="3" ry="3"></rect>361          <rect x="9" y="4" width="6" height="4" rx="2" ry="2"></rect>362          <circle cx="12" cy="13" r="4" fill="#ffffff" stroke="none"></circle>363        </svg>364      </div>365    </div>366  </div>367 368  <!-- Gesture pill at bottom -->369  <div class="gesture"></div>370</div>371</body>372</html>