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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #FFFFFF;11  }12 13  /* Top app bar */14  .appbar { position: absolute; top: 0; left: 0; width: 100%; height: 215px; background: #58AEB0; }15  .statusbar { height: 90px; padding: 0 36px; display: flex; align-items: center; color: #fff; font-weight: 600; }16  .status-left { font-size: 40px; }17  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 34px; }18  .status-icon svg { width: 44px; height: 44px; }19  .battery { display: flex; align-items: center; gap: 10px; }20  .battery svg { width: 60px; height: 34px; }21 22  .search-row { height: 125px; display: flex; align-items: center; padding: 0 28px; }23  .back-btn, .clear-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }24  .back-btn svg, .clear-btn svg { width: 56px; height: 56px; stroke: #ffffff; stroke-width: 6; fill: none; }25  .search-text { color: #0E0E0E; font-size: 54px; font-weight: 500; margin-left: 10px; flex: 1; }26  .caret { display: inline-block; width: 6px; height: 62px; background: #1B9AAA; margin-left: 6px; border-radius: 3px; }27 28  /* Content area */29  .content { position: absolute; top: 215px; left: 0; width: 100%; bottom: 840px; overflow: hidden; background: #fff; }30  .section { padding: 40px 40px 20px 40px; }31  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }32  .header-left { display: flex; align-items: center; gap: 22px; }33  .header-left svg { width: 42px; height: 42px; }34  .section-title { font-size: 40px; color: #8A8A8A; font-weight: 700; }35  .clear-link { font-size: 38px; color: #9E9E9E; }36  .list-item { font-size: 44px; color: #111; padding: 24px 0; }37 38  /* Keyboard */39  .keyboard { position: absolute; left: 0; bottom: 0; width: 100%; height: 840px; background: #121212; border-top-left-radius: 28px; border-top-right-radius: 28px; }40  .suggest-bar { height: 120px; background: #1E1E1E; color: #D0D0D0; display: flex; align-items: center; padding: 0 26px; gap: 24px; font-size: 40px; }41  .suggest-left { display: flex; align-items: center; gap: 26px; flex: 1; }42  .suggest-right { display: flex; align-items: center; gap: 26px; }43  .suggest-bar svg { width: 48px; height: 48px; fill: none; stroke: #CFCFCF; stroke-width: 4; }44 45  .keys { padding: 24px 30px; }46  .row { display: flex; justify-content: space-between; margin-bottom: 24px; }47  .key {48    width: 90px; height: 110px; background: #2A2A2A; border-radius: 18px; color: #EDEDED;49    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 500;50  }51  .key.wide { width: 160px; }52  .key.space { flex: 1; height: 110px; margin: 0 16px; }53  .key.green { background: #9ED8BA; color: #0A0A0A; font-weight: 700; }54  .key.icon svg { width: 44px; height: 44px; stroke: #EDEDED; stroke-width: 5; fill: none; }55 56  .gesture-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 360px; height: 10px; background: #EDEDED; border-radius: 6px; opacity: 0.9; }57</style>58</head>59<body>60<div id="render-target">61 62  <!-- Top App Bar -->63  <div class="appbar">64    <div class="statusbar">65      <div class="status-left">11:04</div>66      <div class="status-right">67        <span class="status-icon">68          <!-- Notifications / alert dot -->69          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#ffffff" fill="none"/><path d="M12 6 L12 12 L16 14" stroke="#ffffff"/></svg>70        </span>71        <span class="status-icon">72          <!-- WiFi -->73          <svg viewBox="0 0 24 24">74            <path d="M2 8 C8 3,16 3,22 8" stroke="#fff" fill="none"/>75            <path d="M5 12 C10 8,14 8,19 12" stroke="#fff" fill="none"/>76            <path d="M9 16 C12 14,12 14,15 16" stroke="#fff" fill="none"/>77            <circle cx="12" cy="19" r="2" fill="#fff"/>78          </svg>79        </span>80        <div class="battery">81          <span style="color:#fff;">100%</span>82          <!-- Battery icon -->83          <svg viewBox="0 0 26 14">84            <rect x="1" y="1" width="20" height="12" rx="2" ry="2" stroke="#fff" fill="none"/>85            <rect x="3" y="3" width="16" height="8" fill="#fff"/>86            <rect x="22" y="4" width="3" height="6" fill="#fff"/>87          </svg>88        </div>89      </div>90    </div>91 92    <div class="search-row">93      <div class="back-btn">94        <!-- Back arrow -->95        <svg viewBox="0 0 24 24"><polyline points="15,4 7,12 15,20" /></svg>96      </div>97      <div class="search-text">Visko Hammer<span class="caret"></span></div>98      <div class="clear-btn">99        <!-- Clear X -->100        <svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>101      </div>102    </div>103  </div>104 105  <!-- Content -->106  <div class="content">107    <div class="section">108      <div class="section-header">109        <div class="header-left">110          <!-- Clock icon -->111          <svg viewBox="0 0 24 24">112            <circle cx="12" cy="12" r="9" stroke="#9E9E9E" fill="none"/>113            <line x1="12" y1="6.5" x2="12" y2="12" stroke="#9E9E9E"/>114            <line x1="12" y1="12" x2="16.5" y2="13.5" stroke="#9E9E9E"/>115          </svg>116          <div class="section-title">Recent Searches</div>117        </div>118        <div class="clear-link">Clear</div>119      </div>120      <div class="list-item">Screwdriver kit</div>121      <div class="list-item">Wrench tool</div>122      <div class="list-item">Visko hammer</div>123      <div class="list-item">Viski</div>124      <div class="list-item">Taparia measuring tape</div>125    </div>126 127    <div class="section" style="padding-top: 24px;">128      <div class="section-header">129        <div class="header-left">130          <!-- Refresh/trending icon -->131          <svg viewBox="0 0 24 24">132            <path d="M5 12a7 7 0 0112.5-3M19 12a7 7 0 01-12.5 3" stroke="#9E9E9E" fill="none"/>133            <polyline points="16,5 18,9 20,6" stroke="#9E9E9E" fill="none"/>134            <polyline points="8,19 6,15 4,18" stroke="#9E9E9E" fill="none"/>135          </svg>136          <div class="section-title">Trending Searches</div>137        </div>138      </div>139      <div class="list-item">Time Sale</div>140      <div class="list-item">Mobiles</div>141      <div class="list-item">T-Shirts</div>142      <div class="list-item">Headphones</div>143      <div class="list-item">Shoes</div>144    </div>145  </div>146 147  <!-- Keyboard -->148  <div class="keyboard">149    <div class="suggest-bar">150      <div class="suggest-left">151        <!-- Keyboard icon (grid) -->152        <svg viewBox="0 0 24 24">153          <rect x="2" y="4" width="20" height="16" rx="2" ry="2" stroke="#CFCFCF" fill="none"/>154          <line x1="6" y1="8" x2="18" y2="8"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="6" y1="16" x2="18" y2="16"/>155        </svg>156        <span>Hammer</span>157        <span style="opacity:.7">|</span>158        <span>Hammers</span>159        <span style="opacity:.85">🛠️</span>160        <span style="opacity:.85">⚒️</span>161      </div>162      <div class="suggest-right">163        <!-- Mic -->164        <svg viewBox="0 0 24 24">165          <rect x="9" y="4" width="6" height="10" rx="3" stroke="#CFCFCF" fill="none"/>166          <path d="M5 10c0 4 3 6 7 6s7-2 7-6" stroke="#CFCFCF" fill="none"/>167          <line x1="12" y1="16" x2="12" y2="20" stroke="#CFCFCF"/>168          <line x1="9" y1="20" x2="15" y2="20" stroke="#CFCFCF"/>169        </svg>170      </div>171    </div>172 173    <div class="keys">174      <div class="row">175        <div class="key">q</div>176        <div class="key">w</div>177        <div class="key">e</div>178        <div class="key">r</div>179        <div class="key">t</div>180        <div class="key">y</div>181        <div class="key">u</div>182        <div class="key">i</div>183        <div class="key">o</div>184        <div class="key">p</div>185      </div>186      <div class="row">187        <div class="key">a</div>188        <div class="key">s</div>189        <div class="key">d</div>190        <div class="key">f</div>191        <div class="key">g</div>192        <div class="key">h</div>193        <div class="key">j</div>194        <div class="key">k</div>195        <div class="key">l</div>196      </div>197      <div class="row">198        <div class="key wide">⇧</div>199        <div class="key">z</div>200        <div class="key">x</div>201        <div class="key">c</div>202        <div class="key">v</div>203        <div class="key">b</div>204        <div class="key">n</div>205        <div class="key">m</div>206        <div class="key wide icon">207          <!-- Backspace -->208          <svg viewBox="0 0 24 24"><path d="M3 12 L9 5 H20 V19 H9 Z" /><line x1="12" y1="9" x2="17" y2="14"/><line x1="17" y1="9" x2="12" y2="14"/></svg>209        </div>210      </div>211      <div class="row">212        <div class="key wide green">?123</div>213        <div class="key">,</div>214        <div class="key">😊</div>215        <div class="key space"></div>216        <div class="key">.</div>217        <div class="key wide green icon">218          <!-- Search icon -->219          <svg viewBox="0 0 24 24">220            <circle cx="10.5" cy="10.5" r="6" />221            <line x1="15" y1="15" x2="20" y2="20" />222          </svg>223        </div>224      </div>225    </div>226 227    <div class="gesture-bar"></div>228  </div>229 230</div>231</body>232</html>