GD-ML/AndroidCode

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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Wallpaper placeholder */20  .wallpaper {21    position: absolute;22    inset: 0;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28    color: #757575;29    font-size: 32px;30    letter-spacing: 0.3px;31  }32 33  /* Status bar */34  .status-bar {35    position: absolute;36    top: 0;37    left: 0;38    width: 1080px;39    height: 110px;40    padding: 22px 28px 0 28px;41    box-sizing: border-box;42    display: flex;43    align-items: center;44    justify-content: space-between;45    color: #ffffff;46  }47  .status-left {48    font-size: 36px;49    font-weight: 600;50    opacity: 0.95;51  }52  .status-center {53    display: flex;54    gap: 24px;55    align-items: center;56    opacity: 0.9;57  }58  .status-right {59    display: flex;60    gap: 30px;61    align-items: center;62    opacity: 0.95;63  }64  .status-icon svg { display: block; }65 66  /* Date text */67  .date {68    position: absolute;69    top: 190px;70    left: 48px;71    font-size: 56px;72    font-weight: 500;73    color: #ffffff;74    text-shadow: 0 2px 8px rgba(0,0,0,0.35);75  }76 77  /* App grid (row of 4) */78  .app-row {79    position: absolute;80    top: 1500px;81    left: 0;82    width: 100%;83    display: flex;84    justify-content: space-around;85    padding: 0 60px;86    box-sizing: border-box;87  }88  .app {89    width: 200px;90    text-align: center;91  }92  .app .icon-wrap {93    width: 168px;94    height: 168px;95    background: #ffffff;96    border-radius: 50%;97    box-shadow: 0 6px 16px rgba(0,0,0,0.35);98    margin: 0 auto 28px;99    display: grid;100    place-items: center;101  }102  .app-label {103    font-size: 38px;104    font-weight: 500;105    color: #ffffff;106    text-shadow: 0 2px 8px rgba(0,0,0,0.35);107  }108 109  /* Dock row */110  .dock-row {111    position: absolute;112    top: 1800px;113    left: 0;114    width: 100%;115    padding: 0 60px;116    box-sizing: border-box;117    display: flex;118    justify-content: space-around;119  }120  .dock-icon {121    width: 146px;122    height: 146px;123    background: #ffffff;124    border-radius: 50%;125    box-shadow: 0 6px 16px rgba(0,0,0,0.35);126    display: grid;127    place-items: center;128  }129 130  /* Search bar */131  .search-bar {132    position: absolute;133    left: 60px;134    right: 60px;135    bottom: 190px;136    height: 158px;137    background: #ffffff;138    border-radius: 79px;139    box-shadow: 0 12px 30px rgba(0,0,0,0.45);140    display: flex;141    align-items: center;142    justify-content: space-between;143    padding: 0 36px;144    box-sizing: border-box;145  }146  .search-left {147    display: flex;148    align-items: center;149    gap: 26px;150  }151  .g-mark {152    width: 86px;153    height: 86px;154    border-radius: 43px;155    display: grid;156    place-items: center;157    overflow: hidden;158  }159  .search-actions {160    display: flex;161    gap: 26px;162    align-items: center;163  }164 165  /* Gesture bar */166  .gesture {167    position: absolute;168    left: 50%;169    transform: translateX(-50%);170    bottom: 90px;171    width: 340px;172    height: 16px;173    background: rgba(255,255,255,0.85);174    border-radius: 8px;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Wallpaper placeholder -->182  <div class="wallpaper">[IMG: Rocky Cliff Wallpaper]</div>183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">7:18</div>187    <div class="status-center">188      <span class="status-icon">189        <!-- small circle -->190        <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="6"/></svg>191      </span>192      <span class="status-icon">193        <!-- square -->194        <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>195      </span>196      <span class="status-icon">197        <!-- tiny m letter -->198        <svg width="34" height="28" viewBox="0 0 34 24">199          <path d="M2 20V4h4l5 6 5-6h4v16h-4V10l-5 6-5-6v10H2z" fill="#ffffff"/>200        </svg>201      </span>202      <span class="status-icon">203        <!-- small dot -->204        <svg width="12" height="12" viewBox="0 0 12 12" fill="#ffffff"><circle cx="6" cy="6" r="4"/></svg>205      </span>206    </div>207    <div class="status-right">208      <span class="status-icon">209        <!-- wifi/diamond-ish icon -->210        <svg width="38" height="28" viewBox="0 0 32 24">211          <path d="M16 2l12 10-12 10L4 12 16 2z" fill="#ffffff"/>212        </svg>213      </span>214      <span class="status-icon">215        <!-- battery -->216        <svg width="46" height="28" viewBox="0 0 46 24">217          <rect x="2" y="6" width="38" height="12" rx="3" fill="#ffffff"/>218          <rect x="42" y="9" width="4" height="6" rx="1" fill="#ffffff"/>219        </svg>220      </span>221    </div>222  </div>223 224  <!-- Date -->225  <div class="date">Thu, Sep 14</div>226 227  <!-- App row -->228  <div class="app-row">229    <!-- Play Store -->230    <div class="app">231      <div class="icon-wrap">232        <svg width="120" height="120" viewBox="0 0 120 120">233          <!-- triangle -->234          <polygon points="26,20 96,60 26,100" fill="#00C853"/>235          <!-- orange wing -->236          <polygon points="26,20 50,40 26,58" fill="#FF7043"/>237          <!-- blue wing -->238          <polygon points="26,62 50,80 26,100" fill="#42A5F5"/>239          <!-- yellow highlight -->240          <polygon points="50,40 76,54 50,68" fill="#FBC02D"/>241        </svg>242      </div>243      <div class="app-label">Play Store</div>244    </div>245 246    <!-- Gmail -->247    <div class="app">248      <div class="icon-wrap">249        <svg width="120" height="120" viewBox="0 0 120 120">250          <rect x="18" y="30" width="84" height="60" rx="14" fill="#FFFFFF"/>251          <path d="M18 40 L60 70 L102 40" stroke="#E53935" stroke-width="18" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252          <path d="M30 90 V42 L60 62 L90 42 V90" stroke="#1E88E5" stroke-width="0" fill="#FFFFFF"/>253          <!-- M outline -->254          <path d="M30 86 V42 L60 64 L90 42 V86" stroke="#43A047" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255        </svg>256      </div>257      <div class="app-label">Gmail</div>258    </div>259 260    <!-- Photos -->261    <div class="app">262      <div class="icon-wrap">263        <svg width="120" height="120" viewBox="0 0 120 120">264          <circle cx="60" cy="60" r="16" fill="#FFFFFF"/>265          <path d="M60 22 A38 38 0 0 1 98 60 H60 Z" fill="#FBC02D"/>266          <path d="M98 60 A38 38 0 0 1 60 98 V60 Z" fill="#43A047"/>267          <path d="M60 98 A38 38 0 0 1 22 60 H60 Z" fill="#1E88E5"/>268          <path d="M22 60 A38 38 0 0 1 60 22 V60 Z" fill="#E53935"/>269        </svg>270      </div>271      <div class="app-label">Photos</div>272    </div>273 274    <!-- YouTube -->275    <div class="app">276      <div class="icon-wrap">277        <svg width="120" height="120" viewBox="0 0 120 120">278          <rect x="18" y="36" width="84" height="48" rx="14" fill="#E53935"/>279          <polygon points="52,48 52,84 86,66" fill="#FFFFFF"/>280        </svg>281      </div>282      <div class="app-label">YouTube</div>283    </div>284  </div>285 286  <!-- Dock row icons -->287  <div class="dock-row">288    <!-- Phone -->289    <div class="dock-icon">290      <svg width="90" height="90" viewBox="0 0 90 90">291        <path d="M22 20 c12 22 26 36 48 48 l-10 10 c-6 4-16-2-26-12S22 46 18 40l4-20z" fill="#367BF5"/>292      </svg>293    </div>294 295    <!-- Messages -->296    <div class="dock-icon">297      <svg width="90" height="90" viewBox="0 0 90 90">298        <rect x="16" y="20" width="58" height="40" rx="14" fill="#4A7DF2"/>299        <polygon points="26,70 42,60 26,60" fill="#4A7DF2"/>300        <rect x="26" y="32" width="36" height="8" rx="4" fill="#FFFFFF" opacity="0.9"/>301      </svg>302    </div>303 304    <!-- Chrome -->305    <div class="dock-icon">306      <svg width="90" height="90" viewBox="0 0 90 90">307        <circle cx="45" cy="45" r="34" fill="#F44336"/>308        <path d="M45 11 A34 34 0 0 1 77 39 H45" fill="#FFC107"/>309        <path d="M77 39 A34 34 0 0 1 45 79 L45 39" fill="#4CAF50"/>310        <circle cx="45" cy="45" r="16" fill="#1E88E5"/>311        <circle cx="45" cy="45" r="10" fill="#82B1FF"/>312      </svg>313    </div>314 315    <!-- Camera -->316    <div class="dock-icon">317      <svg width="90" height="90" viewBox="0 0 90 90">318        <rect x="16" y="26" width="58" height="38" rx="10" fill="#7E7E7E"/>319        <rect x="26" y="18" width="20" height="12" rx="4" fill="#BDBDBD"/>320        <circle cx="45" cy="45" r="12" fill="#2E7D32"/>321        <circle cx="45" cy="45" r="6" fill="#81C784"/>322      </svg>323    </div>324  </div>325 326  <!-- Google Search bar -->327  <div class="search-bar">328    <div class="search-left">329      <div class="g-mark">330        <svg width="86" height="86" viewBox="0 0 24 24">331          <!-- Simplified multicolor G -->332          <path d="M12 2a10 10 0 1 0 0 20c2.7 0 4.9-.9 6.5-2.4l-3.3-3.3c-.9.6-2.1 1.1-3.2 1.1a6 6 0 1 1 0-12c1.7 0 3.1.6 4.1 1.5l-3.3 3.3H22V2h-2C18 3.4 15.2 2 12 2z" fill="#4285F4"/>333          <path d="M3.5 8.5A10 10 0 0 1 12 2v4C9.9 6 8.2 7 7 8.5z" fill="#EA4335"/>334          <path d="M7 15.5c1.2 1.5 2.9 2.5 5 2.5v4A10 10 0 0 1 3.5 15.5z" fill="#34A853"/>335          <path d="M16.2 8.9C15.3 8.1 14 7.6 12.5 7.6V4c2.7 0 5.2 1 6.9 2.7z" fill="#FBBC05"/>336        </svg>337      </div>338      <div style="font-size: 40px; color: #747474;">Search</div>339    </div>340    <div class="search-actions">341      <!-- Mic -->342      <svg width="64" height="64" viewBox="0 0 24 24">343        <rect x="8" y="4" width="8" height="12" rx="4" fill="#4285F4"/>344        <path d="M5 12a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5z" fill="#34A853"/>345        <rect x="11" y="17" width="2" height="4" fill="#FBBC05"/>346      </svg>347      <!-- Lens/Camera -->348      <svg width="64" height="64" viewBox="0 0 24 24">349        <rect x="4" y="6" width="16" height="12" rx="3" fill="#4285F4"/>350        <circle cx="12" cy="12" r="4" fill="#FFFFFF"/>351        <circle cx="12" cy="12" r="2" fill="#34A853"/>352      </svg>353    </div>354  </div>355 356  <!-- Bottom gesture bar -->357  <div class="gesture"></div>358 359</div>360</body>361</html>