GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Chat 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:#0e0f11; color:#fff;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:1080px; height:90px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 30px; color:#fff; font-size:34px; letter-spacing:0.5px;17    background:#0e0f11;18  }19  .status-left, .status-right { display:flex; align-items:center; gap:18px; }20  .dot { width:22px; height:22px; background:#fff; border-radius:50%; opacity:0.6; }21  .status-right .icon-box { width:32px; height:32px; border:2px solid #ccc; border-radius:6px; opacity:0.8; }22  /* Header */23  .header {24    position:absolute; top:90px; left:0; width:1080px; height:120px;25    display:flex; align-items:center; padding:0 26px;26    background:#141518; border-bottom:1px solid #222;27  }28  .back {29    width:64px; height:64px; display:flex; align-items:center; justify-content:center;30    margin-right:14px;31  }32  .avatar {33    width:76px; height:76px; border-radius:50%;34    background:#E0E0E0; border:1px solid #BDBDBD;35    display:flex; align-items:center; justify-content:center; color:#757575; font-size:20px;36    margin-right:16px;37  }38  .title-area { flex:1; }39  .title-area .name { font-size:42px; font-weight:700; }40  .title-area .status { font-size:26px; color:#b8b8b8; margin-top:6px; }41  .header-actions { display:flex; align-items:center; gap:28px; }42  .action-btn { width:60px; height:60px; border-radius:12px; background:#1f2024; display:flex; align-items:center; justify-content:center; }43  /* Chat area */44  .chat {45    position:absolute; top:210px; left:0; right:0; bottom:190px;46    padding:24px 30px 140px; overflow:hidden;47  }48  .timestamp {49    font-size:24px; color:#9aa0a6; margin:10px 12px;50    text-align:right;51  }52  .row { display:flex; margin:18px 0; }53  .left { justify-content:flex-start; }54  .right { justify-content:flex-end; }55  .bubble-left, .bubble-right {56    max-width:760px; padding:22px 26px; border-radius:26px;57    font-size:34px; line-height:1.35;58  }59  .bubble-left {60    background:#22252a; color:#e6e6e6; border-top-left-radius:10px;61  }62  .bubble-right {63    background:#1e4fbf; color:#fff; border-top-right-radius:10px;64  }65  /* Quoted block inside bubble */66  .quote {67    background:#163d8f; padding:16px; border-radius:18px; margin-bottom:16px; font-size:28px; color:#dbe4ff;68    border-left:4px solid #99b4ff;69  }70  /* Media placeholders */71  .img-placeholder {72    width:840px; height:480px;73    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;74    color:#757575; display:flex; align-items:center; justify-content:center; text-align:center; font-size:30px;75  }76  /* Audio bubble */77  .audio {78    display:flex; align-items:center; gap:24px;79  }80  .play {81    width:64px; height:64px; border-radius:50%; border:3px solid #cfe0ff; display:flex; align-items:center; justify-content:center;82    background:transparent;83  }84  .bar {85    flex:1; height:12px; background:#2d63d3; border-radius:8px; position:relative; min-width:400px;86  }87  .bar:after { content:""; position:absolute; right:18%; top:-6px; width:24px; height:24px; background:#cfe0ff; border-radius:50%; }88  .duration { font-size:30px; margin-left:10px; }89  /* Map card */90  .map-card {91    width:840px; border-radius:20px; overflow:hidden; background:#0f1114; border:1px solid #2a2a2a;92  }93  .map-top { height:440px; display:flex; align-items:center; justify-content:center; }94  .map-top .img-placeholder { width:100%; height:100%; border:none; border-radius:0; }95  .map-bottom { padding:26px; background:#1b1d22; }96  .map-title { font-size:48px; font-weight:700; margin-bottom:8px; }97  .map-sub { font-size:28px; color:#b7b7b7; }98  /* Composer */99  .composer {100    position:absolute; left:0; bottom:0; width:1080px; height:190px; padding:24px 26px;101    background:#0e0f11; border-top:1px solid #222;102    display:flex; align-items:center; gap:20px;103  }104  .plus {105    width:110px; height:110px; background:#2f80ff; color:#fff; border-radius:60px;106    display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:700;107    box-shadow:0 6px 16px rgba(47,128,255,0.45);108  }109  .input {110    flex:1; height:110px; background:#1a1c21; border-radius:60px;111    display:flex; align-items:center; padding:0 30px; gap:24px; border:1px solid #2a2d33;112  }113  .placeholder { flex:1; font-size:36px; color:#9aa0a6; }114  .tool { width:64px; height:64px; border-radius:16px; background:#23262b; display:flex; align-items:center; justify-content:center; }115  .tool span { font-size:34px; color:#c9cbd0; }116  /* small sent arrow marker beside media messages */117  .sent-arrow {118    width:0; height:0; border-top:16px solid transparent; border-bottom:16px solid transparent;119    border-right:16px solid #22252a; margin-right:14px; align-self:center;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status bar -->127  <div class="status-bar">128    <div class="status-left">129      <div>11:38</div>130      <div class="dot"></div>131      <div class="dot"></div>132      <div class="dot"></div>133      <div class="dot"></div>134      <div class="dot" style="opacity:0.4;"></div>135    </div>136    <div class="status-right">137      <div class="icon-box"></div>138      <div class="icon-box" style="border-radius:50%;"></div>139    </div>140  </div>141 142  <!-- Header -->143  <div class="header">144    <div class="back">145      <svg width="42" height="42" viewBox="0 0 42 42" fill="none">146        <path d="M28 6 L12 21 L28 36" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148    </div>149    <div class="avatar">[IMG: Avatar]</div>150    <div class="title-area">151      <div class="name">Natalie Larson</div>152      <div class="status">Last seen 2h ago</div>153    </div>154    <div class="header-actions">155      <div class="action-btn">156        <svg width="34" height="34" viewBox="0 0 34 34" fill="none">157          <rect x="6" y="9" width="20" height="16" rx="3" stroke="#e0e0e0" stroke-width="3"/>158          <path d="M26 17 L31 20 L31 14 Z" fill="#e0e0e0"/>159        </svg>160      </div>161      <div class="action-btn">162        <svg width="34" height="34" viewBox="0 0 34 34" fill="none">163          <path d="M8 7 C12 13, 18 19, 26 24 L30 20 C22 14, 15 9, 9 6 Z" stroke="#e0e0e0" stroke-width="3" fill="none" stroke-linecap="round"/>164        </svg>165      </div>166    </div>167  </div>168 169  <!-- Chat content -->170  <div class="chat">171 172    <!-- Incoming small Hello -->173    <div class="row left">174      <div class="bubble-left" style="max-width:460px;">Hello</div>175    </div>176 177    <!-- Outgoing quoted reply -->178    <div class="timestamp">9:53 AM</div>179    <div class="row right">180      <div class="bubble-right" style="max-width:760px;">181        <div class="quote">182          <svg width="28" height="28" viewBox="0 0 28 28" style="vertical-align:middle; margin-right:8px;">183            <path d="M20 6 L8 14 L20 22" stroke="#cfe0ff" stroke-width="3" fill="none" stroke-linecap="round"/>184          </svg>185          Hello186          <div style="font-size:22px; color:#bcd0ff; margin-top:6px;">Natalie Larson, Today at 9:45 AM</div>187        </div>188        how you are189      </div>190    </div>191 192    <!-- Image message -->193    <div class="timestamp" style="margin-top:24px;">10:55 AM</div>194    <div class="row left">195      <div class="sent-arrow"></div>196      <div class="img-placeholder">[IMG: Living room wall with hex panels]</div>197    </div>198 199    <!-- Audio bubble -->200    <div class="row right" style="margin-top:22px;">201      <div class="bubble-right" style="width:820px;">202        <div class="audio">203          <div class="play">204            <svg width="30" height="30" viewBox="0 0 30 30">205              <polygon points="10,6 24,15 10,24" fill="#cfe0ff"/>206            </svg>207          </div>208          <div class="bar"></div>209          <div class="duration">0:28</div>210        </div>211      </div>212    </div>213 214    <!-- Map card -->215    <div class="timestamp" style="margin-top:20px;">11:34 AM</div>216    <div class="row left">217      <div class="sent-arrow" style="border-right-color:#1b1d22;"></div>218      <div class="map-card">219        <div class="map-top">220          <div class="img-placeholder">[IMG: Google Map - Dawson Creek]</div>221        </div>222        <div class="map-bottom">223          <div class="map-title">Dawson Creek</div>224          <div class="map-sub">Dawson Creek British Columbia</div>225        </div>226      </div>227    </div>228 229  </div>230 231  <!-- Composer -->232  <div class="composer">233    <div class="plus">+</div>234    <div class="input">235      <div class="placeholder">Type a message</div>236      <div class="tool">237        <svg width="34" height="34" viewBox="0 0 34 34">238          <circle cx="17" cy="17" r="14" stroke="#c9cbd0" stroke-width="3" fill="none"/>239          <circle cx="12" cy="14" r="2" fill="#c9cbd0"/>240          <circle cx="22" cy="14" r="2" fill="#c9cbd0"/>241          <path d="M10 22 C14 26, 20 26, 24 22" stroke="#c9cbd0" stroke-width="3" fill="none" stroke-linecap="round"/>242        </svg>243      </div>244      <div class="tool">245        <svg width="28" height="28" viewBox="0 0 28 28">246          <path d="M14 3 C18 3,22 7,22 12 V20 H18 V12 C18 9,16 7,14 7 C12 7,10 9,10 12 V20 H6 V12 C6 7,10 3,14 3 Z" fill="#c9cbd0"/>247        </svg>248      </div>249      <div class="tool">250        <svg width="32" height="32" viewBox="0 0 32 32">251          <rect x="4" y="6" width="24" height="20" rx="3" stroke="#c9cbd0" stroke-width="3" fill="none"/>252          <path d="M7 22 L13 16 L17 19 L21 14 L25 20" stroke="#c9cbd0" stroke-width="3" fill="none"/>253          <circle cx="12" cy="12" r="3" fill="#c9cbd0"/>254        </svg>255      </div>256      <div class="tool"><span>b</span></div>257    </div>258  </div>259 260</div>261</body>262</html>