GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Home Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    border-radius:0;12  }13 14  /* Wallpaper placeholder */15  .wallpaper {16    position:absolute; inset:0;17    background:#E0E0E0;18    border:1px solid #BDBDBD;19    color:#757575;20    display:flex; align-items:center; justify-content:center;21    font-family: Arial, Helvetica, sans-serif;22    font-size:28px;23    letter-spacing:0.2px;24  }25 26  /* Status bar */27  .status-bar {28    position:absolute; top:18px; left:0; right:0;29    height:60px; padding:0 28px;30    display:flex; align-items:center; justify-content:space-between;31    font-family: Arial, Helvetica, sans-serif;32    color:#1a1a1a; font-size:34px; font-weight:600;33  }34  .status-icons {35    display:flex; align-items:center; gap:22px;36    color:#1a1a1a; font-size:20px;37  }38  .sb-icon { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; }39  .dot { width:10px; height:10px; border-radius:50%; background:#1a1a1a; }40 41  /* Date & weather */42  .date-weather {43    position:absolute; top:180px; left:60px;44    color:#1a1a1a; font-family: Arial, Helvetica, sans-serif;45  }46  .date-text { font-size:64px; font-weight:600; }47  .weather { margin-top:12px; display:flex; align-items:center; gap:16px; font-size:40px; }48  .cloud {49    width:54px; height:36px;50  }51 52  /* Icon grid */53  .icon-row {54    position:absolute; left:60px; right:60px;55    display:flex; justify-content:space-between; align-items:flex-start;56  }57  .row-top  { top:1420px; }58  .row-dock { top:1780px; }59  .app {60    width:210px; text-align:center; font-family: Arial, Helvetica, sans-serif;61  }62  .app .circle {63    width:160px; height:160px; border-radius:50%;64    background:#ffffff;65    box-shadow:0 6px 20px rgba(0,0,0,0.15);66    margin:0 auto;67    display:flex; align-items:center; justify-content:center;68    font-weight:700; color:#1976d2; font-size:42px;69  }70  .label {71    margin-top:20px; font-size:38px; color:#1a1a1a;72  }73 74  /* Search bar */75  .search-bar {76    position:absolute; left:60px; right:60px; bottom:180px;77    height:150px; background:#2f3136; border-radius:80px;78    display:flex; align-items:center; justify-content:space-between;79    padding:0 32px;80    font-family: Arial, Helvetica, sans-serif;81  }82  .search-left { display:flex; align-items:center; gap:22px; color:#fff; }83  .g-badge {84    width:90px; height:90px; border-radius:50%;85    background:#ffffff; color:#1a73e8; font-weight:900;86    display:flex; align-items:center; justify-content:center; font-size:44px;87  }88  .search-placeholder { color:#bfc2c7; font-size:40px; }89  .search-right { display:flex; align-items:center; gap:26px; }90  .s-icon {91    width:90px; height:90px; border-radius:50%;92    background:#3a3d43; display:flex; align-items:center; justify-content:center;93  }94  .s-icon svg { width:44px; height:44px; fill:#dfe3ea; }95 96  /* Gesture bar */97  .gesture {98    position:absolute; bottom:70px; left:50%; transform:translateX(-50%);99    width:420px; height:12px; border-radius:8px; background:#2d2d2d;100    opacity:0.8;101  }102</style>103</head>104<body>105<div id="render-target">106  <div class="wallpaper">[IMG: Beach wallpaper with two colorful kayaks on sand]</div>107 108  <!-- Status Bar -->109  <div class="status-bar">110    <div>6:19</div>111    <div class="status-icons">112      <div class="sb-icon">113        <!-- Do Not Disturb (circle with bar) -->114        <svg viewBox="0 0 24 24">115          <circle cx="12" cy="12" r="9" fill="none" stroke="#1a1a1a" stroke-width="2"></circle>116          <rect x="6" y="11" width="12" height="2" fill="#1a1a1a"></rect>117        </svg>118      </div>119      <div class="sb-icon">120        <!-- VPN key (simple key/lock) -->121        <svg viewBox="0 0 24 24">122          <circle cx="8" cy="12" r="4" fill="none" stroke="#1a1a1a" stroke-width="2"></circle>123          <path d="M12 12h9" stroke="#1a1a1a" stroke-width="2" fill="none"></path>124          <circle cx="18" cy="12" r="1.5" fill="#1a1a1a"></circle>125        </svg>126      </div>127      <div class="sb-icon">128        <!-- Dots grid -->129        <svg viewBox="0 0 24 24">130          <g fill="#1a1a1a">131            <circle cx="6" cy="6" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="6" r="2"/>132            <circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>133            <circle cx="6" cy="18" r="2"/><circle cx="12" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>134          </g>135        </svg>136      </div>137      <div class="sb-icon">138        <!-- Location pin -->139        <svg viewBox="0 0 24 24">140          <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z" fill="none" stroke="#1a1a1a" stroke-width="2"></path>141          <circle cx="12" cy="10" r="2.5" fill="#1a1a1a"></circle>142        </svg>143      </div>144      <div class="sb-icon">145        <!-- Dot -->146        <div class="dot"></div>147      </div>148      <div class="sb-icon">149        <!-- NFC icon (N) -->150        <svg viewBox="0 0 24 24">151          <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="none" stroke="#1a1a1a" stroke-width="2"></rect>152          <path d="M9 17V7l6 10V7" stroke="#1a1a1a" stroke-width="2" fill="none"></path>153        </svg>154      </div>155      <div class="sb-icon">156        <!-- WiFi -->157        <svg viewBox="0 0 24 24">158          <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#1a1a1a" stroke-width="2"></path>159          <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#1a1a1a" stroke-width="2"></path>160          <path d="M8 16c3-2 5-2 8 0" fill="none" stroke="#1a1a1a" stroke-width="2"></path>161          <circle cx="12" cy="19" r="1.8" fill="#1a1a1a"></circle>162        </svg>163      </div>164      <div class="sb-icon">165        <!-- Battery -->166        <svg viewBox="0 0 26 24">167          <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#1a1a1a" stroke-width="2"></rect>168          <rect x="20" y="9" width="4" height="6" rx="1" fill="#1a1a1a"></rect>169          <rect x="3" y="8" width="14" height="8" fill="#1a1a1a"></rect>170        </svg>171      </div>172    </div>173  </div>174 175  <!-- Date and Weather -->176  <div class="date-weather">177    <div class="date-text">Thu, Sep 21</div>178    <div class="weather">179      <svg class="cloud" viewBox="0 0 64 40">180        <path d="M18 32h30a10 10 0 0 0 0-20 14 14 0 0 0-27-2A12 12 0 0 0 18 32z" fill="#9e9e9e"></path>181      </svg>182      <div>31°C</div>183    </div>184  </div>185 186  <!-- Row of apps -->187  <div class="icon-row row-top">188    <div class="app">189      <div class="circle" style="color:#0f9d58;">▶</div>190      <div class="label">Play Store</div>191    </div>192    <div class="app">193      <div class="circle" style="color:#ea4335;">M</div>194      <div class="label">Gmail</div>195    </div>196    <div class="app">197      <div class="circle" style="color:#34a853;">▦</div>198      <div class="label">Photos</div>199    </div>200    <div class="app">201      <div class="circle" style="color:#ff3d00;">▶</div>202      <div class="label">YouTube</div>203    </div>204  </div>205 206  <!-- Dock icons -->207  <div class="icon-row row-dock">208    <div class="app">209      <div class="circle" style="color:#1a73e8;">📞</div>210    </div>211    <div class="app">212      <div class="circle" style="color:#1a73e8;">💬</div>213    </div>214    <div class="app">215      <div class="circle" style="color:#4285f4;">◎</div>216    </div>217    <div class="app">218      <div class="circle" style="color:#1a73e8;">📷</div>219    </div>220  </div>221 222  <!-- Search bar -->223  <div class="search-bar">224    <div class="search-left">225      <div class="g-badge">G</div>226      <div class="search-placeholder">Search or type a URL</div>227    </div>228    <div class="search-right">229      <div class="s-icon">230        <!-- mic -->231        <svg viewBox="0 0 24 24">232          <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3z" />233          <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#dfe3ea" stroke-width="2"/>234          <path d="M12 18v3" stroke="#dfe3ea" stroke-width="2"/>235        </svg>236      </div>237      <div class="s-icon">238        <!-- camera -->239        <svg viewBox="0 0 24 24">240          <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#dfe3ea" stroke-width="2"></rect>241          <path d="M9 6l2-2h2l2 2" fill="none" stroke="#dfe3ea" stroke-width="2"></path>242          <circle cx="12" cy="12" r="3.5" fill="none" stroke="#dfe3ea" stroke-width="2"></circle>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Gesture bar -->249  <div class="gesture"></div>250</div>251</body>252</html>