GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Golden Gate Bridge - Map UI</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; position:relative; overflow:hidden;9    background:#9EC3E8; /* map water */10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:24px; left:0; width:100%; height:48px; color:#222;15    font-size:34px; padding:0 24px; display:flex; align-items:center; justify-content:space-between;16  }17  .status-icons { display:flex; gap:18px; align-items:center; }18  .dot { width:18px; height:18px; background:#111; border-radius:50%; opacity:0.85; }19  .signal { width:28px; height:20px; border:2px solid #111; border-radius:3px; position:relative; }20  .signal::after { content:""; position:absolute; right:-8px; top:2px; width:4px; height:16px; background:#111; border-radius:2px; }21  .battery { width:40px; height:20px; border:2px solid #111; border-radius:4px; position:relative; }22  .battery::after { content:""; position:absolute; right:-6px; top:6px; width:6px; height:8px; background:#111; border-radius:2px; }23 24  /* Search bar */25  .search-bar {26    position:absolute; top:90px; left:36px; width:1008px; height:110px;27    background:#fff; border-radius:56px; box-shadow:0 6px 16px rgba(0,0,0,0.12);28    display:flex; align-items:center; padding:0 28px; gap:22px;29  }30  .sb-icon {31    width:56px; height:56px; border-radius:28px; display:flex; align-items:center; justify-content:center;32    background:#F2F2F2;33  }34  .sb-text { flex:1; font-size:34px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }35  .icon-btn { width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center; background:#F2F2F2; }36 37  /* Nearby bubble */38  .nearby {39    position:absolute; top:220px; left:240px; width:600px; height:88px;40    background:#fff; border-radius:44px; box-shadow:0 6px 16px rgba(0,0,0,0.12);41    display:flex; align-items:center; justify-content:center; font-size:34px; color:#333;42  }43 44  /* Bridge strip (road across water) */45  .bridge {46    position:absolute; left:490px; top:0px; width:120px; height:1500px;47    background:#F1DC8D; /* yellowish */48    border-left:8px solid #6DB16D; border-right:8px solid #6DB16D;49  }50 51  /* Pin marker */52  .pin {53    position:absolute; top:620px; left:560px; width:38px; height:38px; background:#D63E3E; border-radius:50%;54    box-shadow:0 2px 8px rgba(0,0,0,0.25);55  }56  .pin::after {57    content:""; position:absolute; left:14px; top:30px; width:10px; height:16px;58    background:#D63E3E; transform:rotate(45deg); border-bottom-right-radius:6px;59  }60  .pin-label {61    position:absolute; top:600px; left:615px; background:#fff; color:#c0392b; font-weight:bold;62    padding:16px 22px; border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,0.12); font-size:32px;63  }64  .pin-sub { display:block; color:#b04747; font-weight:normal; font-size:26px; }65 66  /* Street view thumbnail */67  .thumb {68    position:absolute; left:36px; top:1100px; width:240px; height:170px;69    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#757575;70  }71 72  /* Bottom sheet */73  .sheet {74    position:absolute; bottom:0; left:0; width:100%; height:1040px; background:#fff;75    border-top-left-radius:28px; border-top-right-radius:28px; box-shadow:0 -8px 20px rgba(0,0,0,0.25);76  }77  .handle { width:120px; height:10px; background:#E0E0E0; border-radius:6px; position:absolute; top:16px; left:50%; transform:translateX(-50%); }78  .sheet-content { padding:60px 40px 40px 40px; }79  .title { font-size:52px; color:#111; margin-bottom:18px; }80  .rating { display:flex; align-items:center; gap:10px; color:#555; font-size:32px; }81  .stars { color:#f5a623; font-size:34px; letter-spacing:2px; }82  .muted { color:#777; }83  .meta { margin-top:12px; color:#555; font-size:32px; }84 85  /* Action buttons */86  .actions { margin-top:32px; display:flex; gap:20px; flex-wrap:wrap; }87  .action {88    display:flex; align-items:center; gap:12px; font-size:32px; padding:18px 28px; border-radius:28px; border:1px solid #DADADA; color:#333; background:#fff;89  }90  .action.blue { background:#1A73E8; color:#fff; border-color:#1A73E8; }91  .action svg { width:30px; height:30px; }92 93  /* Image grid */94  .grid { margin-top:28px; display:flex; gap:28px; }95  .img-large { width:620px; height:920px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px; position:relative; display:flex; align-items:center; justify-content:center; color:#757575; }96  .tag {97    position:absolute; top:18px; left:18px; background:#222; color:#fff; font-size:30px; padding:10px 16px; border-radius:12px;98  }99  .img-col { width:360px; display:flex; flex-direction:column; gap:24px; }100  .img-ph { width:100%; height:440px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#757575; }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status Bar -->107  <div class="status-bar">108    <div>7:15</div>109    <div class="status-icons">110      <div class="dot"></div>111      <div class="dot"></div>112      <div class="dot"></div>113      <div class="dot"></div>114      <div class="signal"></div>115      <div class="battery"></div>116    </div>117  </div>118 119  <!-- Search Bar -->120  <div class="search-bar">121    <div class="sb-icon">122      <!-- Back arrow -->123      <svg viewBox="0 0 24 24">124        <path d="M14 5 L7 12 L14 19" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125      </svg>126    </div>127    <div class="sb-text">Golden Gate Bridge, Golden...</div>128    <div class="icon-btn">129      <!-- Close icon -->130      <svg viewBox="0 0 24 24">131        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>132      </svg>133    </div>134    <div class="icon-btn">135      <!-- Mic icon -->136      <svg viewBox="0 0 24 24">137        <rect x="9" y="5" width="6" height="10" rx="3" fill="#333"/>138        <path d="M5 12 C5 16 9 18 12 18 C15 18 19 16 19 12" stroke="#333" stroke-width="2" fill="none"/>139        <path d="M12 18 L12 22" stroke="#333" stroke-width="2"/>140      </svg>141    </div>142  </div>143 144  <!-- Nearby bubble -->145  <div class="nearby">See nearby attractions</div>146 147  <!-- Bridge strip -->148  <div class="bridge"></div>149 150  <!-- Pin + label -->151  <div class="pin"></div>152  <div class="pin-label">Golden Gate Bridge <span class="pin-sub">Recently viewed</span></div>153 154  <!-- Street view thumbnail -->155  <div class="thumb">[IMG: Street View Panorama]</div>156 157  <!-- Bottom sheet -->158  <div class="sheet">159    <div class="handle"></div>160    <div class="sheet-content">161      <div class="title">Golden Gate Bridge</div>162      <div class="rating">163        <div>4.8</div>164        <div class="stars">★★★★☆</div>165        <div class="muted">(70,367)</div>166      </div>167      <div class="meta">Bridge · ♿</div>168 169      <div class="actions">170        <div class="action blue">171          <svg viewBox="0 0 24 24"><path d="M4 12 L20 12 M12 4 L20 12 L12 20" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>172          Directions173        </div>174        <div class="action">175          <svg viewBox="0 0 24 24"><path d="M6 4 L10 4 L14 10 L12 12 L9 9 L4 13 L6 20 L10 20 L20 16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>176          Call177        </div>178        <div class="action">179          <svg viewBox="0 0 24 24"><rect x="3" y="8" width="5" height="12" fill="#333"/><rect x="10" y="5" width="5" height="15" fill="#333"/><rect x="17" y="10" width="4" height="10" fill="#333"/></svg>180          Directory181        </div>182        <div class="action">183          <svg viewBox="0 0 24 24"><path d="M6 4 H18 V20 L12 16 L6 20 Z" fill="none" stroke="#333" stroke-width="2"/></svg>184          Save185        </div>186      </div>187 188      <div class="grid">189        <div class="img-large">190          [IMG: Immersive View Aerial]191          <div class="tag">Immersive View</div>192        </div>193        <div class="img-col">194          <div class="img-ph">[IMG: Bridge Close-up]</div>195          <div class="img-ph">[IMG: Bridge from Beach]</div>196        </div>197      </div>198    </div>199  </div>200 201</div>202</body>203</html>