GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Groupon UI Mock</title>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    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top header area */17  .top-area {18    background: #201233; /* deep purple */19    color: #fff;20    width: 100%;21    height: 540px;22    padding: 28px 36px 0 36px;23    box-sizing: border-box;24  }25  .status-bar {26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 6px 6px 0 6px;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 12px;35    font-weight: 600;36    font-size: 40px;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .header-title {45    margin-top: 36px;46    font-size: 92px;47    font-weight: 800;48    line-height: 1.05;49    letter-spacing: 1px;50  }51  .title-row {52    display: inline-flex;53    align-items: center;54    gap: 16px;55  }56  .chev {57    width: 26px; height: 26px;58  }59 60  /* Search */61  .search-row {62    margin-top: 28px;63    display: flex;64    align-items: center;65    gap: 18px;66  }67  .search-box {68    flex: 1;69    height: 120px;70    background: #ffffff;71    border-radius: 60px;72    display: flex;73    align-items: center;74    padding: 0 36px;75    box-sizing: border-box;76    color: #333;77  }78  .search-placeholder {79    color: #4b4b4b;80    opacity: 0.9;81    font-size: 42px;82    font-weight: 600;83    margin-left: 18px;84  }85  .cart-wrap {86    width: 110px;87    height: 110px;88    border-radius: 56px;89    display: flex; align-items: center; justify-content: center;90  }91 92  /* Promo banner */93  .promo {94    background: #E6F6E9;95    color: #167C2E;96    margin: 0 0 0 0;97    padding: 28px 36px 40px 36px;98    font-size: 42px;99    font-weight: 700;100  }101  .dots {102    margin-top: 18px;103    display: flex;104    gap: 16px;105    justify-content: center;106  }107  .dot {108    width: 18px; height: 18px; border-radius: 50%;109    background: #86c28d;110    opacity: 0.6;111  }112  .dot.active { opacity: 1; background: #4aa35a; }113 114  /* Card / content image */115  .img-hero {116    margin: 30px 36px 0 36px;117    height: 620px;118    border-radius: 24px;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    display: flex; align-items: center; justify-content: center;122    color: #616161;123    font-size: 38px;124    text-align: center;125    padding: 24px;126    box-sizing: border-box;127  }128 129  /* Listing text */130  .listing {131    padding: 24px 36px 0 36px;132  }133  .title {134    font-size: 64px;135    font-weight: 800;136    color: #111;137    line-height: 1.2;138  }139  .subline {140    margin-top: 12px;141    font-size: 44px;142    color: #5d5d5d;143    font-weight: 700;144  }145  .rating {146    margin-top: 16px;147    display: flex;148    align-items: center;149    gap: 16px;150    color: #333;151    font-size: 40px;152    font-weight: 700;153  }154  .stars {155    display: inline-flex;156    gap: 8px;157  }158  .price-row {159    margin-top: 28px;160    display: flex;161    align-items: center;162    flex-wrap: wrap;163    gap: 20px 26px;164  }165  .old-price {166    font-size: 54px;167    color: #8c8c8c;168    text-decoration: line-through;169    font-weight: 800;170  }171  .new-price {172    font-size: 58px;173    color: #1a8f2f;174    font-weight: 900;175  }176  .per-night {177    font-size: 42px;178    color: #1a8f2f;179    font-weight: 800;180  }181  .pill {182    background: #E2F6E5;183    color: #1a8f2f;184    font-weight: 900;185    font-size: 40px;186    padding: 10px 22px;187    border-radius: 18px;188  }189  .desc {190    margin-top: 18px;191    font-size: 46px;192    color: #2b2b2b;193    font-weight: 700;194  }195 196  /* Second image */197  .img-wide {198    margin: 38px 36px 260px 36px;199    height: 480px;200    border-radius: 20px;201    background: #E0E0E0;202    border: 1px solid #BDBDBD;203    display: flex; align-items: center; justify-content: center;204    color: #616161;205    font-size: 38px;206    text-align: center;207    padding: 24px;208    box-sizing: border-box;209  }210 211  /* Bottom navigation */212  .bottom-nav {213    position: absolute;214    left: 0; right: 0; bottom: 0;215    height: 190px;216    background: #fff;217    border-top: 1px solid #E0E0E0;218    display: flex;219    justify-content: space-around;220    align-items: center;221    padding-bottom: 22px;222  }223  .nav-item {224    display: flex; flex-direction: column; align-items: center;225    gap: 16px;226    color: #757575;227    font-size: 34px;228    font-weight: 700;229  }230  .nav-item.active { color: #2E7D32; }231  .icon {232    width: 84px; height: 84px;233    border-radius: 42px;234    display: flex; align-items: center; justify-content: center;235  }236  .notif-dot {237    position: absolute;238    width: 34px; height: 34px;239    background: #E53935;240    border-radius: 50%;241    right: -6px; top: -6px;242    border: 4px solid #ffffff;243  }244  .icon-wrap {245    position: relative;246    width: 84px; height: 84px;247    display: flex; align-items: center; justify-content: center;248  }249</style>250</head>251<body>252<div id="render-target">253 254  <!-- Top header, status, location, search -->255  <div class="top-area">256    <div class="status-bar">257      <div class="status-left">258        <span>5:44</span>259        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">260          <path d="M8 5v14l11-7-11-7z"/>261        </svg>262      </div>263      <div class="status-right">264        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">265          <path d="M2 8.5l10 10 10-10-1.4-1.4L12 15.7 3.4 7.1 2 8.5z"/>266        </svg>267        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">268          <path d="M16 3H8c-1.1 0-2 .9-2 2v14l6-3 6 3V5c0-1.1-.9-2-2-2z"/>269        </svg>270      </div>271    </div>272 273    <div class="header-title">274      <span class="title-row">Michigan, USA275        <svg class="chev" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">276          <path d="M7 10l5 5 5-5H7z"/>277        </svg>278      </span>279    </div>280 281    <div class="search-row">282      <div class="search-box">283        <svg width="46" height="46" viewBox="0 0 24 24" fill="#666" aria-hidden="true">284          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/>285        </svg>286        <div class="search-placeholder">Search Groupon</div>287      </div>288      <div class="cart-wrap">289        <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">290          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 291          0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.82 14h8.87c.75 0 1.41-.41 1.75-1.03L22 7H6.21l-.94-2H2v2h2l3.6 7.59-.95 1.72C6.23 16.37 6 16.91 6 17.5 6 18.33 6.67 19 7.5 19H20v-2H7.42c-.14 0-.25-.11-.25-.25 0-.04.01-.07.02-.1l.63-1.15z"/>292        </svg>293      </div>294    </div>295  </div>296 297  <!-- Promo banner -->298  <div class="promo">299    Get 10% Off Activities, beauty, and more!300    <div class="dots">301      <div class="dot active"></div>302      <div class="dot"></div>303      <div class="dot"></div>304    </div>305  </div>306 307  <!-- Featured image -->308  <div class="img-hero">[IMG: Indoor waterpark dumping bucket and slides]</div>309 310  <!-- Listing info -->311  <div class="listing">312    <div class="title">Great Wolf Lodge Traverse City</div>313    <div class="subline">Traverse City, MI</div>314 315    <div class="rating">316      <span>4.6</span>317      <div class="stars">318        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>319        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>320        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>321        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>322        <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFC107"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>323      </div>324      <span style="color:#5d5d5d; font-weight:800;">2,642 Ratings</span>325    </div>326 327    <div class="price-row">328      <div class="old-price">$229</div>329      <div class="new-price">From $99</div>330      <div class="per-night">/nt</div>331      <div class="pill">57% Off</div>332    </div>333 334    <div class="desc">Great Wolf Lodge Waterpark Hotel</div>335  </div>336 337  <!-- Next card image -->338  <div class="img-wide">[IMG: Beauty clinic desk with magnifying lamp]</div>339 340  <!-- Bottom nav -->341  <div class="bottom-nav">342    <div class="nav-item active">343      <div class="icon-wrap">344        <div class="icon">345          <svg width="60" height="60" viewBox="0 0 24 24" fill="#2E7D32"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7 13h4v4H9v-2H7v-2zm6-6h4v4h-2V9h-2V7z"/></svg>346        </div>347      </div>348      Featured349    </div>350 351    <div class="nav-item">352      <div class="icon-wrap">353        <div class="icon">354          <svg width="60" height="60" viewBox="0 0 24 24" fill="#777">355            <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>356          </svg>357        </div>358      </div>359      Categories360    </div>361 362    <div class="nav-item">363      <div class="icon-wrap">364        <div class="icon">365          <svg width="60" height="60" viewBox="0 0 24 24" fill="#777">366            <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6V11c0-3.07-1.64-5.64-4.5-6.32V4a1.5 1.5 0 1 0-3 0v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>367          </svg>368        </div>369        <div class="notif-dot"></div>370      </div>371      Notifications372    </div>373 374    <div class="nav-item">375      <div class="icon-wrap">376        <div class="icon">377          <svg width="60" height="60" viewBox="0 0 24 24" fill="#777">378            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1 4.22 2.44C11.09 5 12.76 4 14.5 4 17 4 19 6 19 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>379          </svg>380        </div>381      </div>382      Saved383    </div>384 385    <div class="nav-item">386      <div class="icon-wrap">387        <div class="icon">388          <svg width="60" height="60" viewBox="0 0 24 24" fill="#777">389            <path d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-4.33 0-8 2.17-8 5v3h16v-3c0-2.83-3.67-5-8-5z"/>390          </svg>391        </div>392      </div>393      My Stuff394    </div>395  </div>396 397</div>398</body>399</html>