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>Search Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    background: #4BA6A8;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left {32    font-size: 40px;33    font-weight: 600;34  }35  .status-center {36    display: flex;37    gap: 22px;38    margin-left: 28px;39    color: #eaf7f7;40    align-items: center;41  }42  .status-right {43    margin-left: auto;44    display: flex;45    align-items: center;46    gap: 24px;47    color: #ffffff;48    font-size: 34px;49  }50  .icon {51    display: inline-flex;52    align-items: center;53    justify-content: center;54  }55 56  /* Top search prompt row */57  .search-top {58    position: absolute;59    top: 120px;60    left: 0;61    width: 100%;62    padding: 36px 48px;63    box-sizing: border-box;64    display: flex;65    align-items: center;66    gap: 24px;67  }68  .search-top .prompt {69    color: #9E9E9E;70    font-size: 56px;71    line-height: 1.2;72    font-weight: 500;73  }74  .back-icon svg { width: 64px; height: 64px; }75 76  /* Sections */77  .content {78    position: absolute;79    top: 240px; /* below prompt row */80    left: 0;81    right: 0;82    bottom: 140px; /* above bottom bar */83    padding: 0 48px;84    box-sizing: border-box;85    overflow: hidden;86  }87  .section {88    margin-top: 18px;89  }90  .section-header {91    display: flex;92    align-items: center;93    justify-content: space-between;94    margin-bottom: 14px;95  }96  .header-left {97    display: flex;98    align-items: center;99    gap: 18px;100  }101  .section-title {102    color: #7E8A8A;103    font-weight: 700;104    font-size: 42px;105  }106  .clear-link {107    color: #9E9E9E;108    font-size: 38px;109  }110  .list {111    padding-left: 72px;112  }113  .list .item {114    font-size: 44px;115    color: #000;116    margin: 28px 0;117  }118 119  /* Bottom navigation bar */120  .bottom-bar {121    position: absolute;122    bottom: 0;123    left: 0;124    width: 100%;125    height: 140px;126    background: #000000;127    display: flex;128    align-items: center;129    justify-content: center;130  }131  .home-pill {132    width: 220px;133    height: 14px;134    background: #CCCCCC;135    border-radius: 10px;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status Bar -->143  <div class="status-bar">144    <div class="status-left">8:26</div>145    <div class="status-center">146      <!-- Simple check icon -->147      <span class="icon">148        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">149          <circle cx="12" cy="12" r="11" stroke="#EAF7F7" stroke-width="2"></circle>150          <path d="M6 12l4 4 8-8" stroke="#EAF7F7" stroke-width="2" fill="none"></path>151        </svg>152      </span>153      <!-- Mail icon -->154      <span class="icon">155        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">156          <rect x="3" y="5" width="18" height="14" rx="2" stroke="#EAF7F7" stroke-width="2"></rect>157          <path d="M4 7l8 6 8-6" stroke="#EAF7F7" stroke-width="2" fill="none"></path>158        </svg>159      </span>160      <!-- Alert icon -->161      <span class="icon">162        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">163          <path d="M12 3l9 16H3L12 3z" stroke="#EAF7F7" stroke-width="2" fill="none"></path>164          <rect x="11" y="10" width="2" height="5" fill="#EAF7F7"></rect>165          <rect x="11" y="16.5" width="2" height="2" fill="#EAF7F7"></rect>166        </svg>167      </span>168      <!-- Dot -->169      <span class="icon">170        <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#EAF7F7"/></svg>171      </span>172    </div>173    <div class="status-right">174      <!-- WiFi icon -->175      <span class="icon">176        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">177          <path d="M2 9c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" fill="none" />178          <path d="M5 12c4-4 10-4 14 0" stroke="#ffffff" stroke-width="2" fill="none" />179          <path d="M8 15c3-3 5-3 8 0" stroke="#ffffff" stroke-width="2" fill="none" />180          <circle cx="12" cy="18" r="2" fill="#ffffff"></circle>181        </svg>182      </span>183      <!-- Battery icon + percent -->184      <span class="icon">185        <svg width="52" height="40" viewBox="0 0 28 16" fill="none">186          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#ffffff" stroke-width="2"></rect>187          <rect x="23" y="6" width="4" height="4" rx="1" fill="#ffffff"></rect>188          <rect x="3" y="5" width="18" height="6" fill="#ffffff"></rect>189        </svg>190      </span>191      <span>100%</span>192    </div>193  </div>194 195  <!-- Search Prompt -->196  <div class="search-top">197    <div class="back-icon">198      <svg viewBox="0 0 24 24">199        <path d="M15 6l-6 6 6 6" stroke="#4BA6A8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>200      </svg>201    </div>202    <div class="prompt">What is on your mind today?</div>203  </div>204 205  <!-- Content -->206  <div class="content">207    <!-- Recent Searches -->208    <div class="section">209      <div class="section-header">210        <div class="header-left">211          <svg width="44" height="44" viewBox="0 0 24 24" class="icon">212            <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2" fill="none"></circle>213            <path d="M12 7v5l4 2" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round"></path>214          </svg>215          <div class="section-title">Recent Searches</div>216        </div>217        <div class="clear-link">Clear</div>218      </div>219      <div class="list">220        <div class="item">Visko hammer</div>221        <div class="item">Viski</div>222        <div class="item">Taparia measuring tape</div>223        <div class="item">hammer</div>224        <div class="item">screw driver kit</div>225      </div>226    </div>227 228    <!-- Trending Searches -->229    <div class="section" style="margin-top: 60px;">230      <div class="section-header">231        <div class="header-left">232          <svg width="44" height="44" viewBox="0 0 24 24" class="icon">233            <path d="M12 5a7 7 0 1 1-4.95 2.05" stroke="#9E9E9E" stroke-width="2" fill="none"></path>234            <path d="M7 5h5v5" stroke="#9E9E9E" stroke-width="2" fill="none"></path>235          </svg>236          <div class="section-title">Trending Searches</div>237        </div>238      </div>239      <div class="list">240        <div class=