GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Pizza Hut - Cart Added</title>5<style>6  body { margin:0; padding:0; background: transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    font-family: "Segoe UI", Arial, sans-serif;12    color:#222;13  }14 15  /* Top status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:100px; padding:0 32px;19    display:flex; align-items:center; justify-content:space-between;20    font-size:40px; color:#333;21  }22  .status-icons { display:flex; align-items:center; gap:22px; }23  .dot { width:20px; height:20px; background:#666; border-radius:50%; opacity:.8; }24  .signal { width:28px; height:28px; border-radius:4px; background:#666; }25  .battery { width:36px; height:20px; border:2px solid #666; border-radius:4px; position:relative; }26  .battery:after{ content:""; position:absolute; right:-6px; top:6px; width:6px; height:8px; background:#666; border-radius:2px; }27 28  /* App bar */29  .app-bar {30    position:absolute; top:100px; left:0; right:0;31    height:120px; display:flex; align-items:center;32    padding:0 32px;33  }34  .back-btn {35    width:84px; height:84px; display:flex; align-items:center; justify-content:center;36  }37  .brand {38    display:flex; align-items:center; gap:24px;39    font-size:52px; font-weight:600;40  }41  .brand .logo {42    width:84px; height:84px; background:#d93434; border-radius:50%;43    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:34px;44  }45  .right-actions {46    margin-left:auto; display:flex; align-items:center; gap:24px;47  }48  .cart {49    position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center;50  }51  .badge {52    position:absolute; top:-6px; right:-6px;53    width:56px; height:56px; background:#2c7a2c; color:#fff; font-weight:700;54    border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px;55    box-shadow:0 2px 4px rgba(0,0,0,0.25);56  }57 58  /* Snackbar */59  .snackbar {60    position:absolute; top:200px; left:32px; right:32px;61    background:#eaf7e8; border-radius:18px;62    box-shadow:0 2px 4px rgba(0,0,0,0.08);63    display:flex; align-items:center; gap:28px;64    padding:26px 32px; font-size:44px;65  }66  .snack-icon {67    width:84px; height:84px; border-radius:50%; background:#fff; border:8px solid #2c7a2c;68    display:flex; align-items:center; justify-content:center;69  }70 71  /* Content cards / skeleton */72  .content { position:absolute; top:360px; left:32px; right:32px; bottom:340px; overflow:auto; }73  .card {74    background:#ffffff; border-radius:22px; box-shadow:0 4px 10px rgba(0,0,0,0.06);75    padding:24px; margin-bottom:40px;76  }77  .img-placeholder {78    width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;79    border-radius:16px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;80    margin-bottom:22px;81  }82  .skeleton-bar { height:48px; background:#eef0f3; border-radius:24px; margin:16px 0; }83  .skeleton-bar.short { width:48%; }84 85  /* Bottom area */86  .total-row {87    position:absolute; bottom:240px; right:40px;88    font-size:46px; font-weight:600;89  }90  .cta {91    position:absolute; left:32px; right:32px; bottom:80px;92    height:140px; background:#2c7a2c; color:#fff; font-size:54px; font-weight:700;93    border-radius:24px; display:flex; align-items:center; justify-content:center;94    box-shadow:0 6px 16px rgba(44,122,44,0.35);95  }96 97  /* Simple inline icon styling */98  svg { display:block; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div>8:03</div>107    <div class="status-icons">108      <div class="dot"></div>109      <div class="dot"></div>110      <div class="dot"></div>111      <div class="dot"></div>112      <div class="signal"></div>113      <div class="battery"></div>114    </div>115  </div>116 117  <!-- App bar -->118  <div class="app-bar">119    <div class="back-btn">120      <svg width="60" height="60" viewBox="0 0 24 24">121        <path d="M15.5 4l-8 8 8 8" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122      </svg>123    </div>124    <div class="brand">125      <div class="logo">PH</div>126      <div>Pizza Hut</div>127    </div>128    <div class="right-actions">129      <div class="cart">130        <svg width="56" height="56" viewBox="0 0 24 24">131          <path d="M3 5h2l2.5 10h10l2-7H7" stroke="#c62828" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>132          <circle cx="9" cy="20" r="1.8" fill="#c62828"></circle>133          <circle cx="17" cy="20" r="1.8" fill="#c62828"></circle>134        </svg>135        <div class="badge">1</div>136      </div>137    </div>138  </div>139 140  <!-- Snackbar -->141  <div class="snackbar">142    <div class="snack-icon">143      <svg width="44" height="44" viewBox="0 0 24 24">144        <path d="M5 12l4 4 10-10" stroke="#2c7a2c" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145      </svg>146    </div>147    <div>Item added to cart successfully!</div>148  </div>149 150  <!-- Content -->151  <div class="content">152    <div class="card">153      <div class="img-placeholder">[IMG: Menu Item Banner]</div>154      <div class="skeleton-bar"></div>155      <div class="skeleton-bar"></div>156      <div class="skeleton-bar short"></div>157    </div>158 159    <div class="card">160      <div class="img-placeholder">[IMG: Menu Item Placeholder]</div>161      <div class="skeleton-bar"></div>162      <div class="skeleton-bar"></div>163      <div class="skeleton-bar short"></div>164    </div>165 166    <div class="card">167      <div class="img-placeholder">[IMG: Offer/Promo Placeholder]</div>168    </div>169  </div>170 171  <!-- Bottom total and CTA -->172  <div class="total-row">Total: ₹711.90</div>173  <div class="cta">View cart</div>174 175</div>176</body>177</html>