GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 }11 12 /* Top status bar */13 .status-bar {14 height:100px; padding:0 40px; display:flex; align-items:center;15 justify-content:space-between; color:#EAEAEA; font-size:36px; letter-spacing:0.5px;16 }17 .status-right { display:flex; align-items:center; gap:24px; font-size:30px; color:#cfcfcf; }18 .battery {19 display:flex; align-items:center; gap:12px;20 }21 .battery-icon {22 width:48px; height:26px; border:3px solid #cfcfcf; border-radius:6px; position:relative;23 }24 .battery-icon::after {25 content:""; position:absolute; right:-10px; top:6px; width:6px; height:14px; background:#cfcfcf; border-radius:2px;26 }27 .battery-fill { position:absolute; left:3px; top:3px; height:18px; width:34px; background:#cfcfcf; }28 29 /* App bar */30 .app-bar {31 height:140px; display:flex; align-items:center; padding:0 40px; border-bottom:1px solid #222;32 }33 .back-icon { width:54px; height:54px; margin-right:26px; }34 .app-title { font-size:44px; font-weight:600; color:#EDEDED; }35 36 /* Choose on map tile */37 .map-choice {38 height:170px; display:flex; align-items:center; padding:0 40px; background:#1A1A1A; border-bottom:1px solid #222;39 }40 .map-icon {41 width:70px; height:70px; border-radius:12px; background:#ff4f7a; display:flex; align-items:center; justify-content:center; margin-right:28px;42 }43 .map-icon svg { width:46px; height:46px; }44 .map-text { font-size:42px; color:#ff6e8a; font-weight:600; }45 46 /* Section headers */47 .section-header {48 padding:26px 40px; font-size:38px; color:#9BA1A6; border-top:1px solid #202020; border-bottom:1px solid #202020;49 display:flex; align-items:center; justify-content:space-between;50 }51 .dots { display:flex; gap:10px; margin-right:16px; }52 .dots span { width:10px; height:10px; background:#757575; border-radius:50%; display:inline-block; }53 54 /* List items */55 .list-item {56 display:flex; align-items:center; padding:34px 40px; gap:28px; border-bottom:1px solid #202020;57 }58 .pin {59 width:50px; height:50px; margin-right:6px;60 }61 .list-content { flex:1; }62 .title { font-size:44px; color:#EDEDED; }63 .subtitle { font-size:32px; color:#A0A0A0; margin-top:8px; }64 .star {65 width:56px; height:56px;66 }67 68 /* Badges for Amsterdam Centraal */69 .badges { display:flex; gap:12px; margin-right:8px; }70 .badge {71 width:70px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center;72 font-size:28px; font-weight:700; color:#fff;73 }74 .badge.ns { background:#245DFF; }75 .badge.red { background:#C43D3D; }76 .badge.purple { background:#7A4BD1; }77 78 /* Helper note */79 .helper {80 text-align:center; color:#B3B3B3; font-size:36px; padding:40px 20px;81 }82 83 /* Keyboard */84 .keyboard {85 position:absolute; left:0; bottom:40px; width:100%;86 background:#141414; border-top:1px solid #232323; padding:20px 24px 24px 24px;87 }88 .kb-top {89 display:flex; align-items:center; justify-content:space-between; padding:16px 12px 22px 12px; color:#D0D0D0;90 }91 .kb-top .icon {92 width:72px; height:72px; background:#1E1E1E; border-radius:18px; display:flex; justify-content:center; align-items:center; font-size:32px;93 border:1px solid #2a2a2a;94 }95 .kb-top .label { font-size:34px; margin-left:12px; }96 97 .kb-row { display:flex; justify-content:center; gap:16px; margin:8px 0; }98 .key {99 width:92px; height:120px; background:#1E1E1E; border-radius:22px; display:flex; align-items:center; justify-content:center;100 font-size:46px; color:#EDEDED; border:1px solid #2a2a2a;101 }102 .key.wide { width:140px; }103 .space-row { display:flex; align-items:center; gap:20px; margin-top:14px; }104 .space { flex:1; height:120px; background:#1E1E1E; border-radius:22px; border:1px solid #2a2a2a; }105 .enter {106 width:160px; height:160px; background:#b6f5a8; border-radius:80px; display:flex; align-items:center; justify-content:center; color:#0b3d17; font-size:72px; font-weight:700;107 position:absolute; right:34px; bottom:44px;108 box-shadow:0 10px 18px rgba(0,0,0,0.35);109 }110 .gesture {111 position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:360px; height:10px; background:#eaeaea; border-radius:6px;112 opacity:0.85;113 }114 115 /* Small icons SVGs */116 svg { fill:none; stroke:#EAEAEA; stroke-width:3; }117 .accent-stroke { stroke:#ff6e8a; }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div class="time">8:25</div>126 <div class="status-right">127 <span>📍</span>128 <span>Wi‑Fi</span>129 <div class="battery">130 <div class="battery-icon"><div class="battery-fill"></div></div>131 <span>94%</span>132 </div>133 </div>134 </div>135 136 <!-- App bar -->137 <div class="app-bar">138 <svg class="back-icon" viewBox="0 0 24 24">139 <path d="M15 4 L7 12 L15 20" stroke="#EDEDED" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>140 </svg>141 <div class="app-title">Where do you want to go?</div>142 </div>143 144 <!-- Choose on map -->145 <div class="map-choice">146 <div class="map-icon">147 <svg viewBox="0 0 24 24">148 <path class="accent-stroke" d="M3 7 L10 4 L14 7 L21 4 L21 17 L14 20 L10 17 L3 20 Z" stroke-width="2.5"></path>149 </svg>150 </div>151 <div class="map-text">Choose on map</div>152 </div>153 154 <!-- Favorites section -->155 <div class="section-header">156 <div>Favorites</div>157 <div></div>158 </div>159 <div class="list-item">160 <svg class="pin" viewBox="0 0 24 24">161 <path d="M12 22 C12 22 5 14 5 9 A7 7 0 1 1 19 9 C19 14 12 22 12 22 Z" stroke="#CFCFCF" stroke-width="2.4" fill="none"></path>162 <circle cx="12" cy="9" r="3" fill="#CFCFCF"></circle>163 </svg>164 <div class="list-content">165 <div class="title">Groningen</div>166 <div class="subtitle">Netherlands</div>167 </div>168 </div>169 170 <!-- Recent section -->171 <div class="section-header">172 <div>Recent</div>173 <div class="dots"><span></span><span></span><span></span></div>174 </div>175 176 <!-- Recent item: Amsterdam Centraal -->177 <div class="list-item">178 <div class="badges">179 <div class="badge ns">NS</div>180 <div class="badge red">R</div>181 <div class="badge purple">B</div>182 </div>183 <div class="list-content">184 <div class="title">Amsterdam Centraal</div>185 </div>186 <svg class="star" viewBox="0 0 24 24">187 <path d="M12 3 L14.6 9.4 L21.5 9.4 L15.7 13.2 L18.2 20 L12 16.3 L5.8 20 L8.3 13.2 L2.5 9.4 L9.4 9.4 Z" stroke="#CFCFCF" stroke-width="2.2" fill="none" stroke-linejoin="round"></path>188 </svg>189 </div>190 191 <!-- Recent item: Groningen -->192 <div class="list-item">193 <svg class="pin" viewBox="0 0 24 24">194 <path d="M12 22 C12 22 5 14 5 9 A7 7 0 1 1 19 9 C19 14 12 22 12 22 Z" stroke="#CFCFCF" stroke-width="2.4" fill="none"></path>195 <circle cx="12" cy="9" r="3" fill="#CFCFCF"></circle>196 </svg>197 <div class="list-content">198 <div class="title">Groningen</div>199 <div class="subtitle">Netherlands</div>200 </div>201 </div>202 203 <!-- Recent item: Atrium Meeting Centre -->204 <div class="list-item">205 <svg class="pin" viewBox="0 0 24 24">206 <path d="M12 22 C12 22 5 14 5 9 A7 7 0 1 1 19 9 C19 14 12 22 12 22 Z" stroke="#CFCFCF" stroke-width="2.4" fill="none"></path>207 <circle cx="12" cy="9" r="3" fill="#CFCFCF"></circle>208 </svg>209 <div class="list-content">210 <div class="title">Atrium Meeting Centre</div>211 <div class="subtitle">Strawinskylaan, Amsterdam, Netherlands</div>212 </div>213 <svg class="star" viewBox="0 0 24 24">214 <path d="M12 3 L14.6 9.4 L21.5 9.4 L15.7 13.2 L18.2 20 L12 16.3 L5.8 20 L8.3 13.2 L2.5 9.4 L9.4 9.4 Z" stroke="#CFCFCF" stroke-width="2.2" fill="none" stroke-linejoin="round"></path>215 </svg>216 </div>217 218 <div class="helper">Didn’t find what you’re looking for?</div>219 220 <!-- Keyboard -->221 <div class="keyboard">222 <div class="kb-top">223 <div style="display:flex; align-items:center; gap:16px;">224 <div class="icon">▦</div>225 <div class="icon">🙂</div>226 <div class="icon">GIF</div>227 </div>228 <div style="display:flex; align-items:center; gap:16px;">229 <div class="icon">⚙️</div>230 <div class="icon">文</div>231 <div class="icon">🎨</div>232 <div class="icon">🎙️</div>233 </div>234 </div>235 236 <!-- Row 1 -->237 <div class="kb-row">238 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>239 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>240 <div class="key">o</div><div class="key">p</div>241 </div>242 <!-- Row 2 -->243 <div class="kb-row">244 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>245 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>246 <div class="key">l</div>247 </div>248 <!-- Row 3 -->249 <div class="kb-row">250 <div class="key wide">⇧</div>251 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>252 <div class="key">b</div><div class="key">n</div><div class="key">m</div>253 <div class="key wide">⌫</div>254 </div>255 <!-- Row 4 -->256 <div class="space-row">257 <div class="key wide">?123</div>258 <div class="key">,</div>259 <div class="space"></div>260 <div class="key">.</div>261 </div>262 <div class="enter">✓</div>263 </div>264 265 <div class="gesture"></div>266 267</div>268</body>269</html>