GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Search Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background: linear-gradient(180deg, #bfe9e3 0%, #c8efe8 30%, #eaf3f6 100%);10  }11  .status-bar {12    position:absolute; top:12px; left:0; width:100%; height:60px; color:#1a1a1a;13    display:flex; align-items:center; padding:0 28px; font-size:34px;14  }15  .status-left { display:flex; align-items:center; gap:16px; }16  .status-right { margin-left:auto; display:flex; align-items:center; gap:20px; }17  .icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }18  .icon svg { width:100%; height:100%; }19  /* Search bar */20  .search-header { position:absolute; top:90px; left:24px; width:1032px; display:flex; align-items:center; gap:20px; }21  .back-btn { width:70px; height:70px; border-radius:36px; display:flex; align-items:center; justify-content:center; }22  .search-box {23    flex:1; height:120px; background:#fff; border-radius:22px;24    box-shadow: 0 2px 0 rgba(0,0,0,0.05);25    display:flex; align-items:center; padding:0 28px; gap:22px;26  }27  .search-placeholder { font-size:40px; color:#686868; }28  /* List items */29  .list { position:absolute; top:230px; left:0; width:100%; }30  .row {31    display:flex; align-items:center; gap:26px; padding:32px 32px;32    border-bottom:1px solid #e4e4e4; background:transparent;33  }34  .row .clock { width:42px; height:42px; }35  .row .main { font-size:44px; color:#0b44d3; font-weight:700; }36  .row .sub { font-size:38px; color:#8a8a8a; margin-left:12px; }37  .row .close {38    margin-left:auto; width:56px; height:56px; display:flex; align-items:center; justify-content:center;39  }40  /* utility icons */41  .thin-icon svg { width:42px; height:42px; stroke:#4a4a4a; stroke-width:4; fill:none; }42  /* Bottom action buttons */43  .actions { position:absolute; top:1380px; left:24px; width:1032px; display:flex; gap:30px; }44  .action-card {45    flex:1; height:140px; border-radius:22px; background:#fff;46    box-shadow: 0 2px 0 rgba(0,0,0,0.05);47    display:flex; align-items:center; gap:20px; padding:0 28px; font-size:42px; color:#2d2d2d;48  }49  .action-card .icon { width:64px; height:64px; }50  /* Keyboard */51  .keyboard {52    position:absolute; bottom:0; left:0; width:100%; height:980px;53    background:#f4f6fb; border-top-left-radius:26px; border-top-right-radius:26px;54    box-shadow: 0 -2px 0 rgba(0,0,0,0.08) inset;55  }56  .kb-top-tools { display:flex; align-items:center; gap:46px; padding:46px 38px 24px; }57  .tool {58    width:92px; height:92px; background:#e6efd6; border-radius:48px;59    display:flex; align-items:center; justify-content:center; color:#3a3a3a; font-weight:700;60  }61  .tool.gray { background:#e8ecf8; }62  .tool.pink { background:#f7e0ed; }63  .kb-row { display:flex; gap:22px; padding:16px 34px; }64  .key {65    height:128px; background:#ffffff; border-radius:26px; box-shadow: 0 3px 0 rgba(0,0,0,0.08);66    display:flex; align-items:center; justify-content:center; font-size:60px; color:#222;67    flex:1;68  }69  .key.small { flex:0 0 86px; }70  .key.medium { flex:0 0 100px; }71  .key.wide { flex:1.6; }72  .key.space { flex:5.6; }73  .key.tall { height:120px; }74  .key.pale { background:#fbf6fb; }75  .enter { background:#cfe0a3; }76</style>77</head>78<body>79<div id="render-target">80 81  <!-- Status Bar -->82  <div class="status-bar">83    <div class="status-left">84      <span>1:29</span>85      <div class="icon"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="#808080"/></svg></div>86      <div class="icon"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3" fill="#666"/></svg></div>87      <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#999"/></svg></div>88    </div>89    <div class="status-right">90      <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 12h18M8 16h8" stroke="#222" stroke-width="2" fill="none"/></svg></div>91      <div class="icon"><svg viewBox="0 0 24 24"><path d="M2 18h20M4 6h16" stroke="#222" stroke-width="2" /></svg></div>92    </div>93  </div>94 95  <!-- Search header -->96  <div class="search-header">97    <div class="back-btn">98      <svg viewBox="0 0 24 24">99        <path d="M15 5L7 12l8 7" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>100      </svg>101    </div>102    <div class="search-box">103      <div class="icon">104        <svg viewBox="0 0 24 24">105          <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/>106          <path d="M14.5 14.5L21 21" stroke="#666" stroke-width="2" />107        </svg>108      </div>109      <div class="search-placeholder">Search Amazon.in</div>110    </div>111  </div>112 113  <!-- Search suggestions list -->114  <div class="list">115    <div class="row">116      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>117      <div class="main">sneakers</div>118      <div class="sub">in All Categories</div>119      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>120    </div>121    <div class="row">122      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>123      <div class="main">smart door lock</div>124      <div class="sub">in All Categories</div>125      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>126    </div>127    <div class="row">128      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>129      <div class="main">action sneakers for women</div>130      <div class="sub">in All Cate...</div>131      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>132    </div>133    <div class="row">134      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>135      <div class="main">sneakers for women</div>136      <div class="sub">in All Categories</div>137      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>138    </div>139    <div class="row">140      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>141      <div class="main">door locks</div>142      <div class="sub">in All Categories</div>143      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>144    </div>145    <div class="row">146      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>147      <div class="main">data structures bpb</div>148      <div class="sub">in All Categories</div>149      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>150    </div>151    <div class="row">152      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>153      <div class="main">data structures</div>154      <div class="sub">in All Categories</div>155      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>156    </div>157    <div class="row">158      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>159      <div class="main">new balance</div>160      <div class="sub">in All Categories</div>161      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>162    </div>163    <div class="row">164      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>165      <div class="main">new balance</div>166      <div class="sub">in Shoes</div>167      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>168    </div>169    <div class="row">170      <div class="clock thin-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg></div>171      <div class="main">new balance hiking shoes blue</div>172      <div class="sub">in All C...</div>173      <div class="close thin-icon"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>174    </div>175  </div>176 177  <!-- Bottom actions -->178  <div class="actions">179    <div class="action-card">180      <div class="icon">181        <svg viewBox="0 0 24 24">182          <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#222" stroke-width="2"/>183          <circle cx="12" cy="12" r="3" fill="#222"/>184        </svg>185      </div>186      <div>Search with photo</div>187    </div>188    <div class="action-card">189      <div class="icon">190        <svg viewBox="0 0 24 24">191          <rect x="4" y="7" width="16" height="10" rx="2" fill="none" stroke="#222" stroke-width="2"/>192          <path d="M8 7l2-3h4l2 3" stroke="#222" stroke-width="2"/>193          <circle cx="12" cy="12" r="3" fill="#222"/>194        </svg>195      </div>196      <div>Search with camera</div>197    </div>198  </div>199 200  <!-- Keyboard mock -->201  <div class="keyboard">202    <div class="kb-top-tools">203      <div class="tool">◧</div>204      <div class="tool gray">🙂</div>205      <div class="tool gray">GIF</div>206      <div class="tool gray"><svg viewBox="0 0 24 24"><path d="M12 2v6M12 16v6M2 12h6M16 12h6" stroke="#333" stroke-width="2" /></svg></div>207      <div class="tool gray"><svg viewBox="0 0 24 24"><path d="M9 4h6v16H9z" stroke="#333" stroke-width="2" fill="none"/><path d="M5 8h4M15 16h4" stroke="#333" stroke-width="2"/></svg></div>208      <div class="tool gray"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/><path d="M6 18l12-12" stroke="#333" stroke-width="2"/></svg></div>209      <div class="tool pink"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#333"/><path d="M20 20l2 2" stroke="#333" stroke-width="2"/></svg></div>210    </div>211 212    <!-- Row 1 -->213    <div class="kb-row">214      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>215      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>216      <div class="key small">0</div>217    </div>218    <!-- Row 2 -->219    <div class="kb-row">220      <div class="key medium pale">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>221      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>222      <div class="key medium enter">⌫</div>223    </div>224    <!-- Row 3 -->225    <div class="kb-row">226      <div class="key medium pink">⇧</div>227      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>228      <div class="key medium enter">⌦</div>229    </div>230    <!-- Row 4 -->231    <div class="kb-row">232      <div class="key wide pink">?123</div>233      <div class="key medium">,</div>234      <div class="key medium gray">🙂</div>235      <div class="key space"> </div>236      <div class="key medium">.</div>237      <div class="key wide enter">↵</div>238    </div>239  </div>240 241</div>242</body>243</html>