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>Chat - Offer</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#f4f7f7; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;12    color:#083c3b;13  }14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    background:#073b3a; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; box-sizing:border-box; font-weight:600;19  }20  .status-right { display:flex; align-items:center; gap:28px; opacity:0.9; }21  .header {22    position:absolute; top:120px; left:0; width:100%; height:230px;23    background:#073b3a; color:#eaf3f3; box-sizing:border-box; padding:26px 36px 20px 36px;24  }25  .header-top { display:flex; align-items:center; justify-content:space-between; }26  .left-group { display:flex; align-items:center; gap:26px; }27  .back-btn svg { width:40px; height:40px; fill:#eaf3f3; }28  .listing-photo {29    width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD;30    display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; border-radius:12px; position:relative;31  }32  .avatar {33    position:absolute; bottom:-10px; right:-10px; width:56px; height:56px; border-radius:50%;34    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:18px;35  }36  .name { font-size:40px; font-weight:700; color:#fff; }37  .header-icons { display:flex; align-items:center; gap:32px; }38  .header-icons svg { width:44px; height:44px; fill:#eaf3f3; }39  .header-bottom {40    margin-top:18px; display:flex; align-items:center; justify-content:space-between;41    font-size:30px; color:#cfe4e3;42  }43 44  .chat-area {45    position:absolute; top:350px; left:0; width:100%; height:1000px;46    background:#e9efef; box-sizing:border-box; padding:30px 36px;47  }48  .day-label { text-align:center; color:#1c4e4c; font-size:34px; margin:12px 0 26px; }49  .bubble { max-width:740px; padding:26px 24px; border-radius:18px; position:relative; box-sizing:border-box; }50  .out { margin-left:auto; background:#c7d2ff; color:#0f2e68; }51  .in { background:#d5dfdd; color:#0e3a39; }52  .bubble .meta { position:absolute; right:18px; bottom:8px; font-size:24px; color:#365e5c; display:flex; align-items:center; gap:10px; }53  .tick { width:28px; height:28px; }54  .tail-right { position:absolute; right:0; bottom:-10px; width:0; height:0; border-left:22px solid #c7d2ff; border-top:14px solid transparent; border-bottom:14px solid transparent; }55  .tail-right.dark { border-left-color:#2e4f93; }56  .msg-row { display:flex; align-items:flex-end; gap:18px; margin-top:22px; }57  .mini-avatar {58    width:64px; height:64px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;59    display:flex; align-items:center; justify-content:center; color:#757575; font-size:18px;60  }61 62  .offer-card {63    max-width:620px; padding:28px 26px; border-radius:22px; background:#2e4f93; color:#fff;64    margin:26px 0 12px auto; position:relative;65  }66  .offer-title { font-size:34px; font-weight:800; letter-spacing:1px; }67  .offer-amt { font-size:60px; font-weight:800; margin-top:6px; }68  .offer-card .meta { position:absolute; right:18px; bottom:10px; font-size:24px; color:#cdd8ff; display:flex; align-items:center; gap:10px; }69  .edit-pill {70    margin:10px 36px 0 auto; width:240px; height:80px; border-radius:40px;71    border:2px solid #9fb2b1; color:#0f3f3e; background:#f7fbfb;72    display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 2px 0 rgba(0,0,0,0.08);73  }74 75  .nav-tabs {76    position:absolute; top:1350px; left:0; width:100%; height:160px; background:#ffffff;77    border-top:1px solid #e0e4e4; box-shadow: inset 0 4px 0 rgba(0,0,0,0.02);78    display:flex; align-items:center; justify-content:space-around; color:#0f3f3e;79  }80  .tab { display:flex; align-items:center; gap:18px; font-size:34px; font-weight:700; opacity:0.55; }81  .tab.active { opacity:1; }82  .tab svg { width:56px; height:56px; fill:#0f3f3e; }83  .tab-indicator {84    position:absolute; bottom:0; left:540px; width:540px; height:6px; background:#0f3f3e;85  }86  .center-dash {87    position:absolute; top:18px; left:50%; transform:translateX(-50%);88    width:90px; height:10px; border-radius:5px; background:#cfd6d5; opacity:0.8;89  }90 91  .offer-page {92    position:absolute; top:1510px; left:0; width:100%; height:850px; background:#ffffff;93    display:flex; flex-direction:column; align-items:center; padding-top:70px; box-sizing:border-box;94  }95  .offer-page h2 { margin:0; font-size:44px; color:#0f3f3e; letter-spacing:0.5px; }96  .big-amt { font-size:90px; font-weight:800; color:#0f3f3e; margin:28px 0 26px; }97  .subtext { font-size:34px; color:#1c4e4c; opacity:0.8; }98  .edit-outline {99    margin-top:80px; width:940px; height:120px; border-radius:22px; border:4px solid #0f3f3e;100    color:#0f3f3e; background:transparent; display:flex; align-items:center; justify-content:center;101    font-size:44px; font-weight:700;102  }103 104  .gesture {105    position:absolute; bottom:0; left:0; width:100%; height:40px; background:#000;106  }107 108  .rupee { font-weight:800; }109</style>110</head>111<body>112<div id="render-target">113  <div class="status-bar">114    <div style="font-size:38px;">8:26</div>115    <div class="status-right">116      <!-- simple status dots/icons -->117      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#fff" opacity="0.25"/></svg>118      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="#fff" opacity="0.35"/></svg>119      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/></svg>120      <svg viewBox="0 0 24 24"><path d="M3 7h14v10H3z" fill="#fff"/><rect x="18" y="9" width="3" height="6" fill="#fff"/></svg>121    </div>122  </div>123 124  <div class="header">125    <div class="header-top">126      <div class="left-group">127        <div class="back-btn">128          <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#eaf3f3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>129        </div>130        <div class="listing-photo">131          [IMG: Bike Photo]132          <div class="avatar">[IMG: Avatar]</div>133        </div>134        <div class="name">mukesh</div>135      </div>136      <div class="header-icons">137        <!-- phone with question -->138        <svg viewBox="0 0 24 24">139          <path d="M6 2l4 2-2 3c2 4 5 6 9 7l3-2 2 4c-7 3-15-5-16-14z" />140          <text x="17" y="7" font-size="8" fill="#eaf3f3">?</text>141        </svg>142        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>143      </div>144    </div>145    <div class="header-bottom">146      <div>Tvs apache 160 4V...</div>147      <div>₹ 79,000</div>148      <div>19500</div>149    </div>150  </div>151 152  <div class="chat-area">153    <div class="day-label">Yesterday</div>154 155    <div class="bubble out">156      Hi, Can we talk about the deal?157      <div class="meta">03:51 pm158        <svg class="tick" viewBox="0 0 24 24">159          <path d="M3 13l4 4 6-9" stroke="#365e5c" stroke-width="2" fill="none" stroke-linecap="round" />160          <path d="M10 13l4 4 6-9" stroke="#365e5c" stroke-width="2" fill="none" stroke-linecap="round" />161        </svg>162      </div>163      <div class="tail-right"></div>164    </div>165 166    <div class="msg-row">167      <div class="mini-avatar">[IMG]</div>168      <div class="bubble in" style="min-width:300px;">169        Yes170        <div class="meta" style="right:14px;">03:51 pm</div>171      </div>172    </div>173 174    <div class="day-label" style="margin-top:40px;">Today</div>175 176    <div class="offer-card">177      <div class="offer-title">YOUR OFFER</div>178      <div class="offer-amt"><span class="rupee">₹</span> 75,000</div>179      <div class="meta">08:26 am180        <svg class="tick" viewBox="0 0 24 24">181          <path d="M3 13l4 4 6-9" stroke="#cdd8ff" stroke-width="2" fill="none" stroke-linecap="round" />182          <path d="M10 13l4 4 6-9" stroke="#cdd8ff" stroke-width="2" fill="none" stroke-linecap="round" />183        </svg>184      </div>185      <div class="tail-right dark"></div>186    </div>187 188    <div class="edit-pill">Edit Offer</div>189  </div>190 191  <div class="nav-tabs">192    <div class="center-dash"></div>193    <div class="tab">194      <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="#0f3f3e"/><path d="M7 11h10v2H7z" fill="#fff" opacity="0.7"/></svg>195      CHAT196    </div>197    <div class="tab active">198      <svg viewBox="0 0 24 24"><path d="M3 12h6l2-3 3 5h7l-4 6H7z" fill="#0f3f3e"/></svg>199      MAKE OFFER200    </div>201    <div class="tab-indicator"></div>202  </div>203 204  <div class="offer-page">205    <h2>YOUR OFFER:</h2>206    <div class="big-amt"><span class="rupee">₹</span> 75,000</div>207    <div class="subtext">Waiting for seller’s response</div>208    <div class="edit-outline">Edit Offer</div>209  </div>210 211  <div class="gesture"></div>212</div>213</body>214</html>