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 Places UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, 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; left: 0; right: 0;21    height: 120px;22    background: #000;23    color: #fff;24    font-size: 38px;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    letter-spacing: 0.5px;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .status-icon { display: inline-flex; align-items: center; }39 40  /* Search header */41  .search-wrap {42    position: absolute;43    top: 120px;44    left: 0; right: 0;45    padding: 34px 36px 24px 36px;46    box-sizing: border-box;47  }48  .search-row {49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .icon-btn {54    width: 72px; height: 72px;55    display: inline-flex;56    align-items: center; justify-content: center;57    color: #555;58  }59  .search-text {60    font-size: 50px;61    color: #444;62    letter-spacing: 0.2px;63    flex: 1;64  }65  .clear-btn {66    width: 78px; height: 78px; border-radius: 50%;67    background: #E9ECEF;68    display: flex; align-items: center; justify-content: center;69  }70  .underline {71    margin-left: 208px; /* aligns under text after back + search icons */72    width: 720px;73    height: 4px;74    background: #00BCD4;75    margin-top: 18px;76    border-radius: 2px;77  }78 79  /* Results list */80  .results {81    position: absolute;82    top: 300px; /* below search area */83    left: 0; right: 0;84    padding: 46px 36px 0 36px;85    box-sizing: border-box;86  }87  .item {88    display: flex;89    align-items: center;90    gap: 32px;91    padding: 26px 0;92  }93  .pin {94    width: 104px; height: 104px; border-radius: 52px;95    background: #00BCD4;96    display: flex; align-items: center; justify-content: center;97  }98  .item-title {99    font-size: 46px;100    color: #555;101  }102 103  /* Powered by Google */104  .powered {105    position: absolute;106    right: 70px;107    top: 1220px;108    color: #9E9E9E;109    font-size: 36px;110  }111  .google-word span { font-weight: 600; }112  .g-b { color: #4285F4; }113  .g-r { color: #DB4437; }114  .g-y { color: #F4B400; }115  .g-g { color: #0F9D58; }116 117  /* Bottom navigation pill */118  .nav-bar {119    position: absolute; left: 0; right: 0; bottom: 0;120    height: 120px; background: #000;121    display: flex; align-items: center; justify-content: center;122  }123  .nav-pill {124    width: 260px; height: 14px; border-radius: 12px; background: #CFCFCF;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status Bar -->132  <div class="status-bar">133    <div class="status-left">134      <div>12:39</div>135      <svg class="status-icon" width="28" height="28" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">136        <path d="M12 3l9 16H3z"></path>137      </svg>138    </div>139    <div class="status-right">140      <svg class="status-icon" width="30" height="30" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">141        <path d="M12 3a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7V3zM12 7a5 5 0 0 1 5 5h-2a3 3 0 0 0-3-3V7z"></path>142      </svg>143      <svg class="status-icon" width="34" height="34" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">144        <path d="M3 7h18v10H3z" fill="none" stroke="#fff" stroke-width="2"></path>145        <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>146        <rect x="19" y="10" width="2.5" height="4" fill="#fff"></rect>147      </svg>148      <div>100%</div>149    </div>150  </div>151 152  <!-- Search Header -->153  <div class="search-wrap">154    <div class="search-row">155      <div class="icon-btn" aria-label="Back">156        <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">157          <path d="M15 18l-6-6 6-6"></path>158        </svg>159      </div>160      <div class="icon-btn" aria-label="Search">161        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2.4" stroke-linecap="round">162          <circle cx="11" cy="11" r="7"></circle>163          <path d="M20 20l-3.5-3.5"></path>164        </svg>165      </div>166      <div class="search-text">Ulm</div>167      <div class="clear-btn" aria-label="Clear">168        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#7d7d7d" stroke-width="2.6" stroke-linecap="round">169          <path d="M6 6l12 12M18 6L6 18"></path>170        </svg>171      </div>172    </div>173    <div class="underline"></div>174  </div>175 176  <!-- Results -->177  <div class="results">178    <div class="item">179      <div class="pin">180        <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">181          <path fill="#fff" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 4.9 6.5 10.9 6.5 10.9S18.5 13.4 18.5 8.5A6.5 6.5 0 0 0 12 2zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>182        </svg>183      </div>184      <div class="item-title">Ulm, Germany</div>185    </div>186 187    <div class="item">188      <div class="pin">189        <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">190          <path fill="#fff" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 4.9 6.5 10.9 6.5 10.9S18.5 13.4 18.5 8.5A6.5 6.5 0 0 0 12 2zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>191        </svg>192      </div>193      <div class="item-title">Ulmen, Germany</div>194    </div>195 196    <div class="item">197      <div class="pin">198        <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">199          <path fill="#fff" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 4.9 6.5 10.9 6.5 10.9S18.5 13.4 18.5 8.5A6.5 6.5 0 0 0 12 2zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>200        </svg>201      </div>202      <div class="item-title">Ulmeni, Romania</div>203    </div>204 205    <div class="item">206      <div class="pin">207        <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">208          <path fill="#fff" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 4.9 6.5 10.9 6.5 10.9S18.5 13.4 18.5 8.5A6.5 6.5 0 0 0 12 2zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>209        </svg>210      </div>211      <div class="item-title">Ulmi, Romania</div>212    </div>213 214    <div class="item">215      <div class="pin">216        <svg width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">217          <path fill="#fff" d="M12 2a6.5 6.5 0 0 0-6.5 6.5c0 4.9 6.5 10.9 6.5 10.9S18.5 13.4 18.5 8.5A6.5 6.5 0 0 0 12 2zm0 9a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>218        </svg>219      </div>220      <div class="item-title">Ulmener Maar, Ulmen, Germany</div>221    </div>222  </div>223 224  <!-- Attribution -->225  <div class="powered">226    powered by227    <span class="google-word">228      <span class="g-b">G</span><span class="g-r">o</span><span class="g-y">o</span><span class="g-b">g</span><span class="g-g">l</span><span class="g-r">e</span>229    </span>230  </div>231 232  <!-- Bottom nav pill -->233  <div class="nav-bar">234    <div class="nav-pill"></div>235  </div>236</div>237</body>238</html>