GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: #F7F7F7;10  }11 12  /* Status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; right: 0; height: 90px;15    padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    color: #111; font-weight: 600; font-size: 34px;17  }18  .status-icons { display: flex; align-items: center; gap: 22px; }19  .icon-wifi, .icon-battery { width: 44px; height: 28px; border: 2px solid #333; border-radius: 5px; position: relative; }20  .icon-wifi::before {21    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);22    width: 22px; height: 12px; border-top: 3px solid #333; border-left: 3px solid transparent;23    border-right: 3px solid transparent; border-radius: 12px 12px 0 0;24  }25  .icon-battery::after {26    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 14px; background: #333; border-radius: 2px;27  }28 29  /* Top nav */30  .back-fab {31    position: absolute; top: 110px; left: 42px; width: 96px; height: 96px;32    background: #FFFFFF; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.08);33    border: 1px solid #E5E5E5; display: flex; align-items: center; justify-content: center;34  }35  .tabs {36    position: absolute; top: 120px; left: 170px; right: 36px; height: 96px; display: flex; gap: 48px; align-items: flex-end;37  }38  .tab {39    font-size: 56px; color: #8A8A8A; padding-bottom: 18px;40  }41  .tab.active {42    color: #111; border-bottom: 8px solid #111;43  }44 45  /* Search card */46  .search-card {47    position: absolute; top: 240px; left: 24px; right: 24px; height: 330px;48    background: #FFFFFF; border-radius: 36px; box-shadow: 0 8px 24px rgba(0,0,0,0.06);49  }50  .search-input {51    margin: 40px 42px; height: 120px; border-radius: 28px; background: #F5F5F5;52    display: flex; align-items: center; padding: 0 34px; border: 1px solid #E6E6E6;53    color: #9B9B9B; font-size: 44px;54  }55  .search-input svg { margin-right: 24px; }56 57  /* Recent section */58  .recent {59    position: absolute; top: 610px; left: 42px; right: 42px; color: #222;60  }61  .recent h3 {62    margin: 0 0 30px 0; font-size: 42px; font-weight: 700;63  }64  .recent-item {65    display: flex; align-items: center; padding: 28px 0;66  }67  .recent-icon {68    width: 120px; height: 120px; border-radius: 28px; background: #EFEFEF; border: 1px solid #D9D9D9;69    display: flex; align-items: center; justify-content: center; margin-right: 28px; color: #666;70    position: relative;71  }72  .recent-icon .clock {73    width: 56px; height: 56px; border: 4px solid #666; border-radius: 50%; position: relative;74  }75  .recent-icon .clock::after {76    content: ""; position: absolute; left: 26px; top: 12px; width: 4px; height: 22px; background: #666;77  }78  .recent-icon .clock::before {79    content: ""; position: absolute; left: 26px; top: 28px; width: 18px; height: 4px; background: #666;80  }81  .recent-text .title { font-size: 48px; color: #1D1D1D; }82  .recent-text .sub { font-size: 38px; color: #7C7C7C; margin-top: 8px; }83  .divider { height: 2px; background: #ECECEC; margin-left: 148px; }84 85  /* Keyboard */86  .keyboard {87    position: absolute; bottom: 0; left: 0; right: 0; height: 980px;88    background: #111; border-top-left-radius: 22px; border-top-right-radius: 22px;89    color: #fff;90  }91  .kbd-topbar {92    height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px;93  }94  .kbd-left-bubble, .kbd-right-bubble {95    width: 96px; height: 96px; border-radius: 50%; background: #CFE8F6; color: #0B4B63;96    display: flex; align-items: center; justify-content: center; font-weight: 700;97  }98  .kbd-toolbar {99    height: 120px; display: flex; align-items: center; gap: 44px; color: #CFCFCF; padding: 0 30px;100    font-size: 36px;101  }102  .kbd-rows { padding: 10px 16px 24px; }103  .row { display: flex; justify-content: center; gap: 14px; margin: 16px 0; }104  .key {105    width: 88px; height: 120px; background: #2A2A2A; border-radius: 18px; color: #EDEDED;106    font-size: 46px; display: flex; align-items: center; justify-content: center;107    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);108  }109  .key.wide { width: 120px; }110  .key.xwide { width: 160px; }111  .key.space { flex: 1; height: 120px; min-width: 400px; }112  .row-bottom { display: grid; grid-template-columns: 120px 120px 120px 1fr 120px 120px; gap: 14px; align-items: center; }113  .vbar { width: 2px; height: 60px; background: #3B3B3B; margin: 0 8px; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="status-bar">121    <div>12:46</div>122    <div class="status-icons">123      <div class="icon-wifi"></div>124      <div class="icon-battery"></div>125    </div>126  </div>127 128  <!-- Back floating action button -->129  <div class="back-fab">130    <svg width="44" height="44" viewBox="0 0 24 24" fill="none">131      <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>132    </svg>133  </div>134 135  <!-- Tabs -->136  <div class="tabs">137    <div class="tab active">Stays</div>138    <div class="tab">Experiences</div>139  </div>140 141  <!-- Search card -->142  <div class="search-card">143    <div class="search-input">144      <svg width="56" height="56" viewBox="0 0 24 24">145        <circle cx="10" cy="10" r="7" stroke="#7D7D7D" stroke-width="2" fill="none"></circle>146        <path d="M15 15l6 6" stroke="#7D7D7D" stroke-width="2" stroke-linecap="round"></path>147      </svg>148      <span>Search destinations</span>149    </div>150  </div>151 152  <!-- Recent Searches -->153  <div class="recent">154    <h3>Recent searches</h3>155 156    <div class="recent-item">157      <div class="recent-icon">158        <div class="clock"></div>159      </div>160      <div class="recent-text">161        <div class="title">Newark · Stays</div>162        <div class="sub">Jul 1 – 8 · 5 guests</div>163      </div>164    </div>165    <div class="divider"></div>166 167    <div class="recent-item">168      <div class="recent-icon">169        <div class="clock"></div>170      </div>171      <div class="recent-text">172        <div class="title">Chile · Stays</div>173        <div class="sub">Jun 28 – 30 · 2 guests</div>174      </div>175    </div>176  </div>177 178  <!-- Keyboard -->179  <div class="keyboard">180    <div class="kbd-topbar">181      <div class="kbd-left-bubble">182        <svg width="36" height="36" viewBox="0 0 24 24">183          <path d="M15 18l-6-6 6-6" stroke="#0B4B63" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184        </svg>185      </div>186      <div class="kbd-right-bubble">187        <svg width="36" height="36" viewBox="0 0 24 24">188          <path d="M5 12h14" stroke="#0B4B63" stroke-width="2" stroke-linecap="round"/>189          <path d="M13 5l7 7-7 7" stroke="#0B4B63" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>190        </svg>191      </div>192    </div>193 194    <div class="kbd-toolbar">195      <span>😊</span>196      <span>GIF</span>197      <span>⚙</span>198      <span>Gx</span>199      <div class="vbar"></div>200      <span>⋯</span>201      <span style="margin-left:auto;">🎤</span>202    </div>203 204    <div class="kbd-rows">205      <div class="row">206        <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>207        <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>208      </div>209      <div class="row">210        <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>211        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>212      </div>213      <div class="row">214        <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>215        <div class="key">N</div><div class="key">M</div>216        <div class="key wide">⌫</div>217      </div>218      <div class="row-bottom">219        <div class="key wide">?123</div>220        <div class="key">,</div>221        <div class="key">😊</div>222        <div class="key space"></div>223        <div class="key">.</div>224        <div class="key wide">↵</div>225      </div>226    </div>227  </div>228 229</div>230</body>231</html>