GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Obi Hostel - Deals UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#0f141b;color:#e9f2f9;11  }12  .statusbar{height:80px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;color:#cfe3ef;font-size:34px;}13  .status-left{display:flex;gap:24px;align-items:center;}14  .status-right{display:flex;gap:26px;align-items:center;}15  .icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;}16  .header{padding:10px 34px 0 34px;height:120px;display:flex;align-items:center;gap:26px;}17  .back-btn{width:68px;height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center;}18  .title{font-size:52px;font-weight:700;flex:1;}19  .header-actions{display:flex;gap:36px;}20  .tabs{display:flex;gap:64px;padding:20px 34px 24px;border-bottom:1px solid rgba(255,255,255,0.06);}21  .tab{font-size:38px;color:#b7c8d6;padding-bottom:16px;}22  .tab.active{color:#aef3ff;border-bottom:6px solid #5cd7e9;}23  .section{padding:30px 34px;}24  .deal-row{display:flex;gap:32px;margin-top:10px;}25  .deal-card{26    width:320px;height:240px;border-radius:18px;background:#121a23;27    padding:26px;box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;28  }29  .logo-box{30    width:240px;height:92px;background:#ffffff;border-radius:14px;31    color:#2b2f33;display:flex;align-items:center;justify-content:center;font-weight:700;32  }33  .price{margin-top:38px;font-size:48px;color:#93e7ff;}34  .learn{color:#6fd7e9;font-size:34px;margin:22px 0;}35  .skyscanner-title{font-size:48px;font-weight:700;margin:22px 0 8px;}36  .big-card{37    margin-top:8px;border-radius:26px;background:#121a23;padding-bottom:26px;38    box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;39  }40  .big-card-header{display:flex;align-items:center;justify-content:space-between;padding:30px 30px;font-size:50px;font-weight:700;}41  .caret{width:44px;height:44px;}42  .image-area{43    margin:0 30px;border-radius:18px;overflow:hidden;position:relative;44    height:520px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;45  }46  .chip{position:absolute;right:24px;top:24px;background:#1e2a33;color:#cfe3ef;padding:14px 22px;border-radius:16px;font-size:32px;border:1px solid rgba(255,255,255,0.08);}47  .bubble{position:absolute;right:24px;bottom:24px;background:#1e2a33;color:#fff;padding:16px 22px;border-radius:20px;font-size:32px;border:1px solid rgba(255,255,255,0.12);}48  .dots{position:absolute;left:24px;bottom:24px;display:flex;gap:10px;}49  .dot{width:16px;height:16px;border-radius:50%;background:#cfe3ef;opacity:0.7;}50  .room-title{padding:26px 34px;font-size:44px;font-weight:700;}51  .feature-list{padding:6px 34px;display:flex;flex-direction:column;gap:28px;font-size:38px;color:#d6e5ee;}52  .feature{display:flex;align-items:center;gap:22px;}53  .feature svg{width:40px;height:40px;fill:#9fb3c3;}54  .feature .green{background:#1c3e33;color:#9ff0c5;padding:8px 16px;border-radius:14px;font-size:32px;margin-left:8px;}55  .badge{margin-left:auto;background:#25323b;color:#ffffff;padding:12px 20px;border-radius:16px;font-size:34px;border:1px solid rgba(255,255,255,0.12);}56  .view-details{padding:28px 34px;color:#8fdff0;font-size:38px;}57</style>58</head>59<body>60<div id="render-target">61 62  <div class="statusbar">63    <div class="status-left">64      <div>3:18</div>65      <div class="icon" title="status">✓</div>66      <div class="icon" title="cloud">☁</div>67    </div>68    <div class="status-right">69      <div class="icon" title="wifi">📶</div>70      <div class="icon" title="battery">🔋</div>71    </div>72  </div>73 74  <div class="header">75    <div class="back-btn">76      <svg width="56" height="56" viewBox="0 0 24 24">77        <path fill="#cfe3ef" d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6z"/>78      </svg>79    </div>80    <div class="title">Obi Hostel</div>81    <div class="header-actions">82      <svg class="icon" viewBox="0 0 24 24">83        <path fill="#cfe3ef" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6.03 6.03 0 0 1 15.5 4 4.5 4.5 0 0 1 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>84      </svg>85      <svg class="icon" viewBox="0 0 24 24">86        <path fill="#cfe3ef" d="M18 8a3 3 0 1 0-2.82-2H9.82A3 3 0 1 0 7 9.82v6.36A3 3 0 1 0 9.82 19h5.36A3 3 0 1 0 18 16.18V8zM6 19a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm12 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM6 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"/>87      </svg>88    </div>89  </div>90 91  <div class="tabs">92    <div class="tab active">DEALS</div>93    <div class="tab">REVIEWS</div>94    <div class="tab">DETAILS</div>95  </div>96 97  <div class="section">98    <div class="deal-row">99      <div class="deal-card">100        <div class="logo-box">Booking.com</div>101        <div class="price">$23</div>102      </div>103      <div class="deal-card">104        <div class="logo-box">Expedia</div>105        <div class="price">$26</div>106      </div>107      <div class="deal-card">108        <div class="logo-box">Hotels.com</div>109        <div class="price">$26</div>110      </div>111    </div>112 113    <div class="learn">Learn more about price changes</div>114 115    <div class="skyscanner-title">Book on Skyscanner</div>116 117    <div class="big-card">118      <div class="big-card-header">119        <div>Bed In Mix Dormitory</div>120        <svg class="caret" viewBox="0 0 24 24">121          <path fill="#cfe3ef" d="M8 9l4 4 4-4z"/>122        </svg>123      </div>124 125      <div class="image-area">126        [IMG: Hostel & cafe interior]127        <div class="chip">From Easytrip</div>128        <div class="dots">129          <div class="dot"></div><div class="dot"></div><div class="dot"></div>130        </div>131        <div class="bubble">1/8</div>132      </div>133 134      <div class="room-title">Room Only</div>135 136      <div class="section" style="padding-top:0;">137        <div style="color:#a8c3d3;font-size:40px;">Bed In Mix Dormitory | 1x Bunk bed (1m wide)</div>138      </div>139 140      <div class="feature-list">141        <div class="feature">142          <svg viewBox="0 0 24 24"><path d="M3 12l9-9 9 9-1.4 1.4L12 5.8l-6.6 7.6z"/></svg>143          <div>Meals not included</div>144          <div class="badge">11% off</div>145        </div>146        <div class="feature">147          <svg viewBox="0 0 24 24"><path d="M5 3h14v2H5zm0 4h14v2H5zm0 4h14v2H5z"/></svg>148          <div>Non-Refundable</div>149        </div>150        <div class="feature">151          <svg viewBox="0 0 24 24"><path d="M12 1a8 8 0 100 16 8 8 0 000-16zm1 4h-2v6l5 3 .9-1.8-3.9-2.2V5z"/></svg>152          <div>Pay now</div>153        </div>154        <div class="feature">155          <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2-8 4.5V21h16v-2.5c0-2.5-3.6-4.5-8-4.5z"/></svg>156          <div>Up to 1 guest</div>157        </div>158        <div class="feature">159          <svg viewBox="0 0 24 24"><path d="M12 20a8 8 0 110-16 8 8 0 010 16zm-1-6l-3-3 1.4-1.4L11 11.2l4.6-4.6L17 8l-6 6z"/></svg>160          <div>Instant confirmation</div>161          <div class="green">Instant</div>162        </div>163        <div class="feature">164          <svg viewBox="0 0 24 24"><path d="M20 2L4 20m-2-2l18-18"/></svg>165          <div>Non-smoking</div>166        </div>167      </div>168 169      <div class="view-details">VIEW DETAILS</div>170    </div>171  </div>172 173</div>174</body>175</html>