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>Amazon Search Suggestions - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(180deg, #a9dcd4 0%, #bfe6de 40%, #ffffff 40%);14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    color: #1a1a1a;28    font-size: 40px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .icon-dot {37    width: 18px;38    height: 18px;39    background: #2f2f2f;40    border-radius: 50%;41    display: inline-block;42  }43  .icon-battery {44    width: 40px;45    height: 20px;46    border: 3px solid #2f2f2f;47    border-radius: 4px;48    position: relative;49  }50  .icon-battery::after {51    content: "";52    position: absolute;53    right: -8px;54    top: 5px;55    width: 6px;56    height: 10px;57    background: #2f2f2f;58    border-radius: 1px;59  }60 61  /* Search area */62  .search-area {63    position: absolute;64    top: 90px;65    left: 0;66    width: 1080px;67    height: 160px;68    display: flex;69    align-items: center;70    padding: 0 24px;71    box-sizing: border-box;72  }73  .back-btn {74    width: 100px;75    height: 100px;76    display: flex;77    align-items: center;78    justify-content: center;79    margin-right: 10px;80  }81  .search-box {82    flex: 1;83    height: 120px;84    background: #ffffff;85    border-radius: 24px;86    box-shadow: 0 0 0 2px rgba(0,0,0,0.06) inset;87    display: flex;88    align-items: center;89    padding: 0 34px;90    box-sizing: border-box;91  }92  .search-icon {93    width: 54px;94    height: 54px;95    margin-right: 20px;96  }97  .search-placeholder {98    font-size: 42px;99    color: #3a3a3a;100  }101 102  /* Suggestions list background */103  .suggestions {104    position: absolute;105    top: 250px;106    left: 0;107    width: 1080px;108    bottom: 0;109    background: #ffffff;110  }111  .suggestion-item {112    display: flex;113    align-items: center;114    justify-content: space-between;115    padding: 36px 36px;116    border-bottom: 1px solid #e6e6e6;117    font-size: 54px;118    color: #202020;119    letter-spacing: 0.2px;120  }121  .suggestion-item .light {122    font-weight: 500;123  }124  .suggestion-item .bold {125    font-weight: 700;126  }127  .right-arrow {128    width: 48px;129    height: 48px;130    opacity: 0.6;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status bar -->138  <div class="status-bar">139    <div>5:43</div>140    <div class="status-icons">141      <span class="icon-dot"></span>142      <span style="font-size: 36px; color:#2f2f2f;">42°</span>143      <span class="icon-dot" style="width:22px;height:22px;"></span>144      <span class="icon-dot"></span>145      <span class="icon-dot"></span>146      <span class="icon-dot"></span>147      <div class="icon-battery"></div>148    </div>149  </div>150 151  <!-- Search area -->152  <div class="search-area">153    <div class="back-btn">154      <svg width="64" height="64" viewBox="0 0 24 24">155        <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>156      </svg>157    </div>158    <div class="search-box">159      <svg class="search-icon" viewBox="0 0 24 24">160        <circle cx="10" cy="10" r="7" fill="none" stroke="#333" stroke-width="2"/>161        <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#333" stroke-width="2" stroke-linecap="round"/>162      </svg>163      <div class="search-placeholder">Search Amazon.in</div>164    </div>165  </div>166 167  <!-- Suggestions list -->168  <div class="suggestions">169    <div class="suggestion-item">170      <div><span class="light">women formal shoes</span></div>171      <svg class="right-arrow" viewBox="0 0 24 24">172        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174    </div>175 176    <div class="suggestion-item">177      <div><span class="light">women formal shoes</span> <span class="bold">black</span></div>178      <svg class="right-arrow" viewBox="0 0 24 24">179        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>180      </svg>181    </div>182 183    <div class="suggestion-item">184      <div><span class="light">women formal shoes</span> <span class="bold">with heels</span></div>185      <svg class="right-arrow" viewBox="0 0 24 24">186        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188    </div>189 190    <div class="suggestion-item">191      <div><span class="light">women formal shoes</span> <span class="bold">metro</span></div>192      <svg class="right-arrow" viewBox="0 0 24 24">193        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>194      </svg>195    </div>196 197    <div class="suggestion-item">198      <div><span class="light">women formal shoes</span> <span class="bold">for office</span></div>199      <svg class="right-arrow" viewBox="0 0 24 24">200        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>201      </svg>202    </div>203 204    <div class="suggestion-item">205      <div><span class="light">women formal shoes</span> <span class="bold">bata</span></div>206      <svg class="right-arrow" viewBox="0 0 24 24">207        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208      </svg>209    </div>210 211    <div class="suggestion-item">212      <div><span class="light">women formal shoes</span> <span class="bold">with lace</span></div>213      <svg class="right-arrow" viewBox="0 0 24 24">214        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216    </div>217 218    <div class="suggestion-item">219      <div><span class="light">women formal shoes</span> <span class="bold">flat</span></div>220      <svg class="right-arrow" viewBox="0 0 24 24">221        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222      </svg>223    </div>224 225    <div class="suggestion-item">226      <div><span class="light">women formal shoes</span> <span class="bold">without heels</span></div>227      <svg class="right-arrow" viewBox="0 0 24 24">228        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>229      </svg>230    </div>231 232    <div class="suggestion-item">233      <div><span class="light">women formal shoes</span> <span class="bold">for office wear</span></div>234      <svg class="right-arrow" viewBox="0 0 24 24">235        <path d="M8 4l8 8-8 8" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236      </svg>237    </div>238  </div>239 240</div>241</body>242</html>