GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Listing UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Inter, Arial, sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#ffffff;border-radius:28px;10  }11  .status-bar{12    height:90px;display:flex;align-items:center;gap:20px;13    padding:0 36px;color:#333;font-weight:600;font-size:32px;14  }15  .sb-icon{16    width:40px;height:40px;border-radius:8px;background:#EEEEEE;17    display:flex;align-items:center;justify-content:center;font-size:22px;color:#777;18  }19  .top-actions{20    position:absolute;top:90px;left:0;right:0;21    display:flex;justify-content:space-between;align-items:center;padding:0 24px;22    height:88px;23  }24  .icon-btn{25    width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;26    color:#6D45CE;27  }28  .title{29    margin:200px 40px 16px 40px;30    font-size:60px;line-height:72px;font-weight:800;color:#222;31    letter-spacing:0.5px;32  }33  .location{34    margin:0 40px;color:#6D45CE;font-size:34px;font-weight:600;35  }36  .image{37    margin:32px 40px 18px 40px;height:540px;border:1px solid #BDBDBD;background:#E0E0E0;38    display:flex;align-items:center;justify-content:center;color:#757575;font-size:32px;border-radius:18px;39  }40  .chips{41    display:flex;gap:28px;margin:8px 40px 0 40px;align-items:center;42  }43  .chip{44    display:flex;align-items:center;gap:18px;border-radius:16px;border:1px solid #DDD;padding:18px 26px;45    font-size:34px;color:#333;background:#FAFAFA;46  }47  .section-title{48    margin:48px 40px 12px;font-size:52px;font-weight:800;color:#222;49  }50  .desc{51    margin:0 40px;font-size:34px;line-height:52px;color:#444;52  }53  .chev{54    width:60px;height:60px;border-radius:30px;border:1px solid #DDD;margin:26px auto 0;55    display:flex;align-items:center;justify-content:center;color:#6D45CE;56  }57  .divider{58    width:100%;height:1px;background:#EEE;margin-top:24px;59  }60  .bottom-bar{61    position:absolute;left:0;right:0;bottom:0;height:220px;background:#fff;62    box-shadow:0 -8px 24px rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:space-between;63    padding:0 40px;64  }65  .price-wrap{66    display:flex;flex-direction:column;gap:12px;67  }68  .price{69    font-size:64px;font-weight:800;color:#222;70  }71  .per{72    font-size:36px;color:#555;margin-left:8px;font-weight:600;73  }74  .deposit{75    font-size:36px;color:#6D45CE;font-weight:700;76  }77  .cta{78    width:520px;height:120px;background:#F2A840;border:none;border-radius:26px;color:#fff;79    font-size:44px;font-weight:800;letter-spacing:0.3px;80  }81  /* Simple inline icon styles */82  svg{display:block}83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status Bar -->89  <div class="status-bar">90    <div>1:11</div>91    <div class="sb-icon">M</div>92    <div class="sb-icon">G</div>93    <div style="margin-left:auto;display:flex;gap:16px;">94      <div class="sb-icon">📶</div>95      <div class="sb-icon">🔋</div>96    </div>97  </div>98 99  <!-- Top nav actions -->100  <div class="top-actions">101    <div class="icon-btn" title="Back">102      <svg width="36" height="36" viewBox="0 0 24 24">103        <path d="M15 18l-6-6 6-6" stroke="#6D45CE" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>104      </svg>105    </div>106    <div style="display:flex;gap:20px;">107      <div class="icon-btn" title="Favorite">108        <svg width="40" height="40" viewBox="0 0 24 24">109          <path d="M12 20.5l-1.1-.9C6 16 3 13.4 3 10.3 3 8 4.7 6.3 7 6.3c1.5 0 3 .8 3.8 2.1C11 7 12.5 6.3 14 6.3c2.3 0 4 1.7 4 4 0 3.1-3 5.7-7.9 9.3L12 20.5z" fill="none" stroke="#6D45CE" stroke-width="1.8"/>110        </svg>111      </div>112      <div class="icon-btn" title="Menu">113        <svg width="36" height="36" viewBox="0 0 24 24">114          <circle cx="12" cy="5" r="2" fill="#6D45CE"/>115          <circle cx="12" cy="12" r="2" fill="#6D45CE"/>116          <circle cx="12" cy="19" r="2" fill="#6D45CE"/>117        </svg>118      </div>119    </div>120  </div>121 122  <!-- Title -->123  <div class="title">1 BED 1 BATH DUPLEX<br>WITH BALCONY &<br>LAUNDRY</div>124 125  <!-- Location -->126  <div class="location">New York, Murray Hill, NY, US</div>127 128  <!-- Listing Image -->129  <div class="image">[IMG: Living room interior with spiral staircase]</div>130 131  <!-- Bed/Bath chips -->132  <div class="chips">133    <div class="chip">134      <svg width="44" height="44" viewBox="0 0 24 24">135        <path d="M3 14h18v-3c0-1.7-1.3-3-3-3H9c-1.7 0-3 1.3-3 3v3zM3 14v3h2v-2h14v2h2v-3H3z" fill="#6D45CE"/>136      </svg>137      <span>1 Bed</span>138    </div>139    <div class="chip">140      <svg width="44" height="44" viewBox="0 0 24 24">141        <path d="M3 13h2v-5h2v5h12c1.1 0 2 .9 2 2H3c0-1.1.9-2 2-2zM5 17h14v2H5v-2z" fill="#6D45CE"/>142      </svg>143      <span>1 Bath</span>144    </div>145  </div>146 147  <!-- Description -->148  <div class="section-title">Duplex Description</div>149  <div class="desc">150    Beautiful 1 bedroom 1 bathroom duplex on the third floor of an elevator building with a private balcony on both floors! This home has large windows with sliding glass doors, renovated kitchen appliances, and a sleek spiral staircase.151    <br><br>152    Sunny living space and modern finishes throughout. Laundry in the building. Prime Murray Hill location steps from restaurants, cafes, and transit.153  </div>154  <div class="chev" title="Expand">155    <svg width="30" height="30" viewBox="0 0 24 24">156      <path d="M6 9l6 6 6-6" stroke="#6D45CE" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157    </svg>158  </div>159 160  <div class="divider"></div>161 162  <!-- Bottom bar -->163  <div class="bottom-bar">164    <div class="price-wrap">165      <div style="display:flex;align-items:baseline;gap:12px;">166        <div class="price">$3,995</div>167        <div class="per">month</div>168      </div>169      <div class="deposit">$3,995 security deposit</div>170    </div>171    <button class="cta">Contact Agent</button>172  </div>173 174</div>175</body>176</html>