GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Destination - Ulm</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:0;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0;17 height:100px; background:#111416; color:#eaeaea;18 display:flex; align-items:center; padding:0 32px;19 font-size:38px; letter-spacing:1px;20 }21 .status-right {22 margin-left:auto; display:flex; align-items:center; gap:18px; font-size:34px; color:#eaeaea;23 }24 .dot { width:14px; height:14px; background:#eaeaea; border-radius:50%; display:inline-block; opacity:.9; }25 26 /* App bar */27 .app-bar {28 position:absolute; top:100px; left:0; right:0;29 height:160px; background:#272529; color:#fff;30 display:flex; align-items:center;31 padding:0 28px;32 box-sizing:border-box;33 }34 .back {35 width:84px; height:84px; display:flex; align-items:center; justify-content:center;36 margin-right:18px;37 }38 .title { font-size:56px; font-weight:700; }39 40 /* Content list area */41 .content {42 position:absolute; top:260px; bottom:910px; /* leaves space for keyboard + suggestion bar */43 left:0; right:0; background:#ffffff; border-top:1px solid #e7e7e7;44 }45 .list {46 position:absolute; top:0; left:0; right:0; bottom:280px; /* space for input row */47 overflow:hidden; background:#fff;48 }49 .row {50 height:140px; display:flex; align-items:center;51 padding:0 34px; box-sizing:border-box;52 border-bottom:1px solid #eaeaea; color:#222;53 }54 .pin {55 width:76px; height:76px; border-radius:50%;56 background:#f0f0f0; display:flex; align-items:center; justify-content:center;57 margin-right:28px; border:1px solid #d8d8d8;58 }59 .row span { font-size:42px; color:#333; }60 .muted { color:#8b8b8b; }61 62 /* Search/input row */63 .input-row {64 position:absolute; left:0; right:0; bottom:0; height:140px;65 border-top:1px solid #e6e6e6; background:#ffffff;66 display:flex; align-items:center; padding:0 34px; box-sizing:border-box;67 gap:26px;68 }69 .marker {70 width:40px; height:40px; display:flex; align-items:center; justify-content:center;71 }72 .input-text { font-size:50px; color:#1c1c1c; }73 .input-text .caret { display:inline-block; width:4px; height:56px; background:#e4678f; margin-left:6px; vertical-align:-10px; }74 75 /* Suggestion chip above keyboard */76 .suggest-bar {77 position:absolute; left:0; right:0; bottom:910px; height:80px;78 background:#161819; color:#d7d7d7; display:flex; align-items:center; justify-content:center;79 font-size:40px; border-top:1px solid #202224;80 }81 82 /* Keyboard */83 .keyboard {84 position:absolute; left:0; right:0; bottom:60px; height:830px;85 background:#121415; padding:24px 18px 18px; box-sizing:border-box;86 }87 .kb-row { display:flex; gap:18px; margin:24px 0; justify-content:center; }88 .key {89 width:90px; height:110px; background:#2a2e31; border-radius:22px; color:#e7eaec;90 display:flex; align-items:center; justify-content:center; font-size:44px; box-shadow:inset 0 0 0 1px #1f2326;91 }92 .key.wide { width:170px; }93 .key.extra-wide { width:420px; }94 .key.circle { width:110px; height:110px; border-radius:38px; }95 .right-action {96 background:#9BE8C0; color:#0b2b1f; box-shadow:none;97 }98 99 /* Bottom gesture bar */100 .gesture {101 position:absolute; left:300px; right:300px; bottom:18px; height:12px; border-radius:8px; background:#d6d6d6;102 }103 104 /* Small helpers for icons */105 svg { display:block; }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status bar -->112 <div class="status-bar">113 <div>8:53</div>114 <div class="status-right">115 <span class="dot"></span>116 <span class="dot"></span>117 <span>100%</span>118 </div>119 </div>120 121 <!-- App bar -->122 <div class="app-bar">123 <div class="back">124 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">125 <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/>126 </svg>127 </div>128 <div class="title">Destination</div>129 </div>130 131 <!-- Content -->132 <div class="content">133 <div class="list">134 <div class="row">135 <div class="pin">136 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">137 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>138 </svg>139 </div>140 <span>Altenstadt, Bavaria, Germany</span>141 </div>142 143 <div class="row">144 <div class="pin">145 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">146 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>147 </svg>148 </div>149 <span>Ulm School of Design, Germany</span>150 </div>151 152 <div class="row">153 <div class="pin">154 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">155 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>156 </svg>157 </div>158 <span>New Ulm, MN, USA</span>159 </div>160 161 <div class="row">162 <div class="pin">163 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">164 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>165 </svg>166 </div>167 <span>Neu-Ulm, Germany</span>168 </div>169 170 <div class="row">171 <div class="pin">172 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">173 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>174 </svg>175 </div>176 <span>Ulm Hauptbahnhof, Germany</span>177 </div>178 179 <div class="row">180 <div class="pin">181 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8d8d8d">182 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>183 </svg>184 </div>185 <span>Ulm, Germany</span>186 </div>187 </div>188 189 <div class="input-row">190 <div class="marker">191 <svg width="40" height="40" viewBox="0 0 24 24">192 <path d="M12 3l9 18H3z" fill="#e36aa0"></path>193 </svg>194 </div>195 <div class="input-text">196 Ulm,<span class="muted"> Germany</span><span class="caret"></span>197 </div>198 </div>199 </div>200 201 <!-- Small chip with suggestion above keyboard -->202 <div class="suggest-bar">Ulm</div>203 204 <!-- Keyboard -->205 <div class="keyboard">206 <div class="kb-row">207 <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>208 <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>209 </div>210 <div class="kb-row">211 <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>212 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>213 </div>214 <div class="kb-row">215 <div class="key circle">⇧</div>216 <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>217 <div class="key">n</div><div class="key">m</div>218 <div class="key circle">⌫</div>219 </div>220 <div class="kb-row">221 <div class="key">?123</div>222 <div class="key">,</div>223 <div class="key extra-wide"></div>224 <div class="key">.</div>225 <div class="key circle right-action">➔</div>226 </div>227 </div>228 229 <div class="gesture"></div>230</div>231</body>232</html>