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    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: radial-gradient(1400px 1200px at 70% 60%, #3b5b4d 0%, #2f4a3f 40%, #2c463b 70%, #284237 100%);14  }15  /* abstract wallpaper curves */16  #render-target::before,17  #render-target::after {18    content: "";19    position: absolute;20    border-radius: 50%;21    filter: blur(0.6px);22    opacity: 0.5;23  }24  #render-target::before {25    width: 1600px; height: 2600px;26    left: -540px; top: -240px;27    border: 6px solid rgba(20,40,35,0.55);28    transform: rotate(12deg);29  }30  #render-target::after {31    width: 1200px; height: 1600px;32    right: -280px; bottom: -160px;33    border: 6px solid rgba(20,40,35,0.55);34    transform: rotate(-18deg);35  }36 37  .status-bar {38    position: absolute;39    top: 32px;40    left: 36px;41    right: 36px;42    height: 56px;43    display: flex;44    align-items: center;45    justify-content: space-between;46    color: #fff;47    font-family: "Segoe UI", Roboto, Arial, sans-serif;48    font-size: 38px;49    letter-spacing: 0.4px;50    text-shadow: 0 2px 4px rgba(0,0,0,0.35);51  }52  .status-icons {53    display: flex;54    align-items: center;55    gap: 26px;56  }57  .widget {58    position: absolute;59    top: 420px;60    left: 84px;61    color: #fff;62    font-family: "Segoe UI", Roboto, Arial, sans-serif;63    text-shadow: 0 3px 6px rgba(0,0,0,0.35);64  }65  .widget .date {66    font-size: 68px;67    font-weight: 500;68    margin-bottom: 22px;69  }70  .widget .weather {71    display: flex;72    align-items: center;73    gap: 18px;74    font-size: 38px;75    opacity: 0.95;76  }77  .apps-row {78    position: absolute;79    left: 60px;80    width: 960px;81    display: flex;82    justify-content: space-between;83  }84  .apps-row.row1 { top: 1560px; }85  .apps-row.row2 { top: 1820px; }86  .app {87    width: 210px;88    text-align: center;89    color: #eaf2ed;90    font-family: "Segoe UI", Roboto, Arial, sans-serif;91  }92  .icon-circle {93    width: 160px; height: 160px;94    margin: 0 auto;95    border-radius: 50%;96    background: #ffffff;97    box-shadow: 0 10px 30px rgba(0,0,0,0.35);98    display: flex; align-items: center; justify-content: center;99  }100  .app label {101    margin-top: 22px;102    display: block;103    font-size: 38px;104    text-shadow: 0 3px 6px rgba(0,0,0,0.35);105  }106 107  .search-bar {108    position: absolute;109    left: 70px;110    bottom: 160px;111    width: 940px;112    height: 120px;113    background: #fff;114    border-radius: 60px;115    box-shadow: 0 16px 40px rgba(0,0,0,0.45);116    display: flex;117    align-items: center;118    padding: 0 34px;119    justify-content: space-between;120  }121  .search-left, .search-right {122    display: flex;123    align-items: center;124    gap: 28px;125  }126  .gesture {127    position: absolute;128    bottom: 50px;129    left: 400px;130    width: 280px;131    height: 16px;132    background: rgba(0,0,0,0.45);133    border-radius: 12px;134  }135 136  /* simple icon sizing helpers */137  svg { display: block; }138  .icon-24 { width: 34px; height: 34px; }139  .icon-28 { width: 42px; height: 42px; }140  .icon-100 { width: 100px; height: 100px; }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div class="time">8:44</div>149    <div class="status-icons">150      <!-- Wi-Fi -->151      <svg class="icon-28" viewBox="0 0 24 24">152        <path d="M2 8c4.5-4.5 15.5-4.5 20 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>153        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>154        <path d="M8 14c2.5-2.5 7.5-2.5 10 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>155        <circle cx="12" cy="18.5" r="1.8" fill="#ffffff"/>156      </svg>157      <!-- Battery -->158      <svg class="icon-28" viewBox="0 0 24 24">159        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>160        <rect x="21" y="9" width="2" height="6" rx="1" fill="#ffffff"/>161        <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>162      </svg>163    </div>164  </div>165 166  <!-- At a Glance widget -->167  <div class="widget">168    <div class="date">Wed, Jul 5</div>169    <div class="weather">170      <!-- Cloud icon -->171      <svg class="icon-28" viewBox="0 0 24 24">172        <path d="M7 17h9a4 4 0 0 0 0-8h-1.1A5.5 5.5 0 0 0 4 11.5 3.5 3.5 0 0 0 7 17z" fill="#ffffff"/>173      </svg>174      <span>30°C · Today 32° / 26° · Cloudy</span>175    </div>176  </div>177 178  <!-- App rows -->179  <div class="apps-row row1">180    <!-- Play Store -->181    <div class="app">182      <div class="icon-circle">183        <svg class="icon-100" viewBox="0 0 100 100">184          <polygon points="24,20 74,50 24,80" fill="#00c853"/>185          <polygon points="24,20 39,35 24,35" fill="#ff5252"/>186          <polygon points="24,65 39,50 24,50" fill="#ffc107"/>187          <polygon points="74,50 39,35 39,65" fill="#3d5afe"/>188        </svg>189      </div>190      <label>Play Store</label>191    </div>192    <!-- Gmail -->193    <div class="app">194      <div class="icon-circle">195        <svg class="icon-100" viewBox="0 0 100 100">196          <rect x="18" y="28" width="64" height="44" rx="8" fill="#ffffff" stroke="#cfd8dc" stroke-width="4"/>197          <path d="M18 32l32 24 32-24" fill="none" stroke="#f44336" stroke-width="10" stroke-linejoin="round"/>198          <path d="M26 28v44" stroke="#4caf50" stroke-width="10"/>199          <path d="M74 28v44" stroke="#1e88e5" stroke-width="10"/>200        </svg>201      </div>202      <label>Gmail</label>203    </div>204    <!-- Photos -->205    <div class="app">206      <div class="icon-circle">207        <svg class="icon-100" viewBox="0 0 100 100">208          <path d="M50 50h24a24 24 0 0 0-24-24v24z" fill="#f44336"/>209          <path d="M50 50V26a24 24 0 0 0-24 24h24z" fill="#ff9800"/>210          <path d="M50 50H26a24 24 0 0 0 24 24V50z" fill="#4caf50"/>211          <path d="M50 50v24a24 24 0 0 0 24-24H50z" fill="#2196f3"/>212        </svg>213      </div>214      <label>Photos</label>215    </div>216    <!-- YouTube -->217    <div class="app">218      <div class="icon-circle">219        <svg class="icon-100" viewBox="0 0 100 100">220          <rect x="18" y="28" width="64" height="44" rx="12" fill="#ff2d2d"/>221          <polygon points="44,38 68,50 44,62" fill="#ffffff"/>222        </svg>223      </div>224      <label>YouTube</label>225    </div>226  </div>227 228  <div class="apps-row row2">229    <!-- Phone -->230    <div class="app">231      <div class="icon-circle">232        <svg class="icon-100" viewBox="0 0 100 100">233          <path d="M30 30c8 0 16 18 16 18s-8 10-6 14c3 5 20 16 26 12 3-2 8-10 8-10l-14-10-8 6c-6-4-10-8-14-14l6-8-10-14s-8 5-10 8c-4 6 7 23 12 26 4 2 14-6 14-6s-18-8-18-16z" fill="#1e88e5"/>234        </svg>235      </div>236      <label>Phone</label>237    </div>238    <!-- Messages -->239    <div class="app">240      <div class="icon-circle">241        <svg class="icon-100" viewBox="0 0 100 100">242          <rect x="18" y="24" width="64" height="42" rx="12" fill="#1976d2"/>243          <rect x="26" y="34" width="48" height="8" rx="4" fill="#ffffff" opacity="0.9"/>244          <rect x="26" y="46" width="34" height="8" rx="4" fill="#ffffff" opacity="0.9"/>245          <polygon points="40,78 50,66 60,78" fill="#1976d2"/>246        </svg>247      </div>248      <label>Messages</label>249    </div>250    <!-- Chrome -->251    <div class="app">252      <div class="icon-circle">253        <svg class="icon-100" viewBox="0 0 100 100">254          <circle cx="50" cy="50" r="40" fill="#f44336"/>255          <path d="M50 10a40 40 0 0 1 34 20H50z" fill="#ffc107"/>256          <path d="M84 30a40 40 0 0 1-18 52L50 50z" fill="#4caf50"/>257          <circle cx="50" cy="50" r="20" fill="#2196f3" stroke="#ffffff" stroke-width="6"/>258        </svg>259      </div>260      <label>Chrome</label>261    </div>262    <!-- Camera -->263    <div class="app">264      <div class="icon-circle">265        <svg class="icon-100" viewBox="0 0 100 100">266          <rect x="18" y="30" width="64" height="44" rx="10" fill="#37474f"/>267          <rect x="26" y="38" width="48" height="28" rx="8" fill="#90a4ae"/>268          <circle cx="50" cy="52" r="14" fill="#1e88e5"/>269          <circle cx="50" cy="52" r="6" fill="#ffffff"/>270          <rect x="28" y="24" width="12" height="10" rx="4" fill="#37474f"/>271        </svg>272      </div>273      <label>Camera</label>274    </div>275  </div>276 277  <!-- Google Search bar -->278  <div class="search-bar">279    <div class="search-left">280      <!-- Multicolor G (simplified) -->281      <svg class="icon-28" viewBox="0 0 24 24">282        <circle cx="12" cy="12" r="10" fill="#ffffff"/>283        <path d="M12 4a8 8 0 1 0 0 16c3.3 0 6.2-2 7.4-4.9h-7.4v-3h11v1.5A11 11 0 0 1 12 23 11 11 0 1 1 12 1" fill="#4285F4"/>284        <path d="M12 4a8 8 0 0 1 5.7 2.3l-2.4 2.4A4.8 4.8 0 0 0 12 7" fill="#EA4335"/>285        <path d="M6.3 6.3A8 8 0 0 1 12 4v3a4.8 4.8 0 0 0-3.3 1.3" fill="#FBBC05"/>286        <path d="M4 12a8 8 0 0 1 2.3-5.7l2.4 2.4A4.8 4.8 0 0 0 7 12" fill="#34A853"/>287      </svg>288    </div>289    <div class="search-right">290      <!-- Mic icon -->291      <svg class="icon-28" viewBox="0 0 24 24">292        <rect x="9" y="3" width="6" height="10" rx="3" fill="#1e88e5"/>293        <path d="M6 11a6 6 0 0 0 12 0" fill="none" stroke="#1e88e5" stroke-width="2"/>294        <rect x="11" y="17" width="2" height="4" fill="#1e88e5"/>295        <rect x="9" y="21" width="6" height="2" rx="1" fill="#1e88e5"/>296      </svg>297      <!-- Google Lens camera -->298      <svg class="icon-28" viewBox="0 0 24 24">299        <rect x="4" y="6" width="16" height="12" rx="3" fill="#ff7043"/>300        <circle cx="12" cy="12" r="4" fill="#ffffff"/>301        <circle cx="12" cy="12" r="2" fill="#2962ff"/>302        <rect x="8" y="3" width="8" height="3" rx="1.5" fill="#ff7043"/>303      </svg>304    </div>305  </div>306 307  <!-- Gesture bar -->308  <div class="gesture"></div>309 310</div>311</body>312</html>