GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Page UI</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: #FFFFFF;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    left: 0; top: 0;20    width: 100%;21    height: 140px;22    background: #4FA4A9;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    font-weight: 600;29    letter-spacing: 0.2px;30  }31  .status-left { display: flex; align-items: center; gap: 22px; font-size: 36px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 32px; }33 34  /* Top search area */35  .search-header {36    position: absolute;37    left: 0;38    top: 140px;39    width: 100%;40    padding: 36px 48px 24px 48px;41    box-sizing: border-box;42    background: #fff;43  }44  .back-arrow {45    width: 56px; height: 56px;46    display: inline-block;47    vertical-align: middle;48    margin-right: 18px;49  }50  .search-placeholder {51    display: inline-block;52    color: #a6b8bb;53    font-size: 56px;54    font-weight: 500;55    vertical-align: middle;56  }57 58  /* Sections */59  .content {60    position: absolute;61    left: 0;62    top: 280px;63    width: 100%;64    padding: 0 48px;65    box-sizing: border-box;66  }67  .section {68    margin-top: 40px;69  }70  .section-header {71    display: flex;72    align-items: center;73    justify-content: space-between;74    color: #7c8a90;75    font-size: 36px;76    font-weight: 700;77    margin-bottom: 12px;78  }79  .header-left {80    display: flex;81    align-items: center;82    gap: 18px;83  }84  .clear-link {85    color: #8ea0a5;86    font-weight: 600;87  }88  .list {89    margin-top: 22px;90  }91  .list-item {92    font-size: 42px;93    color: #111;94    padding: 26px 0;95    border-bottom: 0;96  }97 98  /* Bottom navigation bar */99  .bottom-bar {100    position: absolute;101    bottom: 0;102    left: 0;103    width: 100%;104    height: 140px;105    background: #000;106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .home-pill {111    width: 280px; height: 16px;112    background: #d6d6d6;113    border-radius: 10px;114  }115 116  /* Simple icon styles */117  .icon {118    width: 40px; height: 40px;119  }120  .icon-large { width: 48px; height: 48px; }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status bar -->127  <div class="statusbar">128    <div class="status-left">129      <span>11:03</span>130      <!-- Small placeholders resembling status icons -->131      <svg class="icon" viewBox="0 0 24 24">132        <circle cx="12" cy="12" r="10" fill="none" stroke="#ffffff" stroke-width="2"></circle>133        <path d="M6 12l4 4 8-8" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>134      </svg>135      <svg class="icon" viewBox="0 0 24 24">136        <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>137        <rect x="5" y="7" width="10" height="10" fill="#ffffff"></rect>138      </svg>139      <svg class="icon" viewBox="0 0 24 24">140        <path d="M2 12h20" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>141        <path d="M12 2v20" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>142      </svg>143      <svg class="icon" viewBox="0 0 24 24">144        <path d="M12 3l9 16H3z" fill="none" stroke="#ffffff" stroke-width="2"></path>145      </svg>146      <svg class="icon" viewBox="0 0 24 24">147        <circle cx="12" cy="12" r="3" fill="#ffffff"></circle>148      </svg>149    </div>150    <div class="status-right">151      <!-- WiFi icon -->152      <svg class="icon" viewBox="0 0 24 24">153        <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>154        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>155        <circle cx="12" cy="16" r="2" fill="#ffffff"></circle>156      </svg>157      <!-- Battery -->158      <svg class="icon" viewBox="0 0 24 24">159        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>160        <rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect>161        <rect x="20" y="9" width="2" height="6" fill="#ffffff"></rect>162      </svg>163      <span>100%</span>164    </div>165  </div>166 167  <!-- Search header -->168  <div class="search-header">169    <svg class="back-arrow" viewBox="0 0 24 24">170      <path d="M15 4L7 12l8 8" fill="none" stroke="#4FA4A9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>171    </svg>172    <span class="search-placeholder">What is on your mind today?</span>173  </div>174 175  <!-- Content sections -->176  <div class="content">177 178    <!-- Recent Searches -->179    <div class="section">180      <div class="section-header">181        <div class="header-left">182          <svg class="icon-large" viewBox="0 0 24 24">183            <circle cx="12" cy="12" r="9" fill="none" stroke="#9aa6aa" stroke-width="2"></circle>184            <path d="M12 7v6l4 2" fill="none" stroke="#9aa6aa" stroke-width="2" stroke-linecap="round"></path>185          </svg>186          <span>Recent Searches</span>187        </div>188        <span class="clear-link">Clear</span>189      </div>190      <div class="list">191        <div class="list-item">Screwdriver kit</div>192        <div class="list-item">Wrench tool</div>193        <div class="list-item">Visko hammer</div>194        <div class="list-item">Viski</div>195        <div class="list-item">Taparia measuring tape</div>196      </div>197    </div>198 199    <!-- Trending Searches -->200    <div class="section" style="margin-top: 36px;">201      <div class="section-header">202        <div class="header-left">203          <svg class="icon-large" viewBox="0 0 24 24">204            <path d="M12 3a9 9 0 0 1 9 9h-3l3 4 3-4h-3A12 12 0 0 0 12 1" fill="none" stroke="#9aa6aa" stroke-width="2" stroke-linecap="round"></path>205            <path d="M12 21a9 9 0 0 1-9-9h3l-3-4-3 4h3a12 12 0 0 0 12 12" fill="none" stroke="#9aa6aa" stroke-width="2" stroke-linecap="round"></path>206          </svg>207          <span>Trending Searches</span>208        </div>209      </div>210      <div class="list">211        <div class="list-item">Time Sale</div>212        <div class="list-item">Mobiles</div>213        <div class="list-item">T-Shirts</div>214        <div class="list-item">Headphones</div>215        <div class="list-item">Shoes</div>216        <div class="list-item">Sarees</div>217        <div class="list-item">Shirts</div>218        <div class="list-item">Watches</div>219        <div class="list-item">Bedsheets</div>220        <div class="list-item">Trimmers</div>221      </div>222    </div>223 224  </div>225 226  <!-- Bottom navigation bar -->227  <div class="bottom-bar">228    <div class="home-pill"></div>229  </div>230 231</div>232</body>233</html>