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>Product Search - Mobile UI</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#222;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar (OS) */15  .status-bar{16    height:120px;background:#E3E3E3;color:#4d4d4d;17    display:flex;align-items:center;justify-content:space-between;18    padding:0 36px;font-weight:600;font-size:40px;letter-spacing:0.3px;19  }20  .sb-icons{display:flex;gap:28px;align-items:center;}21  .dot{width:14px;height:14px;border-radius:50%;background:#9e9e9e;}22 23  /* Search card */24  .search-card{25    margin:24px 28px 0 28px;background:#fff;border-radius:18px;26    box-shadow:0 6px 18px rgba(0,0,0,0.08);height:120px;display:flex;align-items:center;27    padding:0 28px;28  }29  .search-inner{display:flex;align-items:center;gap:22px;width:100%;}30  .search-text{flex:1;color:#666;font-size:38px;}31  .icon{width:52px;height:52px;color:#6a6a6a}32  .icon svg{width:100%;height:100%}33 34  /* Filter row */35  .filters{36    margin-top:26px;border-top:1px solid #eee;border-bottom:1px solid #eee;37    display:flex;height:120px;38  }39  .filters .cell{40    flex:1;display:flex;align-items:center;justify-content:center;41    font-size:40px;color:#222;gap:16px;42  }43  .filters .cell:not(:last-child){border-right:1px solid #e5e5e5;}44  .chev{width:34px;height:34px;color:#444}45  .chev svg{width:100%;height:100%}46 47  /* Results row */48  .results-row{49    padding:26px 36px;display:flex;align-items:center;justify-content:space-between;50  }51  .results-row .count{font-size:36px;color:#555;}52  .results-row .right-icons{display:flex;gap:26px;align-items:center;}53  .grid-icon, .square-icon{width:58px;height:58px;color:#333}54  .grid-icon svg, .square-icon svg{width:100%;height:100%}55 56  /* Product card */57  .product{58    padding:0 36px;59  }60  .prod-img{61    width:700px;height:520px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:2px;62    display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;63  }64  .prod-row{display:flex;align-items:flex-start;justify-content:space-between;margin-top:24px}65  .prod-title{66    width:700px;font-size:46px;line-height:1.25;color:#222;67  }68  .heart{width:64px;height:64px;margin-top:6px;color:#222}69  .heart svg{width:100%;height:100%}70  .price-row{margin-top:16px;display:flex;gap:26px;align-items:baseline}71  .old-price{font-size:38px;color:#999;text-decoration:line-through;}72  .new-price{font-size:40px;color:#d13b34;font-weight:600;}73 74  /* Bottom nav */75  .tabbar{76    position:absolute;left:0;right:0;bottom:48px;height:150px;77    border-top:1px solid #eee;background:#fff;display:flex;align-items:center;justify-content:space-around;78  }79  .tab{display:flex;flex-direction:column;align-items:center;gap:8px;color:#9b9b9b;font-size:28px;}80  .tab .ticon{width:58px;height:58px}81  .tab svg{width:100%;height:100%;stroke:#bdbdbd}82  .mark{font-weight:700;color:#999;font-size:34px}83  .badge{84    position:absolute;right:48px;bottom:158px;width:44px;height:44px;border-radius:22px;background:#e30613;color:#fff;font-size:26px;85    display:flex;align-items:center;justify-content:center;86    box-shadow:0 2px 6px rgba(0,0,0,0.2);87  }88  /* Home indicator (OS) */89  .home-indicator{90    position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:320px;height:10px;border-radius:6px;background:#1d1d1d;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status bar -->98  <div class="status-bar">99    <div>8:20</div>100    <div class="sb-icons">101      <div class="dot"></div>102      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#777" fill="none" stroke-width="2">103        <path d="M2 12h4l3 7 4-14 3 7h6" />104      </svg>105      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#777" fill="none" stroke-width="2">106        <circle cx="10" cy="7" r="3"></circle>107        <path d="M4 21v-2a6 6 0 0 1 12 0v2"></path>108      </svg>109      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#777" fill="none" stroke-width="2">110        <path d="M2 6h20M2 12h20M2 18h20"></path>111      </svg>112      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#777" fill="none" stroke-width="2">113        <path d="M18 7c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10h12V7z"></path>114        <path d="M6 7l6-4 6 4"></path>115      </svg>116      <svg width="40" height="40" viewBox="0 0 24 24" stroke="#777" fill="none" stroke-width="2">117        <path d="M6 18v-5a6 6 0 0 1 12 0v5"></path>118        <rect x="9" y="18" width="6" height="3" fill="#777" stroke="none"></rect>119      </svg>120    </div>121  </div>122 123  <!-- Search Bar -->124  <div class="search-card">125    <div class="search-inner">126      <div class="icon">127        <svg viewBox="0 0 24 24" stroke="#5f5f5f" fill="none" stroke-width="2" stroke-linecap="round">128          <circle cx="11" cy="11" r="7"></circle>129          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>130        </svg>131      </div>132      <div class="search-text">k track sole contrast ankle boots for women</div>133      <div class="icon">134        <svg viewBox="0 0 24 24" stroke="#7a7a7a" fill="none" stroke-width="2" stroke-linecap="round">135          <line x1="5" y1="5" x2="19" y2="19"></line>136          <line x1="19" y1="5" x2="5" y2="19"></line>137        </svg>138      </div>139    </div>140  </div>141 142  <!-- Filters -->143  <div class="filters">144    <div class="cell">Women145      <span class="chev">146        <svg viewBox="0 0 24 24" stroke="#444" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">147          <path d="M6 9l6 6 6-6"></path>148        </svg>149      </span>150    </div>151    <div class="cell">Sort by152      <span class="chev">153        <svg viewBox="0 0 24 24" stroke="#444" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">154          <path d="M6 9l6 6 6-6"></path>155        </svg>156      </span>157    </div>158    <div class="cell">Filter</div>159  </div>160 161  <!-- Results header -->162  <div class="results-row">163    <div class="count">1 results</div>164    <div class="right-icons">165      <div class="grid-icon">166        <svg viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2">167          <rect x="3" y="3" width="8" height="8"></rect>168          <rect x="13" y="3" width="8" height="8"></rect>169          <rect x="3" y="13" width="8" height="8"></rect>170          <rect x="13" y="13" width="8" height="8"></rect>171        </svg>172      </div>173      <div class="square-icon">174        <svg viewBox="0 0 24 24" stroke="#bdbdbd" fill="none" stroke-width="2">175          <rect x="4" y="4" width="16" height="16"></rect>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Product -->182  <div class="product">183    <div class="prod-img">[IMG: Black ankle boot product]</div>184    <div class="prod-row">185      <div class="prod-title">Track sole contrast<br>ankle boots</div>186      <div class="heart">187        <svg viewBox="0 0 24 24" stroke="#222" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">188          <path d="M12 21s-8-5.5-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5.5-8 11-8 11z"></path>189        </svg>190      </div>191    </div>192    <div class="price-row">193      <div class="old-price">US$ 99.99</div>194      <div class="new-price">US$ 59.99</div>195    </div>196  </div>197 198  <!-- Tab bar -->199  <div class="tabbar">200    <div class="tab">201      <div class="mark">M</div>202      <div style="font-size:26px;color:#999;margin-top:-6px;">NEW!</div>203    </div>204    <div class="tab">205      <div class="ticon">206        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round">207          <circle cx="11" cy="11" r="7"></circle>208          <line x1="16.5" y1="16.5" x2="22" y2="22"></line>209        </svg>210      </div>211    </div>212    <div class="tab">213      <div class="ticon">214        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">215          <path d="M6 7h12l-1 13H7L6 7z"></path>216          <path d="M9 7V5a3 3 0 0 1 6 0v2"></path>217        </svg>218      </div>219    </div>220    <div class="tab">221      <div class="ticon">222        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">223          <path d="M12 21s-8-5.5-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5.5-8 11-8 11z"></path>224        </svg>225      </div>226    </div>227    <div class="tab" style="position:relative;">228      <div class="ticon">229        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">230          <circle cx="12" cy="7" r="4"></circle>231          <path d="M4 21v-2a8 8 0 0 1 16 0v2"></path>232        </svg>233      </div>234    </div>235  </div>236  <div class="badge">1</div>237 238  <!-- Home indicator -->239  <div class="home-indicator"></div>240 241</div>242</body>243</html>