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 UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color: #222;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: linear-gradient(90deg, #a6d7db 0%, #c9e8d6 100%);20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 18px;26    left: 32px;27    right: 32px;28    height: 64px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #1f2b2d;33    font-weight: 600;34    font-size: 36px;35    letter-spacing: 0.3px;36    opacity: 0.9;37  }38  .sb-left, .sb-right {39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .chip {44    width: 28px;45    height: 28px;46    background: #1f2b2d;47    border-radius: 6px;48    opacity: 0.75;49  }50 51  /* Header with back + search */52  .header {53    position: absolute;54    top: 100px;55    left: 0;56    right: 0;57    height: 200px;58    display: flex;59    align-items: center;60    padding: 0 32px;61  }62  .back-btn {63    width: 88px;64    height: 88px;65    display: flex;66    align-items: center;67    justify-content: center;68    margin-right: 20px;69  }70  .search-bar {71    flex: 1;72    height: 112px;73    background: #ffffff;74    border-radius: 24px;75    box-shadow: 0 3px 0 rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.08);76    display: flex;77    align-items: center;78    padding: 0 30px;79  }80  .search-icon {81    width: 44px;82    height: 44px;83    margin-right: 22px;84  }85  .placeholder {86    font-size: 40px;87    color: #5a5a5a;88  }89 90  /* Main content blank area */91  .content-area {92    position: absolute;93    top: 300px;94    left: 0;95    right: 0;96    bottom: 240px;97    background: #ffffff;98  }99 100  /* Bottom action buttons */101  .bottom-actions {102    position: absolute;103    bottom: 140px;104    left: 34px;105    right: 34px;106    display: flex;107    gap: 40px;108  }109  .action-btn {110    flex: 1;111    height: 156px;112    background: #eceff1;113    border-radius: 26px;114    border: 1px solid #d5d9dd;115    display: flex;116    align-items: center;117    padding: 0 40px;118    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);119  }120  .action-icon {121    width: 56px;122    height: 56px;123    margin-right: 24px;124  }125  .action-label {126    font-size: 44px;127    color: #2b2b2b;128    font-weight: 500;129  }130 131  /* Gesture pill */132  .gesture {133    position: absolute;134    bottom: 54px;135    left: 390px;136    width: 300px;137    height: 16px;138    background: #bcbcbc;139    border-radius: 10px;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status Bar -->147  <div class="status-bar">148    <div class="sb-left">149      <span>5:43</span>150      <div class="chip" title="Lock"></div>151      <span style="font-size:30px; opacity:0.9;">42°</span>152      <div class="chip" title="Icon"></div>153      <div class="chip" title="Icon"></div>154      <div class="chip" title="Dot" style="width:12px; height:12px; border-radius:50%;"></div>155    </div>156    <div class="sb-right">157      <!-- Wi-Fi icon -->158      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">159        <path d="M2 8c5-4 15-4 20 0" stroke="#1f2b2d" stroke-width="2" stroke-linecap="round"/>160        <path d="M5 11c4-3 10-3 14 0" stroke="#1f2b2d" stroke-width="2" stroke-linecap="round"/>161        <path d="M8 14c3-2 5-2 8 0" stroke="#1f2b2d" stroke-width="2" stroke-linecap="round"/>162        <circle cx="12" cy="18" r="2" fill="#1f2b2d"/>163      </svg>164      <!-- Battery icon -->165      <svg width="52" height="52" viewBox="0 0 24 24" fill="none">166        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#1f2b2d" stroke-width="2"/>167        <rect x="4" y="8" width="12" height="8" fill="#1f2b2d"/>168        <rect x="20" y="10" width="2" height="4" rx="1" fill="#1f2b2d"/>169      </svg>170    </div>171  </div>172 173  <!-- Header with Back + Search -->174  <div class="header">175    <div class="back-btn" aria-label="Back">176      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">177        <path d="M15 6l-6 6 6 6" stroke="#1f2b2d" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>178      </svg>179    </div>180    <div class="search-bar">181      <svg class="search-icon" viewBox="0 0 24 24">182        <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"></circle>183        <path d="M20 20l-4-4" stroke="#666" stroke-width="2" stroke-linecap="round"></path>184      </svg>185      <div class="placeholder">Search Amazon.in</div>186    </div>187  </div>188 189  <!-- Main content area (empty white like screenshot) -->190  <div class="content-area"></div>191 192  <!-- Bottom action buttons -->193  <div class="bottom-actions">194    <div class="action-btn">195      <svg class="action-icon" viewBox="0 0 24 24" fill="none">196        <!-- Simple hanger icon -->197        <path d="M12 4c-1.1 0-2 .9-2 2 0 .9.6 1.7 1.4 1.9l-8.4 7.2c-.5.4-.2 1.2.5 1.2h17c.7 0 1-0.8.5-1.2l-8.4-7.2c.8-.2 1.4-1 1.4-1.9 0-1.1-.9-2-2-2z" stroke="#5b6b73" stroke-width="1.6" fill="none" stroke-linejoin="round"/>198      </svg>199      <div class="action-label">Find the look</div>200    </div>201    <div class="action-btn">202      <svg class="action-icon" viewBox="0 0 24 24" fill="none">203        <!-- Camera icon -->204        <rect x="3" y="6" width="18" height="12" rx="2" stroke="#5b6b73" stroke-width="2"/>205        <rect x="7" y="3" width="6" height="3" rx="1" fill="#5b6b73"/>206        <circle cx="12" cy="12" r="3.5" stroke="#5b6b73" stroke-width="2" fill="none"/>207      </svg>208      <div class="action-label">Scan products</div>209    </div>210  </div>211 212  <!-- Gesture Pill -->213  <div class="gesture"></div>214</div>215</body>216</html>