GD-ML/AndroidCode
13.4k
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, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 /* dark textured feel using layered gradients */13 background:14 radial-gradient(1200px 900px at 20% 30%, rgba(70,70,70,0.6), transparent 70%),15 radial-gradient(900px 700px at 80% 40%, rgba(40,40,40,0.7), transparent 70%),16 linear-gradient(180deg, #141414 0%, #1a1a1a 40%, #111 100%);17 color: #fff;18 }19 .status-time {20 position: absolute;21 top: 24px;22 left: 28px;23 font-size: 34px;24 letter-spacing: 0.5px;25 font-weight: 600;26 opacity: 0.95;27 }28 .status-right {29 position: absolute;30 top: 32px;31 right: 28px;32 display: flex;33 gap: 16px;34 align-items: center;35 }36 .widget-date {37 position: absolute;38 left: 60px;39 top: 190px;40 }41 .widget-date .day {42 font-size: 64px;43 font-weight: 500;44 }45 .widget-date .weather {46 margin-top: 22px;47 display: flex;48 align-items: center;49 gap: 14px;50 font-size: 30px;51 opacity: 0.9;52 }53 /* app grid */54 .app-row {55 position: absolute;56 left: 0;57 right: 0;58 top: 1520px;59 display: flex;60 justify-content: space-around;61 padding: 0 40px;62 }63 .app {64 width: 170px;65 text-align: center;66 }67 .app-icon {68 width: 160px;69 height: 160px;70 border-radius: 50%;71 background: #fff;72 box-shadow: 0 10px 24px rgba(0,0,0,0.45);73 display: flex;74 align-items: center;75 justify-content: center;76 margin: 0 auto;77 }78 .app-label {79 margin-top: 22px;80 font-size: 30px;81 letter-spacing: 0.2px;82 }83 /* bottom dock apps */84 .dock-row {85 position: absolute;86 left: 0;87 right: 0;88 top: 1880px;89 display: flex;90 justify-content: space-around;91 padding: 0 60px;92 }93 .dock-app {94 width: 150px;95 text-align: center;96 }97 .dock-icon {98 width: 140px;99 height: 140px;100 border-radius: 50%;101 background: #fff;102 box-shadow: 0 10px 24px rgba(0,0,0,0.45);103 display: flex;104 align-items: center;105 justify-content: center;106 margin: 0 auto;107 }108 /* search bar dock */109 .search-bar {110 position: absolute;111 left: 60px;112 right: 60px;113 bottom: 150px;114 height: 120px;115 background: rgba(32,32,32,0.85);116 border-radius: 60px;117 box-shadow: 0 10px 25px rgba(0,0,0,0.55) inset;118 display: flex;119 align-items: center;120 padding: 0 28px;121 gap: 22px;122 }123 .search-pill {124 flex: 1;125 background: rgba(255,255,255,0.06);126 height: 72px;127 border-radius: 36px;128 display: flex;129 align-items: center;130 padding: 0 24px;131 color: rgba(255,255,255,0.85);132 font-size: 28px;133 }134 .home-indicator {135 position: absolute;136 bottom: 40px;137 left: 50%;138 transform: translateX(-50%);139 width: 360px;140 height: 16px;141 border-radius: 16px;142 background: rgba(255,255,255,0.75);143 }144 /* helper */145 svg { display: block; }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-time">10:40</div>153 <div class="status-right">154 <!-- WiFi icon -->155 <svg width="40" height="40" viewBox="0 0 24 24">156 <path fill="#fff" d="M12 18.5c.7 0 1.25.55 1.25 1.25S12.7 21 12 21s-1.25-.55-1.25-1.25S11.3 18.5 12 18.5z"></path>157 <path fill="#fff" opacity="0.85" d="M4.2 10.8a12 12 0 0 1 15.6 0l-1.7 1.7a9.5 9.5 0 0 0-12.2 0l-1.7-1.7z"></path>158 <path fill="#fff" opacity="0.7" d="M7 13.6a7.5 7.5 0 0 1 10 0l-1.7 1.7a5 5 0 0 0-6.6 0L7 13.6z"></path>159 </svg>160 <!-- Battery Icon -->161 <svg width="40" height="40" viewBox="0 0 26 26">162 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>163 <rect x="5" y="9" width="14" height="8" fill="#fff"></rect>164 <rect x="21.5" y="10" width="3" height="6" rx="1" fill="#fff"></rect>165 </svg>166 </div>167 168 <!-- Date and weather widget -->169 <div class="widget-date">170 <div class="day">Tue, Sep 26</div>171 <div class="weather">172 <!-- Moon icon -->173 <svg width="34" height="34" viewBox="0 0 24 24">174 <path fill="#cfd8dc" d="M12 2a8.5 8.5 0 0 0 0 17c3.9 0 7.2-2.6 8.3-6.2-1.5 1-3.3 1.6-5.3 1.6A8.5 8.5 0 0 1 12 2z"></path>175 </svg>176 <span>29°C</span>177 </div>178 </div>179 180 <!-- First row of apps -->181 <div class="app-row">182 <!-- Play Store -->183 <div class="app">184 <div class="app-icon">185 <svg width="110" height="110" viewBox="0 0 100 100">186 <polygon points="22,18 78,50 22,82" fill="#4CAF50"></polygon>187 <polygon points="22,18 48,34 22,46" fill="#FFC107"></polygon>188 <polygon points="22,54 48,66 22,82" fill="#03A9F4"></polygon>189 </svg>190 </div>191 <div class="app-label">Play Store</div>192 </div>193 <!-- Gmail -->194 <div class="app">195 <div class="app-icon">196 <svg width="110" height="110" viewBox="0 0 100 100">197 <rect x="18" y="28" width="64" height="44" rx="8" fill="#fff" stroke="#e0e0e0" stroke-width="4"></rect>198 <path d="M18 32 L50 52 L82 32" stroke="#E53935" stroke-width="8" fill="none"></path>199 <path d="M18 72 L50 52 L82 72" stroke="#E53935" stroke-width="8" fill="none"></path>200 </svg>201 </div>202 <div class="app-label">Gmail</div>203 </div>204 <!-- Photos -->205 <div class="app">206 <div class="app-icon">207 <svg width="110" height="110" viewBox="0 0 100 100">208 <path d="M50 50 L50 15 A35 35 0 0 1 85 50 Z" fill="#F44336"></path>209 <path d="M50 50 L85 50 A35 35 0 0 1 50 85 Z" fill="#FFC107"></path>210 <path d="M50 50 L50 85 A35 35 0 0 1 15 50 Z" fill="#4CAF50"></path>211 <path d="M50 50 L15 50 A35 35 0 0 1 50 15 Z" fill="#03A9F4"></path>212 <circle cx="50" cy="50" r="12" fill="#fff"></circle>213 </svg>214 </div>215 <div class="app-label">Photos</div>216 </div>217 <!-- YouTube -->218 <div class="app">219 <div class="app-icon">220 <svg width="110" height="110" viewBox="0 0 100 100">221 <rect x="20" y="32" width="60" height="36" rx="10" fill="#FF3D00"></rect>222 <polygon points="45,38 45,62 67,50" fill="#fff"></polygon>223 </svg>224 </div>225 <div class="app-label">YouTube</div>226 </div>227 </div>228 229 <!-- Bottom dock apps -->230 <div class="dock-row">231 <!-- Phone -->232 <div class="dock-app">233 <div class="dock-icon">234 <svg width="100" height="100" viewBox="0 0 100 100">235 <circle cx="50" cy="50" r="46" fill="#1E88E5"></circle>236 <path d="M62 64c-9-4-15-10-19-19l7-6-7-13-12 6c-2 12 12 34 28 40l12-6-9-10-1 8z" fill="#fff" opacity="0.95"></path>237 </svg>238 </div>239 </div>240 <!-- Messages -->241 <div class="dock-app">242 <div class="dock-icon">243 <svg width="100" height="100" viewBox="0 0 100 100">244 <circle cx="50" cy="50" r="46" fill="#1976D2"></circle>245 <rect x="26" y="30" width="48" height="32" rx="8" fill="#fff"></rect>246 <polygon points="34,62 50,72 66,62" fill="#fff"></polygon>247 </svg>248 </div>249 </div>250 <!-- Chrome -->251 <div class="dock-app">252 <div class="dock-icon">253 <svg width="100" height="100" viewBox="0 0 100 100">254 <circle cx="50" cy="50" r="46" fill="#fff"></circle>255 <path d="M50 14a36 36 0 0 1 31 18H50z" fill="#F44336"></path>256 <path d="M81 32a36 36 0 0 1-11 50L50 50z" fill="#FFC107"></path>257 <path d="M70 82A36 36 0 0 1 19 32h31z" fill="#4CAF50"></path>258 <circle cx="50" cy="50" r="16" fill="#03A9F4"></circle>259 </svg>260 </div>261 </div>262 <!-- Camera -->263 <div class="dock-app">264 <div class="dock-icon">265 <svg width="100" height="100" viewBox="0 0 100 100">266 <circle cx="50" cy="50" r="46" fill="#ECEFF1"></circle>267 <rect x="24" y="34" width="52" height="32" rx="6" fill="#607D8B"></rect>268 <circle cx="50" cy="50" r="12" fill="#B0BEC5"></circle>269 <rect x="38" y="28" width="24" height="8" rx="4" fill="#455A64"></rect>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Search bar -->276 <div class="search-bar">277 <!-- Google G circle -->278 <div style="width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;">279 <svg width="36" height="36" viewBox="0 0 24 24">280 <path fill="#4285F4" d="M21.8 12.2c0-.8-.1-1.6-.3-2.3H12v4.4h5.5c-.2 1.2-.9 2.3-2 3v2.5h3.2c1.9-1.8 3.1-4.4 3.1-7.6z"/>281 <path fill="#34A853" d="M12 22c2.9 0 5.4-1 7.2-2.7l-3.2-2.5c-.9.6-2 .9-3 .9-2.3 0-4.3-1.6-5-3.7H1.6v2.3C3.4 19.9 7.4 22 12 22z"/>282 <path fill="#FBBC04" d="M7 13.9c-.2-.6-.4-1.2-.4-1.9s.1-1.3.4-1.9V7.8H1.6A10 10 0 0 0 2 12a10 10 0 0 0-.4 4.2H7v-2.3z"/>283 <path fill="#EA4335" d="M12 6.1c1.6 0 3.1.6 4.2 1.7l3.1-3.1C17.4 2.9 14.9 2 12 2 7.4 2 3.4 4.1 1.6 7.8L7 10.1c.7-2.1 2.7-4 5-4z"/>284 </svg>285 </div>286 <div class="search-pill">Search or type URL</div>287 <!-- mic -->288 <svg width="44" height="44" viewBox="0 0 24 24">289 <rect x="9" y="4" width="6" height="10" rx="3" fill="#fff"></rect>290 <path d="M6 11a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2" fill="none"></path>291 <rect x="11" y="17" width="2" height="4" fill="#fff"></rect>292 </svg>293 <!-- camera/lens -->294 <svg width="44" height="44" viewBox="0 0 24 24">295 <rect x="4" y="7" width="16" height="11" rx="2" fill="#fff"></rect>296 <circle cx="12" cy="12.5" r="3.5" fill="#37474F"></circle>297 </svg>298 </div>299 300 <!-- Home indicator -->301 <div class="home-indicator"></div>302 303</div>304</body>305</html>