GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Pizza Hut Deals - Mockup</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29    background: #ffffff;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 14px;35    letter-spacing: 1px;36    font-weight: 600;37  }38  .dot {39    width: 18px;40    height: 18px;41    background: #BDBDBD;42    border-radius: 50%;43    display: inline-block;44  }45  .status-right {46    display: flex;47    align-items: center;48    gap: 18px;49  }50  .tiny-icon {51    width: 22px; height: 22px;52    background: #BDBDBD;53    border-radius: 4px;54  }55 56  /* Header */57  .app-header {58    position: absolute;59    top: 90px;60    left: 0;61    width: 1080px;62    height: 140px;63    display: flex;64    align-items: center;65    padding: 0 28px;66    box-sizing: border-box;67    border-bottom: 1px solid #eee;68    background: #ffffff;69  }70  .icon-btn {71    width: 80px; height: 80px;72    display: flex; align-items: center; justify-content: center;73  }74  .app-title {75    flex: 1;76    text-align: center;77    font-weight: 700;78    font-size: 44px;79    color: #c62828;80    letter-spacing: 0.5px;81  }82  .cart-area {83    width: 92px; height: 92px; position: relative; display: flex; align-items: center; justify-content: center;84  }85  .badge {86    position: absolute;87    top: -4px; right: 2px;88    background: #2e7d32;89    color: #fff;90    width: 40px; height: 40px; border-radius: 50%;91    font-size: 24px; display: flex; align-items: center; justify-content: center;92    border: 2px solid #fff;93  }94 95  /* Tabs */96  .tabs {97    position: absolute;98    top: 230px;99    left: 0;100    width: 1080px;101    height: 92px;102    display: flex;103    align-items: center;104    padding: 0 28px;105    gap: 26px;106    background: #ffffff;107    box-sizing: border-box;108    border-bottom: 1px solid #eee;109  }110  .tab {111    padding: 16px 26px;112    border-radius: 14px;113    font-size: 34px;114    color: #333;115    white-space: nowrap;116  }117  .tab.active {118    background: #c62828;119    color: #fff;120    font-weight: 700;121  }122 123  /* Content scroll area */124  .content-scroll {125    position: absolute;126    top: 322px;    /* below tabs */127    left: 0;128    right: 0;129    bottom: 320px; /* above bottom bar */130    overflow-y: auto;131    background: #f6f6f6;132    padding: 24px 24px 120px 24px;133    box-sizing: border-box;134  }135 136  /* Vegetarian toggle row */137  .filter-row {138    display: flex;139    align-items: center;140    gap: 24px;141    margin: 8px 6px 26px 6px;142  }143  .switch {144    width: 140px;145    height: 76px;146    background: #d9d9d9;147    border-radius: 40px;148    position: relative;149    box-shadow: inset 0 0 0 1px #bdbdbd;150  }151  .switch .knob {152    width: 64px; height: 64px; background: #ffffff; border-radius: 50%;153    position: absolute; top: 6px; left: 6px;154    box-shadow: 0 1px 2px rgba(0,0,0,0.2);155  }156  .filter-row .label {157    font-size: 38px;158    color: #333;159  }160 161  /* Cards */162  .card {163    background: #ffffff;164    border-radius: 20px;165    box-shadow: 0 2px 8px rgba(0,0,0,0.06);166    border: 1px solid #e5e5e5;167    margin: 22px 6px;168    overflow: hidden;169  }170  .card .img-placeholder {171    width: 100%;172    height: 520px;173    background: #E0E0E0;174    border-bottom: 1px solid #BDBDBD;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #555;179    font-size: 36px;180    text-align: center;181    padding: 0 24px;182    box-sizing: border-box;183  }184  .card .content {185    padding: 26px;186  }187  .card .title {188    font-size: 44px;189    font-weight: 800;190    margin-bottom: 18px;191    color: #1b1b1b;192  }193  .card .desc {194    font-size: 34px;195    line-height: 1.35;196    color: #555;197  }198 199  /* "NEW" tag for third card teaser */200  .new-tag {201    position: absolute;202    top: -12px; left: 18px;203    background: #fff;204    color: #000;205    font-weight: 700;206    border-radius: 10px;207    border: 1px solid #ddd;208    padding: 10px 18px;209    font-size: 28px;210  }211 212  /* Bottom bar */213  .bottom-bar {214    position: absolute;215    left: 0; right: 0; bottom: 0;216    height: 320px;217    background: #ffffff;218    border-top: 1px solid #e5e5e5;219    padding: 24px 36px;220    box-sizing: border-box;221  }222  .bottom-bar .total {223    text-align: right;224    font-size: 44px;225    color: #333;226    margin-bottom: 22px;227    font-weight: 700;228  }229  .view-cart {230    width: 1006px;231    height: 150px;232    border: none;233    border-radius: 22px;234    background: #2e7d32;235    color: #fff;236    font-size: 54px;237    font-weight: 700;238    display: block;239    margin: 0 auto;240    cursor: pointer;241    box-shadow: 0 8px 16px rgba(46,125,50,0.35);242  }243 244  /* Simple SVG icon styling */245  .icon { width: 56px; height: 56px; }246  .icon path { fill: #333; }247  .cart-icon path { fill: #333; }248</style>249</head>250<body>251<div id="render-target">252  <!-- Status Bar -->253  <div class="status-bar">254    <div class="status-left">255      <div style="font-size:40px;">8:04</div>256      <span class="dot"></span>257      <span class="dot"></span>258      <span class="dot"></span>259      <span class="dot"></span>260      <span class="dot"></span>261      <span class="dot"></span>262      <span class="dot" style="opacity:.5;"></span>263    </div>264    <div class="status-right">265      <div class="tiny-icon"></div>266      <div class="tiny-icon"></div>267      <div class="tiny-icon"></div>268    </div>269  </div>270 271  <!-- Header -->272  <div class="app-header">273    <div class="icon-btn">274      <svg class="icon" viewBox="0 0 24 24">275        <path d="M15.5 3.5L7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/>276      </svg>277    </div>278    <div class="app-title">Pizza Hut</div>279    <div class="cart-area">280      <svg class="icon cart-icon" viewBox="0 0 24 24">281        <path d="M7 6l1.2-2.4C8.5 3 9 2.5 9.7 2.5h4.6c.7 0 1.3.4 1.6 1.1L17 6h3v2H4V6h3zm-2 4h14l-1.3 10.5c-.1.8-.8 1.5-1.6 1.5H8.9c-.8 0-1.5-.7-1.6-1.5L6 10z"/>282      </svg>283      <div class="badge">1</div>284    </div>285  </div>286 287  <!-- Tabs -->288  <div class="tabs">289    <div class="tab active">Deals</div>290    <div class="tab">Pizzas</div>291    <div class="tab">Sides</div>292    <div class="tab">Desserts</div>293    <div class="tab">Drinks</div>294  </div>295 296  <!-- Scrollable Content -->297  <div class="content-scroll">298    <div class="filter-row">299      <div class="switch"><div class="knob"></div></div>300      <div class="label">Vegetarian</div>301    </div>302 303    <!-- Card 1 -->304    <div class="card">305      <div class="img-placeholder">[IMG: 1+1 Personal Pizzas Deal Banner]</div>306      <div class="content">307        <div class="title">1 Plus 1 San Francisco Style</div>308        <div class="desc">Choose from 2 of your favorite personal pizza with new San Fransisco Crust</div>309      </div>310    </div>311 312    <!-- Card 2 -->313    <div class="card">314      <div class="img-placeholder">[IMG: 2 Medium Pizzas Super Value Deal Banner]</div>315      <div class="content">316        <div class="title">Super Value Deal : 2 Medium Pizzas starting at Rs 649</div>317        <div class="desc">Choose any 2 of your favorite medium pizza</div>318      </div>319    </div>320 321    <!-- Card 3 teaser (partially visible in screenshot) -->322    <div class="card" style="position: relative;">323      <div class="new-tag">NEW</div>324      <div class="img-placeholder" style="height: 280px;">[IMG: New Pizza Options Collage]</div>325    </div>326  </div>327 328  <!-- Bottom bar -->329  <div class="bottom-bar">330    <div class="total">Total: ₹711.90</div>331    <button class="view-cart">View cart</button>332  </div>333</div>334</body>335</html>