GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Agoda Style UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative; overflow: hidden;11    width: 1080px; height: 2400px;12    background: #ffffff;13  }14  .status-bar {15    height: 120px; background: #8e8e8e; color: #fff;16    display: flex; align-items: center; padding: 0 40px; font-size: 40px;17  }18  .header {19    padding: 32px 48px 24px 48px; background: #fff; border-bottom: 1px solid #eee;20  }21  .brand-row {22    display: flex; align-items: center; gap: 24px;23  }24  .logo-text {25    font-size: 64px; font-weight: 600; letter-spacing: 1px; color: #555;26  }27  .badge {28    display: inline-flex; align-items: center; gap: 10px;29    background: #1e1e1e; color: #fff; border-radius: 16px; padding: 12px 18px; font-size: 34px;30  }31  .badge svg { width: 34px; height: 34px; fill: #fff; }32  .badge.bronze { background: #c57b45; color: #fff; border-radius: 12px; padding: 12px 18px; }33  .color-dots { margin-top: 20px; display: flex; gap: 18px; }34  .dot { width: 26px; height: 26px; border-radius: 50%; }35  .dot.red{background:#ff4d4d;} .dot.orange{background:#ff9f1c;} .dot.yellow{background:#ffd166;}36  .dot.green{background:#06d6a0;} .dot.blue{background:#118ab2;} .dot.purple{background:#9b5de5;}37 38  .tiles { padding: 24px 48px; }39  .row { display: flex; gap: 36px; }40  .tile {41    flex: 1; border-radius: 36px; padding: 28px; position: relative;42    box-shadow: 0 6px 14px rgba(0,0,0,0.06);43    min-height: 300px;44  }45  .tile.small { min-height: 250px; flex: 1; }46  .tile h3 { margin: 0; font-size: 46px; color: #222; }47  .tile .art {48    position: absolute; bottom: 20px; left: 20px; right: 20px; height: 160px;49    background: #E0E0E0; border: 1px solid #BDBDBD;50    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; border-radius: 16px;51  }52  .bg-red { background: linear-gradient(135deg,#ffe2e2,#f7b0b0); }53  .bg-purple { background: linear-gradient(135deg,#e8d9ff,#c4a6ff); }54  .bg-rose { background: linear-gradient(135deg,#ffd9de,#f7a5ad); }55  .bg-yellow { background: linear-gradient(135deg,#fff3cc,#ffd37a); }56  .bg-green { background: linear-gradient(135deg,#e9f9d8,#b8e39c); }57 58  .new-label {59    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);60    background: #ff4d4d; color: #fff; font-weight: 700; font-size: 30px;61    padding: 8px 18px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);62  }63 64  .pager { display: flex; justify-content: center; gap: 14px; padding: 12px 0 24px 0; }65  .pager .dotp { width: 14px; height: 14px; border-radius: 50%; background: #cdd2d6; }66  .pager .dotp.active { background: #3f80ff; }67 68  .coupon {69    margin: 0 48px; padding: 28px 32px; border-radius: 60px;70    border: 1px solid #dfe3e8; box-shadow: 0 8px 18px rgba(0,0,0,0.06);71    display: flex; align-items: center; justify-content: space-between; gap: 24px;72    font-size: 38px; color: #222;73  }74  .coupon .left { display: flex; align-items: center; gap: 22px; }75  .ticket {76    width: 86px; height: 86px; border-radius: 22px; background: #fff2f2; border: 1px dashed #ff6b6b;77    display: flex; align-items: center; justify-content: center;78  }79  .claim-btn {80    color: #3f80ff; font-weight: 700; font-size: 38px;81  }82 83  .section-title { font-size: 50px; font-weight: 700; color: #1a1a1a; padding: 28px 48px 18px 48px; }84 85  .promo-row { display: flex; gap: 28px; padding: 0 48px; }86  .promo-card {87    flex: 1; height: 320px; border-radius: 36px; overflow: hidden;88    background: #E0E0E0; border: 1px solid #BDBDBD;89    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;90  }91 92  .toast {93    position: absolute; left: 48px; right: 48px; bottom: 360px;94    background: #2b2b2b; color: #fff; border-radius: 28px; padding: 30px 32px;95    display: flex; align-items: center; justify-content: space-between; box-shadow: 0 10px 20px rgba(0,0,0,0.25);96  }97  .toast .text { font-size: 40px; line-height: 1.3; }98  .toast .sub { font-size: 32px; opacity: 0.9; }99  .toast .close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }100 101  .bottom-nav {102    position: absolute; bottom: 0; left: 0; right: 0;103    height: 180px; background: #fff; border-top: 1px solid #e6e6e6;104    display: flex; justify-content: space-around; align-items: center;105  }106  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #7a8a99; font-size: 28px; }107  .nav-item.active { color: #3f80ff; }108  .nav-icon { width: 54px; height: 54px; }109 110  /* Simple utility */111  .spacer-20 { height: 20px; }112</style>113</head>114<body>115<div id="render-target">116 117  <div class="status-bar">118    10:31119  </div>120 121  <div class="header">122    <div class="brand-row">123      <div class="logo-text">agoda</div>124      <div class="badge">125        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.2 1.2 6.7L12 16l-5.7 3.8 1.2-6.7L3 8.9 9 8z"/></svg>126        VIP127      </div>128      <div class="badge bronze">Bronze</div>129    </div>130    <div class="color-dots">131      <div class="dot red"></div>132      <div class="dot orange"></div>133      <div class="dot yellow"></div>134      <div class="dot green"></div>135      <div class="dot blue"></div>136      <div class="dot purple"></div>137    </div>138  </div>139 140  <div class="tiles">141    <div class="row">142      <div class="tile bg-red">143        <h3>Hotels</h3>144        <div class="art">[IMG: Hotel Illustration]</div>145      </div>146      <div class="tile bg-purple">147        <h3>Flights</h3>148        <div class="art">[IMG: Plane Illustration]</div>149      </div>150    </div>151    <div class="spacer-20"></div>152    <div class="row">153      <div class="tile small bg-rose">154        <h3>Hourly Stay</h3>155        <div class="art">[IMG: Clock + Building]</div>156      </div>157      <div class="tile small bg-yellow">158        <div class="new-label">New!</div>159        <h3>Activities</h3>160        <div class="art">[IMG: Ferris Wheel]</div>161      </div>162      <div class="tile small bg-green">163        <h3>Homes & Apts</h3>164        <div class="art">[IMG: Houses Illustration]</div>165      </div>166    </div>167  </div>168 169  <div class="pager">170    <div class="dotp active"></div>171    <div class="dotp"></div>172  </div>173 174  <div class="coupon">175    <div class="left">176      <div class="ticket">177        <svg viewBox="0 0 24 24" width="40" height="40">178          <path d="M4 6h16v12H4zM6 9h4v2H6zm0 4h10v2H6z" fill="#ff6b6b"/>179        </svg>180      </div>181      <div>10% Off Coupon for 1st App Booking</div>182    </div>183    <div class="claim-btn">Claim</div>184  </div>185 186  <div class="section-title">Promotions</div>187  <div class="promo-row">188    <div class="promo-card">[IMG: 12.12 Mega Sale Banner]</div>189    <div class="promo-card">[IMG: End of Year Sale Banner]</div>190  </div>191 192  <div class="section-title">Flights & Activities Promotions</div>193  <div class="promo-row" style="padding-bottom: 220px;">194    <div class="promo-card">[IMG: Flights Promo Banner]</div>195    <div class="promo-card">[IMG: Activities Promo Banner]</div>196  </div>197 198  <div class="toast">199    <div class="text">200      Enable Location Permission201      <div class="sub">Please change the location permission on your phone.</div>202    </div>203    <div class="close">204      <svg viewBox="0 0 24 24" width="32" height="32">205        <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="3" stroke-linecap="round"/>206      </svg>207    </div>208  </div>209 210  <div class="bottom-nav">211    <div class="nav-item active">212      <svg class="nav-icon" viewBox="0 0 24 24">213        <path d="M3 11l9-7 9 7v9h-6v-5H9v5H3z" fill="#3f80ff"/>214      </svg>215      <div>Home</div>216    </div>217    <div class="nav-item">218      <svg class="nav-icon" viewBox="0 0 24 24">219        <path d="M7 2h10v4H7zM5 6h14v16H5z" fill="#7a8a99"/>220      </svg>221      <div>My Trips</div>222    </div>223    <div class="nav-item">224      <svg class="nav-icon" viewBox="0 0 24 24">225        <path d="M6 12l12-8v16z" fill="#7a8a99"/>226      </svg>227      <div>Deals</div>228    </div>229    <div class="nav-item">230      <svg class="nav-icon" viewBox="0 0 24 24">231        <path d="M7 7h10l2 12H5zM9 7V5h6v2" fill="#7a8a99"/>232      </svg>233      <div>Cart</div>234    </div>235    <div class="nav-item">236      <svg class="nav-icon" viewBox="0 0 24 24">237        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4 4-7 8-7s8 3 8 7" fill="#7a8a99"/>238      </svg>239      <div>More</div>240    </div>241  </div>242 243</div>244</body>245</html>