GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hotel Listing - Berlin</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2937; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 110px; padding: 28px 40px 0 40px; box-sizing: border-box; color: #333;16    display: flex; align-items: center; justify-content: space-between; font-size: 34px; letter-spacing: 0.5px;17  }18  .status-icons { display: flex; gap: 24px; align-items: center; }19  .icon { width: 36px; height: 36px; }20 21  /* Header pill */22  .header {23    position: absolute; top: 120px; left: 0; width: 100%; padding: 0 80px; box-sizing: border-box;24  }25  .header-pill {26    background: #f2f3f5; border-radius: 80px; height: 160px; display: flex; align-items: center; position: relative;27    box-shadow: 0 0 0 rgba(0,0,0,0);28  }29  .back-btn { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }30  .fav-outline { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }31  .header-center { width: 100%; text-align: center; }32  .header-title { font-weight: 600; font-size: 44px; color: #202124; margin-top: 20px; }33  .header-sub { font-size: 30px; color: #6b7280; margin-top: 6px; }34 35  .divider { position: absolute; top: 310px; left: 0; width: 100%; height: 2px; background: #e5e7eb; }36 37  .content { position: absolute; top: 330px; left: 0; width: 100%; padding: 0 40px 220px; box-sizing: border-box; }38  .section-title { font-size: 34px; color: #374151; margin: 24px 0 28px; }39 40  /* Card */41  .card { margin-bottom: 54px; }42  .photo {43    position: relative; width: 1000px; height: 520px; background: #E0E0E0;44    border: 1px solid #BDBDBD; border-radius: 36px; overflow: hidden;45    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;46  }47  .photo .fav {48    position: absolute; top: 22px; right: 22px; width: 64px; height: 64px; background: rgba(255,255,255,0.85);49    border-radius: 32px; display: flex; align-items: center; justify-content: center;50    box-shadow: 0 2px 6px rgba(0,0,0,0.08);51  }52  .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; }53  .dot { width: 18px; height: 18px; border-radius: 50%; background: #d1d5db; }54  .dot.active { background: #1e78e8; }55 56  .title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; width: 1000px; }57  .hotel-title { font-size: 44px; font-weight: 700; color: #1f2937; }58  .stars { margin-left: 14px; display: inline-flex; gap: 6px; vertical-align: middle; }59  .star { width: 28px; height: 28px; }60  .star.gray path { fill: #c4c7cc; }61 62  .subline { margin-top: 8px; font-size: 30px; color: #6b7280; }63  .bullet { margin: 0 10px; color: #9ca3af; }64 65  .meta-row { margin-top: 22px; display: flex; align-items: flex-start; justify-content: space-between; width: 1000px; }66  .rating-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }67  .badge { background: #eaf3ff; color: #1e78e8; font-weight: 700; font-size: 30px; padding: 8px 16px; border-radius: 12px; }68  .excellent { color: #1e78e8; font-weight: 600; font-size: 30px; }69  .ratings { color: #6b7280; font-size: 30px; }70  .price-block { text-align: right; }71  .price { font-size: 52px; font-weight: 800; color: #25314d; }72  .price-sub { font-size: 28px; color: #6b7280; margin-top: 6px; }73 74  .amenities { margin-top: 22px; font-size: 30px; color: #179a4f; display: flex; align-items: center; gap: 10px; }75  .check { width: 28px; height: 28px; }76 77  /* Bottom filter bar */78  .filters-bar {79    position: absolute; bottom: 96px; left: 0; width: 100%; height: 180px; border-top: 2px solid #e5e7eb; background: #ffffff;80    display: flex; align-items: center; justify-content: space-around; padding: 0 40px; box-sizing: border-box;81  }82  .filter-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #6b7280; }83  .filter-icon { width: 60px; height: 60px; }84  .filter-label { font-size: 26px; }85 86  /* Home indicator */87  .home-indicator { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 300px; height: 12px; background: #0a0a0a; border-radius: 8px; opacity: 0.9; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div>10:52</div>96    <div class="status-icons">97      <!-- Simple network icon -->98      <svg class="icon" viewBox="0 0 24 24">99        <path d="M3 17h2a9 9 0 0114 0h2a11 11 0 00-18 0z" fill="#6b7280"></path>100        <circle cx="12" cy="17" r="2" fill="#6b7280"></circle>101      </svg>102      <!-- Battery icon -->103      <svg class="icon" viewBox="0 0 28 18">104        <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#6b7280" stroke-width="2"></rect>105        <rect x="3" y="5" width="16" height="8" rx="1" fill="#6b7280"></rect>106        <rect x="24" y="6" width="3" height="6" rx="1" fill="#6b7280"></rect>107      </svg>108    </div>109  </div>110 111  <!-- Header -->112  <div class="header">113    <div class="header-pill">114      <svg class="back-btn" viewBox="0 0 24 24">115        <path d="M15 18l-6-6 6-6" stroke="#374151" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>116      </svg>117      <div class="header-center">118        <div class="header-title">Berlin</div>119        <div class="header-sub">23 Dec - 25 Dec • 1 room • 2 guests</div>120      </div>121      <svg class="fav-outline" viewBox="0 0 24 24">122        <path d="M12 20s-7-4.35-7-9a4.2 4.2 0 017-2.6A4.2 4.2 0 0119 11c0 4.65-7 9-7 9z" fill="none" stroke="#374151" stroke-width="2"></path>123      </svg>124    </div>125  </div>126 127  <div class="divider"></div>128 129  <!-- Content -->130  <div class="content">131    <div class="section-title">Showing 237 properties</div>132 133    <!-- Card 1 -->134    <div class="card">135      <div class="photo">136        [IMG: Novotel Berlin Mitte Hotel facade]137        <div class="fav">138          <svg viewBox="0 0 24 24" width="34" height="34">139            <path d="M12 20s-7-4.35-7-9a4.2 4.2 0 017-2.6A4.2 4.2 0 0119 11c0 4.65-7 9-7 9z" fill="none" stroke="#6b7280" stroke-width="2"></path>140          </svg>141        </div>142        <div class="dots">143          <div class="dot active"></div>144          <div class="dot"></div>145          <div class="dot"></div>146          <div class="dot"></div>147          <div class="dot"></div>148        </div>149      </div>150 151      <div class="title-row">152        <div class="hotel-title">Novotel Berlin Mitte Hotel153          <span class="stars">154            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>155            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>156            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>157            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>158            <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>159          </span>160        </div>161      </div>162 163      <div class="subline">164        Mitte <span class="bullet">•</span> 255 m from City Center165      </div>166 167      <div class="meta-row">168        <div class="rating-info">169          <div class="badge">8.3</div>170          <div class="excellent">Excellent</div>171          <div class="ratings">• 122 Ratings</div>172        </div>173        <div class="price-block">174          <div class="price">₹6,242</div>175          <div class="price-sub">+ ₹749 taxes & fees<br>per night, per room</div>176        </div>177      </div>178 179      <div class="amenities">180        <svg class="check" viewBox="0 0 24 24">181          <path d="M4 12l5 5 11-11" stroke="#179a4f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>182        </svg>183        Free Wifi184      </div>185    </div>186 187    <!-- Card 2 -->188    <div class="card">189      <div class="photo">190        [IMG: Hotel Nikolai Residence entrance with bicycles]191        <div class="fav">192          <svg viewBox="0 0 24 24" width="34" height="34">193            <path d="M12 20s-7-4.35-7-9a4.2 4.2 0 017-2.6A4.2 4.2 0 0119 11c0 4.65-7 9-7 9z" fill="none" stroke="#6b7280" stroke-width="2"></path>194          </svg>195        </div>196        <div class="dots">197          <div class="dot active"></div>198          <div class="dot"></div>199          <div class="dot"></div>200          <div class="dot"></div>201          <div class="dot"></div>202        </div>203      </div>204 205      <div class="title-row">206        <div class="hotel-title">Hotel Nikolai Residence207          <span class="stars">208            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>209            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>210            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>211            <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#1f2937"/></svg>212            <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>213          </span>214        </div>215      </div>216 217      <div class="subline">218        Mitte <span class="bullet">•</span> 160 m from City Center219      </div>220    </div>221  </div>222 223  <!-- Bottom Filters -->224  <div class="filters-bar">225    <div class="filter-item">226      <svg class="filter-icon" viewBox="0 0 24 24">227        <path d="M3 5h18M6 12h12M10 19h4" stroke="#6b7280" stroke-width="2.2" stroke-linecap="round"></path>228      </svg>229      <div class="filter-label">Filter</div>230    </div>231    <div class="filter-item">232      <svg class="filter-icon" viewBox="0 0 24 24">233        <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18.8 5.8 21l1.2-6.8-5-4.9 6.9-1L12 2z" fill="#6b7280"></path>234      </svg>235      <div class="filter-label">Rating</div>236    </div>237    <div class="filter-item">238      <svg class="filter-icon" viewBox="0 0 24 24">239        <text x="4" y="18" font-size="18" fill="#6b7280">₹</text>240        <rect x="2" y="4" width="20" height="16" rx="4" fill="none" stroke="#6b7280" stroke-width="2"></rect>241      </svg>242      <div class="filter-label">Price</div>243    </div>244    <div class="filter-item">245      <svg class="filter-icon" viewBox="0 0 24 24">246        <circle cx="12" cy="12" r="9" fill="none" stroke="#6b7280" stroke-width="2"></circle>247        <path d="M8 8l8 8M16 8l-8 8" stroke="#6b7280" stroke-width="2" stroke-linecap="round"></path>248      </svg>249      <div class="filter-label">Breakfast</div>250    </div>251    <div class="filter-item">252      <svg class="filter-icon" viewBox="0 0 24 24">253        <path d="M4 6h16M8 12h12M12 18h8" stroke="#6b7280" stroke-width="2.2" stroke-linecap="round"></path>254      </svg>255      <div class="filter-label">Sort</div>256    </div>257  </div>258 259  <!-- Home Indicator -->260  <div class="home-indicator"></div>261</div>262</body>263</html>