GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI - Brussels</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #B9E969; /* lime */19    display: flex; align-items: center; padding: 0 36px;20    color: #ffffff; font-weight: 600; font-size: 40px;21  }22  .statusbar .spacer { flex: 1; }23  .status-icons { display: flex; align-items: center; gap: 28px; }24  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 3; }25 26  /* Search bar */27  .searchbar {28    position: absolute; top: 110px; left: 0; right: 0;29    height: 150px; background: #B9E969;30    display: flex; align-items: center; padding: 0 28px;31    color: #212121;32    box-sizing: border-box;33  }34  .search-icon, .close-icon {35    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;36  }37  .search-text {38    flex: 1; font-size: 58px; font-weight: 500; padding: 0 16px;39  }40 41  /* List results */42  .results {43    position: absolute; top: 260px; left: 0; right: 0; bottom: 950px;44    background: #ffffff;45  }46  .result-item {47    padding: 34px 36px 32px 36px;48    border-bottom: 2px solid #E0E0E0;49  }50  .result-title {51    font-size: 54px; font-weight: 700; color: #222222; margin-bottom: 10px;52  }53  .result-sub {54    font-size: 34px; color: #8E8E8E;55  }56 57  /* Keyboard */58  .keyboard {59    position: absolute; left: 0; right: 0; bottom: 0;60    height: 950px; background: #2F2A27; color: #EAD6C7;61    box-shadow: 0 -2px 0 rgba(0,0,0,0.06) inset;62  }63  .kb-suggestion {64    height: 86px; border-bottom: 1px solid rgba(255,255,255,0.08);65    display: flex; align-items: center; justify-content: center;66    font-size: 36px; color: #EAD6C7;67  }68  .kb-row {69    display: flex; gap: 12px; padding: 18px 24px;70    justify-content: center;71  }72  .key {73    width: 88px; height: 120px; border-radius: 28px;74    background: #3A3330; display: flex; align-items: center; justify-content: center;75    font-size: 42px; color: #EAD6C7;76  }77  .key.wide { width: 120px; }78  .key.xwide { width: 180px; }79  .key.space { flex: 1; height: 120px; min-width: 320px; }80  .key.light {81    background: #E2C5A9; color: #2F2A27; font-weight: 600;82  }83  .kb-bottom {84    padding: 0 24px 24px 24px;85  }86 87  /* Home indicator */88  .home-indicator {89    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);90    width: 220px; height: 12px; background: #e6e6e6; border-radius: 8px;91  }92 93  /* Simple icon styling for keyboard */94  .key svg { width: 40px; height: 40px; stroke: #EAD6C7; fill: none; stroke-width: 3; }95  .key.light svg { stroke: #2F2A27; }96 97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status bar -->103  <div class="statusbar">104    <div>3:55</div>105    <div class="spacer"></div>106    <div class="status-icons">107      <!-- Wifi -->108      <svg viewBox="0 0 24 24">109        <path d="M2 8c5-4 15-4 20 0"></path>110        <path d="M5 12c3-3 11-3 14 0"></path>111        <path d="M8 16c2-2 6-2 8 0"></path>112        <circle cx="12" cy="19" r="1.8" fill="#ffffff"></circle>113      </svg>114      <!-- Battery -->115      <svg viewBox="0 0 28 24">116        <rect x="2" y="6" width="20" height="12" rx="2"></rect>117        <rect x="22" y="9" width="3.5" height="6" rx="1"></rect>118        <rect x="4" y="8" width="12" height="8" fill="#ffffff" stroke="none"></rect>119      </svg>120    </div>121  </div>122 123  <!-- Search bar -->124  <div class="searchbar">125    <div class="search-icon">126      <svg viewBox="0 0 24 24">127        <path d="M15 18L6 12l9-6" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>128      </svg>129    </div>130    <div class="search-text">Brussels</div>131    <div class="close-icon">132      <svg viewBox="0 0 24 24">133        <path d="M5 5L19 19M19 5L5 19" stroke="#222" stroke-width="3" stroke-linecap="round"></path>134      </svg>135    </div>136  </div>137 138  <!-- Results list -->139  <div class="results">140    <div class="result-item">141      <div class="result-title">Brussels</div>142      <div class="result-sub">Belgium</div>143    </div>144    <div class="result-item">145      <div class="result-title">Brussels <span style="font-weight:500;">Airport</span></div>146      <div class="result-sub">Belgium</div>147    </div>148  </div>149 150  <!-- Keyboard -->151  <div class="keyboard">152    <div class="kb-suggestion">Brussels</div>153 154    <div class="kb-row">155      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>156      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>157      <div class="key">o</div><div class="key">p</div>158    </div>159 160    <div class="kb-row">161      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>162      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>163      <div class="key">l</div>164    </div>165 166    <div class="kb-row">167      <div class="key wide">168        <!-- Shift icon -->169        <svg viewBox="0 0 24 24">170          <path d="M12 5l7 7h-4v7H9v-7H5z"></path>171        </svg>172      </div>173      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>174      <div class="key">b</div><div class="key">n</div><div class="key">m</div>175      <div class="key wide">176        <!-- Backspace -->177        <svg viewBox="0 0 24 24">178          <path d="M3 12l5-6h12v12H8z"></path>179          <path d="M10 9l6 6M16 9l-6 6"></path>180        </svg>181      </div>182    </div>183 184    <div class="kb-row kb-bottom">185      <div class="key xwide light">?123</div>186      <div class="key">,</div>187      <div class="key xwide">188        <!-- Emoji -->189        <svg viewBox="0 0 24 24">190          <circle cx="12" cy="12" r="9"></circle>191          <circle cx="9" cy="10" r="1.3" fill="#EAD6C7" stroke="none"></circle>192          <circle cx="15" cy="10" r="1.3" fill="#EAD6C7" stroke="none"></circle>193          <path d="M8 15c2 2 6 2 8 0" fill="none"></path>194        </svg>195      </div>196      <div class="key space"></div>197      <div class="key">.</div>198      <div class="key xwide light">199        <!-- Search icon -->200        <svg viewBox="0 0 24 24">201          <circle cx="11" cy="11" r="6"></circle>202          <path d="M16 16l5 5"></path>203        </svg>204      </div>205      <div class="key xwide">206        <!-- Mic -->207        <svg viewBox="0 0 24 24">208          <rect x="9" y="5" width="6" height="8" rx="3"></rect>209          <path d="M12 13v5M8 11c0 4 8 4 8 0"></path>210        </svg>211      </div>212    </div>213  </div>214 215  <div class="home-indicator"></div>216</div>217</body>218</html>