GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Dark Search Results UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EDEDED;13 }14 15 /* Status bar */16 .status-bar {17 height: 88px; background: #000000; color: #ffffff;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 28px; font-size: 34px; letter-spacing: 0.5px;20 }21 .sb-icons { display: flex; align-items: center; gap: 22px; }22 .sb-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: 0.9; }23 .battery {24 width: 44px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;25 }26 .battery:after {27 content: ''; position: absolute; right: -6px; top: 5px; width: 6px; height: 12px; background: #fff; border-radius: 2px;28 }29 .battery-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 70%; background: #fff; }30 31 /* Search bar */32 .search-bar {33 height: 120px; background: #1C1F23; border-bottom: 1px solid #2A2A2A;34 display: flex; align-items: center; padding: 0 22px; gap: 20px;35 }36 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }37 .search-text { flex: 1; font-size: 44px; color: #EDEDED; }38 .search-placeholder { color: #9AA0A6; }39 .clear-x { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; opacity: 0.8; }40 41 /* Content area */42 .content {43 position: absolute; left: 0; right: 0; top: 208px; bottom: 800px; /* reserve space for keyboard */44 overflow: hidden; background: #121212;45 }46 .section {47 padding: 18px 28px; color: #A8AFB6; font-size: 34px; letter-spacing: 0.2px;48 border-top: 1px solid #2A2A2A;49 background: #161616;50 }51 .tile { display: flex; align-items: center; gap: 22px; padding: 28px; border-bottom: 1px solid #2A2A2A; background: #1A1A1A; }52 .distance-col { width: 120px; color: #4EA1FF; font-size: 30px; }53 .lead-icon {54 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;55 color: #B0B6BB;56 }57 .lead-icon.square {58 width: 72px; height: 72px; background: #2B6CEF; border-radius: 12px; color: #FFFFFF;59 }60 .tile-body { flex: 1; }61 .primary { font-size: 40px; color: #FFFFFF; }62 .primary strong { font-weight: 700; }63 .secondary { font-size: 30px; color: #A4A8AE; margin-top: 6px; line-height: 1.25; }64 .trailing {65 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: #A4A8AE;66 }67 68 /* Keyboard */69 .keyboard {70 position: absolute; left: 0; right: 0; bottom: 0; height: 800px; background: #201A1B; border-top: 1px solid #2A2A2A;71 box-shadow: 0 -6px 24px rgba(0,0,0,0.4);72 }73 .suggestions {74 height: 96px; display: flex; align-items: center; padding: 0 24px; gap: 18px; background: #2A2325; border-bottom: 1px solid #2F2A2B;75 }76 .chip {77 padding: 10px 18px; background: #3A3335; border-radius: 16px; color: #E6E1E1; font-size: 34px;78 }79 .chip.mic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; margin-left: auto; background: #3A3335; }80 .keys { padding: 22px 18px 110px; display: grid; grid-template-rows: repeat(4, auto); row-gap: 18px; }81 .row { display: grid; grid-auto-flow: column; column-gap: 14px; justify-content: center; }82 .key {83 min-width: 84px; height: 120px; background: #4A4244; border-radius: 20px; display: flex; align-items: center; justify-content: center;84 color: #EDEDED; font-size: 42px;85 }86 .key.wide { min-width: 150px; }87 .key.space { min-width: 520px; }88 .key.special { background: #D8AEB0; color: #2D2224; }89 .bottom-row { display: grid; grid-template-columns: 180px 100px 100px 1fr 100px 150px 120px; column-gap: 16px; align-items: center; }90 .submit { width: 104px; height: 104px; border-radius: 50%; background: #EBC2C6; color: #2D2224; display: flex; align-items: center; justify-content: center; font-size: 48px; margin-left: 6px; }91 92 /* Home indicator */93 .home-pill {94 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);95 width: 240px; height: 10px; border-radius: 8px; background: #E5E5E5; opacity: 0.9;96 }97</style>98</head>99<body>100<div id="render-target">101 102 <!-- Status Bar -->103 <div class="status-bar">104 <div>4:16</div>105 <div class="sb-icons">106 <div class="sb-dot"></div>107 <div class="sb-dot"></div>108 <div class="sb-dot"></div>109 <div class="battery"><div class="battery-fill"></div></div>110 </div>111 </div>112 113 <!-- Search Bar -->114 <div class="search-bar">115 <div class="icon-btn">116 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">117 <path d="M15 18l-6-6 6-6"/>118 </svg>119 </div>120 <div class="search-text">Rajeev chowk</div>121 <div class="clear-x">122 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round">123 <path d="M6 6l12 12M18 6L6 18"/>124 </svg>125 </div>126 </div>127 128 <!-- Content -->129 <div class="content">130 <div class="section">Favourites</div>131 132 <div class="tile">133 <div class="distance-col">23 km</div>134 <div class="lead-icon">135 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#A8AFB6" stroke-width="2">136 <path d="M12 21s-6-6-6-10a6 6 0 1 1 12 0c0 4-6 10-6 10z"/>137 <circle cx="12" cy="11" r="2"/>138 </svg>139 </div>140 <div class="tile-body">141 <div class="primary"><strong>rajeev chowk</strong></div>142 <div class="secondary">Rajeev Chowk, Connaught Place, New Delhi, Delhi</div>143 </div>144 </div>145 146 <div class="section">Stops</div>147 148 <div class="tile">149 <div class="distance-col">12 km</div>150 <div class="lead-icon square">151 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">152 <rect x="5" y="7" width="14" height="9" rx="2"></rect>153 <circle cx="9" cy="17" r="1.5"></circle>154 <circle cx="15" cy="17" r="1.5"></circle>155 </svg>156 </div>157 <div class="tile-body">158 <div class="primary">Rajeev Chowk</div>159 </div>160 <div class="trailing">161 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#A4A8AE" stroke-width="2">162 <path d="M4 7h16M4 12h12M4 17h8"/>163 </svg>164 </div>165 </div>166 167 <div class="tile">168 <div class="distance-col">12 km</div>169 <div class="lead-icon square">170 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">171 <rect x="5" y="7" width="14" height="9" rx="2"></rect>172 <circle cx="9" cy="17" r="1.5"></circle>173 <circle cx="15" cy="17" r="1.5"></circle>174 </svg>175 </div>176 <div class="tile-body">177 <div class="primary">Rajeev Chowk</div>178 </div>179 <div class="trailing">180 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#A4A8AE" stroke-width="2">181 <path d="M4 7h16M4 12h12M4 17h8"/>182 </svg>183 </div>184 </div>185 186 <div class="section">Places</div>187 188 <div class="tile">189 <div class="distance-col"></div>190 <div class="lead-icon">191 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#A8AFB6" stroke-width="2">192 <path d="M12 21s-6-6-6-10a6 6 0 1 1 12 0c0 4-6 10-6 10z"/>193 <circle cx="12" cy="11" r="2"/>194 </svg>195 </div>196 <div class="tile-body">197 <div class="primary">Rajiv Chowk Flyover</div>198 <div class="secondary">Shanti Nagar, Shivaji Nagar, Sector 11, Gurugram, Haryana, India</div>199 </div>200 <div class="trailing">201 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#A4A8AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">202 <path d="M7 17L17 7M7 7h10v10"/>203 </svg>204 </div>205 </div>206 207 <div class="tile">208 <div class="distance-col">23 km</div>209 <div class="lead-icon">210 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#A8AFB6" stroke-width="2">211 <path d="M12 21s-6-6-6-10a6 6 0 1 1 12 0c0 4-6 10-6 10z"/>212 <circle cx="12" cy="11" r="2"/>213 </svg>214 </div>215 <div class="tile-body">216 <div class="primary">Rajiv Chowk Metro Station</div>217 <div class="secondary">Rajiv Chowk, Connaught Place, New Delhi, Delhi</div>218 </div>219 <div class="trailing">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#A4A8AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">221 <path d="M7 17L17 7M7 7h10v10"/>222 </svg>223 </div>224 </div>225 226 </div>227 228 <!-- Keyboard -->229 <div class="keyboard">230 <div class="suggestions">231 <div class="chip">chowk</div>232 <div class="chip">chowki</div>233 <div class="chip">chowkidar</div>234 <div class="chip mic">235 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">236 <rect x="9" y="4" width="6" height="10" rx="3"></rect>237 <path d="M12 18v2M8 12a4 4 0 0 0 8 0"/>238 </svg>239 </div>240 </div>241 242 <div class="keys">243 <div class="row">244 <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>245 <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>246 </div>247 <div class="row">248 <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>249 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>250 </div>251 <div class="row">252 <div class="key wide">⇧</div>253 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>254 <div class="key">b</div><div class="key">n</div><div class="key">m</div>255 <div class="key wide">⌫</div>256 </div>257 <div class="bottom-row">258 <div class="key special">?123</div>259 <div class="key">,</div>260 <div class="key">☺</div>261 <div class="key space">qwertyuiop</div>262 <div class="key">.</div>263 <div class="key wide">⌫</div>264 <div class="submit">✓</div>265 </div>266 </div>267 </div>268 269 <div class="home-pill"></div>270</div>271</body>272</html>