GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Location Search UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #222;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px;20    color: #4a4a4a; font-size: 40px;21  }22  .status-right { display: flex; align-items: center; gap: 28px; }23  /* Search bar */24  .search-wrapper {25    position: absolute; top: 140px; left: 36px; right: 36px;26  }27  .search-bar {28    height: 120px; border-radius: 16px;29    border: 2px solid #cfe4f2; background: #eaf4fd;30    display: flex; align-items: center;31    padding: 0 28px; gap: 24px;32  }33  .caret {34    width: 3px; height: 58px; background: #1976d2; border-radius: 2px;35  }36  .search-placeholder {37    font-size: 42px; color: #7a8a99;38  }39  /* Location / Popular list */40  .list {41    position: absolute; top: 300px; left: 0; right: 0;42  }43  .list-row {44    display: flex; align-items: center; gap: 32px;45    padding: 36px 40px;46    border-bottom: 1px solid #ececec;47    background: #fff;48  }49  .row-title { font-size: 46px; }50  .row-sub { font-size: 34px; color: #7a7a7a; margin-top: 8px; }51  .section-header {52    font-size: 36px; letter-spacing: 1px; color: #333;53    background: #f0f0f0;54    padding: 26px 40px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;55  }56  /* Keyboard */57  .keyboard {58    position: absolute; left: 0; right: 0; bottom: 90px;59    height: 980px;60    background: #1f1a17;61    border-top-left-radius: 22px; border-top-right-radius: 22px;62    box-shadow: 0 -6px 14px rgba(0,0,0,0.15);63    padding: 30px 28px;64    color: #e8dbc2;65  }66  .kbd-toolbar { display: flex; align-items: center; gap: 36px; margin-bottom: 26px; }67  .tool-btn {68    width: 74px; height: 74px; border-radius: 50%;69    background: #2a2521; display: flex; align-items: center; justify-content: center;70  }71  .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; }72  .key {73    background: #2a2521; color: #dfcfb6;74    border-radius: 22px; height: 110px;75    display: flex; align-items: center; justify-content: center;76    font-size: 46px;77  }78  .row { margin-top: 20px; display: grid; gap: 18px; }79  .row.qwerty { grid-template-columns: repeat(10, 1fr); }80  .row.asdfg { grid-template-columns: 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr; justify-content: center; }81  .row.zxcvb { grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 1.3fr; }82  .key.shift, .key.backspace { font-size: 40px; }83  .bottom-row {84    display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 4fr 0.8fr 1.4fr; gap: 18px; margin-top: 24px;85  }86  .key.special { background: #bca786; color: #2a2521; font-weight: 600; }87  .nav-indicator {88    position: absolute; bottom: 24px; left: 50%;89    transform: translateX(-50%);90    width: 220px; height: 14px; border-radius: 10px; background: #ffffff;91    opacity: 0.9;92  }93  /* Icon wrappers (keep consistent sizing) */94  .icon { width: 64px; height: 64px; }95  .icon.large { width: 72px; height: 72px; }96  .list .icon { flex: 0 0 64px; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="status-bar">104    <div>11:45  68°</div>105    <div class="status-right">106      <!-- WiFi -->107      <svg class="icon" viewBox="0 0 64 64">108        <path d="M8 24c12-10 36-10 48 0" fill="none" stroke="#555" stroke-width="4" stroke-linecap="round"/>109        <path d="M16 32c8-7 24-7 32 0" fill="none" stroke="#555" stroke-width="4" stroke-linecap="round"/>110        <path d="M24 40c4-4 12-4 16 0" fill="none" stroke="#555" stroke-width="4" stroke-linecap="round"/>111        <circle cx="32" cy="48" r="3" fill="#555"/>112      </svg>113      <!-- Battery -->114      <svg class="icon" viewBox="0 0 64 64">115        <rect x="6" y="18" width="46" height="28" rx="5" ry="5" stroke="#555" stroke-width="4" fill="none"/>116        <rect x="10" y="22" width="28" height="20" rx="4" fill="#555"/>117        <rect x="54" y="24" width="6" height="16" rx="2" fill="#555"/>118      </svg>119    </div>120  </div>121 122  <!-- Search Field -->123  <div class="search-wrapper">124    <div class="search-bar">125      <!-- Back arrow -->126      <svg class="icon large" viewBox="0 0 72 72">127        <path d="M40 16 L20 36 L40 56" fill="none" stroke="#333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>128      </svg>129      <div class="caret"></div>130      <div class="search-placeholder">Where do you want to stay?</div>131    </div>132  </div>133 134  <!-- List Content -->135  <div class="list">136    <div class="list-row" style="border-top: 1px solid #ececec;">137      <!-- Paper plane / current location -->138      <svg class="icon" viewBox="0 0 64 64">139        <path d="M10 30 L54 14 L36 52 L30 36 Z" fill="none" stroke="#555" stroke-width="4" stroke-linejoin="round"/>140      </svg>141      <div style="display:flex; flex-direction:column;">142        <div class="row-title">Use current location</div>143        <div class="row-sub">Properties Near Me</div>144      </div>145    </div>146 147    <div class="section-header">POPULAR</div>148 149    <div class="list-row">150      <svg class="icon" viewBox="0 0 64 64">151        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>152        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>153      </svg>154      <div class="row-title">Delhi</div>155    </div>156 157    <div class="list-row">158      <svg class="icon" viewBox="0 0 64 64">159        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>160        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>161      </svg>162      <div class="row-title">Mumbai</div>163    </div>164 165    <div class="list-row">166      <svg class="icon" viewBox="0 0 64 64">167        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>168        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>169      </svg>170      <div class="row-title">Bengaluru</div>171    </div>172 173    <div class="list-row">174      <svg class="icon" viewBox="0 0 64 64">175        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>176        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>177      </svg>178      <div class="row-title">Goa</div>179    </div>180 181    <div class="list-row">182      <svg class="icon" viewBox="0 0 64 64">183        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>184        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>185      </svg>186      <div class="row-title">Chennai</div>187    </div>188 189    <div class="list-row">190      <svg class="icon" viewBox="0 0 64 64">191        <path d="M32 10c8 0 14 6 14 14 0 12-14 24-14 24S18 36 18 24c0-8 6-14 14-14z" fill="none" stroke="#555" stroke-width="4"/>192        <circle cx="32" cy="24" r="5" fill="none" stroke="#555" stroke-width="4"/>193      </svg>194      <div class="row-title">Dubai</div>195    </div>196  </div>197 198  <!-- Keyboard (visual approximation) -->199  <div class="keyboard">200    <div class="kbd-toolbar">201      <div class="tool-btn"></div>202      <div class="tool-btn"></div>203      <div class="tool-btn">GIF</div>204      <div class="tool-btn"></div>205      <div class="tool-btn"></div>206      <div class="tool-btn"></div>207      <div class="tool-btn"></div>208    </div>209 210    <div class="row qwerty">211      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>212    </div>213 214    <div class="row asdfg">215      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>216    </div>217 218    <div class="row zxcvb">219      <div class="key shift">⇧</div>220      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>221      <div class="key back