GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Generated Mobile UI</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff; border-radius:0;11    font-family: Arial, Helvetica, sans-serif; color:#222;12  }13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:110px; padding:20px 36px;17    display:flex; align-items:center; justify-content:space-between;18    font-size:40px; color:#333;19  }20  .sb-icons { display:flex; align-items:center; gap:26px; }21  .icon { width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; }22  /* Top search area */23  .search-area {24    position:absolute; top:110px; left:0; right:0;25    padding:24px 36px 0 36px;26  }27  .top-row {28    display:flex; align-items:center; gap:28px; margin-bottom:24px;29  }30  .circle-btn {31    width:64px; height:64px; border-radius:50%;32    border:2px solid #d0d0d0; display:flex; align-items:center; justify-content:center;33  }34  .input-row { display:flex; align-items:center; gap:22px; margin-bottom:22px; }35  .pin-col { width:64px; display:flex; justify-content:center; }36  .text-input {37    flex:1; background:#f1f3f4; border-radius:24px;38    height:120px; display:flex; align-items:center; padding:0 32px;39    font-size:42px; color:#555;40    box-shadow: inset 0 0 0 1px #e3e3e3;41  }42  .swap-btn {43    width:80px; height:120px; display:flex; align-items:center; justify-content:center;44  }45  /* Transport chips */46  .transport-row {47    display:flex; gap:34px; padding:24px 0 16px 0; align-items:center;48  }49  .chip {50    height:104px; width:150px; border-radius:52px;51    background:#eef3ff; display:flex; align-items:center; justify-content:center;52    box-shadow: inset 0 0 0 2px #cfe0ff;53  }54  .chip.gray {55    background:#f5f5f5; box-shadow: inset 0 0 0 1px #e0e0e0;56  }57  .chip svg { width:64px; height:64px; }58  .chip .primary { fill:#2f6cff; stroke:#2f6cff; }59  .chip.gray svg { fill:#777; stroke:#777; }60  /* List */61  .list { margin-top:18px; border-top:1px solid #ededed; }62  .item { padding:36px; display:flex; gap:28px; align-items:flex-start; border-bottom:1px solid #ededed; }63  .avatar {64    width:86px; height:86px; border-radius:43px; background:#eef4ff;65    display:flex; align-items:center; justify-content:center;66    box-shadow: inset 0 0 0 2px #cfe0ff;67  }68  .avatar.gray { background:#f1f1f1; box-shadow: inset 0 0 0 1px #d9d9d9; }69  .item-title { font-size:48px; line-height:1.2; margin-top:-4px; }70  .item-sub { font-size:36px; color:#6f6f6f; margin-top:8px; }71  .share-icon { margin-left:auto; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }72  .link-more {73    padding:40px 0; text-align:center; font-size:44px; color:#2a71ff;74  }75  /* Bottom blank area */76  .blank {77    position:absolute; left:0; right:0; bottom:0;78    height:980px; background:#fafafa;79    border-top:1px solid #f0f0f0;80  }81  /* Home divider subtle line */82  .divider { height:1px; background:#ececec; margin-left:36px; margin-right:36px; }83  /* Pill selected for car */84  .home-icon svg { width:50px; height:50px; }85  /* Gesture bar */86  .gesture {87    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);88    width:440px; height:14px; background:#8e8e8e; border-radius:7px; opacity:.6;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status Bar -->96  <div class="status-bar">97    <div>8:46</div>98    <div class="sb-icons">99      <!-- WiFi icon -->100      <svg class="icon" viewBox="0 0 24 24">101        <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6.7-1.6 1.6-1.6zm-6-6c3.4-3.2 8.6-3.2 12 0l1.6-1.6C15.5 7.1 8.5 7.1 4.4 10.4L6 12zm-4.2-4.2C7.2 3.1 16.8 3.1 22.2 7.8l-1.7 1.6C15.9 5 8.1 5 3.5 9.4L1.8 7.8z" fill="#333"/>102      </svg>103      <!-- Battery icon -->104      <svg class="icon" viewBox="0 0 30 24">105        <rect x="1" y="4" width="24" height="16" rx="3" ry="3" stroke="#333" fill="none" stroke-width="2"/>106        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#4c4c4c"/>107        <rect x="26" y="9" width="3" height="6" rx="1" fill="#333"/>108      </svg>109    </div>110  </div>111 112  <!-- Search Area -->113  <div class="search-area">114    <div class="top-row">115      <!-- Back -->116      <div class="circle-btn">117        <svg viewBox="0 0 24 24" width="40" height="40">118          <path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119        </svg>120      </div>121      <div class="circle-btn">122        <svg viewBox="0 0 24 24" width="36" height="36">123          <circle cx="12" cy="12" r="9" stroke="#999" stroke-width="2" fill="none"/>124          <circle cx="12" cy="12" r="2" fill="#999"/>125        </svg>126      </div>127    </div>128 129    <!-- First input -->130    <div class="input-row">131      <div class="pin-col"></div>132      <div class="text-input">Choose start location</div>133      <div class="swap-btn"></div>134    </div>135 136    <!-- Second input with pin and swap -->137    <div class="input-row">138      <div class="pin-col">139        <!-- Map pin -->140        <svg viewBox="0 0 24 24" width="42" height="42">141          <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#d32f2f"/>142        </svg>143      </div>144      <div class="text-input" style="color:#222;">Lenox Hill</div>145      <div class="swap-btn">146        <!-- Up/Down arrows -->147        <svg viewBox="0 0 24 24" width="48" height="48">148          <path d="M8 4l-4 4h3v8h2V8h3L8 4zm8 16l4-4h-3V8h-2v8h-3l4 4z" fill="#333"/>149        </svg>150      </div>151    </div>152 153    <!-- Transport mode chips -->154    <div class="transport-row">155      <div class="chip">156        <svg viewBox="0 0 24 24">157          <path class="primary" d="M4 9h16l-2-3H6L4 9zm0 0v6c0 1.1.9 2 2 2h1v-2h10v2h1c1.1 0 2-.9 2-2V9H4zm3 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm10 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>158        </svg>159      </div>160      <div class="chip gray">161        <svg viewBox="0 0 24 24">162          <path d="M5 13l3-3 2 2-2 2 2 3H8l-2-4-1 0zm9-5a3 3 0 1 1 0 6h-2l-2-2 2-2h2z" fill="#777"/>163        </svg>164      </div>165      <div class="chip gray">166        <svg viewBox="0 0 24 24">167          <path d="M6 4h12v12H6zM8 18l-2 2h12l-2-2H8z" fill="#777"/>168        </svg>169      </div>170      <div class="chip gray">171        <svg viewBox="0 0 24 24">172          <path d="M11 5a2 2 0 1 1 2 2A2 2 0 0 1 11 5zm-3 6h3l1 3 3-2 1 2-4 3H9l-1-6z" fill="#777"/>173        </svg>174      </div>175    </div>176 177    <!-- List -->178    <div class="list">179      <!-- Home -->180      <div class="item">181        <div class="avatar home-icon">182          <svg viewBox="0 0 24 24">183            <path d="M4 10l8-6 8 6v9h-5v-5H9v5H4z" fill="#3b78ff"/>184          </svg>185        </div>186        <div>187          <div class="item-title">Home</div>188          <div class="item-sub">40.769853,-73.957245</div>189        </div>190      </div>191 192      <div class="divider"></div>193 194      <!-- New York -->195      <div class="item">196        <div class="avatar gray">197          <svg viewBox="0 0 24 24">198            <circle cx="12" cy="12" r="8" fill="#9e9e9e"/>199          </svg>200        </div>201        <div style="flex:1;">202          <div class="item-title">New York</div>203          <div class="item-sub">NY, USA</div>204        </div>205        <div class="share-icon">206          <svg viewBox="0 0 24 24" width="48" height="48">207            <path d="M16 5a3 3 0 1 1-2.8 4H9a3 3 0 1 1 0-2h4.2A3 3 0 0 1 16 5zM9 13h6a3 3 0 1 1 0 2H9a3 3 0 1 1 0-2z" fill="#7a7a7a"/>208          </svg>209        </div>210      </div>211 212      <!-- Knoxville -->213      <div class="item">214        <div class="avatar gray">215          <svg viewBox="0 0 24 24">216            <rect x="5" y="5" width="14" height="14" fill="#9e9e9e"/>217          </svg>218        </div>219        <div style="flex:1;">220          <div class="item-title">Knoxville</div>221          <div class="item-sub">TN, USA</div>222        </div>223      </div>224 225      <!-- Evansville with share -->226      <div class="item">227        <div class="avatar gray">228          <svg viewBox="0 0 24 24">229            <circle cx="12" cy="12" r="8" fill="#9e9e9e"/>230          </svg>231        </div>232        <div style="flex:1;">233          <div class="item-title">Evansville</div>234          <div class="item-sub">IN, USA</div>235        </div>236        <div class="share-icon">237          <svg viewBox="0 0 24 24" width="48" height="48">238            <path d="M18 8l-6-4v3H6v2h6v3zM6 16h12v2H6z" fill="#7a7a7a"/>239          </svg>240        </div>241      </div>242 243      <!-- ASF Insignia SEZ -->244      <div class="item">245        <div class="avatar gray">246          <svg viewBox="0 0 24 24">247            <polygon points="12,4 20,10 16,20 8,20 4,10" fill="#9e9e9e"/>248          </svg>249        </div>250        <div style="flex:1;">251          <div class="item-title">ASF Insignia SEZ, ASF Insignia, Faridabad - ...</div>252        </div>253      </div>254 255      <!-- East 14th Street -->256      <div class="item">257        <div class="avatar gray">258          <svg viewBox="0 0 24 24">259            <path d="M4 6h16v12H4z" fill="#9e9e9e"/>260          </svg>261        </div>262        <div style="flex:1;">263          <div class="item-title">East 14th Street</div>264          <div class="item-sub">New York, NY, USA</div>265        </div>266      </div>267 268      <!-- Glaze Township -->269      <div class="item">270        <div class="avatar gray">271          <svg viewBox="0 0 24 24">272            <circle cx="12" cy="12" r="8" fill="#9e9e9e"/>273          </svg>274        </div>275        <div style="flex:1;">276          <div class="item-title">Glaze Township</div>277          <div class="item-sub">MO, USA</div>278        </div>279      </div>280 281      <div class="link-more">More from recent history</div>282    </div>283  </div>284 285  <div class="blank"></div>286 287  <div class="gesture"></div>288</div>289</body>290</html>