GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Destination Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f5f5f7;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 118px;24 background: #0f1517;25 color: #fff;26 }27 .status-inner {28 padding: 0 36px;29 height: 100%;30 display: flex;31 align-items: center;32 justify-content: space-between;33 font-weight: 600;34 letter-spacing: .5px;35 }36 .time {37 font-size: 40px;38 }39 .status-icons {40 display: flex;41 align-items: center;42 gap: 24px;43 }44 .wifi {45 width: 42px; height: 28px;46 }47 .battery {48 width: 84px; height: 42px;49 }50 51 /* App bar */52 .app-bar {53 position: absolute;54 top: 118px;55 left: 0;56 width: 1080px;57 height: 200px;58 background: #2d2a2f;59 color: #fff;60 box-sizing: border-box;61 padding: 32px 36px 24px 36px;62 }63 .app-bar .row {64 display: flex;65 align-items: center;66 gap: 28px;67 }68 .back {69 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;70 }71 .title {72 font-size: 68px;73 font-weight: 700;74 }75 76 /* List section */77 .list {78 position: absolute;79 top: 318px;80 left: 0;81 width: 1080px;82 background: #ffffff;83 border-top: 1px solid #e4e4e4;84 border-bottom: 1px solid #e4e4e4;85 }86 .list-item {87 display: flex;88 align-items: center;89 gap: 34px;90 padding: 40px 36px;91 border-bottom: 1px solid #e9e9e9;92 }93 .clock-wrap {94 width: 86px; height: 86px; border-radius: 50%;95 background: #9da0a6;96 display: flex; align-items: center; justify-content: center;97 }98 .list-item .text {99 font-size: 48px;100 color: #222;101 }102 103 /* Action row */104 .actions {105 position: absolute;106 top: 1118px;107 left: 0;108 width: 1080px;109 height: 150px;110 background: #fff;111 border-top: 1px solid #e6e6e6;112 border-bottom: 1px solid #e6e6e6;113 display: flex;114 }115 .action {116 width: 50%;117 display: flex;118 align-items: center;119 justify-content: center;120 gap: 22px;121 font-size: 44px;122 color: #e91e63;123 font-weight: 600;124 }125 .actions .divider {126 width: 2px;127 background: #e6e6e6;128 }129 .action svg { fill: #e91e63; }130 131 /* Search row */132 .search-area {133 position: absolute;134 top: 1268px;135 left: 0;136 width: 1080px;137 background: #ffffff;138 border-top: 1px solid #eee;139 padding: 22px 36px 28px;140 box-sizing: border-box;141 }142 .triangle {143 width: 0; height: 0;144 border-left: 28px solid transparent;145 border-right: 28px solid transparent;146 border-top: 0;147 border-bottom: 42px solid #e05a8c;148 margin-left: 8px;149 margin-bottom: 14px;150 }151 .search-input {152 display: flex; align-items: center;153 border: 2px solid #eeeeee;154 height: 96px;155 border-radius: 12px;156 padding: 0 22px;157 box-sizing: border-box;158 }159 .search-input input {160 border: none;161 outline: none;162 font-size: 44px;163 color: #444;164 width: 100%;165 }166 .search-input input::placeholder { color: #9aa0a6; }167 168 /* Keyboard (visual placeholder) */169 .keyboard {170 position: absolute;171 bottom: 0;172 left: 0;173 width: 1080px;174 height: 1030px;175 background: #11171a;176 padding: 28px 26px;177 box-sizing: border-box;178 }179 .key-row {180 display: flex; gap: 18px; margin-bottom: 22px;181 }182 .key {183 flex: 1;184 height: 120px;185 border-radius: 18px;186 background: #22292c;187 display: flex; align-items: center; justify-content: center;188 color: #e7edef;189 font-size: 48px;190 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);191 }192 .key.small { flex: 0 0 100px; }193 .space { flex: 1 1 auto; height: 120px; }194 .enter { flex: 0 0 160px; background: #9be8c7; color: #0e1a16; font-weight: 700; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div class="status-inner">203 <div class="time">8:52</div>204 <div class="status-icons">205 <!-- Simple wifi icon -->206 <svg class="wifi" viewBox="0 0 24 14">207 <path fill="#ffffff" d="M12 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM12 6c-2.8 0-5.4 1.1-7.4 3l1.5 1.5C7.7 8.9 9.8 8 12 8s4.3.9 5.9 2.5L19.4 9c-2-1.9-4.6-3-7.4-3zM12 0C7.8 0 3.9 1.6 1 4.3l1.6 1.6C5 3.6 8.3 2.3 12 2.3s7 .9 9.4 3.6L23 4.3C20.1 1.6 16.2 0 12 0z"/>208 </svg>209 <!-- Simple battery icon -->210 <svg class="battery" viewBox="0 0 44 20">211 <rect x="1" y="3" width="36" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>212 <rect x="4" y="6" width="28" height="8" fill="#ffffff"></rect>213 <rect x="38" y="7" width="5" height="6" fill="#ffffff"></rect>214 </svg>215 </div>216 </div>217 </div>218 219 <!-- App bar -->220 <div class="app-bar">221 <div class="row">222 <div class="back">223 <svg width="54" height="54" viewBox="0 0 24 24" fill="#ffffff">224 <path d="M15.4 19.4 8 12l7.4-7.4 1.4 1.4L10.8 12l6 6-1.4 1.4z"></path>225 </svg>226 </div>227 <div class="title">Destination</div>228 </div>229 </div>230 231 <!-- List of recent destinations -->232 <div class="list">233 <div class="list-item">234 <div class="clock-wrap">235 <svg width="44" height="44" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="9" fill="#e6e8ea"></circle>237 <path d="M12 6v6l4 2" stroke="#75777b" stroke-width="2" fill="none" stroke-linecap="round"></path>238 </svg>239 </div>240 <div class="text">Hungary</div>241 </div>242 <div class="list-item">243 <div class="clock-wrap">244 <svg width="44" height="44" viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="9" fill="#e6e8ea"></circle>246 <path d="M12 6v6l4 2" stroke="#75777b" stroke-width="2" fill="none" stroke-linecap="round"></path>247 </svg>248 </div>249 <div class="text">Berlin, Germany</div>250 </div>251 <div class="list-item">252 <div class="clock-wrap">253 <svg width="44" height="44" viewBox="0 0 24 24">254 <circle cx="12" cy="12" r="9" fill="#e6e8ea"></circle>255 <path d="M12 6v6l4 2" stroke="#75777b" stroke-width="2" fill="none" stroke-linecap="round"></path>256 </svg>257 </div>258 <div class="text">Ulm, Germany</div>259 </div>260 <div class="list-item">261 <div class="clock-wrap">262 <svg width="44" height="44" viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="9" fill="#e6e8ea"></circle>264 <path d="M12 6v6l4 2" stroke="#75777b" stroke-width="2" fill="none" stroke-linecap="round"></path>265 </svg>266 </div>267 <div class="text">Vienna, Austria</div>268 </div>269 <div class="list-item" style="border-bottom:none;">270 <div class="clock-wrap">271 <svg width="44" height="44" viewBox="0 0 24 24">272 <circle cx="12" cy="12" r="9" fill="#e6e8ea"></circle>273 <path d="M12 6v6l4 2" stroke="#75777b" stroke-width="2" fill="none" stroke-linecap="round"></path>274 </svg>275 </div>276 <div class="text">Dubai, United Arab Emirates</div>277 </div>278 </div>279 280 <!-- Action buttons -->281 <div class="actions">282 <div class="action">283 <svg width="44" height="44" viewBox="0 0 24 24">284 <path d="M12 2l.9 4.1A5 5 0 0 1 17.9 11L22 12l-4.1 1A5 5 0 0 1 12.9 18L12 22l-.9-4.1A5 5 0 0 1 6.1 13L2 12l4.1-1A5 5 0 0 1 11.1 6.1L12 2z" fill="#e91e63"></path>285 <circle cx="12" cy="12" r="3" fill="#ffffff"></circle>286 </svg>287 <span>Current Location</span>288 </div>289 <div class="divider"></div>290 <div class="action">291 <svg width="44" height="44" viewBox="0 0 24 24">292 <path d="M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z" fill="#e91e63"></path>293 </svg>294 <span>Select on map</span>295 </div>296 </div>297 298 <!-- Search -->299 <div class="search-area">300 <div class="triangle"></div>301 <div class="search-input">302 <input type="text" placeholder="Search">303 </div>304 </div>305 306 <!-- Keyboard visual -->307 <div class="keyboard">308 <div class="key-row">309 <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>310 </div>311 <div class="key-row">312 <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>313 </div>314 <div class="key-row">315 <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><div class="key small">⌫</div>316 </div>317 <div class="key-row">318 <div class="key small">?123</div>319 <div class="key small">,</div>320 <div class="key space"></div>321 <div class="key small">.</div>322 <div class="key enter">↵</div>323 </div>324 </div>325 326</div>327</body>328</html>