GD-ML/AndroidCode

1<html>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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff; color:#111;10  }11 12  /* Status bar */13  .status-bar {14    height:80px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15    font-weight:600; font-size:36px; color:#222;16  }17  .status-icons { display:flex; align-items:center; gap:22px; }18  .status-dot { width:24px; height:24px; border-radius:50%; background:#5f5f5f; opacity:0.6; }19  .status-rect { width:18px; height:28px; border-radius:4px; background:#5f5f5f; opacity:0.6; }20 21  /* Header */22  .header {23    height:140px; border-bottom:1px solid #eee;24    display:flex; align-items:center; padding:0 24px; gap:22px;25  }26  .icon-btn {27    width:72px; height:72px; display:flex; align-items:center; justify-content:center;28    border-radius:36px; background:#f3f3f7;29  }30  .avatar {31    width:84px; height:84px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;32    display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;33  }34  .title-area { flex:1; }35  .title-area .name { font-size:44px; font-weight:700; }36  .title-area .sub { font-size:28px; color:#70757a; margin-top:6px; }37  .header-actions { display:flex; align-items:center; gap:22px; }38 39  /* Chat area */40  .chat-area { position:relative; padding:24px 24px 0; height:1400px; overflow:hidden; }41  .bubble {42    max-width:720px; background:#7A46F7; color:#fff; border-radius:28px; padding:26px 32px; font-size:36px; line-height:1.3;43    margin-left:auto; margin-top:18px;44  }45  .sub-note { color:#8a8a8a; font-size:28px; margin:12px 12px 0 auto; width:max-content; }46  .timestamp {47    text-align:center; color:#777; font-size:30px; margin:24px 0;48  }49 50  /* Image message card */51  .image-card {52    width:820px; height:1080px; margin:0 auto; border-radius:40px; background:#fafafa; border:1px solid #e5e5e5;53    position:relative; box-shadow:0 1px 0 rgba(0,0,0,0.06);54  }55  .image-placeholder {56    position:absolute; left:30px; top:30px; right:30px; bottom:30px;57    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:28px;58    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; text-align:center; padding:20px;59  }60  .side-actions {61    position:absolute; left:-100px; top:340px; display:flex; flex-direction:column; gap:26px;62  }63  .side-fab {64    width:120px; height:120px; border-radius:60px; background:#ffffff; border:1px solid #ddd;65    box-shadow:0 8px 20px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center;66  }67  .checkmark {68    position:absolute; right:26px; bottom:26px;69    width:58px; height:58px; border-radius:50%; border:3px solid #3b82f6; display:flex; align-items:center; justify-content:center; background:#fff;70  }71  .checkmark svg { width:30px; height:30px; fill:#3b82f6; }72 73  /* Composer */74  .composer {75    position:absolute; left:0; right:0; bottom:780px; /* sit above gallery */76    height:170px; border-top:1px solid #eee; background:#fff;77    display:flex; align-items:center; gap:24px; padding:0 24px;78  }79  .composer .circle { width:84px; height:84px; border-radius:42px; background:#f4f4f8; display:flex; align-items:center; justify-content:center; }80  .input {81    flex:1; height:100px; border:1px solid #ddd; border-radius:50px; padding:0 32px; font-size:34px; display:flex; align-items:center; color:#555;82    background:#fff;83  }84 85  /* Gallery section */86  .gallery {87    position:absolute; left:0; right:0; bottom:0;88    height:780px; background:#ffffff; border-top:1px solid #eee; padding:18px 18px 32px;89    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:18px; overflow:hidden;90  }91  .thumb {92    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;93  }94 95  /* Simple inline SVG styling */96  svg { fill:#5a5a5a; }97  .icon-white svg { fill:#444; }98 99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div>12:27</div>107    <div class="status-icons">108      <div class="status-dot"></div>109      <div class="status-rect"></div>110      <div class="status-dot"></div>111    </div>112  </div>113 114  <!-- Header -->115  <div class="header">116    <div class="icon-btn">117      <svg viewBox="0 0 24 24" width="38" height="38">118        <path d="M15.5 4l-9 8 9 8 1.5-1.8-6.6-6.2 6.6-6.2z"/>119      </svg>120    </div>121    <div class="avatar">Avatar</div>122    <div class="title-area">123      <div class="name">Amelia</div>124      <div class="sub">Active 2 hours ago</div>125    </div>126    <div class="header-actions">127      <div class="icon-btn">128        <svg viewBox="0 0 24 24" width="34" height="34"><path d="M6 8v8l9-4-9-4zm11 10a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1v12h1z"/></svg>129      </div>130      <div class="icon-btn">131        <svg viewBox="0 0 24 24" width="36" height="36"><path d="M4 7h12v10H4zM18 9l4-2v10l-4-2V9z"/></svg>132      </div>133      <div class="icon-btn">134        <svg viewBox="0 0 24 24" width="34" height="34"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>135      </div>136    </div>137  </div>138 139  <!-- Chat area -->140  <div class="chat-area">141    <div class="bubble">Good, how about you?</div>142    <div class="sub-note">Delivered</div>143 144    <div class="timestamp">12:27 PM</div>145 146    <div class="image-card">147      <div class="image-placeholder">[IMG: Botanical illustration of violets with roots and blossoms]</div>148 149      <!-- Overlay quick actions -->150      <div class="side-actions">151        <div class="side-fab">152          <svg viewBox="0 0 24 24" width="40" height="40"><path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7z"/></svg>153        </div>154        <div class="side-fab">155          <svg viewBox="0 0 24 24" width="42" height="42"><path d="M12 5l3 3h4v10H5V8h4l3-3zm0 3h0l-2 2H7v8h10V10h-3l-2-2z"/></svg>156        </div>157      </div>158 159      <div class="checkmark">160        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.6-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>161      </div>162    </div>163  </div>164 165  <!-- Composer -->166  <div class="composer">167    <div class="circle">168      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>169    </div>170    <div class="circle">171      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M12 5l3 3h4v10H5V8h4l3-3zm0 3l-2 2H7v8h10V10h-3l-2-2z"/></svg>172    </div>173    <div class="circle">174      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M21 15l-5-3v6l5-3zM3 7h11v10H3z"/></svg>175    </div>176    <div class="circle">177      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M12 3a8 8 0 0 0-8 8c0 3.87 2.74 7.12 6.4 7.86l-.4 2.14 2-1.5 2 1.5-.4-2.14A8 8 0 0 0 20 11a8 8 0 0 0-8-8z"/></svg>178    </div>179    <div class="input">Message</div>180    <div class="circle">181      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M12 17c2.76 0 5-2.24 5-5S14.76 7 12 7 7 9.24 7 12s2.24 5 5 5z"/></svg>182    </div>183    <div class="circle">184      <svg viewBox="0 0 24 24" width="34" height="34"><path d="M14 9l-4 4 4 4V9z"/></svg>185    </div>186  </div>187 188  <!-- Gallery thumbnails -->189  <div class="gallery">190    <div class="thumb">[IMG: App ad banner]</div>191    <div class="thumb">[IMG: Botanical drawing thumbnail]</div>192    <div class="thumb">[IMG: Purple-yellow pansies]</div>193    <div class="thumb">[IMG: Pansies group]</div>194 195    <div class="thumb">[IMG: Pansies close-up]</div>196    <div class="thumb">[IMG: Blue grid artwork]</div>197    <div class="thumb">[IMG: Blue grid artwork]</div>198    <div class="thumb">[IMG: Black square]</div>199 200    <div class="thumb">[IMG: Blue streaks]</div>201    <div class="thumb">[IMG: Error loading]</div>202    <div class="thumb">[IMG: Color scribbles]</div>203    <div class="thumb">[IMG: Error loading]</div>204  </div>205 206</div>207</body>208</html>