GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Messenger Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 80px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #333;24    font-size: 36px;25  }26  .status-icons {27    display: flex; align-items: center; gap: 26px;28  }29  .dot { width: 16px; height: 16px; background:#4b4b4b; border-radius:50%; opacity:.8; }30 31  /* Header */32  .chat-header {33    height: 140px;34    border-bottom: 1px solid #eee;35    display: flex;36    align-items: center;37    padding: 0 24px;38    gap: 18px;39  }40  .back-btn {41    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; color:#7B1FFF;42  }43  .avatar {44    width: 92px; height: 92px; border-radius: 50%; background:#E0E0E0; border:1px solid #BDBDBD;45    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;46  }47  .hdr-text { flex:1; }48  .hdr-title { font-size:48px; font-weight:700; }49  .hdr-sub { font-size:28px; color:#777; margin-top:6px; }50  .hdr-actions { display:flex; gap:24px; }51  .circle-action {52    width: 72px; height: 72px; border-radius: 50%;53    background:#F3E8FF; display:flex; align-items:center; justify-content:center;54    color:#7B1FFF;55  }56  .circle-action svg { width:36px; height:36px; }57 58  /* Chat area */59  .chat-area {60    position: absolute;61    top: 220px; /* 80 + 140 */62    bottom: 380px; /* input + thumbnails area will overlap */63    left: 0; right: 0;64    overflow: hidden;65    padding: 18px 24px 0 24px;66  }67  .sys-time {68    text-align:center; color:#999; font-size:26px; margin: 18px 0 8px;69  }70  .sys-note {71    text-align:center; color:#888; font-size:28px; margin-bottom: 26px;72  }73  .row { width:100%; display:block; margin: 12px 0; }74  .bubble {75    display:inline-block;76    max-width: 740px;77    padding: 22px 26px;78    border-radius: 32px;79    font-size: 36px;80    line-height: 1.2;81  }82  .left { text-align:left; }83  .left .bubble { background:#F1F1F1; color:#222; border-top-left-radius: 10px; }84  .right { text-align:right; }85  .right .bubble { background:#7B1FFF; color:#fff; border-top-right-radius: 10px; }86  .small-grey { color:#777; font-size:27px; margin: 12px 0 4px 94px; }87  .avatar-inline {88    width: 64px; height:64px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;89    display:inline-flex; vertical-align:top; margin-right: 16px;90  }91  .left .with-avatar { display:flex; align-items:flex-start; }92  .left .with-avatar .bubble { margin-left: 8px; }93 94  /* Input area */95  .input-area {96    position: absolute;97    left: 0; right: 0; bottom: 240px;98    height: 140px;99    padding: 16px 24px;100    background: #fff;101    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);102  }103  .input-bar {104    height: 100%;105    background: #F2F2F2;106    border-radius: 60px;107    display:flex;108    align-items:center;109    padding: 0 20px;110    gap: 22px;111  }112  .ib-icon { width: 72px; height: 72px; border-radius:50%; background:#ffffff; border:1px solid #DDD; display:flex; align-items:center; justify-content:center; }113  .ib-icon svg { width:34px; height:34px; }114  .text-field { flex:1; color:#555; font-size:36px; }115  .emoji-like { display:flex; gap:22px; align-items:center; }116  .like {117    width: 72px; height:72px; border-radius:50%; background:#EDE3FF; display:flex; align-items:center; justify-content:center; color:#7B1FFF;118  }119 120  /* Media thumbnails grid */121  .thumbs {122    position:absolute;123    left:0; right:0; bottom:0;124    height: 240px;125    padding: 10px 12px;126    background:#fff;127    display:grid;128    grid-template-columns: repeat(4, 1fr);129    grid-gap: 12px;130    border-top: 1px solid #eee;131  }132  .thumb {133    background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 6px;134    display:flex; align-items:center; justify-content:center;135    color:#757575; font-size:24px; text-align:center; padding: 10px;136  }137 138  /* Simple SVGs */139  .icon svg { fill: currentColor; }140 141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div style="display:flex; align-items:center; gap:18px;">149      <div style="font-weight:600;">12:26</div>150      <div class="dot"></div>151      <div class="dot"></div>152      <div class="dot" style="width:14px;height:14px;"></div>153    </div>154    <div class="status-icons">155      <div class="dot"></div>156      <div class="dot"></div>157      <div class="dot"></div>158    </div>159  </div>160 161  <!-- Header -->162  <div class="chat-header">163    <div class="back-btn icon">164      <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>165    </div>166    <div class="avatar">User</div>167    <div class="hdr-text">168      <div class="hdr-title">Amelia</div>169      <div class="hdr-sub">Active 2 hours ago</div>170    </div>171    <div class="hdr-actions">172      <div class="circle-action icon">173        <svg viewBox="0 0 24 24"><path d="M6 3h3l2 4h7a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H6z" /></svg>174      </div>175      <div class="circle-action icon">176        <svg viewBox="0 0 24 24"><path d="M17 10l5-3v10l-5-3v3H3V7h14z"/></svg>177      </div>178      <div class="circle-action icon">179        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-2 9h4v-2h-2v-3h-2v5z"/></svg>180      </div>181    </div>182  </div>183 184  <!-- Chat area -->185  <div class="chat-area">186 187    <div class="sys-time">DEC 12 AT 9:56 AM</div>188    <div class="sys-note">You are now connected on Messenger</div>189 190    <!-- Incoming "Hi" -->191    <div class="row left with-avatar">192      <div class="avatar-inline"></div>193      <div class="bubble">Hi</div>194    </div>195 196    <!-- Outgoing "Hello" -->197    <div class="row right">198      <div class="bubble">Hello</div>199    </div>200 201    <div class="sys-time">DEC 12 AT 10:53 AM</div>202    <div class="small-grey">Amelia replied to you</div>203 204    <!-- Series of left bubbles -->205    <div class="row left with-avatar">206      <div class="avatar-inline"></div>207      <div>208        <div class="bubble" style="margin-bottom:14px;">Hello</div>209        <div class="bubble" style="margin-bottom:14px;">how you are</div>210        <div class="bubble" style="margin-bottom:14px;">I hope you are doing good</div>211        <div class="bubble" style="margin-bottom:14px;">How's your family</div>212        <div class="bubble">Nd your work</div>213      </div>214    </div>215 216  </div>217 218  <!-- Input area -->219  <div class="input-area">220    <div class="input-bar">221      <div class="ib-icon icon">222        <svg viewBox="0 0 24 24"><path d="M12 22l-2-4H6l-2-4 2-4h4l2-4 2 4h4l2 4-2 4h-4z"/></svg>223      </div>224      <div class="ib-icon icon">225        <svg viewBox="0 0 24 24"><path d="M21 5H3v14l6-4 6 4 6-4z"/></svg>226      </div>227      <div class="ib-icon icon">228        <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z M8 12l3 3 5-5" stroke="currentColor" fill="none" stroke-width="2"/></svg>229      </div>230      <div class="ib-icon icon">231        <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 16 0V6l-8 4-8-4v6z"/></svg>232      </div>233      <div class="text-field">Message</div>234      <div class="emoji-like">235        <div class="ib-icon icon">236          <svg viewBox="0 0 24 24"><circle cx="9" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/><path d="M8 15c1.5 1 6.5 1 8 0" stroke="currentColor" fill="none" stroke-width="2"/></svg>237        </div>238        <div class="like icon">239          <svg viewBox="0 0 24 24"><path d="M9 21V9l4-5 1 1v6h6v10zM3 9h4v12H3z"/></svg>240        </div>241      </div>242    </div>243  </div>244 245  <!-- Thumbnails -->246  <div class="thumbs">247    <div class="thumb">[IMG: App promo screenshot]</div>248    <div class="thumb">[IMG: Botanical illustration]</div>249    <div class="thumb">[IMG: Purple and yellow flowers]</div>250    <div class="thumb">[IMG: Purple and yellow flowers]</div>251 252    <div class="thumb">[IMG: Purple & yellow flowers close]</div>253    <div class="thumb">[IMG: Blue grid pattern]</div>254    <div class="thumb">[IMG: Blue grid pattern]</div>255    <div class="thumb">[IMG: Black square / dark]</div>256  </div>257 258</div>259</body>260</html>