GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=device-width, initial-scale=1.0">5<title>Search UI - Chelsea Boots</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 border-radius: 0;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 110px;19 background: #E6E6E6;20 display: flex; align-items: center;21 padding: 0 30px;22 color: #3a3a3a;23 font-size: 36px;24 }25 .status-left { display: flex; align-items: center; gap: 20px; }26 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }27 .icon-small { width: 36px; height: 36px; opacity: 0.7; }28 29 /* Search header */30 .search-header {31 position: absolute; left: 0; right: 0; top: 110px;32 height: 150px; display: flex; align-items: center;33 padding: 0 30px;34 background: #ffffff;35 }36 .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }37 .search-input {38 flex: 1;39 font-size: 54px; color: #1c1c1c;40 border: none; outline: none; background: transparent;41 }42 .cursor {43 display: inline-block; width: 3px; height: 58px; background: #222; margin-left: 4px; vertical-align: bottom; animation: blink 1s step-start infinite;44 }45 @keyframes blink { 50% { opacity: 0; } }46 .clear-btn { color: #5f5f5f; font-size: 40px; }47 48 /* Suggestions title */49 .section-title {50 position: absolute; top: 280px; left: 30px;51 font-size: 42px; font-weight: 600; color: #202124;52 }53 54 /* Bottom quick actions (above keyboard) */55 .quick-actions {56 position: absolute; left: 0; right: 0; bottom: 1000px;57 height: 180px; background: #ffffff; border-top: 1px solid #e5e5e5;58 display: flex; justify-content: space-around; align-items: center;59 }60 .qa-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #343434; }61 .qa-icon {62 width: 88px; height: 88px; border-radius: 22px; background: #F3F3F3;63 display: flex; align-items: center; justify-content: center; border: 1px solid #E0E0E0;64 }65 .qa-text { font-size: 34px; }66 67 /* Keyboard */68 .keyboard {69 position: absolute; left: 0; right: 0; bottom: 0; height: 1000px;70 background: #11181b;71 color: #eaeaea;72 border-top-left-radius: 22px; border-top-right-radius: 22px;73 box-shadow: 0 -6px 16px rgba(0,0,0,0.25);74 }75 .kb-suggestions {76 height: 120px; border-bottom: 1px solid #263238;77 display: flex; align-items: center; padding: 0 30px; gap: 24px;78 background: #121a1d;79 }80 .chip {81 padding: 16px 28px; border-radius: 30px; background: #1d2a2f; color: #e9f0f0; font-size: 36px; border: 1px solid #2b3940;82 }83 .kb-rows { padding: 30px; display: grid; gap: 24px; }84 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; }85 .row.wide { grid-template-columns: repeat(9, 1fr); }86 .key {87 height: 120px; border-radius: 18px; background: #1a2327; border: 1px solid #28353b;88 display: flex; align-items: center; justify-content: center; font-size: 48px; color: #e9e9e9;89 }90 .key.dim { color: #b6c2c7; }91 .key.wide { grid-column: span 2; }92 .key.triple { grid-column: span 3; }93 .space-row { display: grid; grid-template-columns: 2.2fr 1fr 3.6fr 1fr 2.2fr; gap: 18px; }94 .mic-circle {95 margin-left: auto; margin-right: 0;96 width: 84px; height: 84px; border-radius: 50%;97 background: #2a3a3f; border: 1px solid #33474e; display: flex; align-items: center; justify-content: center;98 }99 100 /* Floating search key (green) */101 .search-fab {102 position: absolute; right: 26px; bottom: 120px;103 width: 150px; height: 150px; border-radius: 50%;104 background: #A8E9C7; display: flex; align-items: center; justify-content: center;105 box-shadow: 0 8px 24px rgba(0,0,0,0.35);106 }107 108 /* Nav handle */109 .nav-handle {110 position: absolute; left: 50%; transform: translateX(-50%);111 bottom: 24px; width: 420px; height: 10px; background: #E0E0E0; border-radius: 8px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status Bar -->119 <div class="status-bar">120 <div class="status-left">121 <div>1:45</div>122 <svg class="icon-small" viewBox="0 0 24 24"><path fill="#5c5c5c" d="M3 12l2-2 3 3 6-6 7 7-1.5 1.5L14 10l-6 6-4-4z"/></svg>123 <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#8a8a8a"/></svg>124 <svg class="icon-small" viewBox="0 0 24 24"><path fill="#8a8a8a" d="M3 12h18v2H3z"/></svg>125 </div>126 <div class="status-right">127 <svg class="icon-small" viewBox="0 0 24 24"><path fill="#606060" d="M2 18h3V9L2 6v12zm5 0h3V5L7 2v16zm5 0h3V9l-3-3v12zm5 0h3V13l-3-3v8z"/></svg>128 <svg class="icon-small" viewBox="0 0 24 24"><path fill="#606060" d="M16 4H8c-1.1 0-2 .9-2 2v12l6 2 6-2V6c0-1.1-.9-2-2-2z"/></svg>129 <div style="display:flex;align-items:center;gap:8px;">130 <svg class="icon-small" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#606060"/><rect x="20" y="9" width="2" height="6" fill="#9e9e9e"/></svg>131 <div style="font-weight:600;">100%</div>132 </div>133 </div>134 </div>135 136 <!-- Search Header -->137 <div class="search-header">138 <div class="back-btn">139 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#222" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>140 </div>141 <div style="flex:1; display:flex; align-items:center;">142 <div class="search-input" contenteditable="false">Chalsea boots</div>143 <span class="cursor"></span>144 </div>145 <div class="clear-btn">Clear</div>146 </div>147 148 <!-- Suggestions Title -->149 <div class="section-title">Search suggestions</div>150 151 <!-- Quick Actions above keyboard -->152 <div class="quick-actions">153 <div class="qa-item">154 <div class="qa-icon">155 <svg width="54" height="54" viewBox="0 0 24 24"><path fill="#444" d="M9 2l1.7 3H15a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h1.3L9 2zm3 5a4 4 0 100 8 4 4 0 000-8z"/></svg>156 </div>157 <div class="qa-text">Take Photo</div>158 </div>159 <div class="qa-item">160 <div class="qa-icon">161 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#444" d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm16 0v6h-6v-2h4v-4h2z"/></svg>162 </div>163 <div class="qa-text">Scan Code</div>164 </div>165 <div class="qa-item">166 <div class="qa-icon">167 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="#444" d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/></svg>168 </div>169 <div class="qa-text">Find Store</div>170 </div>171 </div>172 173 <!-- Keyboard -->174 <div class="keyboard">175 <div class="kb-suggestions">176 <div class="chip">boots</div>177 <div class="chip">bootstrap</div>178 <div class="chip">boost</div>179 <div style="margin-left:auto;">180 <div class="mic-circle">181 <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#cfe5ea" d="M12 14a3 3 0 003-3V7a3 3 0 10-6 0v4a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zM11 19h2v3h-2z"/></svg>182 </div>183 </div>184 </div>185 186 <div class="kb-rows">187 <div class="row">188 <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>189 </div>190 <div class="row">191 <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><div class="key dim">|</div>192 </div>193 <div class="row wide">194 <div class="key wide">z</div><div class="key wide">x</div><div class="key wide">c</div><div class="key wide">v</div><div class="key wide">b</div><div class="key wide">n</div><div class="key wide">m</div><div class="key wide dim">⌫</div><div class="key wide dim">↵</div>195 </div>196 <div class="space-row">197 <div class="key">?123</div>198 <div class="key">,</div>199 <div class="key triple">space</div>200 <div class="key dim">.</div>201 <div class="key dim">◀</div>202 </div>203 </div>204 205 <!-- Floating green search key -->206 <div class="search-fab">207 <svg width="84" height="84" viewBox="0 0 24 24"><path fill="#0b2f21" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L19 20.5 20.5 19 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>208 </div>209 210 <div class="nav-handle"></div>211 </div>212 213</div>214</body>215</html>