GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: radial-gradient(1200px 1200px at 50% 30%, #1e1e1f 0%, #141416 50%, #101113 100%);14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 30px;21    left: 36px;22    right: 36px;23    height: 60px;24    display: flex;25    align-items: center;26    font-size: 32px;27    letter-spacing: 0.5px;28  }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 22px;34  }35  .sb-dot {36    width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%;37  }38  .sb-icon { display: inline-flex; align-items: center; justify-content: center; }39 40  /* Date + weather */41  .weather-block {42    position: absolute;43    top: 250px;44    left: 64px;45    right: 64px;46    color: #eaeaea;47  }48  .date-text {49    font-size: 72px;50    font-weight: 500;51    line-height: 1.2;52    margin-bottom: 26px;53  }54  .weather-row {55    display: flex;56    align-items: center;57    gap: 18px;58    font-size: 40px;59    color: #e6e6e6;60  }61  .sep { opacity: 0.7; margin: 0 10px; }62 63  /* App icons grid */64  .app-row {65    position: absolute;66    left: 0; right: 0;67    display: flex;68    justify-content: space-around;69    padding: 0 80px;70  }71  .row1 { top: 1530px; }72  .row2 { top: 1780px; }73 74  .app {75    width: 190px;76    text-align: center;77    color: #ffffff;78  }79  .app .icon {80    width: 160px;81    height: 160px;82    background: #ffffff;83    border-radius: 50%;84    box-shadow: 0 8px 18px rgba(0,0,0,0.35);85    display: flex;86    align-items: center;87    justify-content: center;88    position: relative;89    color: #555;90    font-weight: 600;91    font-size: 28px;92  }93  .app .label {94    margin-top: 22px;95    font-size: 36px;96    color: #f0f0f0;97  }98  .badge {99    position: absolute;100    right: 10px;101    top: 10px;102    width: 28px;103    height: 28px;104    background: #c19cff;105    border: 3px solid #ffffff;106    border-radius: 50%;107  }108 109  /* Search bar dock */110  .search-dock {111    position: absolute;112    left: 60px;113    right: 60px;114    bottom: 180px;115    height: 140px;116    background: #3b3d40;117    border-radius: 70px;118    box-shadow: 0 12px 24px rgba(0,0,0,0.45);119    display: flex;120    align-items: center;121    padding: 0 40px;122  }123  .g-icon {124    width: 68px; height: 68px;125    border-radius: 34px;126    background: #ffffff;127    display: flex; align-items: center; justify-content: center;128    margin-right: 22px;129    font-weight: 800; font-size: 42px;130    color: #4285F4;131  }132  .dock-spacer {133    flex: 1;134    height: 64px;135    border-radius: 32px;136    background: rgba(255,255,255,0.06);137  }138  .dock-tools {139    display: flex; align-items: center; gap: 26px; margin-left: 26px;140  }141 142  /* Gesture pill */143  .gesture {144    position: absolute;145    bottom: 72px;146    left: 50%;147    transform: translateX(-50%);148    width: 380px; height: 14px;149    border-radius: 7px;150    background: #f6f6f6;151    opacity: 0.85;152  }153 154  /* Minor utility */155  .muted { opacity: 0.8; }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status bar -->162  <div class="status-bar">163    <div>9:39</div>164    <div class="status-right">165      <div class="sb-dot"></div>166      <div class="sb-dot"></div>167      <div class="sb-dot"></div>168      <div class="sb-icon">169        <!-- Wi-Fi icon -->170        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">171          <path d="M2.5 8.5c4.7-4.2 14.3-4.2 19 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>172          <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>173          <path d="M8.5 15.5c2.1-1.6 4.9-1.6 7 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>174          <circle cx="12" cy="18.5" r="1.8" fill="#eaeaea"/>175        </svg>176      </div>177      <div class="sb-icon">178        <!-- Battery icon -->179        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">180          <rect x="3" y="6" width="16" height="12" rx="2" stroke="#eaeaea" stroke-width="2"/>181          <rect x="5" y="8" width="12" height="8" fill="#eaeaea"/>182          <rect x="19" y="10" width="2.5" height="6" rx="1" fill="#eaeaea"/>183        </svg>184      </div>185    </div>186  </div>187 188  <!-- Date and weather -->189  <div class="weather-block">190    <div class="date-text">Thu, Dec 21</div>191    <div class="weather-row">192      <!-- Sun icon -->193      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">194        <circle cx="12" cy="12" r="5.5" fill="#FFD54F"/>195        <g stroke="#FFD54F" stroke-width="1.6" stroke-linecap="round">196          <path d="M12 1.8v3.2M12 19v3.2M1.8 12h3.2M19 12h3.2M4.3 4.3l2.3 2.3M17.4 17.4l2.3 2.3M19.7 4.3l-2.3 2.3M6.6 17.4l-2.3 2.3"/>197        </g>198      </svg>199      <div>11°C <span class="sep">·</span> Today 22° / 6° <span class="sep">·</span> Partly cloudy</div>200    </div>201  </div>202 203  <!-- Apps row 1 -->204  <div class="app-row row1">205    <div class="app">206      <div class="icon">Play</div>207      <div class="label">Play Store</div>208    </div>209    <div class="app">210      <div class="icon">Gmail</div>211      <div class="label">Gmail</div>212    </div>213    <div class="app">214      <div class="icon">Photos</div>215      <div class="label">Photos</div>216    </div>217    <div class="app">218      <div class="icon">YouTube219        <div class="badge"></div>220      </div>221      <div class="label">YouTube</div>222    </div>223  </div>224 225  <!-- Apps row 2 -->226  <div class="app-row row2">227    <div class="app">228      <div class="icon">Phone</div>229      <div class="label">Phone</div>230    </div>231    <div class="app">232      <div class="icon">Messages</div>233      <div class="label">Messages</div>234    </div>235    <div class="app">236      <div class="icon">Chrome</div>237      <div class="label">Chrome</div>238    </div>239    <div class="app">240      <div class="icon">Camera</div>241      <div class="label">Camera</div>242    </div>243  </div>244 245  <!-- Search bar -->246  <div class="search-dock">247    <div class="g-icon">G</div>248    <div class="dock-spacer"></div>249    <div class="dock-tools">250      <!-- Mic icon -->251      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">252        <rect x="9" y="4" width="6" height="10" rx="3" fill="#ff5252"/>253        <path d="M6 11c0 3 2.4 5 6 5s6-2 6-5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>254        <path d="M12 16v4" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>255        <path d="M8 20h8" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>256      </svg>257      <!-- Camera icon -->258      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">259        <rect x="3" y="7" width="18" height="12" rx="3" fill="#00c853"/>260        <rect x="7" y="3" width="6" height="4" rx="1" fill="#ffffff"/>261        <circle cx="12" cy="13" r="4.5" fill="#263238"/>262        <circle cx="12" cy="13" r="2.5" fill="#ffca28"/>263      </svg>264    </div>265  </div>266 267  <!-- Gesture pill -->268  <div class="gesture"></div>269 270</div>271</body>272</html>