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 - Ambience Mall</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0b141a;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:20px; left:0; right:0; height:88px; padding:0 32px;17    color:#fff; font-weight:600; font-size:40px; display:flex; align-items:center; justify-content:space-between;18  }19  .status-left { display:flex; align-items:center; gap:24px; }20  .status-icons { display:flex; align-items:center; gap:26px; }21  .status-right { display:flex; align-items:center; gap:34px; }22 23  .icon { width:42px; height:42px; fill:#cfd8dc; }24  .icon.white { fill:#ffffff; }25  .icon.green { fill:#9bd6ff; }26 27  /* Map canvas */28  .map {29    position:absolute; left:0; top:0; right:0; bottom:0;30    background:#111c23;31  }32  /* subtle roads */33  .road { position:absolute; border-radius:100px; background:#1e2a32; }34  .road.thick { height:24px; }35  .road.thin { height:12px; }36  .road1 { width:1200px; height:22px; left:-120px; top:320px; transform:rotate(8deg); background:#1d2a33; }37  .road2 { width:900px; height:18px; left:220px; top:520px; transform:rotate(28deg); background:#1a2630; }38  .road3 { width:1400px; height:20px; left:-160px; top:1060px; transform:rotate(12deg); background:#1c2932; }39  .road4 { width:1100px; height:18px; left:-40px; top:780px; transform:rotate(-16deg); background:#17232b; }40  .road5 { width:1000px; height:16px; left:160px; top:920px; transform:rotate(36deg); background:#21313a; }41 42  /* Weather pill */43  .weather-pill {44    position:absolute; left:60px; top:240px; height:110px; width:240px;45    background:#2b3440; color:#dbe7f0; border-radius:58px; box-shadow:0 8px 20px rgba(0,0,0,0.35);46    display:flex; align-items:center; gap:18px; padding:0 26px;47  }48  .weather-pill .sun {49    width:50px; height:50px;50  }51  .weather-pill .temp { font-size:36px; font-weight:600; }52 53  /* Map label */54  .here-label {55    position:absolute; left:60px; bottom:620px; color:#ffffff; font-size:62px; font-weight:800; transform:rotate(-30deg); opacity:0.9;56  }57 58  /* Center marker */59  .marker {60    position:absolute; left:560px; top:920px; width:120px; height:120px; background:#5cd3cf; border-radius:60px;61    box-shadow:0 10px 20px rgba(0,0,0,0.6);62  }63  .marker:before {64    content:""; position:absolute; left:48px; bottom:-26px; width:0; height:0;65    border-left:12px solid transparent; border-right:12px solid transparent; border-top:26px solid #5cd3cf;66    filter:drop-shadow(0 3px 3px rgba(0,0,0,0.4));67  }68  .marker .dot {69    position:absolute; left:36px; top:36px; width:48px; height:48px; background:#ffffff; border-radius:50%;70  }71 72  /* Floating controls on right */73  .fab { position:absolute; right:40px; width:140px; height:140px; background:#38434e; border-radius:50%; box-shadow:0 10px 24px rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; }74  .fab.layers { top:1340px; }75  .fab.locate { top:1520px; background:#3e4954; }76  .fab svg { width:68px; height:68px; fill:#cfd8dc; }77 78  /* Bottom sheet */79  .sheet {80    position:absolute; left:0; right:0; bottom:0; height:1040px; background:#28323a; color:#e8eef2;81    border-top-left-radius:32px; border-top-right-radius:32px; box-shadow:0 -16px 30px rgba(0,0,0,0.6);82  }83  .handle {84    position:absolute; top:20px; left:50%; transform:translateX(-50%);85    width:160px; height:14px; background:#5c6670; border-radius:8px; opacity:0.7;86  }87  .close-btn {88    position:absolute; right:40px; top:32px; width:72px; height:72px; border-radius:50%;89    display:flex; align-items:center; justify-content:center; color:#cfd8dc; background:rgba(255,255,255,0.06);90  }91  .sheet-content { padding:80px 44px 40px 44px; }92  .title { font-size:56px; font-weight:800; margin-bottom:18px; }93  .address { font-size:30px; color:#b0bec5; line-height:1.36; margin-bottom:26px; }94  .ratings { display:flex; align-items:center; gap:18px; color:#b0bec5; font-size:28px; margin-bottom:12px; }95  .ta { display:flex; align-items:center; gap:12px; }96  .dot-green { width:26px; height:26px; background:#41d074; border-radius:50%; display:inline-block; margin-right:8px; }97  .open { color:#2bd36a; font-size:32px; font-weight:700; margin-top:10px; }98 99  .actions { display:flex; align-items:center; gap:26px; margin-top:40px; }100  .btn-gradient {101    flex:1; height:120px; border-radius:60px; font-size:40px; font-weight:700; color:#193444;102    background:linear-gradient(90deg, #6ea2ff, #9cf0e8); display:flex; align-items:center; justify-content:center;103  }104  .round-btn { width:120px; height:120px; border-radius:60px; background:#3a4450; display:flex; align-items:center; justify-content:center; }105  .round-btn svg { width:60px; height:60px; fill:#d4dde3; }106 107  .place-image {108    margin:36px 20px 0 20px; height:420px; border-radius:18px;109    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;110    display:flex; align-items:center; justify-content:center; font-size:32px;111  }112 113  /* Home indicator */114  .home-indicator {115    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);116    width:320px; height:16px; background:#e6e6e6; border-radius:10px; opacity:0.85;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Map background and roads -->124  <div class="map">125    <div class="road road1"></div>126    <div class="road road2"></div>127    <div class="road road3"></div>128    <div class="road road4"></div>129    <div class="road road5"></div>130  </div>131 132  <!-- Status bar -->133  <div class="status-bar">134    <div class="status-left">135      <div class="time">3:23</div>136      <div class="status-icons">137        <!-- Gmail -->138        <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm9 6L3 5h18l-9 6z"/></svg>139        <!-- YouTube -->140        <svg class="icon" viewBox="0 0 24 24"><path d="M21 8s0-3-3-3H6C3 5 3 8 3 8v8s0 3 3 3h12c3 0 3-3 3-3V8zm-7 7-5-3 5-3v6z"/></svg>141        <!-- Cloud -->142        <svg class="icon" viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8h-1a5 5 0 0 0-9-2A4 4 0 0 0 6 18z"/></svg>143      </div>144    </div>145    <div class="status-right">146      <!-- Location -->147      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>148      <!-- WiFi -->149      <svg class="icon" viewBox="0 0 24 24"><path d="M12 18l-2-2a3 3 0 0 1 4 0l-2 2zm6-4a7 7 0 0 0-12 0l-2-2a10 10 0 0 1 16 0l-2 2zM12 22l2-2-2-2-2 2 2 2z"/></svg>150      <!-- Battery -->151      <svg class="icon" viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7zM3 7h14v10H3V7zm2 2v6h10V9H5z"/></svg>152    </div>153  </div>154 155  <!-- Weather pill -->156  <div class="weather-pill">157    <svg class="sun" viewBox="0 0 24 24">158      <circle cx="12" cy="12" r="5" fill="#ffd54f"></circle>159      <g fill="#ffd54f">160        <path d="M12 1h1v4h-1zM12 19h1v4h-1zM1 12h4v1H1zM19 12h4v1h-4zM4.2 4.2l2.8 2.8-.7.7-2.8-2.8zM17 17l2.8 2.8-.7.7L16.3 17.7zM4.2 19.8l.7-.7L7.7 22.1l-.7.7zM16.3 6.3l.7-.7L19.8 8.4l-.7.7z"/>161      </g>162    </svg>163    <div class="temp">94°F</div>164  </div>165 166  <!-- Map watermark -->167  <div class="here-label">here</div>168 169  <!-- Location marker -->170  <div class="marker"><div class="dot"></div></div>171 172  <!-- Floating action buttons -->173  <div class="fab layers">174    <svg viewBox="0 0 24 24"><path d="M12 3 2 9l10 6 10-6-10-6zm0 9L2 9v6l10 6 10-6V9l-10 3z"/></svg>175  </div>176  <div class="fab locate">177    <svg viewBox="0 0 24 24"><path d="M12 2l4 8 8 4-8 4-4 8-4-8-8-4 8-4 4-8zm0 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>178  </div>179 180  <!-- Bottom sheet -->181  <div class="sheet">182    <div class="handle"></div>183    <div class="close-btn">184      <svg class="icon white" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5 5 19" stroke="#dbe3ea" stroke-width="2" fill="none"/></svg>185    </div>186    <div class="sheet-content">187      <div class="title">Ambience Mall</div>188      <div class="address">DLF Phase 3-Sector 24-V Block, DLF Cyber City,<br>Gurugram 122010, India</div>189      <div class="ratings">190        <div class="ta">191          <!-- simple TripAdvisor like mark -->192          <svg class="icon" viewBox="0 0 24 24"><path d="M12 6c-5 0-9 3-9 6s4 6 9 6 9-3 9-6-4-6-9-6zm-5 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm10 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>193          <div>194            <span class="dot-green"></span><span class="dot-green"></span><span class="dot-green"></span><span class="dot-green"></span><span class="dot-green"></span>195          </div>196        </div>197        <div>/ Ratings: 1544</div>198      </div>199      <div class="open">Open now</div>200 201      <div class="actions">202        <div class="btn-gradient">Directions</div>203        <div class="round-btn">204          <!-- Share -->205          <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .7 2L9 10a3 3 0 0 0-1.7-.6A3 3 0 1 0 9 13l6 4a3 3 0 1 0 1-1.7l-6-4a3 3 0 0 0 .1-1l6-4A3 3 0 0 0 18 8z"/></svg>206        </div>207        <div class="round-btn">208          <!-- Star -->209          <svg viewBox="0 0 24 24"><path d="M12 2 9 9H2l6 4-3 7 7-4 7 4-3-7 6-4h-7z"/></svg>210        </div>211      </div>212 213      <div class="place-image">[IMG: Ambience Mall - Restaurant Photo]</div>214    </div>215  </div>216 217  <!-- Home indicator -->218  <div class="home-indicator"></div>219</div>220</body>221</html>