GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Messenger UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #FFFFFF; color: #1f1f1f;11    box-sizing: border-box;12  }13 14  /* Status bar */15  .status-bar {16    height: 80px;17    padding: 0 28px;18    display: flex; align-items: center; justify-content: space-between;19    color: #2E2E2E; font-weight: 600; font-size: 36px;20  }21  .status-icons { display: flex; gap: 26px; align-items: center; }22  .status-icons svg { width: 34px; height: 34px; fill: #6E6E6E; }23 24  /* Header */25  .header {26    height: 150px; border-bottom: 1px solid #EAEAEA;27    display: flex; align-items: center; padding: 0 28px; gap: 24px;28    background: #FFFFFF;29  }30  .back-btn svg { width: 40px; height: 40px; fill: #9B4DFF; }31  .avatar {32    width: 80px; height: 80px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;33    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;34  }35  .title {36    flex: 1;37  }38  .name { font-size: 42px; font-weight: 700; }39  .sub { font-size: 26px; color: #8A8A8A; margin-top: 6px; }40  .header-actions { display: flex; gap: 26px; }41  .header-actions svg { width: 46px; height: 46px; fill: #7B46FF; }42 43  /* Conversation area */44  .chat {45    padding: 24px 28px 0 28px;46  }47  .timestamp {48    text-align: center; color: #9AA0A6; font-size: 26px; margin: 20px 0 6px 0;49  }50  .info-center {51    text-align: center; font-size: 28px; color: #7E7E7E; margin-bottom: 22px;52  }53  .row { display: flex; margin: 14px 0; }54  .row.left { justify-content: flex-start; }55  .row.right { justify-content: flex-end; }56  .bubble {57    max-width: 760px;58    padding: 22px 28px; border-radius: 30px;59    font-size: 34px; line-height: 1.25;60  }61  .bubble.left {62    background: #F1F1F1; color: #222; border-top-left-radius: 10px;63  }64  .bubble.right {65    background: #7B46FF; color: #FFFFFF; border-top-right-radius: 10px;66  }67  .reply-note { color: #8E8E8E; font-size: 26px; display: flex; align-items: center; gap: 10px; margin: 10px 0 16px 12px; }68  .reply-note svg { width: 24px; height: 24px; fill: #8E8E8E; }69 70  /* Composer */71  .composer {72    position: absolute; left: 0; right: 0; bottom: 720px;73    padding: 12px 22px; background: #FFFFFF;74    border-top: 1px solid #ECECEC;75  }76  .composer-top { display: flex; align-items: center; gap: 22px; }77  .round-icon {78    width: 70px; height: 70px; border-radius: 50%;79    display: flex; align-items: center; justify-content: center;80    background: #F4F4F4; border: 1px solid #E2E2E2;81  }82  .round-icon svg { width: 36px; height: 36px; fill: #6E6E6E; }83  .input-pill {84    flex: 1; height: 88px; border-radius: 44px; border: 1px solid #E0E0E0;85    display: flex; align-items: center; padding: 0 28px; font-size: 34px; color: #7E7E7E;86    background: #FFFFFF;87  }88  .emoji { margin-left: 16px; }89  .emoji svg, .thumb svg { width: 42px; height: 42px; fill: #7B46FF; }90  .thumb { margin-left: 18px; }91 92  /* Media picker */93  .media-picker {94    position: absolute; left: 0; right: 0; bottom: 0;95    padding: 20px 22px 26px 22px; background: #FFFFFF;96    border-top: 1px solid #EDEDED;97  }98  .media-grid {99    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;100    margin-top: 20px;101  }102  .img-box {103    height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD;104    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;105  }106 107  .action-bar {108    position: absolute; left: 22px; right: 22px; bottom: 260px;109    display: flex; justify-content: space-between; align-items: center;110  }111  .pill {112    height: 120px; border-radius: 60px; padding: 0 64px;113    display: flex; align-items: center; font-size: 40px; font-weight: 700;114    box-shadow: 0 6px 18px rgba(0,0,0,0.08);115  }116  .pill.edit { background: #FFFFFF; border: 1px solid #E6E6E6; color: #333; }117  .pill.send { background: #1677FF; color: #FFFFFF; }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status Bar -->124  <div class="status-bar">125    <div>12:26</div>126    <div class="status-icons">127      <!-- location -->128      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>129      <!-- wifi -->130      <svg viewBox="0 0 24 24"><path d="M2 8.5C7.5 4 16.5 4 22 8.5l-2 2C16 7 8 7 4 10.5l-2-2zM6 13.5c3-2.5 9-2.5 12 0l-2 2c-2.5-2-5.5-2-8 0l-2-2zM10.5 18.5L12 20l1.5-1.5L12 17l-1.5 1.5z"/></svg>131      <!-- battery -->132      <svg viewBox="0 0 24 24"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>133    </div>134  </div>135 136  <!-- Header -->137  <div class="header">138    <div class="back-btn">139      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>140    </div>141    <div class="avatar">Avatar</div>142    <div class="title">143      <div class="name">Amelia</div>144      <div class="sub">Active 2 hours ago</div>145    </div>146    <div class="header-actions">147      <!-- call -->148      <svg viewBox="0 0 24 24"><path d="M6.6 10.2c1.6 3.2 4 5.7 7.2 7.2l2.4-2.4c.3-.3.8-.4 1.2-.2 1 .4 2 .6 3.1.7.6.1 1 .6 1 1.2v3c0 .7-.6 1.3-1.3 1.2C13.6 20.6 3.4 10.4 1.1 2.7c-.1-.7.5-1.3 1.2-1.3h3c.6 0 1.1.4 1.2 1 .1 1 .3 2.1.7 3.1.2.4.1.9-.2 1.2l-2.4 2.3z"/></svg>149      <!-- video -->150      <svg viewBox="0 0 24 24"><path d="M3 6h12v12H3V6zm14 3l4-2v10l-4-2V9z"/></svg>151      <!-- info -->152      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 6h-2v2h2V8zm-2 4v6h2v-6h-2z"/></svg>153    </div>154  </div>155 156  <!-- Conversation -->157  <div class="chat">158    <div class="timestamp">DEC 12 AT 9:56 AM</div>159    <div class="info-center">You are now connected on Messenger</div>160 161    <div class="row left">162      <div class="bubble left">Hi</div>163    </div>164    <div class="row right">165      <div class="bubble right">Hello</div>166    </div>167 168    <div class="timestamp">DEC 12 AT 10:53 AM</div>169    <div class="reply-note">170      <!-- reply arrow -->171      <svg viewBox="0 0 24 24"><path d="M10 8V5l-7 7 7 7v-3h4c3.3 0 6-2.7 6-6s-2.7-6-6-6h-4z"/></svg>172      Amelia replied to you173    </div>174 175    <div class="row left"><div class="bubble left">Hello</div></div>176    <div class="row left"><div class="bubble left">how you are</div></div>177    <div class="row left"><div class="bubble left">I hope you are doing good</div></div>178    <div class="row left"><div class="bubble left">How's your family</div></div>179    <div class="row left">180      <div class="bubble left">Nd your work</div>181    </div>182  </div>183 184  <!-- Composer -->185  <div class="composer">186    <div class="composer-top">187      <div class="round-icon">188        <!-- plus -->189        <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>190      </div>191      <div class="round-icon">192        <!-- camera -->193        <svg viewBox="0 0 24 24"><path d="M9 5l2-2h2l2 2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3zm3 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>194      </div>195      <div class="round-icon">196        <!-- gallery -->197        <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4V6zm2 2v8h12V8H6zm1 7l3-4 2 3 2-2 3 3H7z"/></svg>198      </div>199      <div class="round-icon">200        <!-- mic -->201        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 14 0h-2zM11 19h2v3h-2z"/></svg>202      </div>203 204      <div class="input-pill">Message</div>205 206      <div class="emoji">207        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-4 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-8.5 6c1.7 2 4.4 3 6.5 3s4.8-1 6.5-3c-2.3-1-4.3-1.5-6.5-1.5S9.8 15 7.5 16z"/></svg>208      </div>209      <div class="thumb">210        <svg viewBox="0 0 24 24"><path d="M2 10h5v12H2V10zm7 12h8.5c1.1 0 2-.9 2-2l.5-7.5c0-1.1-.9-2-2-2h-5l1-4V4c0-1.1-.9-2-2-2l-3 7H9v13z"/></svg>211      </div>212    </div>213  </div>214 215  <!-- Action bar above media picker -->216  <div class="action-bar">217    <div class="pill edit">EDIT</div>218    <div class="pill send">SEND</div>219  </div>220 221  <!-- Media picker grid -->222  <div class="media-picker">223    <div class="media-grid">224      <div class="img-box">[IMG: App promo card]</div>225      <div class="img-box">[IMG: Botanical drawing]</div>226      <div class="img-box">[IMG: Flowers close-up]</div>227      <div class="img-box">[IMG: Flowers collage]</div>228      <div class="img-box">[IMG: Blue grid artwork]</div>229      <div class="img-box">[IMG: Dark image placeholder]</div>230    </div>231  </div>232 233</div>234</body>235</html>