GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home Screen - Weather Apps</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    border-radius:28px; box-shadow:0 8px 24px rgba(0,0,0,0.25);10  }11  /* Wallpaper placeholder */12  .wallpaper {13    position:absolute; left:0; top:0; width:100%; height:100%;14    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;15    display:flex; align-items:center; justify-content:center;16    font-size:22px; letter-spacing:0.2px;17  }18 19  /* Status bar */20  .statusbar {21    position:absolute; top:0; left:0; width:100%; height:84px;22    padding:20px 28px; box-sizing:border-box;23    display:flex; align-items:center; justify-content:space-between;24    color:#000; font-size:28px; z-index:5;25  }26  .status-left { display:flex; align-items:center; gap:18px; }27  .status-extra { font-size:24px; color:#333; }28  .status-right { display:flex; align-items:center; gap:18px; }29  .sb-icon { width:28px; height:28px; }30  .sb-text { font-size:24px; color:#333; }31 32  /* Apps grid */33  .apps {34    position:absolute; top:150px; left:40px; right:40px;35    display:grid; grid-template-columns: repeat(4, 1fr);36    grid-row-gap:60px; grid-column-gap:22px; z-index:6;37  }38  .app { text-align:center; color:#fff; }39  .icon {40    width:150px; height:150px; margin:0 auto 16px auto;41    border-radius:50%; position:relative;42    box-shadow:0 6px 16px rgba(0,0,0,0.35);43    display:flex; align-items:center; justify-content:center;44    color:#fff; font-weight:bold;45  }46  .label {47    font-size:30px; line-height:1.1; text-shadow:0 2px 3px rgba(0,0,0,0.55);48  }49  .badge {50    position:absolute; right:12px; top:10px;51    width:26px; height:26px; background:#BBD7FF;52    border:3px solid #ffffff; border-radius:50%;53    box-shadow:0 0 0 1px rgba(0,0,0,0.2);54  }55 56  /* Dock area */57  .dock {58    position:absolute; bottom:256px; left:0; width:100%;59    display:flex; justify-content:center; gap:130px; z-index:7;60  }61  .dock-btn {62    width:160px; height:160px; border-radius:50%;63    background:#ffffff; box-shadow:0 10px 24px rgba(0,0,0,0.35);64    display:flex; align-items:center; justify-content:center;65  }66  .dock-btn svg { width:88px; height:88px; }67  .dock-btn .chrome {68    width:88px; height:88px;69    border-radius:50%; background:radial-gradient(circle at center, #fff 0 18px, #3FA861 18px 18px, transparent 18px),70                      conic-gradient(#EA4335 0 120deg, #FBBC05 120deg 240deg, #4285F4 240deg 360deg);71    border:6px solid #ffffff;72    box-sizing:border-box;73  }74 75  /* Google search bar */76  .search-bar {77    position:absolute; bottom:130px; left:60px; width:960px; height:120px;78    background:#333; border-radius:70px; box-shadow:0 8px 18px rgba(0,0,0,0.35);79    display:flex; align-items:center; justify-content:space-between;80    padding:0 40px; color:#fff; z-index:8;81  }82  .g-pill {83    display:flex; align-items:center; gap:20px; font-size:42px; font-weight:bold;84  }85  .search-right { display:flex; align-items:center; gap:34px; }86  .pill-icon { width:56px; height:56px; fill:#fff; }87 88  /* Gesture bar */89  .gesture {90    position:absolute; bottom:54px; left:50%; transform:translateX(-50%);91    width:420px; height:12px; background:#fff; opacity:0.9; border-radius:8px; z-index:8;92  }93 94  /* Approximate colors for icons */95  .c-green { background:#6FA86F; }96  .c-blue { background:#6EC6FF; }97  .c-purple { background:#6E4ECF; }98  .c-deepblue { background:#4A79F5; }99  .c-orange { background:#F7A34B; }100  .c-red { background:#B7483D; }101  .c-teal { background:#49A6A6; }102  .c-charcoal { background:#3A3A3A; }103  .c-sky { background:#7BC7F0; }104  .c-mint { background:#53C9A8; }105  .c-navy { background:#2D4DA8; }106  .c-light { background:#9ED1FF; }107</style>108</head>109<body>110<div id="render-target">111 112  <div class="wallpaper">[IMG: Beach coastline wallpaper]</div>113 114  <!-- Status bar -->115  <div class="statusbar">116    <div class="status-left">117      <div style="font-weight:bold;">8:01</div>118      <div class="status-extra">0°</div>119      <div class="status-extra">31°</div>120      <svg class="sb-icon" viewBox="0 0 24 24">121        <circle cx="4" cy="12" r="2" fill="#333"/>122        <circle cx="10" cy="12" r="2" fill="#333"/>123        <circle cx="16" cy="12" r="2" fill="#333"/>124      </svg>125    </div>126    <div class="status-right">127      <!-- Signal -->128      <svg class="sb-icon" viewBox="0 0 24 24">129        <rect x="2" y="14" width="3" height="8" fill="#333"/>130        <rect x="7" y="10" width="3" height="12" fill="#333"/>131        <rect x="12" y="6" width="3" height="16" fill="#333"/>132        <rect x="17" y="2" width="3" height="20" fill="#333"/>133      </svg>134      <!-- WiFi -->135      <svg class="sb-icon" viewBox="0 0 24 24">136        <path d="M2 9c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none"/>137        <path d="M5 12c4-3 10-3 14 0" stroke="#333" stroke-width="2" fill="none"/>138        <path d="M8 15c3-2 5-2 8 0" stroke="#333" stroke-width="2" fill="none"/>139        <circle cx="12" cy="18" r="2" fill="#333"/>140      </svg>141      <!-- Battery -->142      <svg class="sb-icon" viewBox="0 0 28 24">143        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>144        <rect x="4" y="8" width="14" height="8" fill="#333"/>145        <rect x="22" y="10" width="4" height="4" fill="#333"/>146      </svg>147      <div class="sb-text">92%</div>148    </div>149  </div>150 151  <!-- Apps grid -->152  <div class="apps">153    <div class="app">154      <div class="icon c-green">155        <span>DBW</span>156      </div>157      <div class="label">DBW Show...</div>158    </div>159 160    <div class="app">161      <div class="icon c-blue">162        <span>Weather</span>163      </div>164      <div class="label">Weather</div>165    </div>166 167    <div class="app">168      <div class="icon c-purple">169        <span>CARROT</span>170      </div>171      <div class="label">CARROT</div>172    </div>173 174    <div class="app">175      <div class="icon c-deepblue">176        <span>1W</span>177      </div>178      <div class="label">1Weather</div>179    </div>180 181    <div class="app">182      <div class="icon c-orange">183        <div class="badge"></div>184        <span>Accu</span>185      </div>186      <div class="label">AccuWeath...</div>187    </div>188 189    <div class="app">190      <div class="icon c-red">191        <span>Windy</span>192      </div>193      <div class="label">Windy</div>194    </div>195 196    <div class="app">197      <div class="icon c-teal">198        <span>Hyper</span>199      </div>200      <div class="label">Hyperlocal ...</div>201    </div>202 203    <div class="app">204      <div class="icon c-charcoal">205        <span>WU</span>206      </div>207      <div class="label">Wundergro...</div>208    </div>209 210    <div class="app">211      <div class="icon c-sky">212        <span>WX</span>213      </div>214      <div class="label">Weather</div>215    </div>216 217    <div class="app">218      <div class="icon c-mint">219        <span>XS</span>220      </div>221      <div class="label">Weather XS</div>222    </div>223 224    <div class="app">225      <div class="icon c-navy">226        <div class="badge"></div>227        <span>Radar</span>228      </div>229      <div class="label">Weather Ra...</div>230    </div>231 232    <div class="app">233      <div class="icon c-light">234        <span>Yo</span>235      </div>236      <div class="label">YoWindow</div>237    </div>238  </div>239 240  <!-- Dock icons -->241  <div class="dock">242    <!-- Phone -->243    <div class="dock-btn">244      <svg viewBox="0 0 24 24">245        <path d="M6 2c-1 0-2 1-2 2 0 10 8 18 18 18 1 0 2-1 2-2l-4-4c-1-1-3 0-4 1l-2-1c-2-1-4-3-5-5l-1-2c1-1 2-3 1-4L6 2z" fill="#36A65B"/>246      </svg>247    </div>248    <!-- Messages -->249    <div class="dock-btn">250      <svg viewBox="0 0 24 24">251        <rect x="3" y="4" width="18" height="14" rx="3" fill="#4285F4"/>252        <path d="M7 14l-1 6 5-4h7" fill="#4285F4"/>253      </svg>254    </div>255    <!-- Chrome -->256    <div class="dock-btn">257      <div class="chrome"></div>258    </div>259    <!-- Camera -->260    <div class="dock-btn">261      <svg viewBox="0 0 24 24">262        <rect x="3" y="6" width="18" height="12" rx="2" fill="#3A3A3A"/>263        <rect x="8" y="4" width="8" height="3" fill="#3A3A3A"/>264        <circle cx="12" cy="12" r="4" fill="#8FB8FF"/>265      </svg>266    </div>267  </div>268 269  <!-- Google search bar -->270  <div class="search-bar">271    <div class="g-pill">272      <div style="background:#fff; color:#1a73e8; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;">G</div>273    </div>274    <div class="search-right">275      <!-- Mic -->276      <svg class="pill-icon" viewBox="0 0 24 24">277        <rect x="9" y="4" width="6" height="10" rx="3" fill="#fff"/>278        <path d="M6 11c0 4 12 4 12 0" stroke="#fff" stroke-width="2" fill="none"/>279        <rect x="11" y="15" width="2" height="4" fill="#fff"/>280      </svg>281      <!-- Photo/Lens -->282      <svg class="pill-icon" viewBox="0 0 24 24">283        <rect x="3" y="6" width="18" height="12" rx="3" fill="#fff" opacity="0.9"/>284        <circle cx="12" cy="12" r="4" fill="#333"/>285      </svg>286    </div>287  </div>288 289  <!-- Gesture bar -->290  <div class="gesture"></div>291</div>292</body>293</html>