GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Rendering</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius: 28px;12 box-shadow: 0 10px 30px rgba(0,0,0,0.08);13 }14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:110px;17 background:#ffffff;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 40px;20 color:#121212;21 font-weight:600;22 font-size:40px;23 letter-spacing:0.5px;24 }25 .status-left { display:flex; align-items:center; gap:26px; }26 .status-icon {27 width:42px; height:42px; border-radius:6px; background:#EAEAEA;28 }29 .status-right { display:flex; align-items:center; gap:22px; }30 /* Back button */31 .back-btn {32 position:absolute; top:120px; left:38px;33 width:96px; height:96px; border-radius:48px;34 background:#F4F4F4; border:1px solid #E0E0E0;35 display:flex; align-items:center; justify-content:center;36 }37 /* Tabs */38 .tabs {39 position:absolute; top:120px; left:0; width:100%;40 display:flex; align-items:flex-end; justify-content:center;41 gap:80px; padding-top:20px;42 }43 .tab {44 font-size:54px; font-weight:700; color:#3b3b3b; padding-bottom:16px;45 }46 .tab.active {47 color:#111111;48 border-bottom:6px solid #111111;49 }50 .tab.inactive { color:#7a7a7a; }51 /* Search bar */52 .search-wrap {53 position:absolute; top:240px; left:40px; width:1000px;54 background:#ffffff; border:1px solid #E6E6E6;55 box-shadow: 0 8px 20px rgba(0,0,0,0.06);56 border-radius:36px; height:140px;57 display:flex; align-items:center; padding:0 30px; gap:28px;58 }59 .search-input {60 flex:1; font-size:44px; color:#222; font-weight:600;61 }62 .clear-pill {63 width:84px; height:84px; background:#F0F0F0; border:1px solid #E0E0E0; border-radius:42px;64 display:flex; align-items:center; justify-content:center;65 }66 /* Suggestions list */67 .list {68 position:absolute; top:420px; left:40px; width:1000px;69 }70 .item {71 display:flex; align-items:center; gap:30px;72 padding:38px 6px; border-bottom:1px solid #EEEEEE;73 }74 .thumb {75 width:116px; height:116px; border-radius:18px; border:1px solid #E0E0E0; background:#F6F6F6;76 display:flex; align-items:center; justify-content:center;77 }78 .item-title {79 font-size:48px; font-weight:700; color:#222;80 }81 .item-subtle { color:#333; }82 /* Keyboard mock */83 .keyboard {84 position:absolute; left:0; width:100%; height:920px; bottom:0;85 background:#1E1E1E; border-top:1px solid #121212;86 padding:40px 28px;87 box-sizing:border-box;88 }89 .kbd-topbar {90 display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;91 color:#B9CFEA; font-size:34px;92 }93 .kbd-row {94 display:flex; justify-content:space-between; margin:18px 6px;95 }96 .key {97 background:#2A2A2A; border:1px solid #3A3A3A; color:#EFEFEF;98 border-radius:18px; width:86px; height:116px;99 display:flex; align-items:center; justify-content:center;100 font-size:40px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);101 }102 .key.wide { width:180px; }103 .key.space { flex:1; margin:0 14px; }104 .key.circle {105 width:120px; height:120px; border-radius:60px; background:#90C7E8; color:#0A2238; font-weight:700;106 }107 /* Bottom navigation pill */108 .nav-pill {109 position:absolute; left:50%; transform:translateX(-50%);110 bottom:30px; width:360px; height:16px;111 background:#E5E5E5; border-radius:10px;112 }113 /* SVG styles */114 svg { display:block; }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div class="status-left">123 <div>12:47</div>124 <div class="status-icon"></div>125 <div class="status-icon"></div>126 </div>127 <div class="status-right">128 <!-- WiFi -->129 <svg width="48" height="48" viewBox="0 0 24 24">130 <path d="M2 9c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>131 <path d="M5 12c3-3 11-3 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>132 <path d="M8 15c2-2 6-2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>133 <circle cx="12" cy="18" r="1.8" fill="#333"/>134 </svg>135 <!-- Battery -->136 <svg width="60" height="48" viewBox="0 0 28 16">137 <rect x="1" y="2" width="22" height="12" rx="2" stroke="#333" stroke-width="2" fill="none"/>138 <rect x="3" y="4" width="14" height="8" rx="1" fill="#333"/>139 <rect x="24" y="6" width="3" height="4" rx="1" fill="#333"/>140 </svg>141 </div>142 </div>143 144 <!-- Back Button -->145 <div class="back-btn">146 <svg width="40" height="40" viewBox="0 0 24 24">147 <path d="M14 6l-6 6 6 6" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 151 <!-- Tabs -->152 <div class="tabs">153 <div class="tab active">Stays</div>154 <div class="tab inactive">Experiences</div>155 </div>156 157 <!-- Search Bar -->158 <div class="search-wrap">159 <svg width="56" height="56" viewBox="0 0 24 24">160 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2.4" fill="none"/>161 <path d="M21 21l-4.5-4.5" stroke="#555" stroke-width="2.4" stroke-linecap="round"/>162 </svg>163 <div class="search-input">Newark ( New York )</div>164 <div class="clear-pill">165 <svg width="32" height="32" viewBox="0 0 24 24">166 <path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2.5" stroke-linecap="round"/>167 </svg>168 </div>169 </div>170 171 <!-- Suggestions -->172 <div class="list">173 <div class="item">174 <div class="thumb">175 <svg width="54" height="54" viewBox="0 0 24 24">176 <path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" stroke="#333" stroke-width="2" fill="none"/>177 <circle cx="12" cy="8" r="2.5" fill="#333"/>178 </svg>179 </div>180 <div class="item-title">Newark, New York</div>181 </div>182 183 <div class="item">184 <div class="thumb">185 <svg width="54" height="54" viewBox="0 0 24 24">186 <path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" stroke="#333" stroke-width="2" fill="none"/>187 <circle cx="12" cy="8" r="2.5" fill="#333"/>188 </svg>189 </div>190 <div class="item-title item-subtle">New York-Newark-Jersey City, NY-N...</div>191 </div>192 193 <div class="item">194 <div class="thumb">195 <svg width="54" height="54" viewBox="0 0 24 24">196 <path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" stroke="#333" stroke-width="2" fill="none"/>197 <circle cx="12" cy="8" r="2.5" fill="#333"/>198 </svg>199 </div>200 <div class="item-title">New York Avenue, Newark, NJ</div>201 </div>202 203 <div class="item">204 <div class="thumb">205 <svg width="54" height="54" viewBox="0 0 24 24">206 <path d="M12 2c-3.3 0-6 2.7-6 6 0 5 6 12 6 12s6-7 6-12c0-3.3-2.7-6-6-6z" stroke="#333" stroke-width="2" fill="none"/>207 <circle cx="12" cy="8" r="2.5" fill="#333"/>208 </svg>209 </div>210 <div class="item-title">New York 31, Newark, NY</div>211 </div>212 </div>213 214 <!-- Keyboard Mock -->215 <div class="keyboard">216 <div class="kbd-topbar">217 <div>Phone</div>218 <div>New</div>219 <div>a</div>220 <div>🎙️</div>221 </div>222 223 <!-- Row 1 -->224 <div class="kbd-row">225 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>226 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>227 <div class="key">o</div><div class="key">p</div>228 </div>229 <!-- Row 2 -->230 <div class="kbd-row">231 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>232 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>233 <div class="key">l</div>234 </div>235 <!-- Row 3 -->236 <div class="kbd-row">237 <div class="key wide">⇧</div>238 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>239 <div class="key">b</div><div class="key">n</div><div class="key">m</div>240 <div class="key wide">⌫</div>241 </div>242 <!-- Row 4 -->243 <div class="kbd-row">244 <div class="key wide">?123</div>245 <div class="key">,</div>246 <div class="key">🙂</div>247 <div class="key space"></div>248 <div class="key">.</div>249 <div class="key circle">↗</div>250 </div>251 </div>252 253 <div class="nav-pill"></div>254</div>255</body>256</html>