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 Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1400px 900px at 60% 55%, #322a47 0%, #2a2540 50%, #1f1b33 100%);15  }16 17  /* Subtle vignette to emulate wallpaper depth */18  #render-target::after{19    content:"";20    position:absolute; inset:0;21    background: radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,0.08), transparent 60%),22                radial-gradient(900px 700px at 30% 70%, rgba(255,160,120,0.08), transparent 60%),23                radial-gradient(1200px 900px at 80% 60%, rgba(120,120,160,0.08), transparent 60%);24    pointer-events:none;25  }26 27  /* Status bar */28  .status-bar {29    position: absolute;30    top: 26px;31    left: 0;32    width: 100%;33    height: 48px;34    padding: 0 28px;35    box-sizing: border-box;36    color: #ffffff;37    display: flex;38    align-items: center;39    justify-content: space-between;40    font-size: 34px;41    letter-spacing: 0.5px;42    text-shadow: 0 1px 2px rgba(0,0,0,0.35);43  }44  .status-left { display: flex; align-items: center; gap: 18px; }45  .status-center { display: flex; gap: 18px; opacity: 0.9; }46  .status-right { display: flex; gap: 22px; align-items: center; }47 48  /* Simple status icons */49  .sb-box { width: 32px; height: 22px; border-radius: 4px; border: 2px solid #fff; opacity: 0.85; }50  .wifi-icon, .battery-icon { display: inline-block; }51 52  .wifi-icon svg, .battery-icon svg { width: 44px; height: 32px; fill: none; stroke: #fff; stroke-width: 3; }53 54  /* Date and weather widget */55  .widget {56    position: absolute;57    left: 56px;58    top: 220px;59    color: #ffffff;60    text-shadow: 0 2px 6px rgba(0,0,0,0.45);61  }62  .widget .date {63    font-weight: 500;64    font-size: 74px;65    margin-bottom: 16px;66  }67  .widget .weather {68    display: flex;69    align-items: center;70    gap: 16px;71    font-size: 42px;72    opacity: 0.95;73  }74  .waves svg { width: 58px; height: 40px; }75 76  /* App grid row */77  .app-row {78    position: absolute;79    left: 0;80    width: 100%;81    top: 1480px;82    padding: 0 70px;83    box-sizing: border-box;84    display: flex;85    justify-content: space-between;86  }87  .app {88    width: 190px;89    text-align: center;90    color: #ffffff;91    font-size: 36px;92    text-shadow: 0 2px 4px rgba(0,0,0,0.45);93  }94  .icon-wrap {95    width: 190px;96    height: 190px;97    background: #fff;98    border-radius: 50%;99    box-shadow: 0 10px 24px rgba(0,0,0,0.35);100    display: flex;101    align-items: center;102    justify-content: center;103    position: relative;104    margin-bottom: 22px;105  }106 107  /* Dock row */108  .dock {109    position: absolute;110    left: 0;111    width: 100%;112    top: 1835px;113    padding: 0 110px;114    box-sizing: border-box;115    display: flex;116    justify-content: space-between;117  }118  .dock .icon-wrap {119    width: 160px;120    height: 160px;121    margin-bottom: 0;122  }123 124  /* Search pill */125  .search-pill {126    position: absolute;127    left: 70px;128    width: 940px;129    height: 120px;130    bottom: 150px;131    background: #ffffff;132    border-radius: 60px;133    box-shadow: 0 14px 30px rgba(0,0,0,0.35);134    display: flex;135    align-items: center;136    justify-content: space-between;137    padding: 0 28px 0 34px;138    box-sizing: border-box;139  }140  .search-left, .search-right {141    display: flex; align-items: center; gap: 26px;142  }143  .search-input-ghost {144    color: #8c8c8c; font-size: 38px;145  }146 147  /* Home indicator */148  .home-indicator {149    position: absolute;150    bottom: 48px;151    left: 50%;152    transform: translateX(-50%);153    width: 300px;154    height: 12px;155    background: rgba(255,255,255,0.82);156    border-radius: 6px;157  }158 159  /* Small badge on Gmail */160  .badge {161    position: absolute;162    right: 22px;163    top: 18px;164    width: 30px;165    height: 30px;166    background: #e3c6ef;167    border: 3px solid #ffffff;168    border-radius: 50%;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">178      <div style="font-weight:500;">11:04</div>179    </div>180    <div class="status-center">181      <div class="sb-box" title="Screen record"></div>182      <div class="sb-box" title="Silent"></div>183      <div style="font-weight:600; letter-spacing:1px;">M</div>184    </div>185    <div class="status-right">186      <span class="wifi-icon" aria-label="Wi‑Fi">187        <svg viewBox="0 0 24 24">188          <path d="M2 9c5-4 15-4 20 0" />189          <path d="M5 12c3-3 11-3 14 0" />190          <path d="M8 15c2-2 6-2 8 0" />191          <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>192        </svg>193      </span>194      <span class="battery-icon" aria-label="Battery">195        <svg viewBox="0 0 32 18">196          <rect x="1" y="3" width="26" height="12" rx="2" />197          <rect x="28" y="7" width="3" height="4" rx="1" />198          <rect x="3.5" y="5.5" width="20" height="7" rx="1.2" fill="#fff" stroke="none"/>199        </svg>200      </span>201    </div>202  </div>203 204  <!-- Date & Weather Widget -->205  <div class="widget">206    <div class="date">Fri, Jul 21</div>207    <div class="weather">208      <span class="waves" aria-hidden="true">209        <svg viewBox="0 0 60 30">210          <path d="M3 10c6 6 12 6 18 0s12-6 18 0 12 6 18 0" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>211          <path d="M3 18c6 6 12 6 18 0s12-6 18 0 12 6 18 0" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>212        </svg>213      </span>214      <span>34°C</span>215    </div>216  </div>217 218  <!-- App Grid Row -->219  <div class="app-row">220    <!-- Play Store -->221    <div class="app">222      <div class="icon-wrap">223        <svg width="112" height="112" viewBox="0 0 64 64" aria-label="Play Store">224          <!-- simplified Google Play triangle -->225          <polygon points="8,8 42,32 8,56" fill="#34a853"/>226          <polygon points="8,8 58,20 42,32" fill="#4285F4"/>227          <polygon points="42,32 58,44 8,56" fill="#FBBC05"/>228          <polygon points="8,8 22,25 8,31" fill="#EA4335"/>229        </svg>230      </div>231      <div>Play Store</div>232    </div>233 234    <!-- Gmail -->235    <div class="app">236      <div class="icon-wrap">237        <svg width="118" height="118" viewBox="0 0 64 64" aria-label="Gmail">238          <!-- Envelope background -->239          <rect x="8" y="16" width="48" height="32" rx="6" fill="#fff"/>240          <!-- Multicolor M -->241          <path d="M12 22 L32 36 L52 22" stroke="#EA4335" stroke-width="8" fill="none" stroke-linejoin="round"/>242          <path d="M12 22 v20" stroke="#34A853" stroke-width="8" />243          <path d="M52 22 v20" stroke="#4285F4" stroke-width="8" />244          <path d="M12 22 L32 36 L52 22" stroke="#FBBC05" stroke-width="4" fill="none"/>245        </svg>246        <span class="badge"></span>247      </div>248      <div>Gmail</div>249    </div>250 251    <!-- Photos -->252    <div class="app">253      <div class="icon-wrap">254        <svg width="118" height="118" viewBox="0 0 64 64" aria-label="Photos">255          <!-- four pinwheel petals -->256          <path d="M32 10a10 10 0 0 1 10 10h-10z" fill="#EA4335"/>257          <path d="M54 32a10 10 0 0 1-10 10V32z" fill="#FBBC05"/>258          <path d="M32 54a10 10 0 0 1-10-10h10z" fill="#34A853"/>259          <path d="M10 32a10 10 0 0 1 10-10v10z" fill="#4285F4"/>260          <circle cx="32" cy="32" r="5" fill="#fff"/>261        </svg>262      </div>263      <div>Photos</div>264    </div>265 266    <!-- YouTube -->267    <div class="app">268      <div class="icon-wrap">269        <svg width="118" height="118" viewBox="0 0 64 64" aria-label="YouTube">270          <rect x="10" y="18" width="44" height="28" rx="8" fill="#FF0000"/>271          <polygon points="28,22 44,32 28,42" fill="#fff"/>272        </svg>273      </div>274      <div>YouTube</div>275    </div>276  </div>277 278  <!-- Dock -->279  <div class="dock">280    <!-- Phone -->281    <div class="icon-wrap">282      <svg width="96" height="96" viewBox="0 0 64 64" aria-label="Phone">283        <circle cx="32" cy="32" r="30" fill="none"/>284        <path d="M20 18c8 10 16 18 26 26l-6 6c-8-4-16-10-22-18l6-14z" fill="#3b82f6" opacity="0.95"/>285        <path d="M22 16l8 6-6 8-8-6z" fill="#8ab4f8"/>286      </svg>287    </div>288 289    <!-- Messages -->290    <div class="icon-wrap">291      <svg width="96" height="96" viewBox="0 0 64 64" aria-label="Messages">292        <rect x="10" y="12" width="44" height="32" rx="8" fill="#5b7cff"/>293        <rect x="18" y="22" width="28" height="8" rx="3" fill="#cfe0ff"/>294        <path d="M24 44l-6 8 0-10z" fill="#5b7cff"/>295      </svg>296    </div>297 298    <!-- Chrome -->299    <div class="icon-wrap">300      <svg width="96" height="96" viewBox="0 0 64 64" aria-label="Chrome">301        <circle cx="32" cy="32" r="28" fill="#fff"/>302        <path d="M32 4a28 28 0 0 1 24 14H32z" fill="#EA4335"/>303        <path d="M56 18a28 28 0 0 1-8 38L40 32z" fill="#34A853"/>304        <path d="M48 56A28 28 0 0 1 8 26h24z" fill="#FBBC05"/>305        <circle cx="32" cy="32" r="11" fill="#4285F4"/>306        <circle cx="32" cy="32" r="6" fill="#a7c3ff"/>307      </svg>308    </div>309 310    <!-- Camera -->311    <div class="icon-wrap">312      <svg width="96" height="96" viewBox="0 0 64 64" aria-label="Camera">313        <rect x="10" y="18" width="44" height="28" rx="6" fill="#e9ebf0"/>314        <rect x="24" y="10" width="16" height="8" rx="2" fill="#c8ccd6"/>315        <circle cx="32" cy="32" r="10" fill="#5b6ea7"/>316        <circle cx="32" cy="32" r="6" fill="#86a3ff"/>317      </svg>318    </div>319  </div>320 321  <!-- Google Search Pill -->322  <div class="search-pill">323    <div class="search-left">324      <!-- Google G -->325      <svg width="64" height="64" viewBox="0 0 24 24" aria-label="Google">326        <path fill="#4285F4" d="M23 12.3c0-.8-.1-1.4-.2-2.1H12v4h6.2c-.2 1-.8 2.3-2 3.2v2.6h3.2c1.9-1.8 3-4.5 3-7.7z"/>327        <path fill="#34A853" d="M12 24c2.7 0 5-1 6.6-2.7l-3.2-2.6c-.9.6-2 1-3.4 1-2.6 0-4.8-1.8-5.6-4.2H3v2.7C4.6 22 8.1 24 12 24z"/>328        <path fill="#FBBC05" d="M6.4 13.5c-.2-.6-.4-1.3-.4-2s.1-1.4.4-2V6.8H3C2.3 8.2 2 9.5 2 11s.3 2.8 1 4.2l3.4-1.7z"/>329        <path fill="#EA4335" d="M12 4.7c1.5 0 2.8.5 3.8 1.4l2.8-2.8C17 1.2 14.7 0 12 0 8.1 0 4.6 2 3 6.8l3.4 2.7C7.2 6.5 9.4 4.7 12 4.7z"/>330      </svg>331      <span class="search-input-ghost">Search...</span>332    </div>333    <div class="search-right">334      <!-- Mic -->335      <svg width="52" height="52" viewBox="0 0 24 24" aria-label="Voice Search">336        <rect x="8" y="4" width="8" height="12" rx="4" fill="#EA4335"/>337        <path d="M5 12a7 7 0 0 0 14 0" stroke="#34A853" stroke-width="2" fill="none"/>338        <rect x="11" y="18" width="2" height="4" rx="1" fill="#4285F4"/>339      </svg>340      <!-- Lens/Camera -->341      <svg width="56" height="56" viewBox="0 0 24 24" aria-label="Lens">342        <rect x="4" y="6" width="16" height="12" rx="3" fill="#4285F4"/>343        <circle cx="12" cy="12" r="4" fill="#fff"/>344        <circle cx="12" cy="12" r="2.2" fill="#34A853"/>345        <rect x="9" y="3" width="6" height="3" rx="1" fill="#FBBC05"/>346      </svg>347    </div>348  </div>349 350  <!-- Home indicator -->351  <div class="home-indicator"></div>352 353</div>354</body>355</html>