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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12    border-radius: 0;13    box-shadow: none;14  }15 16  /* Header / Status Area */17  .header {18    position: absolute; left: 0; top: 0; width: 100%; height: 320px;19    background: linear-gradient(90deg, #9EE3D2 0%, #A7E6DA 100%);20  }21  .status-bar {22    height: 90px; display: flex; align-items: center; justify-content: space-between;23    padding: 0 40px; color: #0b2d2b; font-weight: 600; font-size: 34px;24  }25  .status-right { display: flex; align-items: center; gap: 22px; }26  .status-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.15); }27  .battery {28    width: 48px; height: 24px; border: 2px solid rgba(0,0,0,0.25); border-radius: 4px; position: relative;29  }30  .battery::after {31    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: rgba(0,0,0,0.25); border-radius: 2px;32  }33  .battery .level {34    width: 32px; height: 100%; background: rgba(0,0,0,0.25);35  }36 37  /* Search Bar */38  .search-area { position: absolute; left: 40px; right: 40px; top: 110px; }39  .back-btn { position: absolute; left: 0; top: 18px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }40  .search-bar {41    margin-left: 100px; height: 100px; border-radius: 20px; background: #ffffff;42    box-shadow: 0 6px 12px rgba(0,0,0,0.12);43    display: flex; align-items: center; padding: 0 24px; gap: 20px;44    border: 1px solid #e6e6e6;45  }46  .search-icon { width: 46px; height: 46px; }47  .search-text {48    flex: 1; font-size: 40px; color: #3b3b3b; line-height: 1;49    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;50  }51  .clear-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }52 53  /* Suggestion Row */54  .suggestion {55    position: absolute; left: 40px; right: 40px; top: 240px;56    display: flex; align-items: center; justify-content: space-between;57    color: #222; font-size: 38px;58  }59  .suggestion-left { display: flex; align-items: center; gap: 18px; }60  .suggestion .mag { width: 38px; height: 38px; opacity: 0.6; }61  .suggestion .send { width: 64px; height: 64px; opacity: 0.6; }62 63  /* Main white content (blank) */64  .content {65    position: absolute; top: 320px; left: 0; right: 0; bottom: 930px;66    background: #ffffff;67  }68 69  /* Keyboard mock */70  .keyboard {71    position: absolute; left: 0; right: 0; bottom: 0; height: 930px;72    background: #131516; color: #eaeaea;73    border-top: 1px solid #222;74  }75  .kb-suggestions {76    height: 110px; display: flex; align-items: center; gap: 20px;77    padding: 0 28px; color: #9ca3af; font-size: 34px; border-bottom: 1px solid #1e2225;78  }79  .kb-pill {80    padding: 14px 24px; border-radius: 20px; background: #1c1f22; border: 1px solid #2b2f33;81  }82  .kb-rows { padding: 20px 24px; }83  .row { display: flex; justify-content: center; gap: 16px; margin: 24px 0; }84  .key {85    width: 88px; height: 100px; border-radius: 16px;86    background: #2A2D31; border: 1px solid #3a3e44; display: flex; align-items: center; justify-content: center;87    font-size: 40px; color: #eaeaea;88  }89  .key.wide { width: 160px; }90  .key.xwide { width: 540px; }91  .key.circle {92    width: 110px; height: 110px; border-radius: 55px; background: #BFD7F7; color: #0d2238;93    border: 1px solid #9fbbe6; font-weight: 700;94  }95  .key.dark { background: #202327; border-color: #2b2f33; color: #c6c6c6; }96  .key.icon { font-size: 44px; color: #bfc7cf; }97  .return { background: #CBE0FF; color: #0d2238; border-color: #9fbbe6; }98 99  /* Home indicator */100  .home-indicator {101    position: absolute; left: 50%; transform: translateX(-50%);102    bottom: 20px; width: 360px; height: 10px; border-radius: 8px; background: #e9e9e9; opacity: 0.95;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Gradient Header -->110  <div class="header">111    <!-- Status bar -->112    <div class="status-bar">113      <div class="status-left">10:58</div>114      <div class="status-right">115        <div class="status-icon"></div>116        <div class="status-icon"></div>117        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="2">118          <path d="M2 9c6-6 14-6 20 0"></path>119          <path d="M6 13c4-4 8-4 12 0"></path>120          <path d="M10 17c2-2 4-2 6 0"></path>121        </svg>122        <div class="battery"><div class="level"></div></div>123      </div>124    </div>125 126    <!-- Search area -->127    <div class="search-area">128      <div class="back-btn">129        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1f4d47" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">130          <path d="M15 18l-6-6 6-6"></path>131        </svg>132      </div>133      <div class="search-bar">134        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">135          <circle cx="10" cy="10" r="7"></circle>136          <path d="M21 21l-5.5-5.5"></path>137        </svg>138        <div class="search-text">Toy Cars for 2 years old</div>139        <div class="clear-btn">140          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round">141            <path d="M6 6l12 12M18 6L6 18"></path>142          </svg>143        </div>144      </div>145    </div>146  </div>147 148  <!-- Suggestion -->149  <div class="suggestion">150    <div class="suggestion-left">151      <svg class="mag" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">152        <circle cx="10" cy="10" r="7"></circle>153        <path d="M21 21l-5.5-5.5"></path>154      </svg>155      <div>toy car for 2 years old <strong>boy</strong></div>156    </div>157    <svg class="send" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">158      <path d="M4 4l16 8-16 8 5-8-5-8z"></path>159    </svg>160  </div>161 162  <!-- Blank content area -->163  <div class="content"></div>164 165  <!-- Keyboard mock -->166  <div class="keyboard">167    <div class="kb-suggestions">168      <div class="kb-pill">old</div>169      <div class="kb-pill">older</div>170      <div class="kb-pill">🔑</div>171    </div>172 173    <div class="kb-rows">174      <div class="row">175        <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>176        <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>177      </div>178      <div class="row">179        <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>180        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>181      </div>182      <div class="row">183        <div class="key icon">⇧</div>184        <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><div class="key">n</div><div class="key">m</div>185        <div class="key icon">⌫</div>186      </div>187      <div class="row">188        <div class="key wide dark">?123</div>189        <div class="key dark">,</div>190        <div class="key dark">😊</div>191        <div class="key xwide">space</div>192        <div class="key dark">.</div>193        <div class="key circle">→</div>194      </div>195    </di