GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Labeled - Google Maps Style</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    color: #111;28    font-size: 42px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .status-icons svg {36    width: 44px; height: 44px;37  }38 39  /* Header */40  .header {41    position: absolute;42    top: 96px;43    left: 0;44    width: 1080px;45    height: 160px;46    box-sizing: border-box;47    padding: 24px 36px;48    background: #fff;49    border-bottom: 1px solid #e6e6e6;50  }51  .header-top {52    display: flex;53    align-items: center;54    gap: 24px;55  }56  .back-icon {57    width: 64px; height: 64px;58    display: inline-flex; align-items: center; justify-content: center;59  }60  .title {61    font-size: 52px;62    font-weight: 600;63    color: #222;64    flex: 1;65  }66  .subtitle {67    margin-left: 88px;68    display: flex;69    align-items: center;70    gap: 10px;71    color: #6b6b6b;72    font-size: 32px;73    margin-top: 8px;74  }75  .subtitle svg { width: 34px; height: 34px; }76 77  /* Map area */78  .map-area {79    position: absolute;80    top: 256px; /* status-bar + header heights */81    left: 0;82    width: 1080px;83    height: 1600px;84    background: #E0E0E0;85    border-top: 1px solid #BDBDBD;86    border-bottom: 1px solid #BDBDBD;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #555;91    font-size: 36px;92  }93  .map-overlay-pin {94    position: absolute;95    top: 980px;96    left: 470px;97    width: 40px; height: 40px;98    background: #d33a2c;99    border-radius: 50%;100    box-shadow: 0 4px 0 #7a1c15;101  }102  .map-overlay-pin::after {103    content: "";104    position: absolute;105    bottom: -18px;106    left: 15px;107    width: 10px; height: 18px;108    background: #d33a2c;109    border-radius: 4px;110  }111  .map-thumb {112    position: absolute;113    bottom: 140px;114    left: 40px;115    width: 280px;116    height: 160px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #6f6f6f;123    font-size: 28px;124    border-radius: 12px;125  }126 127  /* Bottom sheet */128  .bottom-sheet {129    position: absolute;130    left: 0;131    bottom: 0;132    width: 1080px;133    height: 540px;134    background: #ffffff;135    border-top-left-radius: 28px;136    border-top-right-radius: 28px;137    box-shadow: 0 -8px 20px rgba(0,0,0,0.12);138  }139  .sheet-handle {140    position: absolute;141    top: 16px;142    left: 50%;143    transform: translateX(-50%);144    width: 180px; height: 12px;145    background: #d9d9d9;146    border-radius: 8px;147  }148  .sheet-content {149    position: absolute;150    top: 52px;151    left: 0;152    right: 0;153    bottom: 0;154    padding: 36px;155    box-sizing: border-box;156  }157  .place-title {158    font-size: 56px;159    font-weight: 700;160    margin-bottom: 16px;161    color: #222;162  }163  .place-line {164    font-size: 34px;165    color: #3c3c3c;166    margin-bottom: 10px;167  }168  .coords {169    font-size: 32px;170    color: #757575;171    margin-bottom: 36px;172  }173  .actions {174    display: flex;175    gap: 22px;176  }177  .btn {178    height: 120px;179    padding: 0 48px;180    border-radius: 24px;181    font-size: 40px;182    display: inline-flex;183    align-items: center;184    justify-content: center;185    gap: 22px;186    border: 2px solid #dcdcdc;187    color: #333;188    background: #fff;189    box-sizing: border-box;190  }191  .btn svg { width: 54px; height: 54px; }192  .btn.primary {193    background: #1a73e8;194    color: #fff;195    border-color: #1a73e8;196  }197  .btn:hover { filter: brightness(0.98); }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div class="time">8:43</div>206    <div class="status-icons">207      <!-- WiFi -->208      <svg viewBox="0 0 48 48">209        <path d="M4 16c10-8 30-8 40 0" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>210        <path d="M10 22c7-6 21-6 28 0" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>211        <path d="M18 30c4-3 8-3 12 0" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>212        <circle cx="24" cy="36" r="3.5" fill="#333"/>213      </svg>214      <!-- Battery -->215      <svg viewBox="0 0 48 48">216        <rect x="4" y="10" width="34" height="28" rx="4" ry="4" fill="none" stroke="#333" stroke-width="4"/>217        <rect x="8" y="14" width="26" height="20" fill="#333"/>218        <rect x="40" y="18" width="6" height="12" rx="2" fill="#333"/>219      </svg>220    </div>221  </div>222 223  <!-- Header -->224  <div class="header">225    <div class="header-top">226      <div class="back-icon">227        <svg viewBox="0 0 48 48">228          <path d="M30 8 L14 24 L30 40" stroke="#333" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229        </svg>230      </div>231      <div class="title">Labeled</div>232    </div>233    <div class="subtitle">234      <svg viewBox="0 0 48 48">235        <rect x="12" y="22" width="24" height="16" rx="4" ry="4" fill="none" stroke="#777" stroke-width="3"/>236        <path d="M16 22v-6a8 8 0 0 1 16 0v6" stroke="#777" stroke-width="3" fill="none"/>237      </svg>238      <span>Private · 1 place</span>239    </div>240  </div>241 242  <!-- Map Area -->243  <div class="map-area">244    [IMG: Google Map of Manhattan]245    <div class="map-overlay-pin" title="Map Pin"></div>246    <div class="map-thumb">[IMG: Street View Thumbnail]</div>247  </div>248 249  <!-- Bottom Sheet Card -->250  <div class="bottom-sheet">251    <div class="sheet-handle"></div>252    <div class="sheet-content">253      <div class="place-title">Home</div>254      <div class="place-line">Q29V+W4R New York, USA</div>255      <div class="coords">40.769853, -73.957245</div>256 257      <div class="actions">258        <div class="btn primary">259          <svg viewBox="0 0 48 48">260            <circle cx="24" cy="24" r="20" fill="none" stroke="#fff" stroke-width="3"/>261            <path d="M16 24h16M24 16l8 8-8 8" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262          </svg>263          <span>Directions</span>264        </div>265        <div class="btn">266          <svg viewBox="0 0 48 48">267            <circle cx="12" cy="24" r="4" fill="#333"/>268            <circle cx="24" cy="12" r="4" fill="#333"/>269            <circle cx="36" cy="24" r="4" fill="#333"/>270            <path d="M14 22l8-8M26 14l8 8" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>271          </svg>272          <span>Share</span>273        </div>274        <div class="btn">275          <svg viewBox="0 0 48 48">276            <path d="M10 32l24-24 6 6-24 24H10z" fill="#333"/>277            <rect x="10" y="36" width="16" height="4" fill="#333"/>278          </svg>279          <span>Edit label</span>280        </div>281      </div>282    </div>283  </div>284 285</div>286</body>287</html>