GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #0a0d14;14  }15 16  /* Wallpaper placeholder */17  .wallpaper {18    position: absolute;19    left: 0; top: 0; width: 1080px; height: 2400px;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex; justify-content: center; align-items: center;24    font-size: 28px; letter-spacing: 0.5px;25  }26 27  /* Status bar */28  .status-bar {29    position: absolute; left: 0; top: 0; width: 100%; height: 110px;30    background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0));31    color: #fff;32    font-family: Arial, Helvetica, sans-serif;33  }34  .status-left {35    position: absolute; left: 34px; top: 30px; display: flex; align-items: center; gap: 18px;36    font-size: 44px; font-weight: 600;37  }38  .status-right {39    position: absolute; right: 34px; top: 36px; display: flex; align-items: center; gap: 26px;40  }41  .status-icon svg { width: 36px; height: 36px; fill: #fff; }42 43  /* App icon + label near top-left */44  .top-app {45    position: absolute;46    left: 94px; top: 420px;47    display: flex; flex-direction: column; align-items: center;48    color: #fff;49    text-shadow: 0 2px 4px rgba(0,0,0,0.6);50  }51  .app-circle {52    width: 220px; height: 220px; border-radius: 50%;53    background: #ECECEC; box-shadow: 0 8px 22px rgba(0,0,0,0.35);54    display: flex; align-items: center; justify-content: center;55  }56  .app-circle .m-label {57    font-size: 140px; font-weight: 800; color: #E66A2B; line-height: 1;58  }59  .top-app .app-name {60    margin-top: 20px; font-size: 44px;61  }62 63  /* Rows of icons */64  .dock-row {65    position: absolute; left: 60px; right: 60px;66    display: flex; justify-content: space-between; align-items: flex-start;67    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.6);68  }69  .row-1 { top: 1500px; }70  .row-2 { top: 1815px; }71 72  .icon-block {73    width: 210px;74    display: flex; flex-direction: column; align-items: center;75  }76  .icon-circle {77    width: 180px; height: 180px; border-radius: 50%;78    background: #ECECEC; box-shadow: 0 8px 22px rgba(0,0,0,0.35);79    display: flex; align-items: center; justify-content: center;80  }81  .icon-circle svg { width: 120px; height: 120px; }82  .icon-label {83    margin-top: 18px; font-size: 40px; font-weight: 500;84  }85 86  /* USB debugging prompt (translucent) */87  .usb-banner {88    position: absolute; left: 60px; bottom: 190px; width: 960px;89    background: rgba(0,0,0,0.65); color: #fff;90    border-radius: 36px; padding: 28px 32px;91    font-size: 36px; line-height: 1.35;92    display: flex; gap: 22px; align-items: flex-start;93    backdrop-filter: blur(2px);94  }95  .usb-icon {96    width: 72px; height: 72px; border-radius: 18px;97    background: #ECECEC; border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center;99    color: #757575; font-weight: 700;100    flex-shrink: 0;101  }102  .home-pill {103    position: absolute; left: 50%; transform: translateX(-50%);104    bottom: 90px; width: 320px; height: 14px; border-radius: 7px;105    background: #fff; opacity: 0.75;106  }107</style>108</head>109<body>110<div id="render-target">111  <div class="wallpaper">[IMG: Abstract dark blue wallpaper]</div>112 113  <!-- Status bar -->114  <div class="status-bar">115    <div class="status-left">116      <div>9:06</div>117      <div class="status-icon">118        <!-- Download icon -->119        <svg viewBox="0 0 24 24">120          <path d="M12 3v9l4-4 1 1-6 6-6-6 1-1 4 4V3h2zM4 19h16v2H4z"></path>121        </svg>122      </div>123    </div>124    <div class="status-right">125      <div class="status-icon">126        <!-- WiFi icon -->127        <svg viewBox="0 0 24 24">128          <path d="M12 18.5l2.5-2.5a3.5 3.5 0 0 0-5 0L12 18.5zm-5-5 1.2 1.2a7 7 0 0 1 9.6 0L19 13.5a9 9 0 0 0-14 0zm-3-3 1.2 1.2a12 12 0 0 1 17.6 0L22 10.5a14 14 0 0 0-20 0z"></path>129        </svg>130      </div>131      <div class="status-icon">132        <!-- Battery icon -->133        <svg viewBox="0 0 24 24">134          <path d="M20 8h1v8h-1v2H4V6h16v2zM6 8v10h12V8H6z"></path>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- Top-left app -->141  <div class="top-app">142    <div class="app-circle">143      <div class="m-label">M</div>144    </div>145    <div class="app-name">Migros</div>146  </div>147 148  <!-- Row 1: Play Store, Photos, Gmail, YouTube -->149  <div class="dock-row row-1">150    <div class="icon-block">151      <div class="icon-circle">152        <!-- Play Store (simplified) -->153        <svg viewBox="0 0 64 64">154          <defs>155            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">156              <stop offset="0" stop-color="#35A852"/><stop offset="1" stop-color="#4285F4"/>157            </linearGradient>158          </defs>159          <path d="M12 10l34 22-34 22V10z" fill="url(#g1)"></path>160          <path d="M12 10l10 12-10 10V10z" fill="#EA4335"></path>161          <path d="M22 22l24 10-10 12-14-22z" fill="#FBBC04"></path>162        </svg>163      </div>164      <div class="icon-label">Play Store</div>165    </div>166 167    <div class="icon-block">168      <div class="icon-circle">169        <!-- Photos (simplified) -->170        <svg viewBox="0 0 64 64">171          <circle cx="32" cy="20" r="10" fill="#EA4335"></circle>172          <circle cx="20" cy="32" r="10" fill="#FBBC04"></circle>173          <circle cx="32" cy="44" r="10" fill="#34A853"></circle>174          <circle cx="44" cy="32" r="10" fill="#4285F4"></circle>175        </svg>176      </div>177      <div class="icon-label">Photos</div>178    </div>179 180    <div class="icon-block">181      <div class="icon-circle">182        <!-- Gmail (simplified M) -->183        <svg viewBox="0 0 64 64">184          <rect x="10" y="16" width="44" height="32" rx="6" ry="6" fill="#fff" stroke="#DADCE0" stroke-width="2"></rect>185          <path d="M12 20l20 14 20-14v8L32 42 12 28v-8z" fill="#EA4335"></path>186          <path d="M12 20l20 14 0-10-12-8H12z" fill="#FBBC04"></path>187          <path d="M52 20H44l-12 8v10l20-14v-4z" fill="#34A853"></path>188          <path d="M32 24l-20-4 20 14 20-14-20 4z" fill="#4285F4" opacity="0.6"></path>189        </svg>190      </div>191      <div class="icon-label">Gmail</div>192    </div>193 194    <div class="icon-block">195      <div class="icon-circle">196        <!-- YouTube -->197        <svg viewBox="0 0 64 64">198          <rect x="12" y="18" width="40" height="28" rx="8" ry="8" fill="#FF0000"></rect>199          <polygon points="28,24 28,40 42,32" fill="#fff"></polygon>200        </svg>201      </div>202      <div class="icon-label">YouTube</div>203    </div>204  </div>205 206  <!-- Row 2: Phone, Messages, Chrome, Camera -->207  <div class="dock-row row-2">208    <div class="icon-block">209      <div class="icon-circle">210        <!-- Phone -->211        <svg viewBox="0 0 64 64">212          <path d="M22 14c-3 0-6 3-4 8 2 6 8 13 14 18s12 8 18 10c5 2 8-1 8-4l-6-9c-2-2-5 0-7 1l-4-3c-3-2-6-6-8-9l-3-4c1-2 3-5 1-7l-9-6z" fill="#4E8FF7"></path>213        </svg>214      </div>215    </div>216 217    <div class="icon-block">218      <div class="icon-circle">219        <!-- Messages -->220        <svg viewBox="0 0 64 64">221          <rect x="10" y="14" width="44" height="30" rx="8" fill="#7AA7FF"></rect>222          <polygon points="16,44 26,44 24,52" fill="#7AA7FF"></polygon>223          <rect x="18" y="24" width="10" height="4" fill="#fff"></rect>224          <rect x="32" y="24" width="14" height="4" fill="#fff"></rect>225        </svg>226      </div>227    </div>228 229    <div class="icon-block">230      <div class="icon-circle">231        <!-- Chrome -->232        <svg viewBox="0 0 64 64">233          <circle cx="32" cy="32" r="12" fill="#46A5F5"></circle>234          <path d="M32 12a20 20 0 0 1 18 10H34a12 12 0 0 0-2-10z" fill="#EA4335"></path>235          <path d="M50 22a20 20 0 0 1-6 26l-10-17a12 12 0 0 0 16-9z" fill="#FBBC04"></path>236          <path d="M44 48a20 20 0 0 1-30-12h20a12 12 0 0 0 10 12z" fill="#34A853"></path>237        </svg>238      </div>239    </div>240 241    <div class="icon-block">242      <div class="icon-circle">243        <!-- Camera -->244        <svg viewBox="0 0 64 64">245          <rect x="10" y="18" width="44" height="28" rx="6" fill="#B0B5BD"></rect>246          <rect x="16" y="14" width="12" height="8" rx="2" fill="#8B9098"></rect>247          <circle cx="32" cy="32" r="10" fill="#7A7F87"></circle>248          <circle cx="32" cy="32" r="6" fill="#C7CBD1"></circle>249        </svg>250      </div>251    </div>252  </div>253 254  <!-- USB debugging prompt -->255  <div class="usb-banner">256    <div class="usb-icon">G</div>257    <div>258      <div style="font-weight:700; margin-bottom:8px;">Allow USB debugging?</div>259      <div>The computer's RSA key fingerprint is:</div>260      <div style="opacity:0.85;">EC:1B:4F:FF:29:FC:26:35:D7:AA:4B:1D:13:B:D:D8:3</div>261    </div>262  </div>263 264  <!-- Home pill -->265  <div class="home-pill"></div>266</div>267</body>268</html>