GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Search Categories UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#FAFAFA;12    color:#111;13  }14 15  /* Status bar */16  .status-bar{17    height:110px;18    padding:0 34px;19    display:flex; align-items:center; justify-content:space-between;20    color:#5a5a5a; font-size:38px; letter-spacing:1px;21  }22  .status-left{ display:flex; align-items:center; gap:18px; }23  .status-right{ display:flex; align-items:center; gap:26px; }24 25  /* Search header */26  .search-wrap{27    padding:10px 30px 20px;28  }29  .search-row{30    display:flex; align-items:center; gap:26px;31  }32  .search-input{33    flex:1;34    height:110px; border-radius:56px;35    background:#EFEFEF;36    display:flex; align-items:center; gap:22px;37    padding:0 30px;38    color:#9A9A9A; font-size:42px;39  }40  .cancel{41    font-size:42px; color:#7d7d7d;42  }43 44  /* Category list */45  .list{46    padding:10px 30px 0;47  }48  .card{49    background:#FFFFFF;50    border-radius:28px;51    height:220px;52    box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);53    display:flex; align-items:center;54    padding:0 32px;55    margin-bottom:34px;56  }57  .card .title{58    font-size:54px; color:#222;59  }60 61  /* Keyboard mock */62  .keyboard{63    position:absolute; left:0; right:0; bottom:0;64    height:920px; background:#111316; color:#e8e8e8;65    border-top-left-radius:18px; border-top-right-radius:18px;66    box-shadow:0 -8px 28px rgba(0,0,0,0.35);67  }68  .kb-tools{69    height:120px; padding:0 36px;70    display:flex; align-items:center; gap:42px;71  }72  .tool{73    width:84px; height:84px; border-radius:20px;74    background:#1E2126; display:flex; align-items:center; justify-content:center;75  }76  .kb-rows{77    padding:16px 22px 0;78  }79  .row{80    display:flex; justify-content:space-between;81    padding:12px 8px;82  }83  .key{84    width:92px; height:120px; border-radius:18px;85    background:#1F2328; display:flex; align-items:center; justify-content:center;86    font-size:44px; color:#d7d7d7;87  }88  .key.wide{ width:220px; }89  .key.space{ flex:1; margin:0 14px; }90  .row-bottom{91    display:flex; align-items:center; padding:8px 8px 0;92  }93 94  /* Gesture bar */95  .gesture{96    position:absolute; left:50%; transform:translateX(-50%);97    bottom:22px; width:520px; height:10px; background:#E0E0E0; border-radius:10px;98    opacity:.95;99  }100 101  /* Helper icon styles */102  svg{ display:block }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div class="status-left">111      <div>11:15</div>112      <div style="font-size:30px; color:#888;">S3</div>113    </div>114    <div class="status-right">115      <!-- WiFi -->116      <svg width="48" height="48" viewBox="0 0 24 24">117        <path fill="#666" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0-4.2c-2 0-3.8.8-5.2 2.1l1.4 1.4a6.3 6.3 0 0 1 7.6 0l1.4-1.4A7.9 7.9 0 0 0 12 14.3zm0-4.3c-3.5 0-6.6 1.4-9 3.7l1.4 1.4c4-3.8 11.2-3.8 15.2 0l1.4-1.4c-2.4-2.3-5.5-3.7-9-3.7z"/>118      </svg>119      <!-- Battery -->120      <svg width="64" height="48" viewBox="0 0 32 20">121        <rect x="1" y="4" width="26" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"/>122        <rect x="4" y="7" width="20" height="6" fill="#7ACB3D"/>123        <rect x="27" y="7" width="3" height="6" rx="1" fill="#666"/>124      </svg>125    </div>126  </div>127 128  <!-- Search -->129  <div class="search-wrap">130    <div class="search-row">131      <div class="search-input">132        <!-- Search icon -->133        <svg width="46" height="46" viewBox="0 0 24 24">134          <path fill="#8E8E8E" d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.9.9l.3.3v.8l4.5 4.5 1.4-1.4L15.5 14zm-6 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>135        </svg>136        <span>What are you looking for?</span>137      </div>138      <div class="cancel">Cancel</div>139    </div>140  </div>141 142  <!-- List cards -->143  <div class="list">144    <div class="card"><div class="title">World Food</div></div>145    <div class="card"><div class="title">Food</div></div>146    <div class="card"><div class="title">Fresh</div></div>147    <div class="card"><div class="title">Frozen</div></div>148  </div>149 150  <!-- Keyboard Mock -->151  <div class="keyboard">152    <div class="kb-tools">153      <div class="tool">154        <!-- grid icon -->155        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/></svg>156      </div>157      <div class="tool">158        <!-- smile -->159        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-3 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-6.5 4.2a5 5 0 0 0 7 0l1.2 1.2a6.8 6.8 0 0 1-9.4 0l1.2-1.2z"/></svg>160      </div>161      <div class="tool"><span style="color:#c7c7c7; font-weight:bold;">GIF</span></div>162      <div class="tool">163        <!-- gear -->164        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 4l-2.1.7.3 2.2-2 .9-1.2-1.8-2 .7-.9 2.1-2-.6-.1-2.3-2.2-.3-.6-2.1 1.9-1.2-.7-2 2.1-.9 1.1 1.8 2-.7.9-2.1 2 .6.2 2.3 2.3.3.6 2.1-1.9 1.2.7 2z"/></svg>165      </div>166      <div class="tool">167        <!-- translate -->168        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M3 4h10v6H3V4zm0 8h10v8H3v-8zm12 0h6v8h-6v-8zM15 4h6v6h-6V4z"/></svg>169      </div>170      <div class="tool">171        <!-- palette -->172        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M12 2a10 10 0 1 0 0 20h1.5a2.5 2.5 0 0 0 0-5H12a1 1 0 1 1 0-2h2a4 4 0 0 0 0-8h-2zM7 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm10-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>173      </div>174      <div class="tool">175        <!-- mic -->176        <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#C7C7C7" d="M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 8h2a3 3 0 0 0 6 0h2a5 5 0 0 1-5 5v2h3v2H9v-2h3v-2a5 5 0 0 1-5-5z"/></svg>177      </div>178    </div>179 180    <div class="kb-rows">181      <div class="row">182        <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>183        <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>184      </div>185      <div class="row">186        <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>187        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>188      </div>189      <div class="row">190        <div class="key wide">?123</div>191        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>192        <div class="key">b</div><div class="key">n</div><div class="key">m</div>193        <div class="key wide">⌫</div>194      </div>195      <div class="row-bottom">196        <div class="key wide">,</div>197        <div class="key">🙂</div>198        <div class="key space"></div>199        <div class="key">.</div>200        <div class="key" style="background:#3b4b5f;">201          <!-- search circle -->202          <svg width="48" height="48" viewBox="0 0 24 24">203            <circle cx="11" cy="11" r="6" fill="none" stroke="#fff" stroke-width="2"/>204            <path d="M16.5 16.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>205          </svg>206        </div>207      </div>208    </div>209  </div>210 211  <div class="gesture"></div>212</div>213</body>214</html>