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: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#F4F6FA;11 }12 13 /* Top status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:120px; background:#EDF1F6;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; color:#20262E; font-weight:600; font-size:36px;19 }20 .status-icons { display:flex; align-items:center; gap:26px; }21 .dot { width:18px; height:18px; background:#7C8699; border-radius:50%; opacity:0.7; }22 .wifi {23 width:36px; height:36px;24 border-radius:50%; border:3px solid #5E6A7E;25 }26 .battery {27 width:48px; height:26px; border:3px solid #5E6A7E; border-radius:6px; position:relative;28 }29 .battery:after {30 content:""; position:absolute; right:-10px; top:6px;31 width:8px; height:14px; background:#5E6A7E; border-radius:2px;32 }33 34 /* Header */35 .header {36 position:absolute; top:120px; left:0; right:0;37 padding:34px 40px 24px 40px; background:#EDF1F6;38 border-bottom:1px solid #D7DEE8;39 }40 .header-row { display:flex; align-items:center; gap:24px; }41 .back-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }42 .title { font-size:48px; font-weight:700; color:#0E2A53; }43 .subtitle { margin-left:84px; margin-top:6px; font-size:30px; color:#3467D2; }44 45 /* Search input card */46 .search-card {47 position:absolute; top:260px; left:0; right:0;48 background:#FFFFFF; border-top:1px solid #E4E8EE; border-bottom:1px solid #E4E8EE;49 padding:36px 40px;50 }51 .search-field { display:flex; align-items:center; gap:26px; }52 .green-pin svg { width:40px; height:40px; }53 .search-text { font-size:42px; color:#2B2E33; }54 55 /* Suggestions list */56 .suggestions {57 position:absolute; top:380px; left:0; right:0; bottom:760px;58 overflow:hidden; background:#FFFFFF;59 }60 .item {61 display:flex; align-items:center; gap:26px;62 padding:34px 40px; border-bottom:1px solid #EEF1F6;63 }64 .blue-pin svg { width:42px; height:42px; }65 .item-text { font-size:38px; color:#2B2E33; }66 67 /* Bottom nav */68 .bottom-nav {69 position:absolute; left:0; right:0; bottom:900px;70 height:120px; background:#FFFFFF; border-top:1px solid #DCE2EA;71 display:flex; align-items:center; justify-content:space-around;72 padding:0 40px;73 }74 .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:30px; }75 .nav-item .label { color:#3E4A59; }76 .nav-item.active .label { color:#1F57E7; font-weight:700; }77 .nav-icon { width:48px; height:48px; }78 79 /* Keyboard */80 .keyboard {81 position:absolute; left:0; right:0; bottom:0;82 height:900px; background:#1D1B19; border-top:1px solid #131211;83 padding:36px 26px;84 }85 .kbd-top { display:flex; align-items:center; justify-content:space-between; color:#CCC; margin-bottom:22px; }86 .kbd-bar { height:20px; width:320px; border-radius:10px; background:#2C2826; margin:0 auto; }87 .key-row { display:flex; justify-content:space-between; margin:16px 12px; }88 .key {89 background:#2A2725; color:#EFEFEF; border-radius:16px;90 width:86px; height:110px; display:flex; align-items:center; justify-content:center;91 font-size:42px;92 }93 .key-wide { width:160px; }94 .space { flex:1; height:110px; background:#2A2725; border-radius:18px; color:#BDB9B6; font-size:34px; display:flex; align-items:center; justify-content:center; }95 .enter {96 width:140px; height:140px; background:#EBD2BE; color:#2A2725; border-radius:70px;97 display:flex; align-items:center; justify-content:center; font-weight:700;98 }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status bar -->105 <div class="status-bar">106 <div>3:29</div>107 <div class="status-icons">108 <span class="dot"></span>109 <span class="dot"></span>110 <span class="dot"></span>111 <div class="wifi"></div>112 <div class="battery"></div>113 </div>114 </div>115 116 <!-- Header with back and titles -->117 <div class="header">118 <div class="header-row">119 <div class="back-btn">120 <!-- simple back arrow -->121 <svg viewBox="0 0 24 24" width="42" height="42">122 <path d="M15 19l-7-7 7-7" fill="none" stroke="#1E2B3C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>123 </svg>124 </div>125 <div class="title">Depart from</div>126 </div>127 <div class="subtitle">City, station, airport, port...</div>128 </div>129 130 <!-- Search field -->131 <div class="search-card">132 <div class="search-field">133 <div class="green-pin">134 <svg viewBox="0 0 24 24">135 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#7AC46D"></path>136 </svg>137 </div>138 <div class="search-text">Rome</div>139 </div>140 </div>141 142 <!-- Suggestions list -->143 <div class="suggestions">144 <div class="item">145 <div class="blue-pin">146 <svg viewBox="0 0 24 24">147 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>148 </svg>149 </div>150 <div class="item-text">Rome (Italy)</div>151 </div>152 153 <div class="item">154 <div class="blue-pin">155 <svg viewBox="0 0 24 24">156 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>157 </svg>158 </div>159 <div class="item-text">Rome Ciampino (Airport) (Italy)</div>160 </div>161 162 <div class="item">163 <div class="blue-pin">164 <svg viewBox="0 0 24 24">165 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>166 </svg>167 </div>168 <div class="item-text">Rome Fiumicino (Airport) (Italy)</div>169 </div>170 171 <div class="item">172 <div class="blue-pin">173 <svg viewBox="0 0 24 24">174 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>175 </svg>176 </div>177 <div class="item-text">Rome (United States)</div>178 </div>179 180 <div class="item">181 <div class="blue-pin">182 <svg viewBox="0 0 24 24">183 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>184 </svg>185 </div>186 <div class="item-text">Romelandia (Brazil)</div>187 </div>188 189 <div class="item">190 <div class="blue-pin">191 <svg viewBox="0 0 24 24">192 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>193 </svg>194 </div>195 <div class="item-text">El Romeral (Spain)</div>196 </div>197 198 <div class="item">199 <div class="blue-pin">200 <svg viewBox="0 0 24 24">201 <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#2858B6"></path>202 </svg>203 </div>204 <div class="item-text">Matias Romero Avendano</div>205 </div>206 </div>207 208 <!-- Bottom navigation bar -->209 <div class="bottom-nav">210 <div class="nav-item active">211 <svg class="nav-icon" viewBox="0 0 24 24">212 <circle cx="11" cy="11" r="9" stroke="#1F57E7" stroke-width="2" fill="none"></circle>213 <line x1="18" y1="18" x2="22" y2="22" stroke="#1F57E7" stroke-width="2" stroke-linecap="round"></line>214 </svg>215 <div class="label">Search</div>216 </div>217 <div class="nav-item">218 <svg class="nav-icon" viewBox="0 0 24 24">219 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#7C8699" stroke-width="2"></rect>220 <line x1="7" y1="10" x2="17" y2="10" stroke="#7C8699" stroke-width="2"></line>221 </svg>222 <div class="label">Booking</div>223 </div>224 <div class="nav-item">225 <svg class="nav-icon" viewBox="0 0 24 24">226 <line x1="4" y1="6" x2="20" y2="6" stroke="#7C8699" stroke-width="2" stroke-linecap="round"></line>227 <line x1="4" y1="12" x2="20" y2="12" stroke="#7C8699" stroke-width="2" stroke-linecap="round"></line>228 <line x1="4" y1="18" x2="14" y2="18" stroke="#7C8699" stroke-width="2" stroke-linecap="round"></line>229 </svg>230 <div class="label">Menu</div>231 </div>232 </div>233 234 <!-- Keyboard -->235 <div class="keyboard">236 <div class="kbd-top">237 <div style="width:120px; height:120px; display:flex; align-items:center; justify-content:center;">238 <svg viewBox="0 0 24 24" width="46" height="46"><circle cx="12" cy="12" r="10" fill="#BDB9B6"></circle><circle cx="12" cy="12" r="5" fill="#2A2725"></circle></svg>239 </div>240 <div class="kbd-bar"></div>241 <div style="width:120px; height:120px; display:flex; align-items:center; justify-content:center;">242 <svg viewBox="0 0 24 24" width="46" height="46"><path d="M11 6v6l5 3" stroke="#BDB9B6" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>243 </div>244 </div>245 246 <!-- Row 1 -->247 <div class="key-row">248 <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>249 </div>250 <!-- Row 2 -->251 <div class="key-row" style="padding:0 44px;">252 <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>253 </div>254 <!-- Row 3 -->255 <div class="key-row" style="padding:0 100px;">256 <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>257 <div class="key-wide">⌫</div>258 </div>259 <!-- Row 4 -->260 <div class="key-row">261 <div class="key-wide">?123</div>262 <div class="key">,</div>263 <div class="space">Space</div>264 <div class="key">.</div>265 <div class="enter">✓</div>266 </div>267 </div>268 269</div>270</body>271</html>