GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recipes - Search</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    padding: 0 28px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #3C3C3C;30    font-size: 34px;31    letter-spacing: 1px;32  }33  .status-left { display: flex; align-items: center; gap: 22px; }34  .status-right { display: flex; align-items: center; gap: 24px; }35  .icon {36    display: inline-flex;37    width: 38px; height: 38px;38    align-items: center; justify-content: center;39  }40 41  /* App header */42  .app-header {43    position: absolute;44    top: 100px;45    left: 0;46    width: 1080px;47    height: 120px;48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .back-btn {54    width: 96px; height: 96px;55    border: none; background: transparent; padding: 0; margin-right: 8px;56  }57  .title {58    font-size: 56px;59    font-weight: 700;60    color: #222;61  }62 63  /* Search area */64  .search-wrap {65    position: absolute;66    top: 260px;67    left: 40px;68    width: 1000px;69  }70  .search-box {71    width: 1000px;72    height: 140px;73    border-radius: 28px;74    background: #F4F4F4;75    border: 1px solid #ECECEC;76    display: flex;77    align-items: center;78    padding: 0 36px;79    box-sizing: border-box;80    gap: 26px;81  }82  .search-placeholder {83    color: #A8A8A8;84    font-size: 42px;85    letter-spacing: 0.5px;86  }87 88  /* Keyboard */89  .keyboard {90    position: absolute;91    bottom: 0; left: 0;92    width: 1080px;93    height: 920px;94    background: #1B1B1B;95    color: #EDEDED;96    padding: 28px 26px 34px 26px;97    box-sizing: border-box;98  }99  .kb-toolbar {100    display: flex;101    align-items: center;102    justify-content: space-between;103    padding: 12px 18px 10px 18px;104    margin-bottom: 18px;105  }106  .kb-row {107    display: flex;108    gap: 16px;109    margin: 18px 0;110    padding: 0 6px;111  }112  .key {113    flex: 0 0 85px;114    height: 120px;115    background: #2E2E2E;116    border-radius: 22px;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #DCDCDC;121    font-size: 46px;122    box-shadow: inset 0 0 0 1px #3A3A3A;123  }124  .key.wide { flex-basis: 120px; }125  .key.backspace { flex-basis: 140px; }126  .row2-offset { margin-left: 48px; }127  .row3-offset { margin-left: 80px; }128 129  .bottom-row {130    display: flex; align-items: center; gap: 18px;131    margin-top: 16px;132    padding: 0 6px;133  }134  .key-small { height: 120px; flex: 0 0 150px; }135  .comma { flex-basis: 110px; }136  .emoji { flex-basis: 110px; font-size: 40px; }137  .spacebar { flex: 1 1 auto; height: 120px; background: #2E2E2E; border-radius: 22px; box-shadow: inset 0 0 0 1px #3A3A3A; }138  .period { flex-basis: 110px; }139  .search-btn {140    width: 145px; height: 145px; border-radius: 50%;141    background: #CFE0FF; color: #2F5FFF;142    display: flex; align-items: center; justify-content: center;143    margin-left: auto;144  }145 146  /* Utility icon colors */147  .muted { color: #777; }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div class="status-left">156      <div class="time">8:52</div>157    </div>158    <div class="status-right">159      <!-- Wi-Fi -->160      <span class="icon">161        <svg width="36" height="36" viewBox="0 0 24 24" fill="#555"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zM2 8.5l2 2a12 12 0 0 1 16 0l2-2c-5.5-5-16.5-5-20 0zm4 4l2 2a8 8 0 0 1 8 0l2-2c-3.5-3-10.5-3-12 0zm4 4l2 2 2-2c-1.5-1-4.5-1-6 0z"/></svg>162      </span>163      <!-- Battery -->164      <span class="icon">165        <svg width="36" height="36" viewBox="0 0 24 24" fill="#555"><path d="M16 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v2H8v-2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1V5h8v2zm-1 2H9v6h6V9z"/></svg>166      </span>167    </div>168  </div>169 170  <!-- App Header -->171  <div class="app-header">172    <button class="back-btn" aria-label="Back">173      <svg width="56" height="56" viewBox="0 0 24 24" fill="#5E5E5E"><path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/></svg>174    </button>175    <div class="title">Recipes</div>176  </div>177 178  <!-- Search -->179  <div class="search-wrap">180    <div class="search-box">181      <svg width="52" height="52" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>182      <div class="search-placeholder muted">Search</div>183    </div>184  </div>185 186  <!-- Keyboard -->187  <div class="keyboard">188    <!-- Toolbar above keys -->189    <div class="kb-toolbar">190      <span class="icon"><svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD"><circle cx="12" cy="9" r="3"/><path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6H4z"/></svg></span>191      <span style="color:#BDBDBD;font-size:36px;">GIF</span>192      <span class="icon"><svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5zm7.5-3.5h2v0a9.5 9.5 0 1 0-2.8 6.7l1.4 1.4A11.5 11.5 0 1 1 23.5 12h-2z"/></svg></span>193      <span class="icon"><svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/></svg></span>194      <span class="icon"><svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD"><circle cx="12" cy="12" r="9"/></svg></span>195      <span class="icon"><svg width="40" height="40" viewBox="0 0 24 24" fill="#BDBDBD"><path d="M12 3a4 4 0 0 1 4 4v5.2l2.3 2.3-1.4 1.4L14 14.6V7a2 2 0 1 0-4 0v7.6l-2.9 1.3-.7-1.8 2.6-1.2V7a4 4 0 0 1 4-4z"/></svg></span>196    </div>197 198    <!-- Row 1 -->199    <div class="kb-row">200      <div class="key">q</div>201      <div class="key">w</div>202      <div class="key">e</div>203      <div class="key">r</div>204      <div class="key">t</div>205      <div class="key">y</div>206      <div class="key">u</div>207      <div class="key">i</div>208      <div class="key">o</div>209      <div class="key">p</div>210    </div>211 212    <!-- Row 2 -->213    <div class="kb-row row2-offset">214      <div class="key">a</div>215      <div class="key">s</div>216      <div class="key">d</div>217      <div class="key">f</div>218      <div class="key">g</div>219      <div class="key">h</div>220      <div class="key">j</div>221      <div class="key">k</div>222      <div class="key">l</div>223    </div>224 225    <!-- Row 3 -->226    <div class="kb-row row3-offset">227      <div class="key">z</div>228      <div class="key">x</div>229      <div class="key">c</div>230      <div class="key">v</div>231      <div class="key">b</div>232      <div class="key">n</div>233      <div class="key">m</div>234      <div class="key backspace">235        <svg width="44" height="44" viewBox="0 0 24 24" fill="#DADADA"><path d="M22 6v12H9l-7-6 7-6h13zm-7.5 3.5L12 12l2.5 2.5 1.5-1.5L15 12l1.5-1.5-1.5-1.5z"/></svg>236      </div>237    </div>238 239    <!-- Bottom Row -->240    <div class="bottom-row">241      <div class="key key-small">?123</div>242      <div class="key comma">,</div>243      <div class="key emoji">🙂</div>244      <div class="spacebar"></div>245      <div class="key period">.</div>246      <div class="search-btn">247        <svg width="64" height="64" viewBox="0 0 24 24" fill="#2F5FFF"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>248      </div>249    </div>250  </div>251 252</div>253</body>254</html>