GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background: radial-gradient(1200px 1200px at 60% 10%, #2a2a30, #151518 60%, #0f1013 100%);10    color:#fff;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; right:0; height:86px; padding:0 28px;16    display:flex; align-items:center; justify-content:space-between; font-weight:600;17    letter-spacing:1px; font-size:38px;18  }19  .sb-right{ display:flex; align-items:center; gap:24px; }20  .icon-sb svg{ height:34px; width:34px; fill:#fff; opacity:0.9; }21 22  /* App grid */23  .apps-grid{24    position:absolute; left:0; top:160px; width:100%;25    display:flex; flex-wrap:wrap;26  }27  .app{28    width:270px; height:230px; text-align:center; color:#eaeaea;29  }30  .app .icon{31    width:148px; height:148px; margin:0 auto; border-radius:50%;32    display:flex; align-items:center; justify-content:center;33    box-shadow:0 10px 22px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(255,255,255,0.06);34  }35  .app .label{36    margin-top:18px; font-size:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;37  }38 39  /* Specific icon colors */40  .reminder{ background: linear-gradient(160deg,#44c1c4,#2e8ea4); }41  .allrecipes{ background:#e18a2b; }42  .opentable{ background:#c4473e; }43  .kitchen{ background:#d2b536; }44  .deliveroo{ background:#5ccbbf; }45 46  .mini-mark{47    width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.15);48  }49 50  /* Dock */51  .dock{52    position:absolute; width:100%; left:0; bottom:230px;53    display:flex; justify-content:space-around; padding:0 60px;54  }55  .dock .dock-icon{56    width:150px; height:150px; background:#f4f5f7; border-radius:50%;57    display:flex; align-items:center; justify-content:center;58    box-shadow:0 12px 26px rgba(0,0,0,0.5);59  }60  .dock .dock-icon .ring{61    width:96px; height:96px; border-radius:50%; background:#2f6fe3;62  }63  .dock .dock-icon.chrome .ring{64    background: conic-gradient(#ea4335 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75% 100%);65  }66  .dock .dock-icon.camera .ring{ background:#7f8c99; }67  .dock .dock-icon.sms .ring{ background:#3b7cff; }68 69  /* Google pill/search at bottom (USB debugging prompt text inside for the screenshot feel) */70  .search-pill{71    position:absolute; left:50%; transform:translateX(-50%);72    bottom:120px; width:960px; height:120px; border-radius:70px;73    background:rgba(34,34,36,0.9); box-shadow:0 8px 24px rgba(0,0,0,0.6);74    display:flex; align-items:center; padding:0 28px; gap:20px;75    font-size:40px; color:#eaeaea;76  }77  .g-logo{78    width:84px; height:84px; border-radius:50%;79    background: conic-gradient(#4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);80    box-shadow: inset 0 0 0 8px #1f1f22;81    flex:0 0 auto;82  }83  .pill-spacer{ flex:1; }84  .pill-icon{85    width:84px; height:84px; border-radius:22px; background:#2a2b31;86    display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.1);87  }88  .pill-icon svg{ width:42px; height:42px; fill:#bfc7ff; opacity:0.9; }89 90  /* Gesture bar */91  .gesture{92    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);93    width:300px; height:10px; border-radius:8px; background:#e7e7ea; opacity:0.9;94  }95 96  /* Subtle grain overlay to mimic wallpaper */97  .grain::after{98    content:""; position:absolute; inset:0; pointer-events:none; opacity:0.08;99    background-image: radial-gradient(#000 1px, transparent 1px);100    background-size:3px 3px;101  }102</style>103</head>104<body>105<div id="render-target" class="grain">106 107  <!-- Status Bar -->108  <div class="status-bar">109    <div class="sb-left">9:27</div>110    <div class="sb-right">111      <div class="icon-sb" title="signal">112        <svg viewBox="0 0 24 24"><path d="M2 20h3v-6H2v6zm5 0h3v-9H7v9zm5 0h3V8h-3v12zm5 0h3V4h-3v16z"/></svg>113      </div>114      <div class="icon-sb" title="wifi">115        <svg viewBox="0 0 24 24"><path d="M12 20l3-3-3-3-3 3 3 3zm-9-9a15 15 0 0 1 18 0l-1.8 1.8a12.5 12.5 0 0 0-14.4 0L3 11zm3.6 3.6a10 10 0 0 1 12.8 0L17 16a7.5 7.5 0 0 0-10 0l1.6-1.4z"/></svg>116      </div>117      <div class="icon-sb" title="battery">118        <svg viewBox="0 0 32 24"><rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="#fff"/><rect x="4" y="6" width="18" height="12" fill="#0f0"/><rect x="26" y="8" width="4" height="8" rx="1" ry="1" fill="#fff"/></svg>119      </div>120    </div>121  </div>122 123  <!-- Apps Grid -->124  <div class="apps-grid">125    <!-- Reminder -->126    <div class="app">127      <div class="icon reminder">128        <!-- simple abstract stick figure -->129        <svg width="88" height="88" viewBox="0 0 24 24" style="fill:#102b2d;">130          <circle cx="9" cy="6" r="3" fill="#e6f7f7"/>131          <path d="M3 20a6 6 0 0 1 12 0H3z" fill="#c7f0f0"/>132          <rect x="14" y="5" width="7" height="4" rx="2" fill="#e6f7f7"/>133        </svg>134      </div>135      <div class="label">Reminder</div>136    </div>137 138    <!-- All Recipes -->139    <div class="app">140      <div class="icon allrecipes">141        <div class="mini-mark"></div>142      </div>143      <div class="label">All Recipes ...</div>144    </div>145 146    <!-- OpenTable -->147    <div class="app">148      <div class="icon opentable">149        <svg width="70" height="70" viewBox="0 0 24 24">150          <circle cx="7" cy="12" r="3" fill="#fff"/>151          <circle cx="16" cy="12" r="6" fill="none" stroke="#fff" stroke-width="2"/>152        </svg>153      </div>154      <div class="label">OpenTable</div>155    </div>156 157    <!-- Kitchen Stories -->158    <div class="app">159      <div class="icon kitchen">160        <svg width="80" height="80" viewBox="0 0 24 24">161          <path d="M7 5c2 2 2 6 0 8M12 5c2 2 2 6 0 8M17 5c2 2 2 6 0 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>162        </svg>163      </div>164      <div class="label">Kitchen Sto...</div>165    </div>166 167    <!-- Deliveroo (wraps to next row) -->168    <div class="app">169      <div class="icon deliveroo">170        <svg width="82" height="82" viewBox="0 0 24 24">171          <path d="M6 5l2 6 4-1 1 4-6 2-2-7z" fill="#e9fffb"/>172        </svg>173      </div>174      <div class="label">Deliveroo</div>175    </div>176  </div>177 178  <!-- Dock icons -->179  <div class="dock">180    <div class="dock-icon phone">181      <div class="ring"></div>182    </div>183    <div class="dock-icon sms">184      <div class="ring"></div>185    </div>186    <div class="dock-icon chrome">187      <div class="ring"></div>188    </div>189    <div class="dock-icon camera">190      <div class="ring"></div>191    </div>192  </div>193 194  <!-- Google search / prompt pill -->195  <div class="search-pill">196    <div class="g-logo"></div>197    <div style="opacity:0.95;">Allow USB debugging?</div>198    <div class="pill-spacer"></div>199    <div class="pill-icon" title="Voice">200      <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v4a4 4 0 1 0 8 0V7a4 4 0 0 0-4-4zm-1 16.9V22h2v-2.1A7 7 0 0 0 19 13h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9z"/></svg>201    </div>202    <div class="pill-icon" title="Lens">203      <svg viewBox="0 0 24 24"><path d="M9 3h6a6 6 0 0 1 6 6v6h-3V9a3 3 0 0 0-3-3H9V3zM3 9h3v6a3 3 0 0 0 3 3h6v3H9a6 6 0 0 1-6-6V9z"/></svg>204    </div>205  </div>206 207  <!-- Gesture handle -->208  <div class="gesture"></div>209</div>210</body>211</html>