GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Select Category - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    font-family: "Roboto", Arial, sans-serif;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 40px;24    font-size: 36px;25    color: #333;26  }27  .sb-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .sb-icon {33    width: 34px;34    height: 34px;35  }36 37  /* App bar */38  .app-bar {39    height: 128px;40    display: flex;41    align-items: center;42    padding: 0 28px;43    border-bottom: 1px solid #e9e9e9;44  }45  .back-btn {46    width: 72px;47    height: 72px;48    display: flex;49    align-items: center;50    justify-content: center;51    margin-right: 8px;52  }53  .title {54    font-size: 56px;55    font-weight: 600;56    letter-spacing: 0.2px;57  }58 59  /* Content */60  .content {61    padding: 28px 0 0 0;62  }63  .subheader {64    font-size: 42px;65    font-weight: 600;66    color: #2b2b2b;67    padding: 0 40px 30px 40px;68  }69 70  .list {71    border-top: 1px solid #f0f0f0;72  }73  .item {74    height: 160px;75    display: flex;76    align-items: center;77    justify-content: space-between;78    padding: 0 40px;79    font-size: 44px;80    border-bottom: 1px solid #eee;81  }82  .item .arrow {83    width: 48px;84    height: 48px;85  }86  .item span {87    color: #111;88  }89 90  /* Bottom safe area */91  .bottom-safe {92    position: absolute;93    bottom: 0;94    left: 0;95    width: 100%;96    height: 140px;97    background: #fafafa;98    border-top: 1px solid #efefef;99    display: flex;100    align-items: center;101    justify-content: center;102  }103  .home-indicator {104    width: 280px;105    height: 10px;106    background: #cfcfcf;107    border-radius: 8px;108  }109</style>110</head>111<body>112<div id="render-target">113  <!-- Status Bar -->114  <div class="status-bar">115    <div class="time">10:56</div>116    <div class="sb-icons">117      <!-- Simple inline SVG icons for signal, Wi-Fi, battery -->118      <svg class="sb-icon" viewBox="0 0 24 24">119        <rect x="3" y="14" width="3" height="7" fill="#4a4a4a"></rect>120        <rect x="8" y="10" width="3" height="11" fill="#4a4a4a"></rect>121        <rect x="13" y="6" width="3" height="15" fill="#4a4a4a"></rect>122        <rect x="18" y="2" width="3" height="19" fill="#4a4a4a"></rect>123      </svg>124      <svg class="sb-icon" viewBox="0 0 24 24">125        <path d="M2 9c5-5 15-5 20 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>126        <path d="M5 12c3-3 11-3 14 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>127        <path d="M8 15c2-2 6-2 8 0" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>128      </svg>129      <svg class="sb-icon" viewBox="0 0 24 24">130        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#4a4a4a" stroke-width="2"/>131        <rect x="4" y="8" width="14" height="8" fill="#4a4a4a"></rect>132        <rect x="20" y="10" width="2" height="4" fill="#4a4a4a"></rect>133      </svg>134    </div>135  </div>136 137  <!-- App Bar -->138  <div class="app-bar">139    <div class="back-btn">140      <svg viewBox="0 0 24 24" width="56" height="56">141        <path d="M15.5 5l-7 7 7 7" stroke="#222" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142      </svg>143    </div>144    <div class="title">Select Category</div>145  </div>146 147  <!-- Content -->148  <div class="content">149    <div class="subheader">Suggested Categories for "wireless mouse"</div>150 151    <div class="list">152      <div class="item">153        <span>Mobiles & Accessories</span>154        <svg class="arrow" viewBox="0 0 24 24">155          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156        </svg>157      </div>158 159      <div class="item">160        <span>Computers</span>161        <svg class="arrow" viewBox="0 0 24 24">162          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163        </svg>164      </div>165 166      <div class="item">167        <span>Cameras & Accessories</span>168        <svg class="arrow" viewBox="0 0 24 24">169          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170        </svg>171      </div>172 173      <div class="item">174        <span>Gaming</span>175        <svg class="arrow" viewBox="0 0 24 24">176          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>177        </svg>178      </div>179 180      <div class="item">181        <span>Home Entertainment</span>182        <svg class="arrow" viewBox="0 0 24 24">183          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184        </svg>185      </div>186 187      <div class="item">188        <span>Home & Kitchen</span>189        <svg class="arrow" viewBox="0 0 24 24">190          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191        </svg>192      </div>193 194      <div class="item">195        <span>Pens & Stationery</span>196        <svg class="arrow" viewBox="0 0 24 24">197          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198        </svg>199      </div>200 201      <div class="item">202        <span>Bags, Wallets & Belts</span>203        <svg class="arrow" viewBox="0 0 24 24">204          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205        </svg>206      </div>207 208      <div class="item">209        <span>Audio & Video</span>210        <svg class="arrow" viewBox="0 0 24 24">211          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212        </svg>213      </div>214 215      <div class="item">216        <span>Automation & Robotics</span>217        <svg class="arrow" viewBox="0 0 24 24">218          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219        </svg>220      </div>221 222      <div class="item">223        <span>Toys and Games</span>224        <svg class="arrow" viewBox="0 0 24 24">225          <path d="M8 5l7 7-7 7" stroke="#9a9a9a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Bottom safe area -->232  <div class="bottom-safe">233    <div class="home-indicator"></div>234  </div>235</div>236</body>237</html>