GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Android Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000;13 }14 15 /* Wallpaper placeholder */16 .wallpaper {17 position: absolute; inset: 0;18 background: #E0E0E0;19 border: 1px solid #BDBDBD;20 color: #757575;21 display: flex; align-items: center; justify-content: center;22 font-size: 32px; letter-spacing: 0.5px;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute; top: 22px; left: 32px; right: 32px; height: 80px;28 display: flex; align-items: center; justify-content: space-between;29 color: #ffffff;30 }31 .status-left { font-size: 42px; font-weight: 500; }32 .status-right { display: flex; align-items: center; gap: 22px; }33 .sb-icon { width: 34px; height: 34px; }34 .battery {35 display: flex; align-items: center; gap: 8px; font-size: 26px;36 }37 38 /* App grid */39 .app {40 position: absolute; width: 220px; text-align: center; color: #ffffff;41 }42 .icon-circle {43 width: 168px; height: 168px; margin: 0 auto;44 background: #ffffff; border-radius: 50%;45 box-shadow: 0 6px 18px rgba(0,0,0,0.25);46 display: flex; align-items: center; justify-content: center;47 }48 .app-label {49 margin-top: 18px; font-size: 34px; font-weight: 500;50 text-shadow: 0 2px 6px rgba(0,0,0,0.35);51 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;52 }53 54 /* Dock area */55 .dock { position: absolute; left: 0; right: 0; bottom: 420px; height: 210px; }56 .dock-icons { display: flex; justify-content: space-between; padding: 0 100px; }57 .dock .icon-circle { width: 160px; height: 160px; }58 59 /* Search bar */60 .search-bar {61 position: absolute; left: 60px; right: 60px; bottom: 210px; height: 120px;62 background: #3A3A3A; border-radius: 60px;63 box-shadow: 0 8px 24px rgba(0,0,0,0.35);64 display: flex; align-items: center; justify-content: space-between;65 padding: 0 34px;66 }67 .search-left, .search-right { display: flex; align-items: center; gap: 28px; }68 .g-badge {69 width: 74px; height: 74px; border-radius: 50%; background: #ffffff;70 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;71 color: #4285F4;72 box-shadow: 0 4px 12px rgba(0,0,0,0.25);73 }74 .search-icon { width: 56px; height: 56px; }75 76 /* Navigation pill */77 .nav-pill {78 position: absolute; bottom: 44px; left: 390px; width: 300px; height: 18px;79 background: #ffffff; border-radius: 9px; opacity: 0.9;80 }81 82 /* Simple utility colors for placeholder inner icons */83 .green { color: #2E7D32; }84 .orange { color: #FB8C00; }85 .blue { color: #1E88E5; }86 .yellow { color: #FBC02D; }87</style>88</head>89<body>90<div id="render-target">91 <div class="wallpaper">[IMG: Beach Aerial Wallpaper]</div>92 93 <!-- Status bar -->94 <div class="status-bar">95 <div class="status-left">8:16</div>96 <div class="status-right">97 <!-- DND icon -->98 <svg class="sb-icon" viewBox="0 0 24 24">99 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>100 <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>101 </svg>102 <!-- Alarm icon -->103 <svg class="sb-icon" viewBox="0 0 24 24">104 <circle cx="12" cy="12" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>105 <rect x="11.5" y="6" width="1" height="6" fill="#fff"></rect>106 <rect x="11.5" y="12" width="5" height="1" fill="#fff"></rect>107 </svg>108 <!-- Play Store triangle -->109 <svg class="sb-icon" viewBox="0 0 24 24">110 <polygon points="5,4 19,12 5,20" fill="#fff"></polygon>111 </svg>112 <!-- NFC/wave icon -->113 <svg class="sb-icon" viewBox="0 0 24 24">114 <path d="M5 6 q7 6 0 12" fill="none" stroke="#fff" stroke-width="2"></path>115 </svg>116 <!-- Notifications off -->117 <svg class="sb-icon" viewBox="0 0 24 24">118 <path d="M12 3 c-4 0-7 3-7 7 v4 h14 v-4 c0-4-3-7-7-7z" fill="none" stroke="#fff" stroke-width="2"></path>119 <line x1="6" y1="6" x2="18" y2="18" stroke="#fff" stroke-width="2"></line>120 </svg>121 <!-- WiFi -->122 <svg class="sb-icon" viewBox="0 0 24 24">123 <path d="M3 9 q9-6 18 0" fill="none" stroke="#fff" stroke-width="2"></path>124 <path d="M6 12 q6-4 12 0" fill="none" stroke="#fff" stroke-width="2"></path>125 <path d="M9 15 q3-2 6 0" fill="none" stroke="#fff" stroke-width="2"></path>126 <circle cx="12" cy="18" r="2" fill="#fff"></circle>127 </svg>128 <!-- Battery + percent -->129 <div class="battery">130 <svg class="sb-icon" viewBox="0 0 26 24">131 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>132 <rect x="22" y="9" width="2" height="6" fill="#fff"></rect>133 <rect x="4.5" y="8.5" width="14.5" height="7" fill="#fff"></rect>134 </svg>135 <span>90%</span>136 </div>137 </div>138 </div>139 140 <!-- App grid: row 1 -->141 <div class="app" style="left:60px; top:300px;">142 <div class="icon-circle">143 <!-- Android placeholder -->144 <svg viewBox="0 0 100 100" width="120" height="120">145 <rect x="20" y="40" width="60" height="36" rx="8" fill="#4CAF50"></rect>146 <circle cx="34" cy="32" r="6" fill="#4CAF50"></circle>147 <circle cx="66" cy="32" r="6" fill="#4CAF50"></circle>148 <line x1="30" y1="62" x2="15" y2="52" stroke="#4CAF50" stroke-width="6"></line>149 <line x1="70" y1="62" x2="85" y2="52" stroke="#4CAF50" stroke-width="6"></line>150 </svg>151 </div>152 <div class="app-label">DBW Show...</div>153 </div>154 155 <div class="app" style="left:310px; top:300px;">156 <div class="icon-circle">157 <!-- Weather icon: sun + cloud -->158 <svg viewBox="0 0 100 100" width="120" height="120">159 <circle cx="34" cy="38" r="16" fill="#FBC02D"></circle>160 <ellipse cx="58" cy="58" rx="24" ry="14" fill="#90CAF9"></ellipse>161 </svg>162 </div>163 <div class="app-label">Weather</div>164 </div>165 166 <div class="app" style="left:560px; top:300px;">167 <div class="icon-circle">168 <!-- Weather&R... icon: sun + globe -->169 <svg viewBox="0 0 100 100" width="120" height="120">170 <circle cx="32" cy="40" r="14" fill="#FFB300"></circle>171 <circle cx="58" cy="58" r="22" fill="none" stroke="#42A5F5" stroke-width="5"></circle>172 <path d="M46 58 h24" stroke="#42A5F5" stroke-width="4"></path>173 <path d="M58 46 v24" stroke="#42A5F5" stroke-width="4"></path>174 </svg>175 </div>176 <div class="app-label">Weather&R...</div>177 </div>178 179 <div class="app" style="left:810px; top:300px;">180 <div class="icon-circle">181 <!-- Weather alt -->182 <svg viewBox="0 0 100 100" width="120" height="120">183 <rect x="20" y="24" width="60" height="40" rx="10" fill="#64B5F6"></rect>184 <circle cx="42" cy="44" r="10" fill="#FFEE58"></circle>185 <rect x="30" y="52" width="48" height="10" rx="5" fill="#BBDEFB"></rect>186 </svg>187 </div>188 <div class="app-label">Weather</div>189 </div>190 191 <!-- App grid: row 2 -->192 <div class="app" style="left:60px; top:780px;">193 <div class="icon-circle">194 <!-- AccuWeather sun -->195 <svg viewBox="0 0 100 100" width="120" height="120">196 <circle cx="50" cy="50" r="18" fill="#FF7043"></circle>197 <g stroke="#FF7043" stroke-width="6">198 <line x1="50" y1="18" x2="50" y2="6"></line>199 <line x1="50" y1="82" x2="50" y2="94"></line>200 <line x1="18" y1="50" x2="6" y2="50"></line>201 <line x1="82" y1="50" x2="94" y2="50"></line>202 </g>203 </svg>204 </div>205 <div class="app-label">AccuWeath...</div>206 </div>207 208 <!-- Dock icons -->209 <div class="dock">210 <div class="dock-icons">211 <!-- Phone -->212 <div class="icon-circle">213 <svg viewBox="0 0 100 100" width="90" height="90">214 <path d="M24 28 c18 30 28 36 48 48 l10-10 c4-4 3-8-2-10 l-14-6 c-4-1-7 2-9 5 c-11-7-17-13-24-24 c3-2 6-5 5-9 l-6-14 c-2-5-6-6-10-2z" fill="#1E88E5"></path>215 </svg>216 </div>217 <!-- Messages -->218 <div class="icon-circle">219 <svg viewBox="0 0 100 100" width="90" height="90">220 <rect x="18" y="22" width="64" height="46" rx="10" fill="#4C8BF5"></rect>221 <polygon points="30,68 44,60 70,68 22,68" fill="#4C8BF5"></polygon>222 </svg>223 </div>224 <!-- Chrome (simplified) -->225 <div class="icon-circle">226 <svg viewBox="0 0 100 100" width="90" height="90">227 <circle cx="50" cy="50" r="32" fill="#43A047"></circle>228 <path d="M50 18 a32 32 0 0 1 28 18 l-28 14z" fill="#E53935"></path>229 <path d="M78 36 a32 32 0 0 1 -10 42 l-18-28z" fill="#FDD835"></path>230 <circle cx="50" cy="50" r="12" fill="#1E88E5"></circle>231 </svg>232 </div>233 <!-- Camera -->234 <div class="icon-circle">235 <svg viewBox="0 0 100 100" width="90" height="90">236 <rect x="18" y="30" width="64" height="42" rx="8" fill="#424242"></rect>237 <rect x="30" y="22" width="20" height="10" rx="4" fill="#616161"></rect>238 <circle cx="50" cy="51" r="14" fill="#2196F3"></circle>239 <circle cx="50" cy="51" r="7" fill="#BBDEFB"></circle>240 </svg>241 </div>242 </div>243 </div>244 245 <!-- Search bar -->246 <div class="search-bar">247 <div class="search-left">248 <div class="g-badge">G</div>249 <div style="color:#cfcfcf; font-size:32px;">Search</div>250 </div>251 <div class="search-right">252 <!-- Mic -->253 <svg class="search-icon" viewBox="0 0 24 24">254 <rect x="10" y="4" width="4" height="10" rx="2" fill="#4CAF50"></rect>255 <path d="M7 12 v2 a5 5 0 0 0 10 0 v-2" fill="none" stroke="#4CAF50" stroke-width="2"></path>256 </svg>257 <!-- Google Lens camera -->258 <svg class="search-icon" viewBox="0 0 24 24">259 <rect x="4" y="6" width="16" height="12" rx="3" fill="#F44336"></rect>260 <circle cx="12" cy="12" r="4" fill="#2196F3"></circle>261 </svg>262 </div>263 </div>264 265 <!-- Navigation pill -->266 <div class="nav-pill"></div>267</div>268</body>269</html>