GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Map Search UI</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color:#1a1a1a; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#2f6f89;12  }13  /* Map area */14  .map {15    position:absolute; left:0; top:0; width:1080px; height:620px;16    background:#E0E0E0; border:1px solid #BDBDBD;17    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; letter-spacing:0.5px;18  }19  /* Status bar */20  .statusbar {21    position:absolute; top:18px; left:28px; right:28px; display:flex; align-items:center; justify-content:space-between; color:#1a1a1a;22    font-weight:600;23  }24  .status-left { display:flex; align-items:center; gap:14px; font-size:30px; }25  .status-right { display:flex; align-items:center; gap:18px; font-size:26px; color:#1a1a1a; }26  .dot { width:10px; height:10px; background:#1a1a1a; border-radius:50%; opacity:0.7; }27  .icon-circle {28    width:26px; height:26px; border-radius:50%; background:#ffffffcc; border:1px solid #dcdcdc;29  }30 31  /* Back button */32  .back-btn {33    position:absolute; top:170px; left:36px;34    width:86px; height:86px; border-radius:43px; border:none; background:#ffffff; box-shadow:0 8px 18px rgba(0,0,0,0.15);35    display:flex; align-items:center; justify-content:center; cursor:pointer;36  }37  .back-btn svg { width:34px; height:34px; fill:#2f6f89; }38 39  /* Search card */40  .search-card {41    position:absolute; left:50px; top:270px; width:980px; height:116px;42    background:#ffffff; border-radius:28px; box-shadow:0 12px 28px rgba(0,0,0,0.18);43    display:flex; align-items:center; justify-content:space-between; padding:0 28px;44  }45  .search-left { display:flex; align-items:center; gap:22px; }46  .search-icon svg { width:38px; height:38px; fill:#5e7990; }47  .tag-end {48    font-weight:700; color:#2f6f89; background:#eaf3f7; padding:10px 16px; border-radius:20px; font-size:34px;49  }50  .search-input {51    font-size:36px; color:#6a7680;52  }53  .swap-btn {54    width:64px; height:64px; border-radius:32px; background:#eaf3f7; display:flex; align-items:center; justify-content:center;55  }56  .swap-btn svg { width:34px; height:34px; fill:#2f6f89; }57 58  /* Quick action row */59  .quick-row {60    position:absolute; left:50px; top:430px; width:980px; display:flex; gap:28px;61  }62  .quick-tile {63    flex:1; height:118px; background:#366e88; border-radius:26px;64    display:flex; align-items:center; justify-content:center;65  }66  .quick-tile .mini-circle {67    width:54px; height:54px; border-radius:27px; background:#ffffff22; display:flex; align-items:center; justify-content:center;68  }69  .quick-tile svg { width:30px; height:30px; fill:#ffffff; }70 71  /* Section title */72  .section-title {73    position:absolute; left:50px; top:585px; color:#ffffff; font-size:40px; font-weight:700;74  }75 76  /* List card */77  .list-card {78    position:absolute; left:50px; top:640px; width:980px; background:#ffffff; border-radius:28px; box-shadow:0 8px 18px rgba(0,0,0,0.12);79    overflow:hidden;80  }81  .row {82    display:flex; align-items:center; gap:22px; padding:26px 24px; border-bottom:1px solid #e9e9e9;83  }84  .row:last-child { border-bottom:none; }85  .pin {86    width:44px; height:44px; border-radius:22px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; border:1px solid #dddddd;87  }88  .pin svg { width:26px; height:26px; fill:#9aa5ac; }89  .texts { flex:1; }90  .title { font-size:34px; font-weight:700; color:#222; }91  .subtitle { font-size:26px; color:#6e7a84; margin-top:6px; }92  .dots { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }93  .dots svg { width:6px; height:26px; fill:#9aa5ac; }94 95  .train-icon {96    width:44px; height:44px; border-radius:22px; background:#000000; display:flex; align-items:center; justify-content:center;97  }98  .train-icon svg { width:24px; height:24px; fill:#ffffff; }99  .badge-c { display:inline-block; margin-left:10px; background:#1976d2; color:#fff; border-radius:16px; padding:4px 10px; font-size:22px; font-weight:700; }100 101  /* Second section title */102  .section-title.two { top:1230px; }103 104  /* Keyboard mock */105  .keyboard {106    position:absolute; left:0; bottom:78px; width:1080px; height:760px; background:#1d1d1f;107    border-top:1px solid #2a2a2c; padding:26px 24px;108  }109  .kb-top { display:flex; align-items:center; gap:22px; height:80px; margin-bottom:18px; }110  .kb-top .topkey {111    width:84px; height:60px; background:#2a2a2c; border-radius:14px;112    display:flex; align-items:center; justify-content:center; color:#d6d6d6; font-size:26px;113  }114  .kb-row { display:flex; gap:12px; margin-bottom:16px; }115  .key {116    flex:1; height:100px; background:#2a2a2c; border-radius:18px; color:#e5e5e5;117    display:flex; align-items:center; justify-content:center; font-size:32px;118  }119  .key.small { flex:0 0 90px; }120  .key.med { flex:0 0 140px; }121  .key.wide { flex:0 0 220px; }122  .key.circle { width:94px; height:94px; border-radius:47px; }123  .key.green { background:#b7ef77; color:#1d1d1f; font-weight:700; }124 125  /* Home indicator */126  .home-indicator {127    position:absolute; left:50%; transform:translateX(-50%); bottom:20px;128    width:360px; height:10px; background:#ffffff; border-radius:6px; opacity:0.75;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <div class="map">[IMG: City Map]</div>136 137  <div class="statusbar">138    <div class="status-left">9:10</div>139    <div class="status-right">140      <div class="dot"></div>141      <div class="dot"></div>142      <div class="dot"></div>143      <span style="opacity:.8;">1