GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    border-radius:24px; background:#0b0b0b;10  }11  /* Wallpaper placeholder */12  .wallpaper{13    position:absolute; left:0; top:0; width:100%; height:100%;14    background:#E0E0E0; border:1px solid #BDBDBD;15    display:flex; align-items:center; justify-content:center; color:#555; font-size:28px;16  }17  /* Status bar */18  .status-bar{19    position:absolute; top:0; left:0; width:100%; height:92px; padding:18px 28px;20    display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:3;21    font-weight:600; font-size:40px;22    background:linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));23  }24  .sb-right{display:flex; align-items:center; gap:24px; font-size:24px;}25  .sb-icon{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;}26  .sb-icon svg{width:100%; height:100%; fill:#fff;}27  /* Grid of app icons */28  .icons-grid{29    position:absolute; left:36px; right:36px; top:170px; z-index:2;30    display:grid; grid-template-columns:repeat(4, 1fr); gap:44px 32px;31  }32  .app{display:flex; flex-direction:column; align-items:center;}33  .icon{34    width:150px; height:150px; border-radius:50%;35    display:flex; align-items:center; justify-content:center;36    color:#fff; font-weight:700; font-size:42px; position:relative;37    box-shadow:0 6px 14px rgba(0,0,0,0.25);38  }39  .icon.white{background:#fff; color:#222;}40  .icon-label{41    margin-top:18px; font-size:34px; color:#fff; text-align:center; line-height:1.1;42    text-shadow:0 2px 4px rgba(0,0,0,0.35);43  }44  .badge{45    position:absolute; right:6px; top:6px; width:26px; height:26px; border-radius:50%;46    background:#b9d4a4; border:2px solid rgba(255,255,255,0.8);47  }48  /* Dock row */49  .dock{50    position:absolute; left:80px; right:80px; bottom:360px;51    display:flex; justify-content:space-between; z-index:3;52  }53  .dock .icon{width:150px; height:150px;}54  /* Search bar */55  .search-bar{56    position:absolute; left:70px; right:70px; bottom:190px; height:120px;57    background:#2b2b2b; border-radius:60px; display:flex; align-items:center; padding:0 28px;58    box-shadow:0 8px 20px rgba(0,0,0,0.35); z-index:3;59  }60  .search-left{display:flex; align-items:center; gap:16px; color:#fff; font-size:36px; font-weight:600;}61  .g-logo{62    width:70px; height:70px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#4285F4; font-weight:800;63    box-shadow:0 3px 8px rgba(0,0,0,0.25);64  }65  .search-right{margin-left:auto; display:flex; align-items:center; gap:26px;}66  .pill-icon{width:56px; height:56px; border-radius:50%; background:#3a3a3a; display:flex; align-items:center; justify-content:center;}67  .pill-icon svg{width:34px; height:34px; fill:#ff6a00;}68  /* Gesture bar */69  .gesture{70    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);71    width:320px; height:12px; background:#fff; border-radius:12px; opacity:0.9; z-index:3;72  }73  /* Color helpers for icons */74  .blue{background:#2c76f6;} .darkblue{background:#0b2e6f;}75  .teal{background:#2db3a8;} .red{background:#d93b36;} .orange{background:#f28c1b;}76  .yellow{background:#f1c432;} .magenta{background:#c0307a;} .tan{background:#d8b183;}77  .beige{background:#d0c6ab;} .navy{background:#173a7a;}78  /* Simple inner glyphs for a few icons */79  .check svg{width:74px; height:74px; fill:none; stroke:#fff; stroke-width:12;}80  .camera-lens{width:38px;height:38px;border-radius:50%;background:#1e73ff;border:6px solid #fff;}81  .chrome-ring{82    width:90px;height:90px;border-radius:50%; background:conic-gradient(#ea4335 0 33%, #fbbc05 33% 66%, #34a853 66% 100%);83    display:flex;align-items:center;justify-content:center;84  }85  .chrome-ring::after{86    content:""; width:44px; height:44px; border-radius:50%; background:#4285F4; border:6px solid #fff;87  }88</style>89</head>90<body>91<div id="render-target">92  <div class="wallpaper">[IMG: Forest road wallpaper]</div>93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div>1:29</div>97    <div class="sb-right">98      <div class="sb-icon" title="Wi‑Fi">99        <svg viewBox="0 0 24 24"><path d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.6-6.6 1.4 1.4A7.96 7.96 0 0 1 12 12c2.1 0 4.1.8 5.6 2.2l1.4-1.4A10.97 10.97 0 0 0 12 9c-3 0-5.8 1.2-7.6 3.4zM1 8.1l1.4 1.4C4.6 7.2 8.1 6 12 6s7.4 1.2 9.6 3.5L23 8.1C20.3 5.5 16.4 4 12 4S3.7 5.5 1 8.1z"/></svg>100      </div>101      <div class="sb-icon" title="Signal">102        <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-8H6v8zm4 0h2v-12h-2v12zm4 0h2V4h-2v16zm4 0h2V2h-2v18z"/></svg>103      </div>104      <div class="sb-icon" title="Battery">105        <svg viewBox="0 0 24 24"><path d="M16 4h-1V2h-6v2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8 6h8v12H8V6z"/></svg>106      </div>107    </div>108  </div>109 110  <!-- App Icons Grid -->111  <div class="icons-grid">112    <!-- Row 1 -->113    <div class="app">114      <div class="icon navy">DBW</div>115      <div class="icon-label">DBW Show...</div>116    </div>117    <div class="app">118      <div class="icon blue check">119        <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>120        <div class="badge"></div>121      </div>122      <div class="icon-label">Any.do</div>123    </div>124    <div class="app">125      <div class="icon white">126        <svg viewBox="0 0 24 24"><path d="M12 4a2 2 0 0 1 2 2v2h1a1 1 0 0 1 1 1v7a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V9a1 1 0 0 1 1-1h1V6a2 2 0 0 1 2-2z" fill="#000"/></svg>127      </div>128      <div class="icon-label">Remind Me</div>129    </div>130    <div class="app">131      <div class="icon teal">Reminder</div>132      <div class="icon-label">Reminder</div>133    </div>134 135    <!-- Row 2 -->136    <div class="app">137      <div class="icon darkblue">xe<div class="badge"></div></div>138      <div class="icon-label">Xe</div>139    </div>140    <div class="app">141      <div class="icon white">eBay</div>142      <div class="icon-label">eBay</div>143    </div>144    <div class="app">145      <div class="icon blue">Best<div class="badge"></div></div>146      <div class="icon-label">BestPrice F</div>147    </div>148    <div class="app">149      <div class="icon red">Open</div>150      <div class="icon-label">OpenTable</div>151    </div>152 153    <!-- Row 3 -->154    <div class="app">155      <div class="icon orange">S</div>156      <div class="icon-label">Swiggy</div>157    </div>158    <div class="app">159      <div class="icon red">z</div>160      <div class="icon-label">Zomato</div>161    </div>162    <div class="app">163      <div class="icon white">V</div>164      <div class="icon-label">Vimeo</div>165    </div>166    <div class="app">167      <div class="icon yellow">blink</div>168      <div class="icon-label">Blinkit</div>169    </div>170 171    <!-- Row 4 -->172    <div class="app">173      <div class="icon orange">Trip</div>174      <div class="icon-label">TripIt</div>175    </div>176    <div class="app">177      <div class="icon magenta">R2R</div>178      <div class="icon-label">Rome2Rio</div>179    </div>180    <div class="app">181      <div class="icon white">fresh</div>182      <div class="icon-label">Fresh Mode</div>183    </div>184    <div class="app">185      <div class="icon blue">F</div>186      <div class="icon-label">Flipkart</div>187    </div>188 189    <!-- Row 5 -->190    <div class="app">191      <div class="icon beige">plus</div>192      <div class="icon-label">Currency P...</div>193    </div>194    <div class="app">195      <div class="icon darkblue">€</div>196      <div class="icon-label">Currency</div>197    </div>198    <div class="app">199      <div class="icon tan">a</div>200      <div class="icon-label">Amazon</div>201    </div>202    <div class="app">203      <div class="icon white">bb</div>204      <div class="icon-label">bigbasket</div>205    </div>206  </div>207 208  <!-- Dock Row -->209  <div class="dock">210    <div class="app">211      <div class="icon white">212        <svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.7 3.2 3.9 5.4 7.1 7.1l2.3-2.3c.3-.3.8-.4 1.2-.2 1 .4 2.1.6 3.2.6.6 0 1 .4 1 1v3.2c0 .6-.4 1-1 1C13 21.4 2.6 11 2.6 3.6c0-.6.4-1 1-1H6.8c.6 0 1 .4 1 1 0 1.1.2 2.2.6 3.2.1.4 0 .9-.3 1.2l-2.5 2.6z" fill="#2c76f6"/></svg>213      </div>214    </div>215    <div class="app">216      <div class="icon white">217        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z" fill="#3a7cff"/></svg>218      </div>219    </div>220    <div class="app">221      <div class="icon white">222        <div class="chrome-ring"></div>223      </div>224    </div>225    <div class="app">226      <div class="icon white">227        <svg viewBox="0 0 24 24"><path d="M7 6h3l1-2h6l1 2h3v14H3V6h4zm5 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10z" fill="#333"/></svg>228      </div>229    </div>230  </div>231 232  <!-- Search Bar -->233  <div class="search-bar">234    <div class="search-left">235      <div class="g-logo">G</div>236    </div>237    <div class="search-right">238      <div class="pill-icon" title="Voice">239        <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 1 4 4v5a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4zm1 14.9V21h-2v-3.1A7 7 0 0 1 5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9z"/></svg>240      </div>241      <div class="pill-icon" title="Lens">242        <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm8-1 3 3-6 6-3-3 6-6z"/></svg>243      </div>244    </div>245  </div>246 247  <!-- Gesture Bar -->248  <div class="gesture"></div>249</div>250</body>251</html>