GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hotels Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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:#0c141a; color:#dbe3ea;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:120px; background:#0e171e;19 display:flex; align-items:center; padding:0 36px; color:#e8edf2;20 font-weight:600; font-size:40px;21 }22 .status-icons { margin-left:auto; display:flex; align-items:center; gap:30px; }23 .icon-circle { width:26px; height:26px; border-radius:50%; background:#e8edf2; opacity:0.85; }24 .battery {25 width:54px; height:28px; border:3px solid #e8edf2; border-radius:6px; position:relative;26 }27 .battery::after { content:""; position:absolute; right:-10px; top:8px; width:6px; height:12px; background:#e8edf2; border-radius:2px; }28 .battery .level { position:absolute; top:4px; left:4px; height:18px; width:30px; background:#e8edf2; }29 30 /* Top app bar */31 .app-bar {32 position:absolute; top:120px; left:0; right:0; height:140px; display:flex; align-items:center;33 padding:0 32px; color:#b5bdc6;34 }35 .back-btn {36 width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:42px;37 }38 .tabs { margin:0 auto; display:flex; gap:80px; font-size:42px; letter-spacing:2px; }39 .tab { color:#808a94; }40 .tab.active { color:#b9c3cc; position:relative; }41 .tab.active::after { content:""; position:absolute; left:-6px; right:-6px; bottom:-10px; height:6px; background:#21c4b7; border-radius:3px; }42 43 /* Search row */44 .search-row {45 position:absolute; top:280px; left:32px; right:32px; display:flex; gap:24px; align-items:center;46 }47 .search-input {48 flex:1; height:110px; background:#121d24; border:3px solid #2e78ff;49 border-radius:16px; padding:0 28px; color:#8fa1af; font-size:40px; display:flex; align-items:center;50 }51 .right-pills { display:flex; gap:18px; }52 .pill {53 height:104px; min-width:190px; padding:0 22px; background:#18242c; border-radius:18px; color:#c9d1d8;54 display:flex; align-items:center; gap:16px; border:1px solid #25323a; font-size:34px;55 }56 57 /* Cancel and Near Me */58 .cancel {59 position:absolute; top:430px; left:32px; font-size:44px; color:#78e9e6; font-weight:600;60 }61 .near-me {62 position:absolute; top:520px; left:32px; width:500px; height:130px; background:#4a5562; border-radius:26px;63 display:flex; align-items:center; gap:26px; padding:0 32px; color:#e9eef3; font-size:44px;64 box-shadow:0 10px 20px rgba(0,0,0,0.35);65 }66 .near-me .plane {67 width:56px; height:56px; display:inline-block;68 }69 70 /* Popular destinations */71 .section-title {72 position:absolute; top:700px; left:32px; font-size:48px; font-weight:700; color:#eef4f9;73 }74 .chips {75 position:absolute; top:790px; left:32px; right:32px;76 display:flex; flex-wrap:wrap; gap:28px;77 }78 .chip {79 height:120px; padding:0 40px; background:#3e4955; border-radius:26px; border:1px solid #2f3943;80 display:flex; align-items:center; color:#dfe6ec; font-size:44px;81 }82 83 /* Keyboard mock */84 .keyboard {85 position:absolute; bottom:70px; left:0; right:0; height:900px; background:#12181e; border-top:1px solid #1e252c;86 padding:30px 30px 20px;87 }88 .kb-top-icons { display:flex; align-items:center; gap:36px; color:#c6ced6; margin-bottom:22px; }89 .kb-icon {90 height:80px; width:80px; border-radius:22px; background:#242b32; border:1px solid #2e353c; display:flex; align-items:center; justify-content:center;91 }92 .row { display:flex; gap:18px; margin:18px 0; }93 .key {94 height:120px; flex:1; background:#2a3137; border:1px solid #3a4148; border-radius:16px; display:flex; align-items:center; justify-content:center;95 color:#d4dce3; font-size:46px; font-weight:600;96 }97 .key.small { flex:0 0 120px; }98 .key.med { flex:0 0 170px; }99 .key.wide { flex:3; }100 .key.round {101 height:120px; width:120px; border-radius:50%; background:#b9cbe0; color:#12181e; font-weight:800; border:none;102 }103 .key.blue {104 height:120px; width:120px; border-radius:50%; background:#bfd7f0; color:#0c141a; font-weight:800; border:none;105 }106 .gesture-bar {107 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);108 width:360px; height:10px; background:#eaeef2; border-radius:6px; opacity:0.9;109 }110 111 /* Helper icon styles */112 .svg { display:inline-block; }113 .icon { width:40px; height:40px; }114 .icon16 { width:34px; height:34px; }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status bar -->121 <div class="status-bar">122 <div>1:44</div>123 <div class="status-icons">124 <!-- simple search dot icon -->125 <svg class="icon" viewBox="0 0 24 24" fill="#e8edf2"><circle cx="10" cy="10" r="8"/><rect x="16" y="16" width="8" height="4" rx="2" transform="rotate(45 16 16)"></rect></svg>126 <!-- tiny funnel icon -->127 <svg class="icon" viewBox="0 0 24 24" fill="#e8edf2"><path d="M3 5h18l-7 7v5l-4 2v-7L3 5z"/></svg>128 <div class="icon-circle"></div>129 <div class="icon-circle" style="opacity:0.5;"></div>130 <svg class="icon" viewBox="0 0 24 24" fill="#e8edf2"><circle cx="12" cy="12" r="10"/><rect x="17" y="11" width="4" height="8" rx="2" fill="#0c141a"/></svg>131 <div class="battery"><div class="level"></div></div>132 </div>133 </div>134 135 <!-- App bar with tabs -->136 <div class="app-bar">137 <div class="back-btn">138 <svg class="icon" viewBox="0 0 24 24" fill="#c1c7ce"><path d="M15 4L5 12l10 8V4z"/></svg>139 </div>140 <div class="tabs">141 <div class="tab">FLIGHTS</div>142 <div class="tab active">HOTELS</div>143 </div>144 </div>145 146 <!-- Search Row -->147 <div class="search-row">148 <div class="search-input">Destination or hotel name</div>149 <div class="right-pills">150 <div class="pill">151 <svg class="icon16" viewBox="0 0 24 24" fill="#cbd3da"><rect x="3" y="4" width="18" height="16" rx="3"></rect><path d="M3 9h18" stroke="#0c141a" stroke-width="2"></path><circle cx="8" cy="13" r="2" fill="#0c141a"></circle></svg>152 <div>Dec 6<br/>Dec 8</div>153 </div>154 <div class="pill">155 <svg class="icon16" viewBox="0 0 24 24" fill="#cbd3da"><circle cx="12" cy="7" r="4"></circle><path d="M4 22c0-5 4-8 8-8s8 3 8 8" /></svg>156 <div>2</div>157 </div>158 </div>159 </div>160 161 <!-- Cancel and Near me -->162 <div class="cancel">Cancel</div>163 <div class="near-me">164 <svg class="plane" viewBox="0 0 24 24" fill="#eef4f9"><path d="M2 12l20-9-6 9 6 9-20-9z"/></svg>165 <div>Search near me</div>166 </div>167 168 <!-- Popular Destinations -->169 <div class="section-title">Popular destinations</div>170 <div class="chips">171 <div class="chip">New York</div>172 <div class="chip">Las Vegas</div>173 <div class="chip">Orlando</div>174 <div class="chip">Miami</div>175 <div class="chip">Los Angeles</div>176 <div class="chip">Chicago</div>177 </div>178 179 <!-- Keyboard mock -->180 <div class="keyboard">181 <div class="kb-top-icons">182 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>183 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><circle cx="12" cy="9" r="5"/><path d="M4 22c2-5 6-7 8-7s6 2 8 7" fill="none" stroke="#c6ced6" stroke-width="2"/></svg></div>184 <div class="kb-icon"><span style="font-weight:800;">GIF</span></div>185 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><path d="M12 2l2 4h4l-3 3 1 5-4-2-4 2 1-5-3-3h4z"/></svg></div>186 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><path d="M3 4h18v4H3zm4 6h10v10H7z"/></svg></div>187 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><circle cx="12" cy="8" r="5"/><path d="M3 21c2-5 7-7 9-7s7 2 9 7" fill="none" stroke="#c6ced6" stroke-width="2"/></svg></div>188 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><path d="M12 3a5 5 0 015 5v5a5 5 0 11-10 0V8a5 5 0 015-5zm-1 15h2v3h-2z"/></svg></div>189 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="2" fill="#12181e"/><circle cx="16" cy="10" r="2" fill="#12181e"/></svg></div>190 <div class="kb-icon"><svg viewBox="0 0 24 24" width="40" height="40" fill="#c6ced6"><circle cx="10" cy="10" r="6"/><rect x="15" y="15" width="7" height="3" rx="1" transform="rotate(45 15 15)"/></svg></div>191 </div>192 193 <div class="row">194 <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>195 </div>196 <div class="row" style="padding:0 60px;">197 <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>198 </div>199 <div class="row">200 <div class="key med"><svg viewBox="0 0 24 24" width="36" height="36" fill="#d4dce3"><path d="M15 4L5 12l10 8V4z"/></svg></div>201 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>202 <div class="key med"><svg viewBox="0 0 24 24" width="34" height="34" fill="#d4dce3"><path d="M5 5h14v14H5z"/><path d="M15 9l4 4-4 4"/></svg></div>203 </div>204 <div class="row" style="align-items:center;">205 <div class="key round">?123</div>206 <div class="key small">,</div>207 <div class="key small"><svg viewBox="0 0 24 24" width="34" height="34" fill="#d4dce3"><circle cx="12" cy="9" r="5"/><path d="M4 22c2-5 6-7 8-7s6 2 8 7" fill="none" stroke="#d4dce3" stroke-width="2"/></svg></div>208 <div class="key wide"></div>209 <div class="key small">.</div>210 <div class="key blue"><svg viewBox="0 0 24 24" width="38" height="38" fill="#0c141a"><circle cx="10" cy="10" r="6"/><rect x="15" y="15" width="8" height="4" rx="2" transform="rotate(45 15 15)"/></svg></div>211 </div>212 </div>213 214 <div class="gesture-bar"></div>215</div>216</body>217</html>