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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(180deg, #e9eef7 0%, #d7e5fb 35%, #0e1726 60%, #07070d 100%);12  }13 14  /* Status bar */15  .statusbar {16    position: absolute; top: 0; left: 0; width: 100%; height: 120px;17    padding: 0 40px; display: flex; align-items: center; justify-content: space-between;18    color: #ffffff; opacity: 0.95;19  }20  .statusbar .time { font-size: 44px; font-weight: 500; letter-spacing: 1px; }21  .statusbar .right { display: flex; gap: 24px; align-items: center; }22  .statusbar svg { width: 36px; height: 36px; fill: #fff; opacity: 0.9; }23 24  /* Wallpaper decorative shapes */25  .wallpaper-shape {26    position: absolute; top: 360px; right: -120px; width: 1000px; height: 780px;27    background: radial-gradient(ellipse at 30% 20%, rgba(160,190,240,0.9) 0%, rgba(130,170,230,0.85) 45%, rgba(10,15,25,0.0) 80%);28  }29  .dark-slope {30    position: absolute; top: 1000px; left: -100px; width: 1400px; height: 900px;31    background: radial-gradient(ellipse at 60% 20%, rgba(28,34,48,0.0) 40%, rgba(5,6,12,0.95) 88%);32  }33 34  /* Single app icon (InstaShop) */35  .app {36    position: absolute; left: 120px; top: 260px; text-align: center; color: #fff;37  }38  .app .icon {39    width: 170px; height: 170px; border-radius: 50%; background: #d74f63;40    display: flex; align-items: center; justify-content: center;41    box-shadow: 0 10px 24px rgba(0,0,0,0.25);42  }43  .app .label {44    margin-top: 22px; font-size: 40px; font-weight: 500;45    text-shadow: 0 3px 8px rgba(0,0,0,0.45); opacity: 0.95;46  }47 48  /* Row of apps above dock */49  .apps-row {50    position: absolute; bottom: 640px; left: 0; width: 100%;51    display: flex; justify-content: space-around; align-items: center; padding: 0 60px;52  }53  .app-wrap { text-align: center; color: #fff; }54  .big-icon {55    width: 150px; height: 150px; border-radius: 50%; background: #fff;56    display: flex; align-items: center; justify-content: center;57    box-shadow: 0 6px 16px rgba(0,0,0,0.35);58  }59  .app-wrap .text {60    margin-top: 26px; font-size: 38px;61    text-shadow: 0 3px 8px rgba(0,0,0,0.5);62  }63 64  /* Dock row */65  .dock {66    position: absolute; bottom: 440px; left: 0; width: 100%;67    display: flex; justify-content: space-around; align-items: center; padding: 0 120px;68  }69  .dock .big-icon { width: 145px; height: 145px; border-radius: 50%; background: #fff; }70 71  /* Search bar dock */72  .search {73    position: absolute; bottom: 270px; left: 60px; width: 960px; height: 120px;74    background: #2f3135; border-radius: 60px; box-shadow: 0 12px 28px rgba(0,0,0,0.45);75    display: flex; align-items: center; justify-content: space-between; padding: 0 36px;76  }77  .search-left { display: flex; align-items: center; gap: 24px; color: #d1d3d7; font-size: 42px; }78  .search .badge { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }79  .badge.g { background: #fff; }80  .search-right { display: flex; gap: 26px; align-items: center; }81  .search svg { width: 54px; height: 54px; fill: #bfc3c9; }82 83  /* Navigation gesture pill */84  .pill { position: absolute; bottom: 160px; left: 390px; width: 300px; height: 16px; border-radius: 16px; background: #ffffff; opacity: 0.8; }85 86  /* Simple decorative logos inside icons */87  .playstore-triangle { width: 0; height: 0; border-left: 34px solid #34a853; border-right: 34px solid transparent; border-bottom: 60px solid #4285f4; transform: rotate(20deg); }88  .photos-pinwheel { width: 90px; height: 90px; position: relative; }89  .photos-pinwheel div { position: absolute; width: 42px; height: 42px; border-radius: 50%; }90  .photos-pinwheel .c1 { background: #ea4335; top: 0; left: 24px; }91  .photos-pinwheel .c2 { background: #fbbc05; left: 48px; top: 24px; }92  .photos-pinwheel .c3 { background: #34a853; top: 48px; left: 24px; }93  .photos-pinwheel .c4 { background: #4285f4; top: 24px; left: 0; }94  .gmail-m { width: 100px; height: 70px; border: 8px solid #ea4335; border-radius: 12px; position: relative; }95  .gmail-m:before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 0; border-top: 18px solid #fbbc05; border-left: 18px solid transparent; border-right: 18px solid transparent; }96  .youtube-play { width: 100px; height: 70px; background: #ff0000; border-radius: 16px; position: relative; }97  .youtube-play:before { content: ""; position: absolute; left: 36px; top: 18px; border-left: 28px solid #fff; border-top: 18px solid transparent; border-bottom: 18px solid transparent; }98  .phone-shape { width: 70px; height: 70px; border-radius: 18px; background: #4285f4; }99  .msg-bubble { width: 78px; height: 58px; border-radius: 18px; background: #5a78ff; }100  .chrome { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#ea4335 0 33%, #fbbc05 33% 66%, #34a853 66% 100%); position: relative; }101  .chrome:before { content: ""; position: absolute; top: 22px; left: 22px; width: 56px; height: 56px; border-radius: 50%; background: #4285f4; }102  .camera-shape { width: 90px; height: 60px; border-radius: 12px; background: #8aa0ff; position: relative; }103  .camera-shape:before { content: ""; position: absolute; top: 8px; left: 28px; width: 32px; height: 32px; border-radius: 50%; background: #fff; }104</style>105</head>106<body>107<div id="render-target">108  <div class="wallpaper-shape"></div>109  <div class="dark-slope"></div>110 111  <!-- Status bar -->112  <div class="statusbar">113    <div class="time">9:18</div>114    <div class="right">115      <!-- Wi‑Fi (simplified) -->116      <svg viewBox="0 0 24 24" aria-label="wifi">117        <path d="M12 20l-2-2h4l-2 2zm6-6l-6 6-6-6a10 10 0 0112 0z"/>118      </svg>119      <!-- Battery -->120      <svg viewBox="0 0 24 24" aria-label="battery">121        <path d="M2 8h17v8H2V8zm19 3h1v2h-1v-2z"/>122      </svg>123    </div>124  </div>125 126  <!-- InstaShop icon with label -->127  <div class="app">128    <div class="icon">129      <svg viewBox="0 0 64 64" width="90" height="90" aria-label="basket">130        <path d="M16 28h32l-4 20H20l-4-20z" fill="#fff" opacity="0.95"/>131        <path d="M24 18c0-6 16-6 16 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>132        <path d="M24 34v10M30 34v10M36 34v10M42 34v10" stroke="#d74f63" stroke-width="4"/>133      </svg>134    </div>135    <div class="label">InstaShop</div>136  </div>137 138  <!-- Row of commonly used apps -->139  <div class="apps-row">140    <div class="app-wrap">141      <div class="big-icon">142        <div class="playstore-triangle"></div>143      </div>144      <div class="text">Play Store</div>145    </div>146    <div class="app-wrap">147      <div class="big-icon">148        <div class="photos-pinwheel">149          <div class="c1"></div><div class="c2"></div><div class="c3"></div><div class="c4"></div>150        </div>151      </div>152      <div class="text">Photos</div>153    </div>154    <div class="app-wrap">155      <div class="big-icon">156        <div class="gmail-m"></div>157      </div>158      <div class="text">Gmail</div>159    </div>160    <div class="app-wrap">161      <div class="big-icon">162        <div class="youtube-play"></div>163      </div>164      <div class="text">YouTube</div>165    </div>166  </div>167 168  <!-- Dock icons -->169  <div class="dock">170    <div class="big-icon"><div class="phone-shape"></div></div>171    <div class="big-icon"><div class="msg-bubble"></div></div>172    <div class="big-icon"><div class="chrome"></div></div>173    <div class="big-icon"><div class="camera-shape"></div></div>174  </div>175 176  <!-- Search bar -->177  <div class="search">178    <div class="search-left">179      <div class="badge g">180        <svg viewBox="0 0 24 24" width="40" height="40" aria-label="Google G">181          <path d="M12 4a8 8 0 108 8h-8V9h11a11 11 0 11-11-5z" fill="#4285f4"/>182        </svg>183      </div>184      <span>Search</span>185    </div>186    <div class="search-right">187      <svg viewBox="0 0 24 24" aria-label="mic">188        <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0h2a3 3 0 006 0h2zm-5 6v3h-2v-3h2z"/>189      </svg>190      <svg viewBox="0 0 24 24" aria-label="lens">191        <path d="M7 7h3l1-2h6l1 2h3v12H4V7h3zm8 5a3 3 0 11-6 0 3 3 0 016 0z"/>192      </svg>193    </div>194  </div>195 196  <!-- Navigation gesture pill -->197  <div class="pill"></div>198</div>199</body>200</html>