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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FAFAFA;13    font-family: Arial, Helvetica, sans-serif; color: #333;14  }15  .status-bar {16    height: 120px; background: #EDEDED; display: flex; align-items: center;17    padding: 0 36px; box-sizing: border-box; color: #4A4A4A;18  }19  .status-left { display: flex; align-items: center; gap: 24px; font-size: 48px; font-weight: 600; }20  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }21  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #666; stroke-width: 3; }22  /* Search bar */23  .search-bar {24    height: 140px; background: #FFFFFF; display: flex; align-items: center;25    padding: 0 36px; box-sizing: border-box; border-bottom: 1px solid #E6E6E6;26  }27  .back-icon svg { width: 64px; height: 64px; stroke: #616161; stroke-width: 6; fill: none; }28  .search-input {29    margin-left: 24px; flex: 1; position: relative; display: flex; align-items: center;30    font-size: 48px; color: #9E9E9E;31  }32  .caret {33    width: 3px; height: 60px; background: #000; margin-right: 16px;34  }35  /* Tabs */36  .tabs {37    padding: 24px 36px; display: flex; gap: 24px; background: #FFFFFF; box-sizing: border-box;38  }39  .pill {40    flex: 1; height: 96px; border-radius: 48px; background: #EFEFEF; color: #666;41    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 600;42  }43  .pill.active {44    background: #FFFFFF; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 1px solid #E0E0E0;45  }46  /* Recent search list */47  .recent-wrap { background: #FFFFFF; border-top: 1px solid #EEEEEE; }48  .recent-header {49    display: flex; align-items: center; gap: 18px; padding: 24px 36px 12px; color: #7A7A7A;50    font-size: 36px; letter-spacing: 1px; text-transform: uppercase;51  }52  .clock-icon svg { width: 44px; height: 44px; stroke: #7A7A7A; fill: none; stroke-width: 3; }53  .result-item { padding: 6px 36px 36px; }54  .result-title {55    font-size: 46px; color: #2F2F2F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px;56  }57  .result-sub { font-size: 36px; color: #9C9C9C; }58  /* Keyboard */59  .keyboard {60    position: absolute; left: 0; bottom: 80px; width: 100%; height: 900px;61    background: #121212; border-top: 1px solid #2A2A2A; box-sizing: border-box; padding: 20px 24px;62    color: #FFF;63  }64  .kbd-tools {65    height: 120px; display: flex; align-items: center; gap: 36px; padding: 0 4px; color: #DCDCDC;66    font-size: 40px; letter-spacing: 2px;67  }68  .tool-icon {69    width: 88px; height: 88px; background: #222; border-radius: 18px; display: flex; align-items: center; justify-content: center;70    border: 1px solid #303030;71  }72  .rows { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }73  .row { display: flex; gap: 14px; justify-content: center; }74  .key {75    width: 88px; height: 110px; background: #2A2A2A; border-radius: 18px; display: flex; align-items: center; justify-content: center;76    border: 1px solid #3A3A3A; font-size: 46px; color: #EFEFEF;77  }78  .key.wide { width: 120px; }79  .space { width: 420px; }80  .key.blue { background: #BDEBFF; color: #0B2E3D; border-color: #B3E4FA; }81  .gesture-bar {82    position: absolute; left: 50%; transform: translateX(-50%);83    bottom: 24px; width: 200px; height: 10px; background: #E8E8E8; border-radius: 8px;84  }85</style>86</head>87<body>88<div id="render-target">89  <!-- Status bar -->90  <div class="status-bar">91    <div class="status-left">92      <div>10:53</div>93      <div class="status-icon">94        <!-- calendar icon -->95        <svg viewBox="0 0 24 24">96          <rect x="3" y="5" width="18" height="16" rx="2"></rect>97          <line x1="3" y1="9" x2="21" y2="9"></line>98          <line x1="7" y1="3" x2="7" y2="7"></line>99          <line x1="17" y1="3" x2="17" y2="7"></line>100        </svg>101      </div>102      <div class="status-icon">103        <!-- cloud icon -->104        <svg viewBox="0 0 24 24">105          <path d="M7 16a4 4 0 0 1 0-8c.7-3 3-5 6-5 3.5 0 6.5 3 6.5 6.5 2 .5 3.5 2.3 3.5 4.5A5 5 0 0 1 18 19H9.5A3.5 3.5 0 0 1 7 16z" stroke-linecap="round" stroke-linejoin="round"></path>106        </svg>107      </div>108    </div>109    <div class="status-right">110      <div class="status-icon">111        <!-- wifi -->112        <svg viewBox="0 0 24 24">113          <path d="M2 8c5-4 15-4 20 0" stroke-linecap="round"></path>114          <path d="M5 12c3-3 11-3 14 0" stroke-linecap="round"></path>115          <path d="M8 15c2-2 6-2 8 0" stroke-linecap="round"></path>116          <circle cx="12" cy="18" r="1.5" fill="#666" stroke="none"></circle>117        </svg>118      </div>119      <div class="status-icon">120        <!-- battery -->121        <svg viewBox="0 0 24 24">122          <rect x="2" y="6" width="18" height="12" rx="2"></rect>123          <rect x="4.5" y="8" width="13" height="8" rx="1" fill="#666" stroke="none"></rect>124          <rect x="21" y="9" width="2" height="8" rx="1"></rect>125        </svg>126      </div>127    </div>128  </div>129 130  <!-- Search bar -->131  <div class="search-bar">132    <div class="back-icon">133      <svg viewBox="0 0 24 24">134        <path d="M15 19L8 12l7-7" stroke-linecap="round" stroke-linejoin="round"></path>135      </svg>136    </div>137    <div class="search-input">138      <div class="caret"></div>139      <div>City, Address, School, Building, ZIP</div>140    </div>141  </div>142 143  <!-- Tabs -->144  <div class="tabs">145    <div class="pill">For Sale</div>146    <div class="pill active">For Rent</div>147    <div class="pill">Sold</div>148  </div>149 150  <!-- Recent search -->151  <div class="recent-wrap">152    <div class="recent-header">153      <div class="clock-icon">154        <svg viewBox="0 0 24 24">155          <circle cx="12" cy="12" r="9"></circle>156          <path d="M12 7v6l4 2" stroke-linecap="round"></path>157        </svg>158      </div>159      <div>MOST RECENT SEARCH</div>160    </div>161    <div class="result-item">162      <div class="result-title">NMS Residential West LA Apartments and Co-Livi...</div>163      <div class="result-sub">1759 Beloit Ave, Los Angeles, CA, USA</div>164    </div>165  </div>166 167  <!-- Empty body space (white background) fills automatically -->168 169  <!-- Keyboard -->170  <div class="keyboard">171    <div class="kbd-tools">172      <div class="tool-icon">⬚</div>173      <div class="tool-icon">🙂</div>174      <div style="color:#FFF; font-weight:700;">GIF</div>175      <div class="tool-icon">176        <svg viewBox="0 0 24 24" width="40" height="40" stroke="#CFCFCF" fill="none" stroke-width="2">177          <path d="M12 3v18M3 12h18"></path>178        </svg>179      </div>180      <div class="tool-icon">Gᵀ</div>181      <div class="tool-icon">182        <svg viewBox="0 0 24 24" width="40" height="40" stroke="#CFCFCF" fill="none" stroke-width="2">183          <circle cx="12" cy="12" r="9"></circle><path d="M9 9h6v6H9z"></path>184        </svg>185      </div>186      <div class="tool-icon">187        <svg viewBox="0 0 24 24" width="40" height="40" stroke="#CFCFCF" fill="none" stroke-width="2">188          <path d="M12 5v14M5 12h14"></path>189        </svg>190      </div>191    </div>192    <div class="rows">193      <div class="row">194        <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>195        <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>196      </div>197      <div class="row">198        <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>199        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>200      </div>201      <div class="row">202        <div class="key wide">⇧</div>203        <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>204        <div class="key">n</div><div class="key">m</div>205        <div class="key wide">⌫</div>206      </div>207      <div class="row">208        <div class="key wide">?123</div>209        <div class="key wide">,</div>210        <div class="key wide">🙂</div>211        <div class="key space"></div>212        <div class="key wide">.</div>213        <div class="key wide blue">214          <svg viewBox="0 0 24 24" width="48" height="48" stroke="#0B2E3D" fill="none" stroke-width="2">215            <circle cx="11" cy="11" r="7"></circle>216            <line x1="16.5" y1="16.5" x2="21" y2="21"></line>217          </svg>218        </div>219      </div>220    </div>221  </div>222 223  <!-- Gesture bar -->224  <div class="gesture-bar"></div>225</div>226</body>227</html>