GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Calm Lake Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: linear-gradient(180deg, #0c1f27 0%, #0b1d24 60%, #0a1a21 100%);10    color: #e8f0f7;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 24px; left: 24px; right: 24px; height: 80px;16    display: flex; align-items: center; justify-content: space-between;17    font-size: 42px; letter-spacing: 0.5px;18    color: #ffffff;19    opacity: 0.95;20  }21  .status-right { display: flex; align-items: center; gap: 22px; }22  .icon { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 4px; }23 24  /* Search row */25  .search-row {26    position: absolute; top: 120px; left: 48px; right: 48px; height: 120px;27    display: flex; align-items: center; justify-content: space-between;28  }29  .search-input {30    width: 830px; height: 120px; border-radius: 60px;31    background: rgba(46, 72, 86, 0.8);32    display: flex; align-items: center; gap: 28px; padding: 0 36px; color: #d7e6ef;33    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);34  }35  .search-text { font-size: 42px; color: #d8e7ef; }36  .cancel { font-size: 42px; color: #c9d5df; opacity: 0.9; }37 38  /* Result item */39  .result-item {40    position: absolute; top: 280px; left: 48px; right: 48px; height: 170px;41    display: flex; align-items: center; gap: 28px;42  }43  .avatar {44    width: 120px; height: 120px; border-radius: 60px;45    background: #E0E0E0; border: 1px solid #BDBDBD;46    display: flex; align-items: center; justify-content: center;47    color: #757575; font-size: 26px; text-align: center;48  }49  .result-text { flex: 1; }50  .title { font-size: 50px; font-weight: 700; color: #f2f7fb; }51  .subtitle { font-size: 34px; color: #95a8b3; margin-top: 8px; }52  .lock { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }53  .divider {54    position: absolute; top: 458px; left: 48px; right: 48px; height: 2px;55    background: rgba(255,255,255,0.06);56  }57 58  /* Keyboard area */59  .keyboard {60    position: absolute; bottom: 0; left: 0; right: 0; height: 980px;61    background: #0e1111; border-top: 1px solid #1e2727;62    box-shadow: 0 -6px 30px rgba(0,0,0,0.35);63  }64 65  /* Suggestion bar */66  .suggestions {67    height: 110px; display: flex; align-items: center; gap: 28px;68    padding: 24px 36px 0 36px;69  }70  .chip {71    background: #1f2626; color: #cfd7d5; font-size: 36px;72    padding: 16px 34px; border-radius: 40px;73    border: 1px solid rgba(255,255,255,0.05);74  }75  .mic-btn {76    margin-left: auto; width: 92px; height: 92px; border-radius: 46px;77    background: #1f2626; display: flex; align-items: center; justify-content: center;78    border: 1px solid rgba(255,255,255,0.08);79  }80 81  /* Key rows */82  .keys { padding: 16px 28px 28px 28px; }83  .row {84    display: flex; justify-content: space-between; align-items: center;85    margin-top: 18px;86  }87  .key {88    width: 92px; height: 120px; border-radius: 26px;89    background: #1b2121; color: #e5ece6; font-size: 46px; line-height: 120px;90    text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);91  }92  .key.wide { width: 150px; }93  .key.wider { width: 170px; }94  .space {95    width: 560px; height: 120px; border-radius: 28px; background: #1b2121;96    display: flex; align-items: center; justify-content: center; color: #d6dfd7;97    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); font-size: 38px;98  }99  .green-check {100    width: 132px; height: 132px; border-radius: 66px; background: #c7f3c9;101    color: #0d2c12; font-size: 64px; display: flex; align-items: center; justify-content: center;102    margin-left: 16px;103  }104 105  /* Small helper icon keys */106  .mini-icon {107    width: 92px; height: 120px; border-radius: 26px; background: #1b2121;108    display: flex; align-items: center; justify-content: center;109    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);110  }111  .mini-icon svg { width: 46px; height: 46px; stroke: #e5ece6; fill: none; stroke-width: 4px; }112 113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status bar -->119  <div class="status-bar">120    <div>3:45</div>121    <div class="status-right">122      <!-- simple headphone icon -->123      <svg class="icon" viewBox="0 0 24 24">124        <path d="M4 12a8 8 0 0 1 16 0" />125        <rect x="3" y="12" width="4" height="8" rx="2"></rect>126        <rect x="17" y="12" width="4" height="8" rx="2"></rect>127      </svg>128      <!-- wifi -->129      <svg class="icon" viewBox="0 0 24 24">130        <path d="M2 8c5-5 15-5 20 0"></path>131        <path d="M5 12c4-4 10-4 14 0"></path>132        <path d="M8 16c3-3 5-3 8 0"></path>133        <circle cx="12" cy="19" r="1.6" fill="#ffffff" stroke="none"></circle>134      </svg>135      <!-- battery -->136      <svg class="icon" viewBox="0 0 24 24">137        <rect x="3" y="7" width="16" height="10" rx="2"></rect>138        <rect x="20" y="10" width="2" height="4" rx="1"></rect>139        <rect x="5" y="9" width="12" height="6" rx="1" fill="#ffffff" stroke="none"></rect>140      </svg>141    </div>142  </div>143 144  <!-- Search row -->145  <div class="search-row">146    <div class="search-input">147      <svg class="icon" viewBox="0 0 24 24">148        <circle cx="11" cy="11" r="6"></circle>149        <line x1="16" y1="16" x2="21" y2="21"></line>150      </svg>151      <span class="search-text">Calm lake</span>152    </div>153    <div class="cancel">Cancel</div>154  </div>155 156  <!-- Result item -->157  <div class="result-item">158    <div class="avatar">[IMG: Calm Lake]</div>159    <div class="result-text">160      <div class="title">Calm Lake</div>161      <div class="subtitle">30 min - Soothing Sounds</div>162    </div>163    <div class="lock">164      <svg class="icon" viewBox="0 0 24 24">165        <rect x="6" y="10" width="12" height="10" rx="2"></rect>166        <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>167      </svg>168    </div>169  </div>170  <div class="divider"></div>171 172  <!-- Keyboard -->173  <div class="keyboard">174    <div class="suggestions">175      <div class="chip">lake</div>176      <div class="chip">Lake</div>177      <div class="chip">lakes</div>178      <div class="mic-btn">179        <svg class="icon" viewBox="0 0 24 24">180          <rect x="9" y="4" width="6" height="10" rx="3"></rect>181          <path d="M6 11a6 6 0 0 0 12 0"></path>182          <line x1="12" y1="17" x2="12" y2="22"></line>183          <line x1="8" y1="22" x2="16" y2="22"></line>184        </svg>185      </div>186    </div>187 188    <div class="keys">189      <!-- Row 1 -->190      <div class="row">191        <div class="key">q</div>192        <div class="key">w</div>193        <div class="key">e</div>194        <div class="key">r</div>195        <div class="key">t</div>196        <div class="key">y</div>197        <div class="key">u</div>198        <div class="key">i</div>199        <div class="key">o</div>200        <div class="key">p</div>201      </div>202 203      <!-- Row 2 -->204      <div class="row">205        <div class="key">a</div>206        <div class="key">s</div>207        <div class="key">d</div>208        <div class="key">f</div>209        <div class="key">g</div>210        <div class="key">h</div>211        <div class="key">j</div>212        <div class="key">k</div>213        <div class="key">l</div>214      </div>215 216      <!-- Row 3 -->217      <div class="row">218        <div class="mini-icon">219          <!-- home/shift like icon -->220          <svg viewBox="0 0 24 24">221            <path d="M4 12l8-7 8 7"></path>222            <rect x="6" y="12" width="12" height="8" rx="2"></rect>223          </svg>224        </div>225        <div class="key">z</div>226        <div class="key">x</div>227        <div class="key">c</div>228        <div class="key">v</div>229        <div class="key">b</div>230        <div class="key">n</div>231        <div class="key">m</div>232        <div class="mini-icon">233          <!-- backspace icon -->234          <svg viewBox="0 0 24 24">235            <path d="M3 12l6-6h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-6-6z"></path>236            <path d="M12 9l4 4m0-4l-4 4"></path>237          </svg>238        </div>239      </div>240 241      <!-- Row 4 -->242      <div class="row" style="align-items: center;">243        <div class="key wider">?123</div>244        <div class="key">,</div>245        <div class="key">☺</div>246        <div class="space">space</div>247        <div class="key">.</div>248        <div class="green-check">✓</div>249      </div>250    </div>251  </div>252 253</div>254</body>255</html>