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 Screen with Keyboard</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: #121212; color: #fff;13    font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    color: #fff;22  }23  .status-left { font-weight: 600; font-size: 40px; letter-spacing: 0.5px; }24  .status-right { display: flex; align-items: center; gap: 26px; }25  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; opacity: 0.9; }26 27  /* Search header */28  .search-header {29    position: absolute; top: 120px; left: 0; right: 0;30    height: 140px; padding: 0 28px 0 24px;31    display: flex; align-items: center;32  }33  .icon-btn {34    width: 88px; height: 88px;35    display: flex; align-items: center; justify-content: center;36  }37  .icon-btn svg { width: 56px; height: 56px; stroke: #ECECEC; stroke-width: 4; fill: none; }38  .search-text {39    flex: 1; color: #ECECEC;40    font-size: 64px; font-weight: 500;41    letter-spacing: 0.2px; margin-left: 8px;42    display: flex; align-items: baseline;43  }44  .caret {45    display: inline-block; width: 0; height: 72px;46    border-left: 4px solid #4A90FF; margin-left: 6px;47  }48 49  /* Suggestion strip */50  .suggestions {51    position: absolute; top: 1360px; left: 0; right: 0;52    height: 90px; display: flex; align-items: center; gap: 28px;53    padding: 0 28px;54    color: #E0E0E0; font-size: 40px;55  }56  .suggestions .item { opacity: 0.9; }57  .suggestions .divider {58    width: 2px; height: 44px; background: #3a3a3a;59  }60  .suggestions .spacer { flex: 1; }61  .suggestions .mic {62    width: 72px; height: 72px; border-radius: 36px;63    background: #2A2A2A; border: 1px solid #3a3a3a;64    display: flex; align-items: center; justify-content: center;65  }66  .suggestions .mic svg { width: 40px; height: 40px; stroke: #E0E0E0; stroke-width: 3; fill: none; }67 68  /* Keyboard */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 28px;71    height: 920px; background: #1D1F21;72    border-top: 1px solid #2a2a2a;73    display: flex; flex-direction: column; gap: 26px;74    padding: 28px 24px;75  }76  .key-row {77    display: flex; gap: 18px;78  }79  .key {80    flex: 1; height: 120px;81    background: #2A2A2A; border-radius: 22px;82    display: flex; align-items: center; justify-content: center;83    color: #E6E6E6; font-size: 44px; font-weight: 500;84    border: 1px solid #3a3a3a;85  }86  .key.small { flex: 0 0 92px; }87  .key.medium { flex: 0 0 140px; }88  .key.wide { flex: 2; }89  .key.extra-wide { flex: 4; }90  .key.circle {91    height: 120px; width: 120px; border-radius: 60px; flex: 0 0 120px;92    background: #91A6C7; color: #0b1116; font-weight: 700; border: none;93  }94  .key.secondary {95    background: #303234; color: #E0E0E0;96  }97  .key svg { width: 48px; height: 48px; stroke: #E6E6E6; stroke-width: 3; fill: none; }98 99  /* Home indicator */100  .home-indicator {101    position: absolute; bottom: 8px; left: 50%;102    width: 300px; height: 10px; margin-left: -150px;103    background: #E5E5E5; opacity: 0.8; border-radius: 6px;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div class="status-left">12:31</div>113    <div class="status-right">114      <div class="status-icon">115        <!-- Info icon -->116        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="18"></circle><line x1="24" y1="16" x2="24" y2="16"></line><line x1="24" y1="22" x2="24" y2="34"></line></svg>117      </div>118      <div class="status-icon">119        <!-- Upload/arrow up -->120        <svg viewBox="0 0 48 48"><path d="M24 10v20"></path><path d="M16 18l8-8 8 8"></path><path d="M10 38h28"></path></svg>121      </div>122      <div class="status-icon">123        <!-- YouTube (play) -->124        <svg viewBox="0 0 48 48"><rect x="8" y="12" width="32" height="24" rx="6"></rect><path d="M22 18l12 6-12 6z"></path></svg>125      </div>126      <div class="status-icon">127        <!-- Messages (envelope) -->128        <svg viewBox="0 0 48 48"><rect x="8" y="12" width="32" height="24" rx="4"></rect><path d="M8 16l16 12L40 16"></path></svg>129      </div>130      <div class="status-icon">131        <!-- Dot -->132        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="4"></circle></svg>133      </div>134      <div class="status-icon">135        <!-- WiFi -->136        <svg viewBox="0 0 48 48"><path d="M8 20c9-7 23-7 32 0"></path><path d="M14 26c6-5 14-5 20 0"></path><path d="M20 32c4-3 8-3 12 0"></path><circle cx="26" cy="36" r="2"></circle></svg>137      </div>138      <div class="status-icon">139        <!-- Battery -->140        <svg viewBox="0 0 48 48"><rect x="10" y="14" width="28" height="20" rx="3"></rect><rect x="38" y="19" width="4" height="10" rx="1"></rect></svg>141      </div>142    </div>143  </div>144 145  <!-- Search Header -->146  <div class="search-header">147    <div class="icon-btn">148      <!-- Back Arrow -->149      <svg viewBox="0 0 64 64"><path d="M40 16L24 32l16 16"></path></svg>150    </div>151    <div class="search-text">152      Roslyn Flower Show<span class="caret"></span>153    </div>154    <div class="icon-btn">155      <!-- Clear X -->156      <svg viewBox="0 0 64 64"><path d="M20 20l24 24M44 20L20 44"></path></svg>157    </div>158  </div>159 160  <!-- Large empty content area (dark background) -->161  <!-- Intentionally left empty to match screenshot -->162 163  <!-- Suggestion Strip -->164  <div class="suggestions">165    <div class="item">Show</div>166    <div class="divider"></div>167    <div class="item">Shower</div>168    <div class="divider"></div>169    <div class="item">Shoe</div>170    <div class="spacer"></div>171    <div class="mic">172      <!-- Microphone -->173      <svg viewBox="0 0 48 48">174        <rect x="18" y="12" width="12" height="18" rx="6"></rect>175        <path d="M12 24c0 8 24 8 24 0"></path>176        <path d="M24 30v8"></path>177        <path d="M18 38h12"></path>178      </svg>179    </div>180  </div>181 182  <!-- Keyboard -->183  <div class="keyboard">184    <!-- Row 1 -->185    <div class="key-row">186      <div class="key">q</div>187      <div class="key">w</div>188      <div class="key">e</div>189      <div class="key">r</div>190      <div class="key">t</div>191      <div class="key">y</div>192      <div class="key">u</div>193      <div class="key">i</div>194      <div class="key">o</div>195      <div class="key">p</div>196    </div>197    <!-- Row 2 -->198    <div class="key-row">199      <div class="key">a</div>200      <div class="key">s</div>201      <div class="key">d</div>202      <div class="key">f</div>203      <div class="key">g</div>204      <div class="key">h</div>205      <div class="key">j</div>206      <div class="key">k</div>207      <div class="key">l</div>208    </div>209    <!-- Row 3 -->210    <div class="key-row">211      <div class="key medium secondary">212        <!-- Shift -->213        <svg viewBox="0 0 48 48"><path d="M24 12l12 12H30v12H18V24h-6z"></path></svg>214      </div>215      <div class="key">z</div>216      <div class="key">x</div>217      <div class="key">c</div>218      <div class="key">v</div>219      <div class="key">b</div>220      <div class="key">n</div>221      <div class="key">m</div>222      <div class="key medium secondary">223        <!-- Backspace -->224        <svg viewBox="0 0 48 48"><path d="M16 14l-8 10 8 10h20a4 4 0 0 0 4-4V18a4 4 0 0 0-4-4H16z"></path><path d="M22 20l12 12M34 20L22 32"></path></svg>225      </div>226    </div>227    <!-- Row 4 -->228    <div class="key-row">229      <div class="key circle">?123</div>230      <div class="key small secondary">,</div>231      <div class="key small secondary">232        <!-- Emoji face -->233        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"></circle><circle cx="18" cy="22" r="2"></circle><circle cx="30" cy="22" r="2"></circle><path d="M16 30c4 4 12 4 16 0"></path></svg>234      </div>235      <div class="key extra-wide"> </div>236      <div class="key small secondary">.</div>237      <div class="key circle" style="background:#BBD2F4; color:#0d213b;">238        <!-- Search -->239        <svg viewBox="0 0 48 48" style="stroke:#0d213b;">240          <circle cx="20" cy="20" r="10"></circle>241          <path d="M28 28l10 10"></path>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- Home indicator bar -->248  <div class="home-indicator"></div>249</div>250</body>251</html>