GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Place Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1f1f1f; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #f5f7f8;15  }16 17  /* Top status bar (simple) */18  .status-bar {19    position: absolute;20    top: 24px;21    left: 32px;22    right: 32px;23    height: 56px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #6b6b6b;28    font-size: 36px;29    letter-spacing: 2px;30  }31 32  /* Map area */33  .map-area {34    position: absolute;35    top: 0;36    left: 0;37    width: 1440px;38    height: 1600px;39    background: #e9eef1;40  }41  .map-grid {42    position: absolute;43    inset: 0;44    background-image: linear-gradient(0deg, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0) 1px),45                      linear-gradient(90deg, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0) 1px);46    background-size: 80px 80px;47  }48  .map-label {49    position: absolute;50    left: 48px;51    top: 120px;52    color: #7b8a91;53    font-size: 40px;54  }55 56  /* Search bar */57  .search-wrap {58    position: absolute;59    top: 180px;60    left: 48px;61    width: 1344px;62  }63  .search-bar {64    height: 120px;65    background: #ffffff;66    border-radius: 60px;67    box-shadow: 0 6px 18px rgba(0,0,0,0.10);68    display: flex;69    align-items: center;70    padding: 0 28px;71    gap: 20px;72  }73  .icon-btn {74    width: 84px;75    height: 84px;76    border-radius: 50%;77    display: inline-flex;78    align-items: center;79    justify-content: center;80    color: #5f6368;81  }82  .search-text {83    flex: 1;84    font-size: 46px;85    color: #37474f;86    white-space: nowrap;87    overflow: hidden;88    text-overflow: ellipsis;89  }90 91  /* Nearby pill */92  .nearby-pill {93    position: absolute;94    top: 420px;95    left: 50%;96    transform: translateX(-50%);97    background: #ffffff;98    border-radius: 999px;99    padding: 28px 44px;100    font-size: 44px;101    color: #37474f;102    box-shadow: 0 6px 18px rgba(0,0,0,0.12);103  }104 105  /* Red pin */106  .pin {107    position: absolute;108    left: 760px;109    top: 620px;110    width: 40px;111    height: 40px;112    background: #e53935;113    border-radius: 50% 50% 50% 0;114    transform: rotate(-45deg);115    box-shadow: 0 6px 10px rgba(229,57,53,0.4);116  }117  .pin::after {118    content: "";119    position: absolute;120    width: 18px;121    height: 18px;122    background: #fff;123    border-radius: 50%;124    top: 11px;125    left: 11px;126  }127  .pin-label {128    position: absolute;129    top: 590px;130    left: 820px;131    background: rgba(255,255,255,0.95);132    padding: 14px 20px;133    border-radius: 12px;134    font-size: 36px;135    color: #c62828;136    box-shadow: 0 3px 10px rgba(0,0,0,0.1);137  }138 139  /* Bottom sheet */140  .sheet {141    position: absolute;142    top: 1450px;143    left: 0;144    width: 100%;145    height: 1670px;146    background: #ffffff;147    border-top-left-radius: 36px;148    border-top-right-radius: 36px;149    box-shadow: 0 -10px 20px rgba(0,0,0,0.08);150  }151  .sheet .handle {152    width: 180px;153    height: 12px;154    background: #d7dadc;155    border-radius: 6px;156    margin: 22px auto 32px;157  }158  .sheet .content {159    padding: 0 56px 56px;160  }161  .title {162    font-size: 64px;163    font-weight: 700;164    margin: 8px 0 18px;165    color: #1f1f1f;166  }167  .rating-row {168    display: flex;169    align-items: center;170    gap: 16px;171    color: #67737a;172    font-size: 40px;173    margin-bottom: 12px;174  }175  .subtext {176    font-size: 40px;177    color: #6b6f74;178    margin: 6px 0;179  }180 181  /* Chips row */182  .chip-row {183    display: flex;184    gap: 24px;185    margin: 36px 0 40px;186    flex-wrap: wrap;187  }188  .chip {189    display: inline-flex;190    align-items: center;191    gap: 18px;192    padding: 26px 34px;193    border-radius: 999px;194    border: 2px solid #e0e3e5;195    color: #1a73e8;196    font-size: 40px;197    background: #fff;198  }199  .chip svg { color: #1a73e8; }200 201  /* Photo grid */202  .photo-grid {203    display: grid;204    grid-template-columns: 1fr 480px;205    gap: 28px;206  }207  .img-card, .img-card-sm {208    background: #E0E0E0;209    border: 1px solid #BDBDBD;210    color: #757575;211    display: flex;212    justify-content: center;213    align-items: center;214    border-radius: 28px;215    text-align: center;216  }217  .img-card {218    height: 830px;219    font-size: 44px;220  }221  .right-stack {222    display: grid;223    grid-template-rows: 1fr 1fr;224    gap: 28px;225  }226  .img-card-sm {227    height: 401px;228    font-size: 40px;229    position: relative;230  }231 232  /* Price badge overlay */233  .price-badge {234    position: absolute;235    top: 24px;236    right: 24px;237    background: #ffffff;238    color: #1f1f1f;239    padding: 18px 22px;240    border-radius: 18px;241    box-shadow: 0 4px 14px rgba(0,0,0,0.12);242    font-size: 40px;243    line-height: 1.2;244    text-align: right;245  }246  .price-badge small {247    display: block;248    color: #565c61;249    font-size: 30px;250  }251 252  /* Floating snackbar */253  .snackbar {254    position: absolute;255    left: 36px;256    right: 36px;257    top: 2280px;258    background: #2f3134;259    color: #fff;260    border-radius: 20px;261    padding: 34px 36px;262    display: flex;263    justify-content: space-between;264    align-items: center;265    font-size: 44px;266    box-shadow: 0 10px 22px rgba(0,0,0,0.35);267  }268  .snackbar .link {269    color: #8ab4f8;270    font-weight: 600;271  }272 273  /* Utility SVG sizing */274  svg { width: 48px; height: 48px; }275  .icon-32 svg { width: 32px; height: 32px; }276 277</style>278</head>279<body>280<div id="render-target">281 282  <!-- Minimal status bar -->283  <div class="status-bar">284    <div>8:25</div>285    <div>● ● ●</div>286  </div>287 288  <!-- Map area -->289  <div class="map-area">290    <div class="map-grid"></div>291    <div class="map-label">[Map of Winchester area]</div>292 293    <!-- Search bar -->294    <div class="search-wrap">295      <div class="search-bar">296        <div class="icon-btn" aria-hidden="true">297          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">298            <path d="M15 18l-6-6 6-6"></path>299          </svg>300        </div>301        <div class="search-text">The Winchester Hotel &amp; Spa, ...</div>302        <div class="icon-btn" aria-hidden="true" title="Clear">303          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">304            <path d="M18 6L6 18M6 6l12 12"></path>305          </svg>306        </div>307        <div class="icon-btn" aria-hidden="true" title="Voice search">308          <svg viewBox="0 0 24 24" fill="currentColor">309            <path d="M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4z"></path>310            <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>311            <path d="M12 18v3" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>312          </svg>313        </div>314        <div class="icon-btn" aria-hidden="true" title="Search">315          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">316            <circle cx="11" cy="11" r="7"></circle>317            <path d="M21 21l-4.3-4.3"></path>318          </svg>319        </div>320      </div>321    </div>322 323    <div class="nearby-pill">See nearby hotels</div>324 325    <!-- Simple pin and label -->326    <div class="pin"></div>327    <div class="pin-label">The Winchester Hotel &amp; Spa</div>328  </div>329 330  <!-- Bottom sheet -->331  <div class="sheet">332    <div class="handle"></div>333    <div class="content">334