GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home Screen Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;}8  #render-target{9    position:relative; overflow:hidden;10    width:1080px; height:2400px;11    border-radius:36px;12    box-shadow:0 24px 60px rgba(0,0,0,0.35);13    background:14      radial-gradient(1200px 1200px at 20% 80%, #47624d 0%, #2e4238 60%, #22352e 100%),15      radial-gradient(900px 900px at 80% 20%, #3c5a4a 0%, rgba(60,90,74,0.3) 50%, rgba(60,90,74,0.0) 100%);16    color:#fff;17  }18  /* Status bar */19  .status-bar{20    position:absolute; top:18px; left:28px; right:28px; height:72px;21    display:flex; align-items:center; justify-content:space-between;22    font-weight:600; font-size:40px; letter-spacing:0.5px;23  }24  .sb-right{display:flex; align-items:center; gap:26px;}25  .sb-icon svg{width:42px; height:42px; opacity:0.85; fill:#ffffff;}26  .dot{width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.85;}27  /* App grid */28  .apps{29    position:absolute; top:170px; left:58px; right:58px;30    display:grid; grid-template-columns:repeat(4, 1fr);31    grid-gap:74px 70px;32  }33  .app{display:flex; flex-direction:column; align-items:center;}34  .icon{35    width:164px; height:164px; border-radius:50%;36    display:flex; align-items:center; justify-content:center;37    font-weight:700; color:#fff; font-size:64px;38    box-shadow:0 8px 26px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.08);39  }40  .label{41    margin-top:18px; font-size:34px; font-weight:500; color:#ffffff;42    text-shadow:0 2px 6px rgba(0,0,0,0.6); white-space:nowrap;43  }44  /* Individual icons styling */45  .ic-android{background:#4caf50;}46  .ic-android svg{width:110px; height:110px;}47  .ic-kayak{background:#ff6d3a;}48  .ic-expedia{background:#ffe05c; color:#1b1e2a;}49  .ic-firstcry{background:#b36ad6;}50  .ic-flipkart{background:#2f8cff; position:relative;}51  .ic-flipkart .bag{52    width:86px;height:76px;background:#ffd54f;border-radius:12px 12px 18px 18px;53    position:absolute; top:44px;54  }55  .ic-doordash{background:#ffffff; color:#e53935;}56  .ic-chat{background:#2bbf74;}57  .ic-instagram{58    background:conic-gradient(from 135deg, #ffdc80, #f77737, #fd1d1d, #c13584, #5851db, #405de6, #ffdc80);59  }60  .ic-royal{background:#3059c9;}61  .ic-gallery{background:#ffd35e; color:#294e8f;}62  .ic-nykaa{background:#000000;}63  .ic-citymapper{background:#3ac267;}64  .ic-zara{background:#ffffff; color:#000000;}65  .ic-hm{background:#ffffff; color:#c62828;}66  .ic-amazon{background:#d6b485; color:#000;}67  .ic-farfetch{background:#ffffff; color:#000000;}68  /* Dock */69  .dock{70    position:absolute; bottom:340px; left:120px; right:120px;71    display:flex; justify-content:space-between; align-items:center;72  }73  .dock .icon{74    width:150px; height:150px; background:#ffffff; color:#3a3a3a;75    box-shadow:0 8px 24px rgba(0,0,0,0.35);76  }77  .dock svg{width:84px; height:84px; fill:#3a3a3a;}78  .dock .label{display:none;}79  /* Search bar */80  .search{81    position:absolute; bottom:220px; left:80px; right:80px; height:120px;82    background:#1f1f1f; border-radius:60px;83    box-shadow:0 12px 30px rgba(0,0,0,0.5);84    display:flex; align-items:center; justify-content:space-between; padding:0 34px;85  }86  .g-chip{display:flex; align-items:center; gap:22px;}87  .google-g{88    width:68px; height:68px; border-radius:50%; background:#ffffff; display:flex; align-items:center; justify-content:center;89    box-shadow:inset 0 0 0 2px rgba(0,0,0,0.06);90  }91  .search-text{color:#bdbdbd; font-size:36px;}92  .search-icons{display:flex; align-items:center; gap:28px;}93  .search-icons svg{width:60px; height:60px; fill:#bdbdbd;}94  /* Navigation pill */95  .nav-pill{96    position:absolute; bottom:110px; left:50%; transform:translateX(-50%);97    width:340px; height:14px; background:#434343; border-radius:7px; opacity:0.8;98  }99  /* Simple helpers for inner icon drawings */100  .icon svg{display:block;}101</style>102</head>103<body>104<div id="render-target">105  <!-- Status Bar -->106  <div class="status-bar">107    <div class="sb-left">2:00</div>108    <div class="sb-right">109      <div class="sb-icon" title="Weather">110        <svg viewBox="0 0 24 24"><path d="M12 6a4 4 0 1 1 0 8h-2a5 5 0 1 0 0 10h8a6 6 0 0 0 0-12h-1A4 4 0 0 1 12 6z"/></svg>111      </div>112      <div class="sb-icon" title="Mail">113        <svg viewBox="0 0 24 24"><path d="M2 5h20v14H2V5zm10 7L2 7v10h20V7l-10 5z"/></svg>114      </div>115      <div class="sb-icon" title="YouTube">116        <svg viewBox="0 0 24 24"><path d="M23 8a5 5 0 0 0-5-5H6a5 5 0 0 0-5 5v8a5 5 0 0 0 5 5h12a5 5 0 0 0 5-5V8zM10 8l7 4-7 4V8z"/></svg>117      </div>118      <span class="dot"></span>119      <div class="sb-icon" title="Do Not Disturb"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm-7 9h14v2H5z"/></svg></div>120      <div class="sb-icon" title="Wi‑Fi"><svg viewBox="0 0 24 24"><path d="M12 18l-2 2 2 2 2-2-2-2zm7-7-2 2a8 8 0 0 0-10 0L5 11a12 12 0 0 1 14 0zM20 8a16 16 0 0 0-16 0L2 6a20 20 0 0 1 20 0l-2 2z"/></svg></div>121      <div class="sb-icon" title="Battery"><svg viewBox="0 0 24 24"><path d="M18 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v2H6v-2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1V5h12v2zM6 9h12v6H6V9z"/></svg></div>122    </div>123  </div>124 125  <!-- App Grid -->126  <div class="apps">127    <!-- Row 1 -->128    <div class="app">129      <div class="icon ic-android" title="DBW Show...">130        <svg viewBox="0 0 24 24">131          <path d="M8 4l-2-2M16 4l2-2" stroke="#c8e6c9" stroke-width="2" fill="none"/>132          <path d="M7 9a5 5 0 0 1 10 0v6H7V9z" fill="#fff" opacity="0.2"/>133          <path d="M9 9h6v8H9zM6 10h2v6H6zM16 10h2v6h-2z" fill="#fff" opacity="0.4"/>134        </svg>135      </div>136      <div class="label">DBW Show...</div>137    </div>138    <div class="app">139      <div class="icon ic-kayak" title="KAYAK">K</div>140      <div class="label">KAYAK</div>141    </div>142    <div class="app">143      <div class="icon ic-expedia" title="Expedia">144        <svg viewBox="0 0 24 24">145          <path d="M5 16l7-7h5v5l-7 7H5v-5z" fill="#141a26"/>146        </svg>147      </div>148      <div class="label">Expedia</div>149    </div>150    <div class="app">151      <div class="icon ic-firstcry" title="FirstCry"><span style="font-size:64px;font-weight:700;">fc</span></div>152      <div class="label">FirstCry</div>153    </div>154 155    <!-- Row 2 -->156    <div class="app">157      <div class="icon ic-flipkart" title="Flipkart">158        <div class="bag"></div>159      </div>160      <div class="label">Flipkart</div>161    </div>162    <div class="app">163      <div class="icon ic-doordash" title="DoorDash">164        <svg viewBox="0 0 24 24"><path d="M3 12h10l-2 3H3v-3zm8-6h10l-2 3H9l2-3z" fill="#e53935"/></svg>165      </div>166      <div class="label">DoorDash</div>167    </div>168    <div class="app">169      <div class="icon ic-chat" title="Chat">170        <svg viewBox="0 0 24 24"><path d="M3 5h18v12H8l-5 5V5z" fill="#ffffff" opacity="0.32"/></svg>171      </div>172      <div class="label">Chat</div>173    </div>174    <div class="app">175      <div class="icon ic-instagram" title="Instagram">176        <svg viewBox="0 0 24 24">177          <rect x="4" y="4" width="16" height="16" rx="4" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.7"/>178          <circle cx="12" cy="12" r="4" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.7"/>179          <circle cx="17.2" cy="6.8" r="1.6" fill="#fff" opacity="0.85"/>180        </svg>181      </div>182      <div class="label">Instagram</div>183    </div>184 185    <!-- Row 3 -->186    <div class="app">187      <div class="icon ic-royal" title="Royal Match">188        <svg viewBox="0 0 24 24">189          <path d="M12 3l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z" fill="#ffc107"/>190        </svg>191      </div>192      <div class="label">Royal Match</div>193    </div>194    <div class="app">195      <div class="icon ic-gallery" title="Gallery">196        <svg viewBox="0 0 24 24">197          <circle cx="12" cy="12" r="8" fill="#ffeb3b" opacity="0.55"/>198          <path d="M12 4l4 8-4 8-4-8 4-8z" fill="#2f5ea8" opacity="0.7"/>199        </svg>200      </div>201      <div class="label">Gallery</div>202    </div>203    <div class="app">204      <div class="icon ic-nykaa" title="NykaaFashi...">205        <span style="color:#ff3c9e;font-size:72px;">N</span>206      </div>207      <div class="label">NykaaFashi...</div>208    </div>209    <div class="app">210      <div class="icon ic-citymapper" title="Citymapper">211        <svg viewBox="0 0 24 24">212          <circle cx="7" cy="12" r="1.8" fill="#fff"/>213          <circle cx="17" cy="12" r="1.8" fill="#fff"/>214          <path d="M9 12h6l-2 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>215        </svg>216      </div>217      <div class="label">Citymapper</div>218    </div>219 220    <!-- Row 4 -->221    <div class="app">222      <div class="icon ic-zara" title="ZARA"><span style="font-size:54px; font-weight:800;">ZARA</span></div>223      <div class="label">ZARA</div>224    </div>225    <div class="app">226      <div class="icon ic-hm" title="H&M"><span style="font-size:58px; font-weight:800;">H&M</span></div>227      <div class="label">H&M</div>228    </div>229    <div class="app">230      <div class="icon ic-amazon" title="Amazon">231        <svg viewBox="0 0 24 24"><path d="M7 15c4 3 8 3 11-1" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/></svg>232      </div>233      <div class="label">Amazon</div>234    </div>235    <div class="app">236      <div class="icon ic-farfetch" title="Farfetch"><span style="font-size:64px; font-weight:800;">FF</span></div>237      <div class="label">Farfetch</div>238    </div>239  </div>240 241  <!-- Dock -->242  <div class="dock">243    <div class="app">244      <div class="icon" title="Phone">245        <svg viewBox="0 0 24 24"><path d="M6 2h5l2 3-3 3 6 6 3-3 3 2v5c-1 2-4 2-6 2A16 16 0 0 1 2 6c0-2 0-5 2-6z"/></svg>246      </div>247      <div class="label">Phone</div>248    </div>249    <div class="app">250      <div class="icon" title="Messages">251        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z"/></svg>252      </div>253      <div class="label">Messages</div>254    </div>255    <div class="app">256      <div class="icon" title="Chrome">257        <svg viewBox="0 0 24 24">258          <circle cx="12" cy="12" r="4.5" fill="#4fc3f7"/>259          <path d="M12 2a10 10 0 0 1 8.7 5H12" fill="#f44336"/>260          <path d="M3.1 7A10 10 0 0 1 12 2l-4.5 8" fill="#ffeb3b"/>261          <path d="M21 12a10 10 0 0 1-9 10l-5.5-9" fill="#4caf50"/>262        </svg>263      </div>264      <div class="label">Chrome</div>265    </div>266    <div class="app">267      <div class="icon" title="Camera">268        <svg viewBox="0 0 24 24"><path d="M4 7h4l2-2h4l2 2h4v12H4V7zm8 3a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>269      </div>270      <div class="label">Camera</div>271    </div>272  </div>273 274  <!-- Search bar -->275  <div class="search">276    <div class="g-chip">277      <div class="google-g">278        <svg viewBox="0 0 24 24">279          <path d="M12 5a7 7 0 1 0 0 14c3 0 5.5-1.4 6.8-3.6l-2.8-2.2c-.7 1.4-2.1 2.3-4 2.3a4.5 4.5 0 1 1 0-9c1.2 0 2.3.4 3.1 1.1l2.3-2.3A7.5 7.5 0 0 0 12 5z" fill="#34A853"/>280          <path d="M22 12h-9v3.2h5.2c-.6 1.8-2.3 2.8-4.2 2.8v3.1c3.6 0 6.7-2.4 7.7-6.1.3-1 .3-2 .3-3z" fill="#4285F4"/>281          <path d="M7.8 14.8A4.6 4.6 0 0 1 7.5 12c0-.9.3-1.8.8-2.5L6.2 7.3a8 8 0 0 0 0 9.4l1.6-1.9z" fill="#FBBC05"/>282          <path d="M12 7.5c1.1 0 2 .3 2.7.9l2.4-2.4A7.5 7.5 0 0 0 12 5v2.5z" fill="#EA4335"/>283        </svg>284      </div>285      <div class="search-text">Search</div>286    </div>287    <div class="search-icons">288      <svg viewBox="0 0 24 24" aria-label="Voice"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zm-6 8h2a4 4 0 0 0 8 0h2a6 6 0 0 1-5 5.9V20h-2v-3.1A6 6 0 0 1 6 11z"/></svg>289      <svg viewBox="0 0 24 24" aria-label="Lens"><path d="M12 7a5 5 0 1 0 0 10c1.4 0 2.7-.6 3.6-1.6l4 4 2-2-4-4c1-1 1.6-2.3 1.6-3.6A5 5 0 0 0 12 7zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>290    </div>291  </div>292 293  <!-- Navigation pill -->294  <div class="nav-pill"></div>295</div>296</body>297</html>