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>Search UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 }14 15 /* Status bar */16 .status-bar {17 height:90px;18 padding:0 40px;19 display:flex; align-items:center; justify-content:space-between;20 color:#435F72; font-size:34px;21 }22 .status-icons { display:flex; align-items:center; gap:28px; }23 .status-dot { width:18px; height:18px; border-radius:50%; background:#435F72; opacity:.9; }24 .status-rect { width:26px; height:36px; border-radius:6px; border:3px solid #435F72; }25 26 /* Search bar area */27 .search-area {28 padding:28px 40px 30px 40px;29 box-shadow:0 3px 0 rgba(0,0,0,0.06);30 background:#fff;31 }32 .search-row {33 display:flex; align-items:center; gap:30px;34 }35 .round-btn {36 width:72px; height:72px; border-radius:36px;37 border:2px solid #C8D6E1; display:flex; align-items:center; justify-content:center;38 }39 .pill {40 flex:1;41 height:120px;42 border-radius:60px;43 border:3px solid #C8D6E1;44 display:flex; align-items:center; padding:0 36px;45 gap:26px;46 }47 .pin-icon, .close-icon, .building-icon {48 width:44px; height:44px;49 }50 .pin-fill, .building-fill { fill:#7FA2B8; }51 .close-stroke { stroke:#7FA2B8; stroke-width:6; stroke-linecap:round; }52 .pill-text {53 flex:1; font-size:46px; color:#1F3947; font-weight:600;54 }55 56 /* Sections */57 .section {58 padding:40px 40px 0 40px;59 }60 .section-title {61 font-size:38px; color:#6F8FA1; font-weight:700; margin-bottom:12px;62 display:flex; align-items:center; justify-content:space-between;63 }64 .clear-link { color:#2D9CDB; font-weight:700; }65 .divider { height:2px; background:#E6EDF2; margin:18px 0 10px 0; }66 67 .list {68 padding:10px 0 0 0;69 }70 .item { display:flex; align-items:flex-start; gap:28px; padding:30px 0; }71 .item .main { font-size:46px; color:#1F3947; font-weight:700; }72 .item .secondary { font-size:44px; color:#8AA7B4; font-weight:600; }73 .item .single { font-size:44px; color:#1F3947; font-weight:600; }74 75 /* Bottom home indicator area */76 .bottom-safe {77 position:absolute; left:0; bottom:0; width:100%;78 height:160px; background:#000000;79 display:flex; align-items:center; justify-content:center;80 }81 .home-pill {82 width:240px; height:16px; border-radius:8px; background:#EAEAEA;83 opacity:.85;84 }85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status bar -->91 <div class="status-bar">92 <div>2:48</div>93 <div class="status-icons">94 <div class="status-dot"></div>95 <div class="status-rect"></div>96 </div>97 </div>98 99 <!-- Search bar -->100 <div class="search-area">101 <div class="search-row">102 <div class="round-btn">103 <svg class="close-icon" viewBox="0 0 24 24">104 <path class="close-stroke" d="M5 5 L19 19"></path>105 <path class="close-stroke" d="M19 5 L5 19"></path>106 </svg>107 </div>108 109 <div class="pill">110 <svg class="pin-icon" viewBox="0 0 24 24">111 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>112 </svg>113 <div class="pill-text">Gajnice Train Station, Zagreb</div>114 <div class="round-btn" style="width:72px;height:72px;border-color:#C8D6E1;">115 <svg class="close-icon" viewBox="0 0 24 24">116 <path class="close-stroke" d="M5 5 L19 19"></path>117 <path class="close-stroke" d="M19 5 L5 19"></path>118 </svg>119 </div>120 </div>121 </div>122 </div>123 124 <!-- Recently searched -->125 <div class="section">126 <div class="section-title">127 <div>Recently searched</div>128 <div class="clear-link">Clear</div>129 </div>130 <div class="divider"></div>131 132 <div class="list">133 <div class="item">134 <svg class="pin-icon" viewBox="0 0 24 24">135 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>136 </svg>137 <div>138 <span class="main">Gajnice Train Station</span><span class="secondary">, Zagreb</span>139 </div>140 </div>141 142 <div class="item">143 <svg class="pin-icon" viewBox="0 0 24 24">144 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>145 </svg>146 <div>147 <span class="main">Paris Gare de l'Est</span><span class="secondary">, Paris</span>148 </div>149 </div>150 </div>151 </div>152 153 <!-- Search results -->154 <div class="section">155 <div class="section-title">Search results</div>156 <div class="divider"></div>157 158 <div class="list">159 160 <div class="item">161 <svg class="building-icon" viewBox="0 0 24 24">162 <path class="building-fill" d="M4 3h12v18H4V3zm16 5h-2v13h2V8zM7 6h2v2H7V6zm4 0h2v2h-2V6zM7 10h2v2H7v-2zm4 0h2v2h-2v-2zM7 14h2v2H7v-2zm4 14h-2"></path>163 </svg>164 <div>165 <span class="main">Zagreb</span><span class="secondary">, Grad Zagreb, Croatia</span>166 </div>167 </div>168 169 <div class="item">170 <svg class="pin-icon" viewBox="0 0 24 24">171 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>172 </svg>173 <div class="single">Gajnice Train Station</div>174 </div>175 176 <div class="item">177 <svg class="building-icon" viewBox="0 0 24 24">178 <path class="building-fill" d="M4 3h12v18H4V3zm16 5h-2v13h2V8zM7 6h2v2H7V6zm4 0h2v2h-2V6zM7 10h2v2H7v-2zm4 0h2v2h-2v-2zM7 14h2v2H7v-2zm4 14h-2"></path>179 </svg>180 <div>181 <span class="main">Repinec</span><span class="secondary">, Zagreb, Croatia</span>182 </div>183 </div>184 185 <div class="item">186 <svg class="pin-icon" viewBox="0 0 24 24">187 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>188 </svg>189 <div class="single">Train Station</div>190 </div>191 192 <div class="item">193 <svg class="building-icon" viewBox="0 0 24 24">194 <path class="building-fill" d="M4 3h12v18H4V3zm16 5h-2v13h2V8zM7 6h2v2H7V6zm4 0h2v2h-2V6zM7 10h2v2H7v-2zm4 0h2v2h-2v-2zM7 14h2v2H7v-2zm4 14h-2"></path>195 </svg>196 <div>197 <span class="main">Zaprešić</span><span class="secondary">, Zagreb, Croatia</span>198 </div>199 </div>200 201 <div class="item">202 <svg class="pin-icon" viewBox="0 0 24 24">203 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>204 </svg>205 <div class="single">Train Station</div>206 </div>207 208 <div class="item">209 <svg class="building-icon" viewBox="0 0 24 24">210 <path class="building-fill" d="M4 3h12v18H4V3zm16 5h-2v13h2V8zM7 6h2v2H7V6zm4 0h2v2h-2V6zM7 10h2v2H7v-2zm4 0h2v2h-2v-2zM7 14h2v2H7v-2zm4 14h-2"></path>211 </svg>212 <div>213 <span class="main">Pojatno</span><span class="secondary">, Zagreb, Croatia</span>214 </div>215 </div>216 217 <div class="item">218 <svg class="pin-icon" viewBox="0 0 24 24">219 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>220 </svg>221 <div class="single">Train Station</div>222 </div>223 224 <div class="item">225 <svg class="building-icon" viewBox="0 0 24 24">226 <path class="building-fill" d="M4 3h12v18H4V3zm16 5h-2v13h2V8zM7 6h2v2H7V6zm4 0h2v2h-2V6zM7 10h2v2H7v-2zm4 0h2v2h-2v-2zM7 14h2v2H7v-2zm4 14h-2"></path>227 </svg>228 <div>229 <span class="main">Dugo Selo</span><span class="secondary">, Zagreb, Croatia</span>230 </div>231 </div>232 233 <div class="item">234 <svg class="pin-icon" viewBox="0 0 24 24">235 <path class="pin-fill" d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>236 </svg>237 <div class="single">Train Station</div>238 </div>239 240 </div>241 </div>242 243 <!-- Bottom home indicator -->244 <div class="bottom-safe">245 <div class="home-pill"></div>246 </div>247 248</div>249</body>250</html>