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:12      radial-gradient(1200px 1200px at 20% 0%, #2b2f38 0%, #1b1f26 55%, #14181d 100%);13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0; height: 100px;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 34px; font-weight: 500; color: #eaeaea;21  }22  .status-bar .time { font-size: 36px; letter-spacing: 1px; }23  .status-icons { display: flex; align-items: center; gap: 26px; }24  .status-icons svg { width: 34px; height: 34px; fill: #eaeaea; }25 26  /* App grid */27  .apps-grid {28    position: absolute; left: 60px; right: 60px; top: 200px;29    display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 70px; grid-column-gap: 30px;30  }31  .app { text-align: center; color: #e9e9e9; position: relative; }32  .icon-circle {33    width: 170px; height: 170px; margin: 0 auto; border-radius: 50%;34    display: flex; align-items: center; justify-content: center;35    font-weight: 700; color: #fff; font-size: 44px; letter-spacing: .5px;36    box-shadow: 0 6px 14px rgba(0,0,0,.35) inset, 0 2px 10px rgba(0,0,0,.35);37  }38  .label {39    margin-top: 18px; font-size: 34px; line-height: 1.2; white-space: nowrap;40    overflow: hidden; text-overflow: ellipsis; padding: 0 8px; opacity: .95;41  }42  .badge {43    position: absolute; width: 26px; height: 26px; border-radius: 50%;44    background: #d9b8e9; right: 80px; top: -6px; border: 4px solid rgba(0,0,0,.25);45    box-shadow: 0 0 0 2px #2b2f38;46  }47 48  /* Brand colors (approx) */49  .temu { background: #f28b1a; }50  .ikea { background: #f0d446; color: #15377a; font-weight: 900; }51  .ib { background: #ffffff; color: #ef6d3c; border: 4px solid rgba(0,0,0,.08); }52  .onshop { background: #e74a3b; }53  .ware { background: #6a56d9; }54  .dh { background: linear-gradient(#f6d96b, #eaa74f); color: #4a3a10; font-weight: 800; }55  .bang { background: linear-gradient(180deg, #ffb25a, #e86d3e); }56  .hyuga { background: #eaa334; color: #1f2a7a; font-weight: 900; }57  .voice { background: #bfe0ff; color: #1e65cc; }58 59  /* Dock */60  .dock {61    position: absolute; left: 90px; right: 90px; bottom: 360px;62    display: flex; justify-content: space-between; align-items: center;63  }64  .dock .dock-icon {65    width: 130px; height: 130px; border-radius: 50%; background: #ffffff;66    display: flex; align-items: center; justify-content: center;67    box-shadow: 0 6px 18px rgba(0,0,0,.35);68  }69  .dock .dock-icon.alt { background: #d9ecff; border: 6px solid #ffffff30; }70  .dock svg { width: 66px; height: 66px; }71 72  /* Search bar */73  .search-bar {74    position: absolute; left: 60px; right: 60px; bottom: 160px;75    height: 120px; border-radius: 60px; background: #2a2c31;76    display: flex; align-items: center; padding: 0 34px; box-shadow: 0 8px 18px rgba(0,0,0,.35) inset;77  }78  .g-logo {79    width: 70px; height: 70px; border-radius: 50%;80    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 40px;81    color: #fff; background: conic-gradient(#4285f4 0 25%, #ea4335 0 50%, #fbbc05 0 75%, #34a853 0 100%);82    margin-right: 22px;83  }84  .search-placeholder {85    flex: 1; color: #bdbdbd; font-size: 36px; opacity: .9;86  }87  .search-actions { display: flex; gap: 28px; }88  .search-actions .btn {89    width: 70px; height: 70px; border-radius: 50%; background: #3a3d44;90    display: flex; align-items: center; justify-content: center;91  }92  .search-actions svg { width: 40px; height: 40px; fill: #e7e7e7; }93 94  /* Gesture bar */95  .gesture {96    position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);97    width: 320px; height: 12px; border-radius: 12px; background: #f2f2f2; opacity: .9;98  }99 100  /* Small helper text inside icons for brand look */101  .ikea span { background: #15377a; color: #f0d446; padding: 8px 18px; border-radius: 16px; font-size: 36px; }102  .ib span { border: 4px solid #ef6d3c; border-radius: 20px; padding: 2px 10px; font-size: 42px; }103  .onshop span, .bang span, .hyuga span, .temu span, .dh span { font-size: 38px; }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status bar -->110  <div class="status-bar">111    <div class="time">8:41</div>112    <div class="status-icons">113      <!-- Alarm -->114      <svg viewBox="0 0 24 24"><path d="M7 3 2 6l1 2 6-3-2-2zm10 0-2 2 6 3 1-2-5-3zM12 6a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 3a5 5 0 0 1 5 5h-3a2 2 0 1 0-4 0H7a5 5 0 0 1 5-5z"/></svg>115      <!-- Notifications off (simple bell) -->116      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zM4 17h16l-2-2v-5a6 6 0 0 0-12 0v5l-2 2z"/></svg>117      <!-- Google G (dot) -->118      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>119      <!-- Wifi -->120      <svg viewBox="0 0 24 24"><path d="M12 18l3 3-3 3-3-3 3-3zm0-5c2.5 0 4.8 1 6.7 2.8l-1.7 1.7C15.9 16 14 15.3 12 15.3s-3.9.7-5 2.2L5.3 15.8C7.2 14 9.5 13 12 13z"/></svg>121      <!-- Signal -->122      <svg viewBox="0 0 24 24"><path d="M4 20h2V10H4v10zm4 0h2V6H8v14zm4 0h2V4h-2v16zm4 0h2V14h-2v6z"/></svg>123      <!-- Battery -->124      <svg viewBox="0 0 24 24"><path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2h-2v-2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h8V4h2v2z"/></svg>125    </div>126  </div>127 128  <!-- App icons grid -->129  <div class="apps-grid">130    <div class="app">131      <div class="icon-circle temu"><span>TEMU</span></div>132      <div class="label">Temu</div>133    </div>134 135    <div class="app">136      <div class="icon-circle ikea"><span>IKEA</span></div>137      <div class="label">IKEA</div>138    </div>139 140    <div class="app">141      <div class="icon-circle ib"><span>ib</span></div>142      <span class="badge"></span>143      <div class="label">Industrybu...</div>144    </div>145 146    <div class="app">147      <div class="icon-circle onshop"><span>Shop</span></div>148      <div class="label">Online Sho...</div>149    </div>150 151    <div class="app">152      <div class="icon-circle ware"><span>W</span></div>153      <div class="label">MyWareho...</div>154    </div>155 156    <div class="app">157      <div class="icon-circle dh"><span>DH</span></div>158      <span class="badge"></span>159      <div class="label">DHgate</div>160    </div>161 162    <div class="app">163      <div class="icon-circle bang"><span>:)</span></div>164      <div class="label">Banggood</div>165    </div>166 167    <div class="app">168      <div class="icon-circle hyuga"><span>H</span></div>169      <div class="label">HyugaLife</div>170    </div>171 172    <div class="app">173      <div class="icon-circle voice">174        <!-- Microphone glyph -->175        <svg viewBox="0 0 24 24" width="84" height="84" fill="#1e65cc">176          <path d="M12 14a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v4a4 4 0 0 0 4 4zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-6 6v3h-2v-3a6 6 0 0 1-6-6z"/>177        </svg>178      </div>179      <div class="label">Easy Voice ...</div>180    </div>181  </div>182 183  <!-- Dock icons -->184  <div class="dock">185    <div class="dock-icon">186      <svg viewBox="0 0 24 24" fill="#3d6eea">187        <path d="M6.6 3.8 4.9 5.5c-.9.9-1 2.3-.3 3.4 1.2 2 3 3.9 5 5.1 1.1.7 2.5.6 3.4-.3l1.7-1.7c.4-.4.4-1 .1-1.5l-2-2c-.4-.4-1-.5-1.5-.1l-1.2.8c-.6.4-1.4.3-1.9-.2L6.8 7c-.5-.5-.6-1.3-.2-1.9l.8-1.3c.3-.5.2-1.1-.2-1.5l-1-1C6 1 5.4 1 5 1.3z"/>188      </svg>189    </div>190    <div class="dock-icon alt">191      <svg viewBox="0 0 24 24" fill="#1e65cc">192        <path d="M12 2a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3zm-5 9h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V21h-2v-3.1A7 7 0 0 1 7 11z"/>193      </svg>194    </div>195    <div class="dock-icon">196      <svg viewBox="0 0 24 24">197        <circle cx="12" cy="12" r="10" fill="#4caf50"/>198        <path d="M12 2a10 10 0 0 1 8.7 5.1l-4.6 1A6.5 6.5 0 0 0 12 6z" fill="#f44336"/>199        <path d="M22 12a10 10 0 0 1-5.2 8.7l-1.2-4.6A6.5 6.5 0 0 0 18 12z" fill="#ff9800"/>200        <circle cx="12" cy="12" r="4" fill="#2196f3"/>201      </svg>202    </div>203    <div class="dock-icon">204      <svg viewBox="0 0 24 24" fill="#3a3a3a">205        <path d="M7 7h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3z"/>206        <rect x="9" y="5" width="6" height="3" rx="1" fill="#3a3a3a"/>207        <circle cx="12" cy="13" r="4" fill="#8ab4f8"/>208      </svg>209    </div>210  </div>211 212  <!-- Search bar -->213  <div class="search-bar">214    <div class="g-logo">G</div>215    <div class="search-placeholder">Search</div>216    <div class="search-actions">217      <div class="btn">218        <svg viewBox="0 0 24 24"><path d="M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-6 6v2h-2v-2a6 6 0 0 1-6-6z"/></svg>219      </div>220      <div class="btn">221        <svg viewBox="0 0 24 24"><path d="M4 7h4l2-2h4l2 2h4v12H4zM12 9a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>222      </div>223    </div>224  </div>225 226  <!-- Gesture navigation bar -->227  <div class="gesture"></div>228</div>229</body>230</html>