GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI - White Sauce Pasta</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height:120px; background:#3a3a3a; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; font-size:42px; letter-spacing:0.5px;19  }20  .status-left { display:flex; align-items:center; gap:18px; }21  .status-right { display:flex; align-items:center; gap:26px; }22  .status-icon svg { width:38px; height:38px; fill:#fff; opacity:0.9; }23 24  /* Search area */25  .search-area { padding:26px 36px 18px; }26  .search-bar {27    height:120px; border-radius:30px; background:#f3f3f3;28    display:flex; align-items:center; gap:26px;29    padding:0 30px; font-size:50px; color:#333;30  }31  .search-bar .input-text { flex:1; }32  .search-icon svg, .close-icon svg { width:50px; height:50px; fill:#6f6f6f; }33 34  /* Suggestion dropdown */35  .suggestion {36    margin:18px 0 0; height:110px; display:flex; align-items:center;37    padding:0 36px; font-size:44px; color:#666;38    box-shadow: 0 6px 12px rgba(0,0,0,0.08);39    background:#ffffff;40  }41 42  /* Promo text and image */43  .promo-text {44    margin:34px 60px 20px; font-size:38px; color:#7b7b7b;45  }46  .promo-image {47    width:960px; height:700px; margin:0 60px;48    background:#E0E0E0; border:1px solid #BDBDBD;49    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;50  }51 52  /* Keyboard */53  .keyboard {54    position:absolute; left:0; right:0; bottom:60px;55    background:#f3f3ed; border-top:1px solid #ddd;56    padding:22px 28px 26px;57  }58  .kb-top-row {59    display:flex; align-items:center; gap:20px;60    margin-bottom:14px;61  }62  .kb-dot {63    width:72px; height:72px; border-radius:16px; background:#d7e6d1;64    display:flex; align-items:center; justify-content:center;65  }66  .chip {67    padding:18px 26px; border-radius:40px; background:#ffffff;68    border:1px solid #d9d9d9; font-size:38px; color:#4b4b4b;69  }70  .kb-spacer { flex:1; }71  .kb-mic {72    width:72px; height:72px; border-radius:16px; background:#d7e6d1;73    display:flex; align-items:center; justify-content:center;74  }75  .kb-mic svg { width:40px; height:40px; fill:#3a3a3a; }76 77  .kb-row { display:flex; justify-content:center; gap:16px; margin:18px 0; }78  .key {79    width:92px; height:106px; background:#fff; border:1px solid #ddd;80    border-radius:20px; display:flex; align-items:center; justify-content:center;81    font-size:46px; color:#222;82  }83  .key.wide { width:160px; }84  .key.space { flex:1; min-width:420px; }85  .key.pale { background:#d7e6d1; border-color:#cbd9c5; color:#1f1f1f; }86  .key.circle {87    width:106px; height:106px; border-radius:53px; background:#9ed18c; border:none;88  }89  .key.icon svg { width:48px; height:48px; fill:#1f1f1f; }90  .key.search svg { width:54px; height:54px; fill:#1f1f1f; }91 92  /* Gesture bar */93  .gesture-bar {94    position:absolute; left:50%; transform:translateX(-50%);95    bottom:16px; width:360px; height:12px; background:#9e9e9e; border-radius:6px;96    opacity:0.7;97  }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div class="status-left">106      <div>3:03</div>107    </div>108    <div class="status-right">109      <div class="status-icon">110        <!-- Chat bubble -->111        <svg viewBox="0 0 24 24"><path d="M3 4h18v12H9l-5 4v-4H3V4z"/></svg>112      </div>113      <div class="status-icon">114        <!-- Trophy -->115        <svg viewBox="0 0 24 24"><path d="M4 5h16v3a5 5 0 0 1-5 5h-2v3h4v2H7v-2h4v-3H9a5 5 0 0 1-5-5V5z"/></svg>116      </div>117      <div class="status-icon">118        <!-- Pencil -->119        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>120      </div>121      <div class="status-icon">122        <!-- Pinterest P -->123        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 16c3 0 5-1.9 5-4.5S15.5 7 12 7c-3 0-5 2.2-4.7 4.6.2 1.7 1.4 2.8 2.7 2.9-.2.8-.6 2.3-.8 3.4l1.4-.6.8-3c.3.1.6.1.8.1z" fill="#fff"/></svg>124      </div>125      <div class="status-icon">126        <!-- Dot -->127        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>128      </div>129      <div class="status-icon">130        <!-- Wi-Fi -->131        <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0l-2 2a12 12 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2zm6 6 3 3-3 3-3-3 3-3z" /></svg>132      </div>133      <div class="status-icon">134        <!-- Battery -->135        <svg viewBox="0 0 24 24"><path d="M2 8h17v8H2V8zm19 2h1v4h-1v-4z"/></svg>136      </div>137    </div>138  </div>139 140  <!-- Search area -->141  <div class="search-area">142    <div class="search-bar">143      <div class="search-icon">144        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm6.6 13.6 5 5-1.4 1.4-5-5 1.4-1.4z"/></svg>145      </div>146      <div class="input-text">white sauce pasta</div>147      <div class="close-icon">148        <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>149      </div>150    </div>151    <div class="suggestion">white sauce pasta bake</div>152  </div>153 154  <!-- Promo text and image -->155  <div class="promo-text">Find easy recipes to make with what you have.</div>156  <div class="promo-image">[IMG: Cooking ingredients flatlay – tomatoes, pasta, zucchini on board]</div>157 158  <!-- Keyboard -->159  <div class="keyboard">160    <div class="kb-top-row">161      <div class="kb-dot">162        <!-- 4-square keyboard icon -->163        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>164      </div>165      <div class="chip">pasta</div>166      <div class="chip">pastas</div>167      <div class="chip" title="emoji">🍝</div>168      <div class="kb-spacer"></div>169      <div class="kb-mic">170        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2z"/></svg>171      </div>172    </div>173 174    <!-- Rows of keys -->175    <div class="kb-row">176      <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><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="kb-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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>180    </div>181    <div class="kb-row">182      <div class="key pale wide">⇧</div>183      <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>184      <div class="key pale wide icon">185        <!-- Backspace -->186        <svg viewBox="0 0 24 24"><path d="M6 19 1 12l5-7h13a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6zm6-4 4-4-4-4-1.4 1.4L12.2 11l-1.6 1.6L12 15z"/></svg>187      </div>188    </div>189    <div class="kb-row">190      <div class="key pale wide">?123</div>191      <div class="key pale">,</div>192      <div class="key pale wide">🙂</div>193      <div class="key space"> </div>194      <div class="key">.</div>195      <div class="key circle search">196        <!-- Search button -->197        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm6.6 13.6 5 5-1.4 1.4-5-5 1.4-1.4z"/></svg>198      </div>199    </div>200  </div>201 202  <!-- Gesture bar -->203  <div class="gesture-bar"></div>204 205</div>206</body>207</html>