GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Suggestions with Keyboard</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; padding: 20px 36px 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #2E2E2E; font-size: 42px; letter-spacing: 0.2px;20 }21 .status-icons { display: flex; align-items: center; gap: 26px; }22 .dot { width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%; display: inline-block; }23 /* Search area */24 .search-area {25 position: absolute; top: 150px; left: 40px; right: 40px;26 display: flex; align-items: center; gap: 20px;27 }28 .search-bar {29 flex: 1; height: 110px;30 background: #F1F1F1; border-radius: 55px;31 display: flex; align-items: center; padding: 0 32px;32 }33 .search-text { flex: 1; color: #2E2E2E; font-size: 44px; }34 .circle-btn {35 width: 60px; height: 60px; border-radius: 30px;36 background: #DADADA; display: flex; align-items: center; justify-content: center;37 }38 .cancel { color: #7A7A7A; font-size: 38px; font-weight: 600; }39 /* Suggestions list */40 .suggestions {41 position: absolute; left: 50px; right: 50px; top: 340px;42 }43 .suggestion-item {44 display: flex; align-items: center;45 height: 110px; border-bottom: 1px solid #EEEEEE;46 }47 .s-icon {48 width: 56px; height: 56px; margin-right: 30px;49 display: inline-flex; align-items: center; justify-content: center;50 }51 .suggestion-text {52 font-size: 42px; color: #121212; letter-spacing: 0.2px;53 }54 /* Keyboard */55 .keyboard {56 position: absolute; left: 0; right: 0; bottom: 0;57 height: 890px; background: #EEF1E7; border-top: 1px solid #DFE2D7;58 display: flex; flex-direction: column;59 }60 .kb-suggestions {61 height: 110px; display: flex; align-items: center; gap: 28px;62 padding: 0 28px; color: #2E2E2E; font-size: 36px;63 }64 .kb-suggestions .chip {65 padding: 12px 24px; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 22px;66 }67 .kb-rows { flex: 1; padding: 22px 18px 18px 18px; display: flex; flex-direction: column; gap: 18px; }68 .kb-row { display: flex; gap: 12px; }69 .key {70 flex: 1; height: 120px; background: #FFFFFF;71 border: 1px solid #E0E0E0; border-radius: 20px;72 display: flex; align-items: center; justify-content: center;73 font-size: 46px; color: #2E2E2E; box-sizing: border-box;74 }75 .key.wide { flex: 1.4; }76 .key.space { flex: 4.2; font-size: 40px; color: #8A8A8A; }77 .key.soft { background: #DDE6D5; border-color: #D3DDC7; }78 .key.search {79 background: #B9D8A8; border-color: #A8CB97; color: #1E3B1E; font-weight: 600;80 }81 .bottom-indicator {82 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);83 width: 280px; height: 12px; border-radius: 6px; background: #AFAFAF;84 }85 svg { display: block; }86</style>87</head>88<body>89<div id="render-target">90 <!-- Status Bar -->91 <div class="status-bar">92 <div>8:45</div>93 <div class="status-icons">94 <!-- Simple status icons -->95 <svg width="28" height="28" viewBox="0 0 28 28">96 <circle cx="14" cy="14" r="12" fill="#777"/>97 </svg>98 <svg width="32" height="20" viewBox="0 0 32 20">99 <path d="M2 18 L16 2 L30 18 Z" fill="#777"/>100 </svg>101 <span class="dot"></span>102 <svg width="32" height="20" viewBox="0 0 32 20">103 <rect x="2" y="4" width="22" height="12" rx="2" fill="#777"/>104 <rect x="26" y="8" width="4" height="4" fill="#777"/>105 </svg>106 </div>107 </div>108 109 <!-- Search Bar -->110 <div class="search-area">111 <div class="search-bar">112 <div class="search-text">pizza</div>113 <div class="circle-btn">114 <!-- Close (X) icon -->115 <svg width="28" height="28" viewBox="0 0 28 28">116 <path d="M7 7 L21 21 M21 7 L7 21" stroke="#666" stroke-width="3" stroke-linecap="round"/>117 </svg>118 </div>119 </div>120 <div class="cancel">CANCEL</div>121 </div>122 123 <!-- Suggestions -->124 <div class="suggestions">125 <div class="suggestion-item">126 <div class="s-icon">127 <svg width="56" height="56" viewBox="0 0 56 56">128 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>129 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>130 </svg>131 </div>132 <div class="suggestion-text">pizza</div>133 </div>134 <div class="suggestion-item">135 <div class="s-icon">136 <svg width="56" height="56" viewBox="0 0 56 56">137 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>138 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>139 </svg>140 </div>141 <div class="suggestion-text">pizza dough</div>142 </div>143 <div class="suggestion-item">144 <div class="s-icon">145 <svg width="56" height="56" viewBox="0 0 56 56">146 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>147 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>148 </svg>149 </div>150 <div class="suggestion-text">pizza sauce</div>151 </div>152 <div class="suggestion-item">153 <div class="s-icon">154 <svg width="56" height="56" viewBox="0 0 56 56">155 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>156 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>157 </svg>158 </div>159 <div class="suggestion-text">pizza crust</div>160 </div>161 <div class="suggestion-item">162 <div class="s-icon">163 <svg width="56" height="56" viewBox="0 0 56 56">164 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>165 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>166 </svg>167 </div>168 <div class="suggestion-text">pizzas</div>169 </div>170 <div class="suggestion-item">171 <div class="s-icon">172 <svg width="56" height="56" viewBox="0 0 56 56">173 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>174 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>175 </svg>176 </div>177 <div class="suggestion-text">large pizza</div>178 </div>179 <div class="suggestion-item">180 <div class="s-icon">181 <svg width="56" height="56" viewBox="0 0 56 56">182 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>183 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="suggestion-text">large pizza dough</div>187 </div>188 <div class="suggestion-item">189 <div class="s-icon">190 <svg width="56" height="56" viewBox="0 0 56 56">191 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>192 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="suggestion-text">prepared pizza</div>196 </div>197 <div class="suggestion-item">198 <div class="s-icon">199 <svg width="56" height="56" viewBox="0 0 56 56">200 <circle cx="24" cy="24" r="18" stroke="#B0B0B0" stroke-width="4" fill="none"/>201 <line x1="36" y1="36" x2="50" y2="50" stroke="#B0B0B0" stroke-width="4" stroke-linecap="round"/>202 </svg>203 </div>204 <div class="suggestion-text">prepared pizza crust</div>205 </div>206 </div>207 208 <!-- Keyboard -->209 <div class="keyboard">210 <div class="kb-suggestions">211 <div class="chip">pizza</div>212 <div class="chip">Pizza</div>213 <div class="chip">🍕</div>214 <div style="margin-left:auto; display:flex; align-items:center; gap:16px;">215 <!-- Microphone icon -->216 <svg width="40" height="40" viewBox="0 0 40 40">217 <rect x="12" y="8" width="16" height="18" rx="8" fill="#6F6F6F"/>218 <path d="M8 20 C8 28 32 28 32 20" stroke="#6F6F6F" stroke-width="3" fill="none"/>219 <rect x="19" y="28" width="2" height="6" fill="#6F6F6F"/>220 <rect x="16" y="34" width="8" height="2" fill="#6F6F6F"/>221 </svg>222 </div>223 </div>224 <div class="kb-rows">225 <div class="kb-row">226 <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>227 <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>228 </div>229 <div class="kb-row">230 <div class="key wide">a</div><div class="key wide">s</div><div class="key wide">d</div><div class="key wide">f</div>231 <div class="key wide">g</div><div class="key wide">h</div><div class="key wide">j</div><div class="key wide">k</div><div class="key wide">l</div>232 </div>233 <div class="kb-row">234 <div class="key soft wide">235 <!-- Shift icon -->236 <svg width="36" height="36" viewBox="0 0 36 36">237 <path d="M18 6 L30 18 H22 V30 H14 V18 H6 Z" fill="#597857"/>238 </svg>239 </div>240 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>241 <div class="key">b</div><div class="key">n</div><div class="key">m</div>242 <div class="key soft wide">243 <!-- Backspace icon -->244 <svg width="40" height="40" viewBox="0 0 40 40">245 <path d="M16 10 L6 20 L16 30 H34 V10 Z" fill="#5E7D5D"/>246 <path d="M23 15 L30 22 M30 15 L23 22" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>247 </svg>248 </div>249 </div>250 <div class="kb-row">251 <div class="key soft">?123</div>252 <div class="key soft">,</div>253 <div class="key soft">☺</div>254 <div class="key space">space</div>255 <div class="key">.</div>256 <div class="key search">257 <!-- Search icon -->258 <svg width="40" height="40" viewBox="0 0 40 40">259 <circle cx="17" cy="17" r="10" stroke="#1E3B1E" stroke-width="3" fill="none"/>260 <line x1="25" y1="25" x2="34" y2="34" stroke="#1E3B1E" stroke-width="3" stroke-linecap="round"/>261 </svg>262 </div>263 </div>264 </div>265 </div>266 267 <div class="bottom-indicator"></div>268</div>269</body>270</html>