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 UI - Ambience Mall</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0f1720; /* dark app background applied to container */12    color: #fff;13  }14 15  /* Map placeholder fills the canvas */16  .map-placeholder {17    position: absolute; left: 0; top: 0; width: 1080px; height: 2400px;18    background: #E0E0E0; border: 1px solid #BDBDBD;19    display: flex; align-items: center; justify-content: center;20    color: #757575; font-weight: 600; letter-spacing: 0.5px;21  }22 23  /* Status bar */24  .status-bar { position: absolute; top: 28px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between; color: #fff; }25  .status-left { font-size: 34px; opacity: 0.95; }26  .status-right { display: flex; gap: 26px; align-items: center; }27  .status-right svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 2.2; opacity: 0.9; }28 29  /* Weather badge */30  .weather-badge {31    position: absolute; top: 176px; left: 36px;32    background: #2b3a44; color: #d5e8ff;33    border-radius: 18px; padding: 16px 20px; display: flex; align-items: center; gap: 14px;34    box-shadow: 0 6px 16px rgba(0,0,0,0.35);35  }36  .weather-icon { font-size: 30px; }37  .weather-temp { font-size: 32px; font-weight: 700; }38 39  /* Floating action buttons */40  .fab { position: absolute; right: 40px; width: 110px; height: 110px; border-radius: 55px;41    background: #3a454f; box-shadow: 0 8px 22px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }42  .fab svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 2.8; }43  .fab.layers { top: 1150px; }44  .fab.target { top: 1280px; }45 46  /* Map pin */47  .map-pin {48    position: absolute; left: 540px; top: 940px; width: 84px; height: 84px;49    background: #2fd0c5; border-radius: 42px; box-shadow: 0 8px 18px rgba(0,0,0,0.45);50  }51  .map-pin::after {52    content: ""; position: absolute; bottom: -24px; left: 32px; width: 20px; height: 24px;53    background: #2fd0c5; clip-path: polygon(50% 100%, 0 0, 100% 0);54  }55  .map-pin .dot {56    position: absolute; left: 30px; top: 30px; width: 24px; height: 24px; background: #fff; border-radius: 12px;57  }58 59  /* Bottom sheet */60  .sheet {61    position: absolute; left: 0; right: 0; bottom: 0;62    height: 980px; background: #2a3139; border-top-left-radius: 32px; border-top-right-radius: 32px;63    box-shadow: 0 -12px 28px rgba(0,0,0,0.6);64    padding: 30px 34px 24px 34px;65  }66  .sheet .handle {67    width: 180px; height: 12px; background: #5a646f; border-radius: 6px; margin: 0 auto 18px auto; opacity: 0.7;68  }69  .sheet .close {70    position: absolute; right: 34px; top: 24px; width: 54px; height: 54px; border-radius: 27px;71    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;72  }73  .sheet .close:before, .sheet .close:after {74    content: ""; position: absolute; width: 26px; height: 2.6px; background: #ffffff; border-radius: 2px;75  }76  .sheet .close:before { transform: rotate(45deg); }77  .sheet .close:after { transform: rotate(-45deg); }78 79  .title { font-size: 52px; font-weight: 800; color: #ffffff; margin: 10px 0 14px 0; }80  .address { font-size: 28px; color: #b7c0cc; line-height: 1.4; margin-bottom: 18px; }81 82  .ratings { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }83  .rating-icon {84    width: 34px; height: 34px; border-radius: 17px; background: rgba(255,255,255,0.18);85    display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;86  }87  .dots { display: flex; gap: 8px; }88  .dot { width: 16px; height: 16px; border-radius: 8px; background: #2bd865; }89  .rating-text { font-size: 26px; color: #b7c0cc; }90 91  .open { color: #21d37a; font-size: 30px; font-weight: 700; margin: 6px 0 26px 0; }92 93  .cta-row { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }94  .cta-gradient {95    flex: 1; height: 112px; border-radius: 56px;96    background-image: linear-gradient(90deg, #6da2ff, #7ce7d6);97    display: flex; align-items: center; justify-content: center; color: #102437; font-weight: 800; font-size: 34px;98    box-shadow: 0 10px 18px rgba(0,0,0,0.35);99  }100  .circle-btn {101    width: 112px; height: 112px; border-radius: 56px; background: #505a65;102    display: flex; align-items: center; justify-content: center;103  }104  .circle-btn svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 2.4; fill: none; }105 106  .photo {107    width: 1012px; height: 470px; border-radius: 18px; overflow: hidden;108    background: #E0E0E0; border: 1px solid #BDBDBD;109    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;110  }111 112  /* Gesture bar */113  .gesture-bar {114    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);115    width: 180px; height: 12px; background: #f2f2f2; border-radius: 6px; opacity: 0.85;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Map backdrop -->123  <div class="map-placeholder">[IMG: Dark Map]</div>124 125  <!-- Status bar -->126  <div class="status-bar">127    <div class="status-left">10:19</div>128    <div class="status-right">129      <!-- Location -->130      <svg viewBox="0 0 24 24"><path d="M12 3l6 18-6-4-6 4 6-18z"></path></svg>131      <!-- WiFi -->132      <svg viewBox="0 0 24 24"><path d="M3 9c5-4 13-4 18 0M6 12c3-2 9-2 12 0M9 15c2-1 4-1 6 0M12 18h0"></path></svg>133      <!-- Battery -->134      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="21" y="10" width="2" height="4"></rect></svg>135    </div>136  </div>137 138  <!-- Weather badge -->139  <div class="weather-badge">140    <div class="weather-icon">☔</div>141    <div class="weather-temp">78°F</div>142  </div>143 144  <!-- Floating action buttons -->145  <div class="fab layers">146    <svg viewBox="0 0 24 24">147      <path d="M4 6h16v2H4zM6 11h12v2H6zM8 16h8v2H8z"></path>148    </svg>149  </div>150  <div class="fab target">151    <svg viewBox="0 0 24 24">152      <circle cx="12" cy="12" r="8"></circle>153      <circle cx="12" cy="12" r="2"></circle>154    </svg>155  </div>156 157  <!-- Map pin -->158  <div class="map-pin"><div class="dot"></div></div>159 160  <!-- Bottom sheet -->161  <div class="sheet">162    <div class="handle"></div>163    <div class="close"></div>164 165    <div class="title">Ambience Mall</div>166    <div class="address">DLF Phase 3-Sector 24-V Block, DLF Cyber City,<br>Gurugram 122010, India</div>167 168    <div class="ratings">169      <div class="rating-icon">👁</div>170      <div class="dots">171        <span class="dot"></span>172        <span class="dot"></span>173        <span class="dot"></span>174        <span class="dot"></span>175        <span class="dot" style="background:#9bdc9b;"></span>176      </div>177      <div class="rating-text">/ Ratings: 1544</div>178    </div>179 180    <div class="open">Open now</div>181 182    <div class="cta-row">183      <div class="cta-gradient">Directions</div>184      <div class="circle-btn">185        <!-- Share icon -->186        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="6" r="2"></circle><circle cx="18" cy="18" r="2"></circle><path d="M8 12l8-6M8 12l8 6"></path></svg>187      </div>188      <div class="circle-btn">189        <!-- Star icon -->190        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.3 6.1L12 17l-5.8 3.9 1.3-6.1L3 9.9 9 9l3-6z"></path></svg>191      </div>192    </div>193 194    <div class="photo">[IMG: Restaurant Dish]</div>195  </div>196 197  <!-- Gesture bar -->198  <div class="gesture-bar"></div>199</div>200</body>201</html>