GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Chat Make Offer UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff; border-radius:24px;12 box-shadow: 0 2px 8px rgba(0,0,0,0.08);13 }14 /* Top status + header */15 .top-bar {16 background:#0b3a38;17 color:#eaf5f4;18 height:260px;19 padding:24px 32px 0 32px;20 }21 .status {22 height:60px;23 display:flex; align-items:center; justify-content:space-between;24 font-weight:600; font-size:38px;25 }26 .status .icons { display:flex; align-items:center; gap:24px; opacity:0.9; }27 .status .right { display:flex; align-items:center; gap:18px; }28 .app-header {29 margin-top:16px;30 display:flex; align-items:center; justify-content:space-between;31 }32 .left-head { display:flex; align-items:center; gap:24px; }33 .back-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }34 .avatar {35 width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;36 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;37 position:relative;38 }39 .mini-badge {40 position:absolute; right:-12px; bottom:-12px;41 width:56px; height:56px; background:#ffd54f; border-radius:50%;42 display:flex; align-items:center; justify-content:center;43 }44 .mini-badge-inner {45 width:36px; height:36px; background:#0b3a38; border-radius:50%;46 }47 .contact-name { color:#eaf5f4; font-size:48px; font-weight:700; }48 .head-actions { display:flex; align-items:center; gap:28px; }49 .head-actions svg { width:48px; height:48px; fill:none; stroke:#eaf5f4; stroke-width:5; }50 .item-meta {51 margin-top:12px;52 display:flex; align-items:center; justify-content:space-between;53 color:#eaf5f4; opacity:0.95;54 font-size:34px;55 padding:0 8px;56 }57 .item-meta .title { max-width:540px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }58 /* Chat area */59 .chat-area {60 position:absolute; left:0; right:0;61 top:260px; bottom:720px;62 background:#e7eff0;63 padding:24px 32px;64 overflow:hidden;65 }66 .date-sep {67 text-align:center; color:#6c7c7c; font-size:40px; font-weight:600; margin:24px 0 32px;68 }69 .bubble-right, .bubble-left {70 max-width:760px; padding:28px 28px; border-radius:18px; position:relative; margin-bottom:32px;71 display:inline-flex; align-items:center; gap:18px;72 }73 .bubble-right {74 background:#cfd9ff;75 margin-left:auto;76 }77 .bubble-right:after {78 content:""; position:absolute; right:-14px; bottom:10px;79 width:0; height:0; border-left:14px solid #cfd9ff; border-top:14px solid transparent; border-bottom:14px solid transparent;80 }81 .bubble-left {82 background:#c8d6d7;83 margin-left:120px;84 }85 .bubble-left:before {86 content:""; position:absolute; left:-14px; bottom:10px;87 width:0; height:0; border-right:14px solid #c8d6d7; border-top:14px solid transparent; border-bottom:14px solid transparent;88 }89 .msg-text { font-size:40px; color:#113536; }90 .msg-meta { margin-left:auto; display:flex; align-items:center; gap:12px; color:#365a5a; font-size:30px; }91 .chat-avatar {92 position:absolute; left:32px; width:76px; height:76px; border-radius:50%;93 background:#ffd54f; display:flex; align-items:center; justify-content:center;94 top: calc(260px + 180px);95 }96 .chat-avatar .inner { width:50px; height:50px; background:#0b3a38; border-radius:50%; }97 /* Tabs bar */98 .tabs {99 position:absolute; left:0; right:0; bottom:720px; height:120px; background:#ffffff;100 border-top:1px solid #e0e6e6;101 display:flex; align-items:center; justify-content:space-between; padding:0 36px;102 }103 .tabs .handle { width:96px; height:14px; background:#b9c6c6; border-radius:7px; }104 .tab-item { display:flex; align-items:center; gap:18px; color:#6c7c7c; font-size:34px; font-weight:700; }105 .tab-item.active { color:#0b3a38; position:relative; }106 .tab-item.active:after {107 content:""; position:absolute; bottom:-20px; left:0; width:420px; height:6px; background:#0b3a38;108 }109 .tab-icon { width:48px; height:48px; stroke:#6c7c7c; stroke-width:5; }110 .tab-item.active .tab-icon { stroke:#0b3a38; }111 /* Offer section */112 .offer-section {113 position:absolute; left:0; right:0; bottom:120px; top:auto; height:600px; background:#ffffff;114 padding:24px 36px;115 }116 .chips { display:flex; gap:24px; flex-wrap:nowrap; margin-bottom:36px; }117 .chip {118 padding:18px 28px; border:3px solid #0b3a38; border-radius:999px; color:#0b3a38; font-size:34px; font-weight:700;119 }120 .big-price { font-size:90px; color:#0b3a38; font-weight:800; letter-spacing:1px; margin:16px 0 12px; }121 .underline { width:320px; height:6px; background:#0b3a38; margin-bottom:28px; }122 .note-row { display:flex; align-items:center; justify-content:space-between; }123 .offer-note {124 background:#4faeae; color:#ffffff; padding:26px 28px; border-radius:18px; width:720px; position:relative;125 }126 .offer-note:before {127 content:""; position:absolute; left:28px; top:-18px; width:0; height:0; border-bottom:18px solid #4faeae; border-left:18px solid transparent; border-right:18px solid transparent;128 }129 .offer-note .title { font-size:44px; font-weight:800; margin-bottom:8px; }130 .offer-note .sub { font-size:32px; opacity:0.95; }131 .send-btn {132 width:220px; height:120px; background:#0b3a38; color:#ffffff; border-radius:16px;133 display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:700;134 }135 /* OS nav bar */136 .os-bar {137 position:absolute; left:0; right:0; bottom:0; height:120px; background:#000000;138 display:flex; align-items:center; justify-content:center;139 }140 .os-pill { width:200px; height:14px; background:#ffffff; opacity:0.85; border-radius:7px; }141</style>142</head>143<body>144<div id="render-target">145 146 <div class="top-bar">147 <div class="status">148 <div class="icons">149 <span>8:24</span>150 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#eaf5f4" fill="none" stroke-width="3"/></svg>151 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="4" stroke="#eaf5f4" fill="none" stroke-width="3"/></svg>152 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" fill="#eaf5f4"/><circle cx="12" cy="12" r="2" fill="#eaf5f4"/><circle cx="18" cy="12" r="2" fill="#eaf5f4"/></svg>153 </div>154 <div class="right">155 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#eaf5f4" stroke-width="3"/></svg>156 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 17l3 3c5-3 9-7 12-12l-3-3c-4 4-8 8-12 12z" stroke="#eaf5f4" stroke-width="2" fill="none"/></svg>157 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M20 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" stroke="#eaf5f4" fill="none" stroke-width="2"/><path d="M12 8v8" stroke="#eaf5f4" stroke-width="2"/><path d="M8 12h8" stroke="#eaf5f4" stroke-width="2"/></svg>158 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M22 12h-2M4 12H2M12 2v2M12 20v2" stroke="#eaf5f4" stroke-width="2"/></svg>159 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M20 7v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" stroke="#eaf5f4" fill="none" stroke-width="2"/><path d="M12 7v7" stroke="#eaf5f4" stroke-width="2"/></svg>160 </div>161 </div>162 163 <div class="app-header">164 <div class="left-head">165 <div class="back-btn">166 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#eaf5f4" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>167 </div>168 <div class="avatar">169 [IMG: Bike photo]170 <div class="mini-badge"><div class="mini-badge-inner"></div></div>171 </div>172 <div class="contact-name">mukesh</div>173 </div>174 <div class="head-actions">175 <svg viewBox="0 0 24 24"><path d="M6 2l4 4-2 2 6 6 2-2 4 4" stroke-linecap="round" stroke-linejoin="round"/></svg>176 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5M12 16h.01"/></svg>177 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="#eaf5f4"/><circle cx="12" cy="12" r="1.5" fill="#eaf5f4"/><circle cx="12" cy="19" r="1.5" fill="#eaf5f4"/></svg>178 </div>179 </div>180 181 <div class="item-meta">182 <div class="title">Tvs apachie 160 4V...</div>183 <div style="font-weight:800">₹ 79,000</div>184 <div>19500</div>185 </div>186 </div>187 188 <div class="chat-area">189 <div class="date-sep">Yesterday</div>190 191 <div class="bubble-right">192 <div class="msg-text">Hi, Can we talk about the deal?</div>193 <div class="msg-meta">194 <span>03:51 pm</span>195 <svg width="32" height="32" viewBox="0 0 24 24">196 <path d="M5 13l4 4 10-10" stroke="#365a5a" stroke-width="2" fill="none"/>197 <path d="M3 11l4 4 8-8" stroke="#365a5a" stroke-width="2" fill="none"/>198 </svg>199 </div>200 </div>201 202 <div class="chat-avatar"><div class="inner"></div></div>203 204 <div class="bubble-left" style="margin-top:40px">205 <div class="msg-text">Yes</div>206 <div class="msg-meta"><span>03:51 pm</span></div>207 </div>208 </div>209 210 <div class="tabs">211 <div class="tab-item">212 <svg class="tab-icon" viewBox="0 0 24 24"><path d="M4 7h12a4 4 0 0 1 4 4v6l-4-3H8a4 4 0 0 1-4-4V7z" fill="none"/></svg>213 <span>CHAT</span>214 </div>215 <div class="handle"></div>216 <div class="tab-item active">217 <svg class="tab-icon" viewBox="0 0 24 24">218 <rect x="12" y="6" width="6" height="6" fill="none"/>219 <path d="M4 16c2 2 5 3 8 3s6-1 8-3l-3-2-3 1-3-2-3 2-1 1z" fill="none"/>220 </svg>221 <span>MAKE OFFER</span>222 </div>223 </div>224 225 <div class="offer-section">226 <div class="chips">227 <div class="chip">₹ 79,000</div>228 <div class="chip">₹ 75,000</div>229 <div class="chip">₹ 71,100</div>230 <div class="chip">₹ 67,100</div>231 <div class="chip">₹ 63,200</div>232 </div>233 234 <div class="big-price">₹75,000</div>235 <div class="underline"></div>236 237 <div class="note-row">238 <div class="offer-note">239 <div style="display:flex; align-items:center; gap:16px; margin-bottom:8px;">240 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M8 3l2 4-3 3 4 2 3-3 4 2" stroke="#ffffff" stroke-width="2" fill="none"/></svg>241 <div class="title">Very good offer!</div>242 </div>243 <div class="sub">High chances of seller’s response.</div>244 </div>245 <div class="send-btn">Send</div>246 </div>247 </div>248 249 <div class="os-bar"><div class="os-pill"></div></div>250 251</div>252</body>253</html>