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 UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background:11      radial-gradient(1200px 1200px at 20% 0%, #1d1f22 0%, #0f1013 60%, #0b0c0f 100%),12      repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 4px, transparent 10px);13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; width: 100%; height: 74px; padding: 18px 28px;19    box-sizing: border-box; font-weight: 500; font-size: 32px; letter-spacing: 0.2px;20    display: flex; align-items: center; justify-content: space-between;21  }22  .sb-right { display: flex; align-items: center; gap: 26px; }23  .sb-icon { width: 34px; height: 34px; opacity: 0.88; }24  .signal-bars { display: inline-block; width: 40px; height: 34px; position: relative; }25  .signal-bars span { position: absolute; bottom: 0; width: 6px; background: #fff; border-radius: 2px; }26  .signal-bars span:nth-child(1){ left:0; height:12px; opacity:.55}27  .signal-bars span:nth-child(2){ left:10px; height:18px; opacity:.65}28  .signal-bars span:nth-child(3){ left:20px; height:24px; opacity:.8}29  .signal-bars span:nth-child(4){ left:30px; height:30px; opacity:1}30 31  /* Weather/date widget */32  .weather {33    position: absolute; left: 72px; top: 160px; color: #fff;34  }35  .weather .date { font-size: 64px; font-weight: 500; margin-bottom: 20px; }36  .weather-row { display: flex; align-items: center; gap: 22px; }37  .wx-icon {38    width: 48px; height: 48px; border-radius: 50%; background: #f5cc4b; position: relative;39    box-shadow: 0 2px 0 rgba(0,0,0,.2) inset;40  }41  .wx-icon:after{ content:""; position:absolute; left:12px; bottom:8px; width:28px; height:16px; border-radius:10px; background:#fff; }42  .weather .temp { font-size: 44px; opacity: .95; }43  .weather .desc { font-size: 44px; opacity: .9; }44  .dot { margin: 0 10px; opacity: .7; }45 46  /* App icons grid */47  .row { position: absolute; left: 60px; right: 60px; display: flex; gap: 48px; }48  .row-one { top: 1150px; }49  .row-two { top: 1420px; justify-content: space-between; }50  .dock { top: 1760px; justify-content: space-between; padding: 0 30px; }51 52  .app { width: 210px; text-align: center; color: #fff; }53  .icon {54    width: 160px; height: 160px; border-radius: 50%; margin: 0 auto 22px auto;55    display: flex; align-items: center; justify-content: center; background: #1c1f24;56    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,255,255,0.06);57  }58  .label { font-size: 36px; opacity: .95; }59 60  /* Simple SVGs for icons */61  .icon svg { width: 120px; height: 120px; }62 63  /* Search bar at bottom */64  .search-bar {65    position: absolute; left: 90px; bottom: 200px; width: 900px; height: 110px;66    background: rgba(40,43,47,0.92); border-radius: 60px;67    display: flex; align-items: center; justify-content: space-between; padding: 0 34px;68    box-shadow: 0 6px 30px rgba(0,0,0,.5);69  }70  .search-left { display: flex; align-items: center; gap: 18px; }71  .search-g {72    width: 64px; height: 64px; border-radius: 50%; background: #2a2d31;73    display: flex; align-items: center; justify-content: center; font-weight: 700; color: #4caf50; font-size: 32px;74    box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);75  }76  .search-placeholder { color: #cfd8dc; font-size: 34px; opacity: .8; }77  .search-right { display: flex; align-items: center; gap: 24px; }78  .pill-indicator {79    position: absolute; left: 50%; transform: translateX(-50%);80    bottom: 36px; width: 200px; height: 12px; background: #e8e8e8; border-radius: 10px; opacity: 0.9;81  }82 83  /* Helper tiny icons in search bar */84  .small-icon { width: 44px; height: 44px; border-radius: 50%; background: #2a2d31; display:flex; align-items:center; justify-content:center; }85  .small-icon svg { width: 26px; height: 26px; }86 87  /* Accessibility: focus outlines removed for this mock */88  .icon, .search-g, .small-icon { outline: none; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div>10:07</div>97    <div class="sb-right">98      <div class="sb-icon signal-bars">99        <span></span><span></span><span></span><span></span>100      </div>101      <!-- Wi‑Fi -->102      <svg class="sb-icon" viewBox="0 0 24 24">103        <path d="M12 20l-2.2-2.2a3.1 3.1 0 014.4 0L12 20zm6-5.5a7.6 7.6 0 00-12 0l-1.8-1.8a10 10 0 0115.6 0L18 14.5zm-3-3a12 12 0 00-6 0l-1.8-1.8a14.4 14.4 0 019.6 0L15 12z" fill="#ffffff"/>104      </svg>105      <!-- Battery -->106      <svg class="sb-icon" viewBox="0 0 36 24">107        <rect x="2" y="4" width="28" height="16" rx="3" ry="3" fill="#fff"/>108        <rect x="4" y="6" width="22" height="12" rx="2" ry="2" fill="#111"/>109        <rect x="30" y="8" width="4" height="8" rx="2" fill="#fff"/>110      </svg>111    </div>112  </div>113 114  <!-- Weather widget -->115  <div class="weather">116    <div class="date">Thu, Aug 10</div>117    <div class="weather-row">118      <div class="wx-icon"></div>119      <div class="temp">30°C<span class="dot">·</span>Today 34° / 27°<span class="dot">·</span></div>120      <div class="desc">Partly cloudy</div>121    </div>122  </div>123 124  <!-- Row one: single Google icon -->125  <div class="row row-one">126    <div class="app">127      <div class="icon" style="background:#ffffff;">128        <!-- Simplified Google "G" -->129        <svg viewBox="0 0 100 100">130          <circle cx="50" cy="50" r="47" fill="#ffffff"/>131          <path d="M50 25a25 25 0 110 50 25 25 0 010-50z" fill="none" stroke="#4285F4" stroke-width="16"/>132          <path d="M50 25a25 25 0 0117.7 7.3" stroke="#34A853" stroke-width="16" fill="none"/>133          <path d="M67.7 32.3A25 25 0 0155 75" stroke="#FBBC05" stroke-width="16" fill="none"/>134          <path d="M55 75A25 25 0 0130 57" stroke="#EA4335" stroke-width="16" fill="none"/>135          <path d="M62 52h-12" stroke="#4285F4" stroke-width="12" />136        </svg>137      </div>138      <div class="label">Google</div>139    </div>140  </div>141 142  <!-- Row two: four popular apps -->143  <div class="row row-two">144    <!-- Play Store -->145    <div class="app">146      <div class="icon">147        <svg viewBox="0 0 100 100">148          <polygon points="24,50 60,24 60,76" fill="#34A853"/>149          <polygon points="24,50 60,24 72,34 40,50" fill="#4285F4"/>150          <polygon points="24,50 40,50 72,66 60,76" fill="#EA4335"/>151          <polygon points="40,50 72,34 72,66" fill="#FBBC05" opacity="0.9"/>152        </svg>153      </div>154      <div class="label">Play Store</div>155    </div>156 157    <!-- Gmail -->158    <div class="app">159      <div class="icon" style="background:#ffffff;">160        <svg viewBox="0 0 100 100">161          <rect x="18" y="30" width="64" height="40" rx="8" fill="#ffffff" stroke="#c8c8c8" stroke-width="4"/>162          <path d="M18 30 L50 55 L82 30" stroke="#EA4335" stroke-width="12" fill="none"/>163          <path d="M24 70 V36 L50 55 L76 36 V70" stroke="#34A853" stroke-width="10" fill="none"/>164        </svg>165      </div>166      <div class="label">Gmail</div>167    </div>168 169    <!-- Photos -->170    <div class="app">171      <div class="icon" style="background:#ffffff;">172        <svg viewBox="0 0 100 100">173          <path d="M50 18a20 20 0 0120 20H50z" fill="#FBBC05"/>174          <path d="M82 50a20 20 0 01-20 20V50z" fill="#EA4335"/>175          <path d="M50 82a20 20 0 01-20-20H50z" fill="#34A853"/>176          <path d="M18 50a20 20 0 0120-20v20z" fill="#4285F4"/>177          <circle cx="50" cy="50" r="6" fill="#ffffff"/>178        </svg>179      </div>180      <div class="label">Photos</div>181    </div>182 183    <!-- YouTube -->184    <div class="app">185      <div class="icon" style="background:#ffffff;">186        <svg viewBox="0 0 100 100">187          <rect x="20" y="30" width="60" height="40" rx="12" fill="#ff3b30"/>188          <polygon points="45,40 45,60 65,50" fill="#ffffff"/>189        </svg>190      </div>191      <div class="label">YouTube</div>192    </div>193  </div>194 195  <!-- Bottom dock -->196  <div class="row dock">197    <!-- Phone -->198    <div class="app">199      <div class="icon" style="background:#2b6ef5;">200        <svg viewBox="0 0 100 100">201          <path d="M30 28c6-6 12-6 16-2l6 6c4 4 4 10-2 16l-4 4c10 12 20 18 26 20l6-6c4-4 10-2 14 2l4 4c4 4 4 10-2 16-10 8-34-6-56-28S22 38 30 28z" fill="#ffffff" opacity="0.85"/>202        </svg>203      </div>204    </div>205 206    <!-- Messages -->207    <div class="app">208      <div class="icon" style="background:#4285F4;">209        <svg viewBox="0 0 100 100">210          <rect x="20" y="26" width="60" height="40" rx="12" fill="#ffffff"/>211          <polygon points="30,66 42,66 30,78" fill="#ffffff"/>212        </svg>213      </div>214    </div>215 216    <!-- Chrome -->217    <div class="app">218      <div class="icon" style="background:#ffffff;">219        <svg viewBox="0 0 100 100">220          <circle cx="50" cy="50" r="40" fill="#4285F4" opacity="0.1"/>221          <path d="M50 10a40 40 0 0134 20H50z" fill="#EA4335"/>222          <path d="M84 30a40 40 0 01-12 52l-22-38z" fill="#FBBC05"/>223          <path d="M22 82A40 40 0 0130 30l28 14z" fill="#34A853"/>224          <circle cx="50" cy="50" r="18" fill="#4285F4"/>225          <circle cx="50" cy="50" r="10" fill="#ffffff"/>226        </svg>227      </div>228    </div>229 230    <!-- Camera -->231    <div class="app">232      <div class="icon" style="background:#2e3136;">233        <svg viewBox="0 0 100 100">234          <rect x="20" y="32" width="60" height="36" rx="8" fill="#9e9e9e"/>235          <rect x="26" y="38" width="48" height="24" rx="6" fill="#616161"/>236          <circle cx="50" cy="50" r="10" fill="#90caf9"/>237          <rect x="34" y="24" width="20" height="8" rx="3" fill="#757575"/>238        </svg>239      </div>240    </div>241  </div>242 243  <!-- Google Search bar -->244  <div class="search-bar">245    <div class="search-left">246      <div class="search-g">G</div>247      <div class="search-placeholder">Search</div>248    </div>249    <div class="search-right">250      <div class="small-icon">251        <!-- Mic -->252        <svg viewBox="0 0 24 24">253          <path d="M12 3a4 4 0 014 4v6a4 4 0 11-8 0V7a4 4 0 014-4z" fill="#ff5252"/>254          <path d="M5 11a7 7 0 0014 0h-2a5 5 0 01-10 0H5z" fill="#ffffff"/>255        </svg>256      </div>257      <div class="small-icon">258        <!-- Camera/Lens -->259        <svg viewBox="0 0 24 24">260          <rect x="3" y="6" width="18" height="12" rx="3" fill="#4caf50"/>261          <circle cx="12" cy="12" r="4" fill="#ffffff"/>262        </svg>263      </div>264    </div>265  </div>266 267  <!-- Bottom navigation pill indicator -->268  <div class="pill-indicator"></div>269 270</div>271</body>272</html>