GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Map Popup UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#212121;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#eae7e2;10    border:1px solid #ccc;11  }12 13  /* Map placeholder */14  .map{15    position:absolute;left:0;top:0;width:1080px;height:2400px;16    background:#E0E0E0;17    border:1px solid #BDBDBD;18    display:flex;align-items:center;justify-content:center;19    color:#757575;font-size:38px;letter-spacing:0.5px;20  }21 22  /* Status bar approximation */23  .status-bar{24    position:absolute;top:0;left:0;width:100%;height:96px;25    background:rgba(255,255,255,0.05);26    display:flex;align-items:center;justify-content:flex-end;27    padding:0 24px;box-sizing:border-box;28    color:#444;font-size:30px;29  }30  .sb-icon{margin-left:18px;width:36px;height:36px;border-radius:6px;background:#dcdcdc;}31 32  /* Floating back button */33  .back-btn{34    position:absolute;left:40px;top:128px;width:120px;height:120px;border-radius:60px;35    background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,0.25);36    display:flex;align-items:center;justify-content:center;border:1px solid #e5e5e5;37  }38  .back-btn svg{width:54px;height:54px;fill:#4a4a4a;}39 40  /* Popup menu */41  .menu-popup{42    position:absolute;right:48px;top:120px;width:520px;border-radius:18px;43    background:#fff;box-shadow:0 12px 32px rgba(0,0,0,0.25);44    padding:28px 36px;box-sizing:border-box;border:1px solid #ededed;45  }46  .menu-item{47    font-size:44px;color:#111;padding:26px 6px;border-bottom:1px solid #efefef;48  }49  .menu-item:last-child{border-bottom:none;}50  51  /* Small map marker for "Dam" */52  .map-marker{53    position:absolute;left:520px;top:980px;display:flex;flex-direction:column;align-items:center;54    color:#0d47a1;55  }56  .marker-icon{57    width:56px;height:56px;border-radius:10px;border:3px solid #0d47a1;display:flex;align-items:center;justify-content:center;background:#fff;58  }59  .marker-icon svg{width:30px;height:30px;fill:#0d47a1;}60  .marker-label{margin-top:10px;font-size:38px;color:#0d47a1;font-weight:600;}61 62  /* Google watermark */63  .google-watermark{64    position:absolute;left:36px;bottom:720px;color:#9E9E9E;font-weight:600;font-size:40px;65  }66 67  /* Bottom sheet */68  .sheet{69    position:absolute;left:0;bottom:0;width:1080px;height:680px;70    background:#2E7D32;color:#fff;border-top-left-radius:26px;border-top-right-radius:26px;71    box-shadow:0 -12px 28px rgba(0,0,0,0.25);72  }73  .sheet-header{74    display:flex;align-items:center;justify-content:space-between;75    padding:28px 36px 12px 36px;76  }77  .title-wrap{display:flex;align-items:center;}78  .bus-square{79    width:76px;height:76px;border-radius:12px;border:4px solid #fff;80    display:flex;align-items:center;justify-content:center;margin-right:22px;background:rgba(255,255,255,0.1);81  }82  .bus-square svg{width:42px;height:42px;fill:#fff;}83  .title{84    font-size:64px;font-weight:700;letter-spacing:0.5px;85  }86  .refresh{87    width:76px;height:76px;border-radius:38px;background:rgba(255,255,255,0.2);88    display:flex;align-items:center;justify-content:center;font-size:42px;border:2px solid rgba(255,255,255,0.35);89  }90  .section{91    padding:14px 36px 0 36px;font-size:40px;color:#eaf4ea;opacity:0.95;92  }93  /* Departure card */94  .card{95    margin:22px 36px;background:#fff;border-radius:24px;height:210px;color:#333;96    box-shadow:0 8px 20px rgba(0,0,0,0.18);display:flex;align-items:center;padding:0 28px;97    box-sizing:border-box;98  }99  .route-chip{100    width:140px;height:86px;border-radius:16px;background:#E0E0E0;border:1px solid #BDBDBD;101    display:flex;align-items:center;justify-content:center;color:#555;font-weight:700;font-size:48px;margin-right:28px;102  }103  .card-text{flex:1;}104  .card-title{font-size:46px;font-weight:700;color:#1b1b1b;}105  .card-sub{font-size:36px;color:#666;margin-top:8px;}106  .next-time{font-size:40px;color:#2E7D32;font-weight:700;}107</style>108</head>109<body>110<div id="render-target">111 112  <div class="map">[IMG: Google Map - Amsterdam streets and tram tracks]</div>113 114  <div class="status-bar">115    <div>11:26</div>116    <div class="sb-icon"></div>117    <div class="sb-icon"></div>118    <div class="sb-icon"></div>119  </div>120 121  <div class="back-btn">122    <svg viewBox="0 0 24 24">123      <path d="M15.5 3.5L7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/>124    </svg>125  </div>126 127  <!-- Popup actions -->128  <div class="menu-popup">129    <div class="menu-item">Share</div>130    <div class="menu-item">Get me FROM</div>131    <div class="menu-item">Get me TO</div>132  </div>133 134  <!-- Map marker for Dam -->135  <div class="map-marker">136    <div class="marker-icon">137      <svg viewBox="0 0 24 24">138        <path d="M3 16V7c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v9h-2v-2H5v2H3zm4-8h10v3H7V8zm-2 9h14v2H5v-2z"/>139      </svg>140    </div>141    <div class="marker-label">Dam</div>142  </div>143 144  <div class="google-watermark">Google</div>145 146  <!-- Bottom sheet -->147  <div class="sheet">148    <div class="sheet-header">149      <div class="title-wrap">150        <div class="bus-square">151          <svg viewBox="0 0 24 24">152            <path d="M4 16c0 1.1.9 2 2 2v1c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-1h6v1c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-1c1.1 0 2-.9 2-2V6c0-2-2.7-3-8-3S4 4 4 6v10zm2-6h12v4H6v-4zm0-4h12v2H6V6z"/>153          </svg>154        </div>155        <div class="title">Dam</div>156      </div>157      <div class="refresh">↻</div>158    </div>159 160    <div class="section">Departures</div>161 162    <div class="card">163      <div class="route-chip">N87</div>164      <div class="card-text">165        <div class="card-title">Night Bus Central Station</div>166        <div class="card-sub">Towards Beursplein</div>167      </div>168      <div class="next-time">Next: 5:31 AM</div>169    </div>170 171  </div>172 173</div>174</body>175</html>