GD-ML/AndroidCode

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, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background:13      radial-gradient(ellipse at 60% 20%, rgba(40,40,40,0.8), rgba(18,18,18,0.95) 60%),14      repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 10px);15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 24px;22    left: 32px;23    right: 32px;24    height: 60px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29  }30  .status-time { font-size: 36px; letter-spacing: 0.5px; }31  .status-icons { display: flex; gap: 24px; align-items: center; }32  .icon { width: 36px; height: 36px; }33 34  /* Date & weather widget */35  .widget {36    position: absolute;37    top: 200px;38    left: 72px;39  }40  .widget .date {41    font-size: 66px;42    font-weight: 500;43    margin-bottom: 18px;44  }45  .widget .weather {46    display: flex;47    align-items: center;48    gap: 18px;49    font-size: 40px;50  }51  .cloud-icon { width: 60px; height: 40px; }52 53  /* App grid row */54  .apps-row {55    position: absolute;56    top: 1400px;57    left: 40px;58    right: 40px;59    display: flex;60    justify-content: space-between;61  }62  .app {63    width: 200px;64    text-align: center;65  }66  .circle {67    width: 180px;68    height: 180px;69    background: #ffffff;70    border-radius: 50%;71    margin: 0 auto;72    display: flex;73    align-items: center;74    justify-content: center;75    box-shadow: 0 8px 18px rgba(0,0,0,0.35);76  }77  .label {78    margin-top: 28px;79    font-size: 36px;80    color: #f5f5f5;81    letter-spacing: 0.2px;82  }83 84  /* Dock row */85  .dock-row {86    position: absolute;87    top: 1805px;88    left: 80px;89    right: 80px;90    display: flex;91    justify-content: space-between;92  }93 94  /* Search bar */95  .search-bar {96    position: absolute;97    bottom: 180px;98    left: 72px;99    right: 72px;100    height: 136px;101    background: #2b2b2b;102    border-radius: 68px;103    display: flex;104    align-items: center;105    padding: 0 32px;106    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);107  }108  .search-left {109    display: flex;110    align-items: center;111    gap: 24px;112    color: #cfcfcf;113    font-size: 40px;114  }115  .search-right {116    margin-left: auto;117    display: flex;118    gap: 28px;119    align-items: center;120  }121  .search-chip {122    width: 72px; height: 72px;123    border-radius: 50%;124    display: inline-flex;125    align-items: center; justify-content: center;126    background: rgba(255,255,255,0.08);127  }128 129  /* Gesture handle */130  .gesture {131    position: absolute;132    bottom: 70px;133    left: 260px;134    width: 560px;135    height: 12px;136    border-radius: 6px;137    background: rgba(255,255,255,0.75);138  }139 140  /* SVG helper colors */141  .green { fill: #0f9d58; }142  .blue { fill: #4285f4; }143  .red { fill: #db4437; }144  .yellow { fill: #f4b400; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-time">9:25</div>153    <div class="status-icons">154      <!-- Wi-Fi -->155      <svg class="icon" viewBox="0 0 24 24">156        <path fill="#ffffff" d="M3 8c4.4-3.7 13.6-3.7 18 0l-2 2c-3.3-2.8-10.7-2.8-14 0L3 8zm3.5 3.5c3-2.5 11-2.5 14 0l-2 2c-2.2-1.8-7.8-1.8-9.9 0l-2.1-2zm4 4c1.8-1.5 4.9-1.5 6.7 0l-3.3 3.3L10.5 15.5z"/>157      </svg>158      <!-- Battery -->159      <svg class="icon" viewBox="0 0 24 24">160        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>161        <rect x="4" y="8" width="12" height="8" rx="1" fill="#ffffff"/>162        <rect x="20" y="9" width="2.5" height="6" fill="#ffffff"/>163      </svg>164    </div>165  </div>166 167  <!-- Date & Weather Widget -->168  <div class="widget">169    <div class="date">Thu, Jul 13</div>170    <div class="weather">171      <!-- Cloud icon -->172      <svg class="cloud-icon" viewBox="0 0 64 40">173        <circle cx="26" cy="20" r="12" fill="#ffffff"/>174        <circle cx="40" cy="16" r="10" fill="#ffffff"/>175        <rect x="14" y="22" width="36" height="12" rx="6" fill="#ffffff"/>176      </svg>177      <span>29°C</span>178    </div>179  </div>180 181  <!-- App Grid Row -->182  <div class="apps-row">183    <!-- Play Store -->184    <div class="app">185      <div class="circle">186        <svg viewBox="0 0 100 100" width="120" height="120">187          <polygon points="18,20 72,50 18,80" fill="#4285f4"/>188          <polygon points="18,20 40,40 30,50" fill="#34a853"/>189          <polygon points="30,50 40,60 18,80" fill="#fbbc05"/>190          <polygon points="40,40 72,50 40,60" fill="#ea4335"/>191        </svg>192      </div>193      <div class="label">Play Store</div>194    </div>195 196    <!-- Gmail -->197    <div class="app">198      <div class="circle">199        <svg viewBox="0 0 100 100" width="120" height="120">200          <rect x="20" y="30" width="60" height="40" rx="6" fill="#ffffff" stroke="#cfcfcf"/>201          <path d="M20 30 L50 52 L80 30" stroke="#ea4335" stroke-width="10" fill="none" />202          <path d="M25 30 V70" stroke="#34a853" stroke-width="10"/>203          <path d="M75 30 V70" stroke="#4285f4" stroke-width="10"/>204          <path d="M50 52 L50 70" stroke="#fbbc05" stroke-width="10"/>205        </svg>206      </div>207      <div class="label">Gmail</div>208    </div>209 210    <!-- Photos -->211    <div class="app">212      <div class="circle">213        <svg viewBox="0 0 100 100" width="120" height="120">214          <path d="M50 20 A30 30 0 0 1 80 50 H50 Z" fill="#ea4335"/>215          <path d="M80 50 A30 30 0 0 1 50 80 V50 Z" fill="#4285f4"/>216          <path d="M50 80 A30 30 0 0 1 20 50 H50 Z" fill="#34a853"/>217          <path d="M20 50 A30 30 0 0 1 50 20 V50 Z" fill="#fbbc05"/>218          <circle cx="50" cy="50" r="10" fill="#ffffff"/>219        </svg>220      </div>221      <div class="label">Photos</div>222    </div>223 224    <!-- YouTube -->225    <div class="app">226      <div class="circle">227        <svg viewBox="0 0 100 100" width="120" height="120">228          <rect x="20" y="35" width="60" height="30" rx="8" fill="#ea4335"/>229          <polygon points="44,40 44,60 64,50" fill="#ffffff"/>230        </svg>231      </div>232      <div class="label">YouTube</div>233    </div>234  </div>235 236  <!-- Dock Row -->237  <div class="dock-row">238    <!-- Phone -->239    <div class="circle">240      <svg viewBox="0 0 100 100" width="110" height="110">241        <path d="M35 28 c-6 6-6 10 2 18 l10 10 c8 8 12 8 18 2 l10-10 c3-3 3-6-3-10 l-12 12 -18-18 12-12 c-4-6-7-6-10-3z" fill="#0f9d58"/>242      </svg>243    </div>244 245    <!-- Messages -->246    <div class="circle">247      <svg viewBox="0 0 100 100" width="110" height="110">248        <rect x="20" y="24" width="60" height="40" rx="12" fill="#4285f4"/>249        <polygon points="40,64 44,80 60,64" fill="#4285f4"/>250        <circle cx="35" cy="44" r="5" fill="#ffffff"/>251        <circle cx="50" cy="44" r="5" fill="#ffffff"/>252        <circle cx="65" cy="44" r="5" fill="#ffffff"/>253      </svg>254    </div>255 256    <!-- Chrome -->257    <div class="circle">258      <svg viewBox="0 0 100 100" width="110" height="110">259        <circle cx="50" cy="50" r="40" fill="#ea4335"/>260        <path d="M50 10 A40 40 0 0 1 90 50 L60 50 Z" fill="#fbbc05"/>261        <path d="M90 50 A40 40 0 0 1 50 90 L50 60 Z" fill="#34a853"/>262        <circle cx="50" cy="50" r="20" fill="#4285f4" stroke="#ffffff" stroke-width="6"/>263      </svg>264    </div>265 266    <!-- Camera -->267    <div class="circle">268      <svg viewBox="0 0 100 100" width="110" height="110">269        <rect x="22" y="34" width="56" height="32" rx="6" fill="#616161"/>270        <rect x="30" y="40" width="40" height="20" rx="10" fill="#bdbdbd"/>271        <circle cx="50" cy="50" r="12" fill="#3b82f6"/>272        <rect x="36" y="28" width="12" height="10" rx="4" fill="#757575"/>273      </svg>274    </div>275  </div>276 277  <!-- Google Search Bar -->278  <div class="search-bar">279    <div class="search-left">280      <!-- Google G -->281      <span style="font-weight:700;">282        <span style="color:#4285f4">G</span>283      </span>284    </div>285    <div class="search-right">286      <!-- Mic -->287      <div class="search-chip">288        <svg viewBox="0 0 24 24" width="30" height="30">289          <rect x="9" y="5" width="6" height="10" rx="3" fill="#ffffff"/>290          <path d="M6 12 a6 6 0 0 0 12 0" stroke="#ffffff" stroke-width="2" fill="none"/>291          <rect x="11" y="16" width="2" height="4" fill="#ffffff"/>292        </svg>293      </div>294      <!-- Google Lens / Camera -->295      <div class="search-chip">296        <svg viewBox="0 0 24 24" width="30" height="30">297          <rect x="5" y="7" width="14" height="10" rx="3" fill="#ffffff"/>298          <circle cx="12" cy="12" r="3" fill="#1e88e5"/>299        </svg>300      </div>301    </div>302  </div>303 304  <!-- Gesture Handle -->305  <div class="gesture"></div>306</div>307</body>308</html>