GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Hotel Listing - Sotetsu Fresa Inn Tokyo-Toyocho</title>5<style>6  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0b1116; color:#fff;11  }12  /* Top hero image */13  .hero{14    position:relative;15    width:100%; height:740px;16    background:#E0E0E0;17    border-bottom:1px solid #2a2f35;18    display:flex; align-items:center; justify-content:center;19    color:#555; font-weight:600; letter-spacing:.5px;20  }21  .status-bar{22    position:absolute; top:18px; left:20px; right:20px;23    display:flex; align-items:center; justify-content:space-between;24    color:#fff; font-size:38px; font-weight:600;25  }26  .sb-icons{ display:flex; align-items:center; gap:26px; opacity:.9; }27  .sb-icons span{ font-size:34px; }28  .overlay-btn{29    position:absolute; top:110px; width:82px; height:82px; border-radius:999px;30    background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;31  }32  .overlay-left{ left:24px; }33  .overlay-right{ right:188px; }34  .overlay-right2{ right:88px; }35  .overlay-btn svg{ width:40px; height:40px; fill:#fff; }36  .hero-dots{37    position:absolute; left:50%; transform:translateX(-50%);38    bottom:120px; display:flex; gap:14px;39  }40  .dot{ width:16px; height:16px; border-radius:50%; background:#dcdcdc; opacity:.85; }41  .dot.active{ background:#fff; width:28px; border-radius:12px; }42  .count{43    position:absolute; right:40px; bottom:112px;44    font-size:34px; color:#fff; opacity:.95; letter-spacing:1px;45    background:rgba(0,0,0,.35); padding:10px 16px; border-radius:20px;46  }47 48  /* Content area */49  .content{50    padding:44px 36px 0 36px;51  }52  .title{ font-size:62px; font-weight:800; line-height:1.18; }53  .stars{ margin-top:16px; display:flex; gap:10px; }54  .star{ width:22px; height:22px; background:#ff5a52; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }55  .meta{56    margin-top:34px; font-size:36px; color:#a9d4e1; display:flex; align-items:center; gap:18px;57  }58  .pen{59    width:34px; height:34px; border-radius:8px; border:2px solid #63c7d3;60    display:flex; align-items:center; justify-content:center;61  }62  .rating-row{63    margin-top:40px; display:flex; align-items:center; gap:26px; font-size:44px; color:#fff;64  }65  .ta-bubbles{ display:flex; gap:10px; align-items:center; }66  .bubble{ width:26px; height:26px; border-radius:50%; background:#66d38b; }67  .bubble.off{ background:#2c3a3f; }68  .count-rev{ color:#cfd6da; font-size:40px; }69  .chev{ margin-left:auto; font-size:60px; color:#7f8b92; }70 71  .pill{72    margin-top:26px; display:inline-flex; align-items:center; gap:18px;73    background:#122029; color:#cfe5ef; padding:18px 22px; border-radius:18px; font-size:34px;74  }75  .thumb{ width:30px; height:30px; background:#4db6ac; border-radius:50%; display:inline-block; }76 77  .address{78    margin-top:34px; padding-top:24px; border-top:1px solid #1f2a31;79    display:flex; align-items:flex-start; gap:20px; color:#d1d7db; font-size:36px; line-height:1.5;80  }81  .pin{ margin-top:8px; }82  .section-title{83    margin-top:50px; font-size:48px; color:#e6edf1;84  }85 86  /* Price card */87  .price-card{88    margin-top:28px; background:#0f1a22; border:1px solid #23313a; border-radius:22px;89    padding:34px; display:flex; flex-direction:column; gap:28px;90  }91  .row{ display:flex; align-items:center; }92  .logo{93    width:250px; height:150px; background:#E0E0E0; border:1px solid #BDBDBD; color:#666;94    display:flex; align-items:center; justify-content:center; font-weight:700; border-radius:14px;95  }96  .price{97    margin-left:auto; text-align:right; color:#fff;98  }99  .price .amount{ font-size:92px; font-weight:800; }100  .price .per{ font-size:36px; color:#9aa7ae; margin-left:8px; }101  .subtext{ color:#96a3ab; font-size:32px; }102  .green-note{ color:#97f3c9; font-size:38px; }103 104  .cta{105    margin-top:20px; background:#2f9ea2; color:#0b1116; font-weight:800; font-size:44px;106    text-align:center; padding:30px; border-radius:18px; letter-spacing:.5px;107  }108 109  /* small helper */110  .divider{ height:30px; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Hero image / gallery -->117  <div class="hero">118    [IMG: Hotel room interior]119    <div class="status-bar">120      <div>3:15</div>121      <div class="sb-icons">122        <span>📶</span>123        <span>🔋</span>124      </div>125    </div>126 127    <div class="overlay-btn overlay-left" aria-label="Back">128      <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.4-1.4L10.3 12l6.6-6.6L15.5 4z"/></svg>129    </div>130    <div class="overlay-btn overlay-right" aria-label="Favorite">131      <svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.6-9.6-7.6C.7 11.6 1 8.3 3.4 6.6 5.2 5.3 7.8 5.6 9.3 7.2L12 10l2.7-2.8c1.5-1.6 4.1-1.9 5.9-.6 2.4 1.7 2.7 5 .9 6.8C18.7 16.4 12 21 12 21z"/></svg>132    </div>133    <div class="overlay-btn overlay-right2" aria-label="Share">134      <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.8-4H15a3 3 0 00.1.8l-7.6 4a3 3 0 000 1.4l7.6 4a3 3 0 00-.1.8 3 3 0 103-3 3 3 0 00-.2-1.1l-7.5-3.9L17.8 7A3 3 0 0018 8z"/></svg>135    </div>136 137    <div class="hero-dots">138      <div class="dot"></div>139      <div class="dot"></div>140      <div class="dot active"></div>141      <div class="dot"></div>142      <div class="dot"></div>143    </div>144    <div class="count">1/117</div>145  </div>146 147  <!-- Content -->148  <div class="content">149    <div class="title">Sotetsu Fresa Inn Tokyo–Toyocho</div>150    <div class="stars">151      <div class="star"></div><div class="star"></div><div class="star"></div>152    </div>153 154    <div class="meta">155      AUG 5 – 10, 2023, 1 ADULT, 1 ROOM156      <div class="pen">157        <svg viewBox="0 0 24 24" width="22" height="22"><path fill="#63c7d3" d="M3 17.3V21h3.7l10.9-10.9-3.7-3.7L3 17.3zm17.7-10.6c.4-.4.4-1 0-1.4L18.7 3c-.4-.4-1-.4-1.4 0l-1.8 1.8 3.7 3.7 1.9-1.8z"/></svg>158      </div>159    </div>160 161    <div class="rating-row">162      <div>4.0</div>163      <div class="ta-bubbles">164        <div class="bubble"></div>165        <div class="bubble"></div>166        <div class="bubble"></div>167        <div class="bubble"></div>168        <div class="bubble off"></div>169      </div>170      <div class="count-rev">(237)</div>171      <div class="chev">›</div>172    </div>173 174    <div class="pill">175      <span class="thumb"></span>176      Location 4.5/5177    </div>178 179    <div class="address">180      <div class="pin">181        <svg width="42" height="42" viewBox="0 0 24 24" fill="#9bd1de"><path d="M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>182      </div>183      <div>4 Chome-4-3 Toyo, Koto, 135–0016 Tokyo, Japan</div>184      <div class="chev" style="margin-left:auto; font-size:52px;">›</div>185    </div>186 187    <div class="section-title">Lowest price for 1 night</div>188 189    <div class="price-card">190      <div class="row">191        <div class="logo">[IMG: agoda logo]</div>192        <div class="price">193          <span class="amount">$46</span><span class="per">a night</span>194        </div>195      </div>196      <div class="row" style="justify-content:space-between;">197        <div class="subtext">Taxes and fees not included.</div>198        <div class="green-note">Free cancellation</div>199      </div>200      <div class="cta">GO TO SITE</div>201    </div>202 203    <div class="divider"></div>204  </div>205 206</div>207</body>208</html>