GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Rome Listings UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#F6F6F6;11  }12 13  /* App bar */14  .appbar {15    position:absolute; left:0; top:0; width:1080px; height:190px;16    background:#2E5BCB; color:#fff;17    box-sizing:border-box; padding:30px 30px;18  }19  .app-title {20    position:absolute; left:120px; top:80px;21    font-size:58px; font-weight:600; letter-spacing:1px;22  }23  .title-underline {24    position:absolute; left:120px; top:140px; width:720px; height:2px;25    background:rgba(255,255,255,0.4);26  }27  .icon-btn {28    position:absolute; top:78px; width:60px; height:60px;29    display:flex; justify-content:center; align-items:center;30  }31  .icon-back { left:30px; }32  .icon-filter { right:160px; }33  .icon-pin { right:70px; }34 35  /* Cards */36  .card {37    position:relative; left:20px; width:1040px;38    background:#fff; border-radius:12px; box-shadow:0 2px 4px rgba(0,0,0,0.08);39    margin-top:20px; overflow:hidden;40  }41  .image {42    position:relative; width:1040px; height:540px;43    background:#E0E0E0; border-bottom:1px solid #BDBDBD;44    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; text-align:center;45  }46  .badge {47    position:absolute; left:20px; top:20px;48    background:#F57C00; color:#fff; font-weight:600;49    padding:14px 22px; border-radius:8px; font-size:34px;50  }51  .price-tag {52    position:absolute; left:20px; bottom:20px;53    background:#000; color:#fff; font-weight:700;54    padding:18px 26px; border-radius:10px; font-size:42px;55    display:flex; align-items:center; gap:18px;56  }57  .heart {58    position:absolute; right:24px; top:18px; width:74px; height:74px;59    display:flex; justify-content:center; align-items:center;60  }61  .content {62    padding:28px 28px 32px 28px;63  }64  .title {65    font-size:44px; font-weight:700; color:#333; line-height:1.2;66    margin-bottom:12px;67  }68  .subtitle {69    font-size:34px; color:#666; margin-bottom:8px;70  }71  .location {72    font-size:34px; color:#666; margin-bottom:16px;73  }74  .rating-row {75    display:flex; align-items:center; gap:12px; color:#777;76    font-size:32px;77  }78  .stars { display:flex; gap:6px; }79  .bottom-bar {80    position:absolute; left:0; bottom:0; width:1080px; height:100px;81    background:#121212;82  }83 84  /* Floating action button */85  .fab {86    position:absolute; right:40px; bottom:140px;87    width:150px; height:150px; background:#F57C00; border-radius:50%;88    box-shadow:0 10px 20px rgba(0,0,0,0.25);89    display:flex; justify-content:center; align-items:center;90  }91  .filter-lines {92    width:70px; height:70px; position:relative;93  }94  .filter-lines span {95    position:absolute; left:0; right:0; height:8px; background:#fff; border-radius:4px;96  }97  .filter-lines span:nth-child(1) { top:12px; width:80%; left:10%; }98  .filter-lines span:nth-child(2) { top:30px; width:60%; left:20%; }99  .filter-lines span:nth-child(3) { top:48px; width:90%; left:5%; }100 101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Top App Bar -->107  <div class="appbar">108    <div class="icon-btn icon-back">109      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">110        <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>111      </svg>112    </div>113    <div class="app-title">Rome</div>114    <div class="title-underline"></div>115    <div class="icon-btn icon-filter">116      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">117        <path d="M4 7h16M7 12h10M9 17h6" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"/>118      </svg>119    </div>120    <div class="icon-btn icon-pin">121      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">122        <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z" stroke="#FFFFFF" stroke-width="2.2"/>123        <circle cx="12" cy="10" r="3" fill="#FFFFFF"/>124      </svg>125    </div>126  </div>127 128  <!-- Card 1 -->129  <div class="card" style="top:190px;">130    <div class="image">131      [IMG: Dining room apartment with round table and window]132      <div class="badge">Online Booking</div>133      <div class="price-tag">134        <span>from 43 €/night</span>135        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">136          <path d="M12 3l7 3v6c0 4-3.5 7-7 9-3.5-2-7-5-7-9V6l7-3z" stroke="#FFFFFF" stroke-width="2" fill="none"/>137        </svg>138      </div>139      <div class="heart">140        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">141          <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 6.5 6.5 6.5c2 0 3.2 1.1 3.5 2 .3-.9 1.5-2 3.5-2 3 0 5 2.5 3.5 6-2 4.15-9 8.5-9 8.5z" stroke="#FFFFFF" stroke-width="2" fill="none"/>142        </svg>143      </div>144    </div>145    <div class="content">146      <div class="title">Apartment for 2-4 people only 500 meters fr...</div>147      <div class="subtitle">Apt. for 4 guests</div>148      <div class="location">Ladispoli, Rome</div>149      <div class="rating-row">150        <div class="stars">151          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>152          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>153          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>154          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>155          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>156        </div>157        <span>Without opinions</span>158      </div>159    </div>160  </div>161 162  <!-- Card 2 -->163  <div class="card" style="top:210px; margin-top:30px;">164    <div class="image">165      [IMG: Stylish spiral staircase living room with fireplace and TV]166      <div class="badge">Online Booking</div>167      <div class="price-tag">168        <span>from 149 €/night</span>169        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">170          <path d="M12 3l7 3v6c0 4-3.5 7-7 9-3.5-2-7-5-7-9V6l7-3z" stroke="#FFFFFF" stroke-width="2" fill="none"/>171        </svg>172      </div>173      <div class="heart">174        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">175          <path d="M12 21s-7-4.35-9-8.5C1.5 9 3.5 6.5 6.5 6.5c2 0 3.2 1.1 3.5 2 .3-.9 1.5-2 3.5-2 3 0 5 2.5 3.5 6-2 4.15-9 8.5-9 8.5z" stroke="#FFFFFF" stroke-width="2" fill="none"/>176        </svg>177      </div>178    </div>179    <div class="content">180      <div class="title">Apartment for rent in Rome</div>181      <div class="subtitle">Apt. for 4 to 7 guests</div>182      <div class="location">Rome, Rome</div>183      <div class="rating-row">184        <div class="stars">185          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>186          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>187          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>188          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>189          <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 17.3l-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1 3-6.2 3 6.2 6.8 1-4.9 4.8 1.2 6.8z" stroke="#B0B0B0" stroke-width="1.5" fill="none"/></svg>190        </div>191        <span>Without opinions</span>192      </div>193    </div>194  </div>195 196  <!-- Floating Filter Button -->197  <div class="fab">198    <div class="filter-lines">199      <span></span><span></span><span></span>200    </div>201  </div>202 203  <div class="bottom-bar"></div>204</div>205</body>206</html>