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>Rendered UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #dde3e8;13    border-radius: 32px;14    box-shadow: 0 10px 30px rgba(0,0,0,0.15);15  }16  /* Map area */17  .map {18    position: absolute; left: 0; top: 0;19    width: 1080px; height: 1350px;20    background: #d8dde3;21  }22  /* Faint road grid look */23  .map::before, .map::after {24    content: "";25    position: absolute; inset: 0;26    background-image:27      linear-gradient(0deg, rgba(255,255,255,0.5) 1px, transparent 1px),28      linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);29    background-size: 80px 80px, 80px 80px;30    opacity: 0.25;31  }32 33  /* Search pill */34  .search-pill {35    position: absolute; left: 36px; top: 100px;36    width: 1008px; height: 120px;37    background: #fff;38    border-radius: 60px;39    box-shadow: 0 8px 22px rgba(0,0,0,0.18);40    display: flex; align-items: center;41    padding: 0 24px;42    gap: 20px;43  }44  .icon-btn {45    width: 68px; height: 68px;46    border-radius: 34px;47    background: #f1f3f4;48    display: flex; align-items: center; justify-content: center;49  }50  .search-text {51    flex: 1;52    font-size: 36px; color: #222;53    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;54  }55  .plain-icon {56    width: 56px; height: 56px;57    display: flex; align-items: center; justify-content: center;58  }59  .plain-icon svg { stroke: #555; }60 61  /* Mini map image overlay */62  .mini-photo {63    position: absolute; left: 36px; bottom: 160px;64    width: 300px; height: 170px;65    border-radius: 16px; overflow: hidden;66    box-shadow: 0 6px 16px rgba(0,0,0,0.25);67  }68 69  .img-placeholder {70    width: 100%; height: 100%;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    color: #757575;74    display: flex; align-items: center; justify-content: center;75    font-size: 28px; text-align: center;76  }77 78  /* Bottom sheet */79  .sheet {80    position: absolute; left: 0; top: 1120px;81    width: 1080px; height: 1280px;82    background: #fff;83    border-top-left-radius: 32px; border-top-right-radius: 32px;84    box-shadow: 0 -10px 24px rgba(0,0,0,0.18);85  }86  .drag-handle {87    width: 160px; height: 12px; border-radius: 6px;88    background: #e0e0e0; margin: 20px auto 24px auto;89  }90  .sheet-content { padding: 0 36px; }91  .title { font-size: 54px; font-weight: 700; color: #202124; margin: 8px 0; }92  .subtitle { font-size: 32px; color: #6b6b6b; margin-bottom: 12px; }93  .address { font-size: 30px; color: #777; margin-bottom: 28px; }94 95  /* Action chips */96  .actions { display: flex; gap: 22px; margin-bottom: 28px; }97  .chip {98    display: inline-flex; align-items: center; gap: 18px;99    height: 96px; padding: 0 34px; border-radius: 48px;100    border: 1px solid #DADCE0; color: #1f1f1f; background: #fff;101    font-size: 34px; font-weight: 600;102  }103  .chip svg { stroke: #5f6368; }104  .chip.primary {105    background: #1a73e8; border-color: #1a73e8; color: #fff;106  }107  .chip.primary svg { stroke: #fff; }108 109  /* Photo grid */110  .photos {111    display: grid;112    grid-template-columns: 1fr 360px;113    gap: 24px;114    margin-top: 18px;115  }116  .photo-large {117    width: 100%; height: 760px; border-radius: 26px; overflow: hidden;118  }119  .photo-col { display: grid; grid-template-rows: 370px 370px; gap: 20px; }120  .photo-small { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; }121 122  /* Map labels (simple mock) */123  .map-label {124    position: absolute; left: 370px; top: 530px;125    background: rgba(255,255,255,0.9);126    border: 1px solid #cfcfcf; border-radius: 14px;127    padding: 10px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);128    display: flex; align-items: center; gap: 12px;129    font-size: 26px; color: #333;130  }131  .poi-icon { width: 40px; height: 40px; }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Map region -->138  <div class="map">139    <!-- Search pill -->140    <div class="search-pill">141      <div class="icon-btn">142        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" stroke="#444" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">143          <path d="M30 10 L16 24 L30 38"></path>144          <path d="M16 24 L42 24"></path>145        </svg>146      </div>147      <div class="search-text">Jama Masjid, Chandni Chowk...</div>148      <div class="plain-icon">149        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" stroke-width="3.5" stroke-linecap="round">150          <path d="M12 12 L36 36" stroke="#555"></path>151          <path d="M36 12 L12 36" stroke="#555"></path>152        </svg>153      </div>154      <div class="plain-icon">155        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" stroke="#555" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">156          <path d="M24 10 a8 8 0 0 1 8 8 v6 a8 8 0 0 1 -16 0 v-6 a8 8 0 0 1 8 -8z"></path>157          <path d="M20 32 v6 h8 v-6"></path>158        </svg>159      </div>160    </div>161 162    <!-- Simple POI label on the map -->163    <div class="map-label">164      <svg class="poi-icon" viewBox="0 0 48 48" fill="none" stroke="#444" stroke-width="2.5">165        <rect x="8" y="18" width="32" height="18" rx="3" fill="#f5f5f5"></rect>166        <path d="M12 18 L24 8 L36 18" fill="#f5f5f5"></path>167        <circle cx="24" cy="27" r="3" fill="#888"></circle>168      </svg>169      Jama Masjid170    </div>171 172    <!-- Mini photo overlay -->173    <div class="mini-photo">174      <div class="img-placeholder">[IMG: Panorama of Jama Masjid]</div>175    </div>176  </div>177 178  <!-- Bottom sheet -->179  <div class="sheet">180    <div class="drag-handle"></div>181    <div class="sheet-content">182      <div class="title">Jama Masjid</div>183      <div class="subtitle">जामा मस्जिद</div>184      <div class="address">Chandni Chowk, New Delhi, Delhi 110006 · 🚲 1 hr 12 min</div>185 186      <div class="actions">187        <div class="chip primary">188          <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">189            <path d="M8 36 L20 24 L28 24 L40 12"></path>190            <circle cx="8" cy="36" r="3"></circle>191            <circle cx="40" cy="12" r="3"></circle>192          </svg>193          Directions194        </div>195        <div class="chip">196          <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">197            <path d="M24 6 L18 22 L30 22 Z"></path>198            <path d="M24 6 L24 42"></path>199          </svg>200          Start201        </div>202        <div class="chip">203          <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">204            <path d="M14 8 H34 V38 L24 32 L14 38 Z"></path>205          </svg>206          Save207        </div>208        <div class="chip">209          <svg width="40" height="40" viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">210            <path d="M18 30 L30 18"></path>211            <path d="M30 18 V28 H20"></path>212            <circle cx="12" cy="36" r="5"></circle>213            <circle cx="36" cy="12" r="5"></circle>214            <circle cx="36" cy="30" r="5"></circle>215          </svg>216          Share217        </div>218      </div>219 220      <div class="photos">221        <div class="photo-large">222          <div class="img-placeholder">[IMG: Aerial view of Jama Masjid courtyard]</div>223        </div>224        <div class="photo-col">225          <div class="photo-small">226            <div class="img-placeholder">[IMG: Mosque domes close-up]</div>227          </div>228          <div class="photo-small">229            <div class="img-placeholder">[IMG: Front facade with minarets]</div>230          </div>231        </div>232      </div>233    </div>234  </div>235 236</div>237</body>238</html>