GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #333; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar (simulated) */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #444;24    font-size: 36px;25  }26  .status-icons {27    display: flex;28    gap: 22px;29    align-items: center;30  }31  .status-dot {32    width: 12px; height: 12px; background:#777; border-radius: 50%;33  }34 35  /* App header */36  .app-header {37    height: 150px;38    border-bottom: 1px solid #e6e6e6;39    display: flex;40    align-items: center;41    justify-content: space-between;42    padding: 0 30px;43  }44  .header-left {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .brand {50    font-size: 88px;51    font-weight: 700;52    color: #ff4968;53    line-height: 1;54  }55  .header-right {56    display: flex;57    align-items: center;58    gap: 34px;59  }60  .round-icon {61    width: 80px; height: 80px;62    border: 2px solid #dcdcdc;63    border-radius: 50%;64    display: flex; align-items: center; justify-content: center;65  }66 67  /* Content */68  .content {69    padding: 20px 40px;70  }71  .review-text {72    font-size: 40px;73    line-height: 1.5;74    color: #666;75    margin-top: 26px;76  }77  .divider {78    height: 1px;79    background: #eee;80    margin: 34px 0;81  }82  .review-block {83    display: block;84  }85  .review-top {86    display: flex;87    align-items: center;88    gap: 22px;89  }90  .avatar {91    width: 92px; height: 92px; border-radius: 50%;92    background: #E0E0E0; border: 1px solid #BDBDBD;93    display: flex; align-items: center; justify-content: center;94    color: #757575; font-size: 18px;95  }96  .stars {97    display: flex; gap: 6px;98  }99  .meta {100    font-size: 34px; color: #9e9e9e; margin-top: 12px;101  }102  .review-body {103    font-size: 40px; line-height: 1.5; color: #555; margin-top: 24px;104  }105  .load-more {106    text-align: center; color: #1a73e8; font-weight: 600; margin: 30px 0 40px; font-size: 40px;107  }108 109  .gap-section {110    height: 260px;111    background: #f4f4f4;112    margin: 0 -40px;113  }114 115  /* Recommendation section */116  .section-title {117    font-size: 64px; font-weight: 800; text-align: center; margin: 50px 0 26px;118  }119  .cards {120    display: flex; gap: 32px;121    padding: 0 24px;122  }123  .card {124    position: relative;125    width: calc(50% - 16px);126    border: 1px solid #e4e8ec;127    border-radius: 28px;128    overflow: hidden;129    background: #fff;130  }131  .img-placeholder {132    width: 100%;133    height: 620px;134    background: #E0E0E0;135    border-bottom: 1px solid #BDBDBD;136    display: flex; align-items: center; justify-content: center;137    color: #757575; font-size: 36px;138  }139  .card-title {140    font-size: 40px; color: #666; padding: 26px; padding-bottom: 36px;141  }142  .corner-fav {143    position: absolute; top: 18px; right: 18px;144    width: 86px; height: 86px;145    border-radius: 50%;146    background: rgba(255,255,255,0.9);147    border: 1px solid #e3e3e3;148    display: flex; align-items: center; justify-content: center;149  }150 151  /* Bottom action bar */152  .bottom-bar {153    position: absolute;154    left: 0; right: 0; bottom: 54px;155    height: 200px;156    background: #ffffff;157    border-top: 1px solid #e9e9e9;158    display: flex; align-items: center; justify-content: center;159    gap: 28px;160    padding: 0 30px;161  }162  .btn {163    height: 120px; border-radius: 12px; font-size: 40px; font-weight: 700;164    display: inline-flex; align-items: center; justify-content: center;165    padding: 0 40px; gap: 20px; cursor: default;166  }167  .btn-outline {168    border: 2px solid #d7d7d7; color: #444; background: #fff; width: 470px;169  }170  .btn-primary {171    background: #e3333a; color: #fff; border: none; width: 470px;172    box-shadow: 0 6px 12px rgba(227,51,58,0.25);173  }174 175  /* Bottom system bar */176  .system-bar {177    position: absolute; left: 0; right: 0; bottom: 0;178    height: 54px; background: #000;179    border-top-left-radius: 24px; border-top-right-radius: 24px;180    margin: 0 320px;181  }182 183  /* Helper */184  .sr {185    position: absolute; left: -9999px;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Simulated status bar -->193  <div class="status-bar">194    <div>12:17</div>195    <div class="status-icons">196      <svg width="40" height="40"><rect x="8" y="10" width="24" height="20" fill="#777" rx="4"/></svg>197      <svg width="40" height="40"><rect x="6" y="6" width="28" height="28" fill="#777" rx="6"/></svg>198      <div class="status-dot"></div>199      <svg width="40" height="40"><path d="M6 12h28v16H6z" fill="#777"/><rect x="12" y="6" width="4" height="6" fill="#777"/><rect x="24" y="6" width="4" height="6" fill="#777"/></svg>200      <svg width="40" height="40"><path d="M8 8h24v24H8z" fill="none" stroke="#777" stroke-width="2"/><path d="M12 18h16" stroke="#777" stroke-width="2"/></svg>201    </div>202  </div>203 204  <!-- App header -->205  <div class="app-header">206    <div class="header-left">207      <svg width="64" height="64" viewBox="0 0 48 48">208        <path d="M30 10 L16 24 L30 38" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>209      </svg>210      <div class="brand">igp</div>211    </div>212    <div class="header-right">213      <div class="round-icon">214        <span style="font-size:40px;color:#444;">₹</span>215      </div>216      <div class="round-icon">217        <svg width="42" height="42" viewBox="0 0 48 48">218          <path d="M24 40 C10 32 6 24 12 16 C16 10 24 12 24 18 C24 12 32 10 36 16 C42 24 38 32 24 40" fill="none" stroke="#333" stroke-width="3"/>219        </svg>220      </div>221      <div class="round-icon">222        <svg width="42" height="42" viewBox="0 0 48 48">223          <rect x="7" y="12" width="34" height="28" rx="4" fill="none" stroke="#333" stroke-width="3"/>224          <rect x="14" y="8" width="6" height="8" fill="#333"/>225          <rect x="28" y="8" width="6" height="8" fill="#333"/>226          <rect x="14" y="22" width="8" height="8" fill="#333"/>227        </svg>228      </div>229    </div>230  </div>231 232  <!-- Reviews section -->233  <div class="content">234    <div class="review-text">235      Good service, delivery was on exact time.<br>236      Delivery boy was polite and understanding.<br>237      Recommended to friends as well.238    </div>239 240    <div class="divider"></div>241 242    <div class="review-block">243      <div class="review-top">244        <div class="avatar">[IMG: User Avatar]</div>245        <div class="stars">246          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z" fill="#FFC107"/></svg>247          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z" fill="#FFC107"/></svg>248          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z" fill="#FFC107"/></svg>249          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z" fill="#FFC107"/></svg>250          <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z" fill="#ddd"/></svg>251        </div>252      </div>253      <div class="meta">Debadutta • Kolkata • 29-01-2023</div>254      <div class="review-body">255        Thanks, she loved it. On time delivery.<br>256        Delivery executive was very polite257      </div>258    </div>259 260    <div class="load-more">Load More</div>261  </div>262 263  <div class="gap-section"></div>264 265  <!-- Recommendations -->266  <div class="section-title">Similar Gift Recommendations</div>267 268  <div class="cards">269    <div class="card">270      <div class="img-placeholder">[IMG: Red Rose Bouquet]</div>271      <div class="corner-fav">272        <svg width="40" height="40" viewBox="0 0 48 48">273          <path d="M24 40 C10 32 6 24 12 16 C16 10 24 12 24 18 C24 12 32 10 36 16 C42 24 38 32 24 40" fill="none" stroke="#999" stroke-width="3"/>274        </svg>275      </div>276      <div class="card-title">Red Rose Bouquet</div>277    </div>278 279    <div class="card">280      <div class="img-placeholder">[IMG: Floral Bouquet with Ribbon]</div>281      <div class="corner-fav">282        <svg width="40" height="40" viewBox="0 0 48 48">283          <path d="M24 40 C10 32 6 24 12 16 C16 10 24 12 24 18 C24 12 32 10 36 16 C42 24 38 32 24 40" fill="none" stroke="#999" stroke-width="3"/>284        </svg>285      </div>286      <div class="card-title">Floral Enchantment Bouquet</div>287    </div>288  </div>289 290  <!-- Bottom action bar -->291  <div class="bottom-bar">292    <div class="btn btn-outline">MAKE IT EXTRA SPECIAL</div>293    <div class="btn btn-primary">294      ADD TO CART295      <svg width="44" height="44" viewBox="0 0 48 48">296        <circle cx="18" cy="38" r="3.6" fill="#fff"/>297        <circle cx="34" cy="38" r="3.6" fill="#fff"/>298        <path d="M8 10h6l4 18h18l4-14H16" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>299      </svg>300    </div>301  </div>302 303  <!-- System navigation bar -->304  <div class="system-bar"></div>305 306</div>307</body>308</html>