GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Chats UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F7F7F7;12  }13  .status-bar {14    position: absolute; top: 0; left: 0; width: 1080px; height: 96px;15    padding: 0 36px;16    display: flex; align-items: center; justify-content: space-between;17    color: #000; font-family: Arial, sans-serif; font-size: 40px;18  }19  .status-icons { display: flex; align-items: center; gap: 28px; }20  .app-header {21    position: absolute; top: 96px; left: 0; width: 1080px; height: 140px;22    display: flex; align-items: center;23    padding: 0 36px;24  }25  .icon-btn { width: 96px; height: 96px; border: none; background: transparent; padding: 0; margin-right: 24px; }26  .title { font-family: Arial, sans-serif; font-size: 72px; font-weight: 700; color: #111; }27  .compose-fab {28    position: absolute; right: 36px; top: 132px;29    width: 96px; height: 96px; border-radius: 48px;30    background: #E0E0E0; border: 1px solid #BDBDBD;31    display: flex; align-items: center; justify-content: center;32  }33  .search-bar {34    position: absolute; top: 250px; left: 36px; width: 1008px; height: 110px;35    background: #EFEFEF; border-radius: 55px;36    display: flex; align-items: center; padding: 0 36px; gap: 24px;37    color: #838383; font-family: Arial, sans-serif; font-size: 44px;38  }39  .list {40    position: absolute; top: 380px; left: 0; width: 1080px;41    padding: 0 36px;42    font-family: Arial, sans-serif;43  }44  .list-row { display: flex; align-items: center; width: 1008px; }45  .row-spacer { height: 40px; }46  .avatar {47    width: 140px; height: 140px; border-radius: 70px;48    background: #E0E0E0; border: 1px solid #BDBDBD;49    display: flex; align-items: center; justify-content: center;50    color: #757575; font-size: 30px; text-align: center;51    flex-shrink: 0;52  }53  .plus-badge {54    position: absolute; left: 36px; top: 380px;55    width: 84px; height: 84px; border-radius: 42px;56    background: #FFFFFF; border: 1px solid #CCCCCC;57    display: flex; align-items: center; justify-content: center;58    box-shadow: 0 2px 6px rgba(0,0,0,0.15);59    transform: translate(-24px, 28px);60  }61  .name {62    font-size: 50px; color: #333; font-weight: 700;63  }64  .subtle {65    font-size: 40px; color: #8A8A8A; margin-top: 8px;66  }67  .list-item-text { margin-left: 28px; display: flex; flex-direction: column; }68  .check-wrap { margin-left: auto; margin-right: 12px; }69  .online-dot {70    position: absolute; width: 28px; height: 28px; border-radius: 14px;71    background: #1DB954; border: 3px solid #FFFFFF;72    transform: translate(96px, 96px);73  }74  .mini-time {75    margin-left: 20px; color: #6A6A6A; font-size: 36px;76    background: #EFEFEF; padding: 8px 16px; border-radius: 20px;77  }78 79  /* Overlay and bottom sheet */80  .overlay {81    position: absolute; left: 0; top: 0; width: 1080px; height: 2400px;82    background: rgba(0,0,0,0.55);83  }84  .bottom-sheet {85    position: absolute; left: 0; bottom: 0; width: 1080px; height: 1050px;86    background: #FFFFFF; border-top-left-radius: 36px; border-top-right-radius: 36px;87    box-shadow: 0 -8px 24px rgba(0,0,0,0.2);88    padding: 24px 36px 36px 36px;89  }90  .sheet-handle {91    width: 160px; height: 14px; border-radius: 7px;92    background: #D8D8D8; margin: 8px auto 24px auto;93  }94  .sheet-item {95    display: flex; align-items: center; gap: 32px;96    padding: 26px 0;97    color: #111; font-family: Arial, sans-serif; font-size: 48px;98    border-bottom: 1px solid #F0F0F0;99  }100  .sheet-item:last-child { border-bottom: none; }101  .sheet-icon { width: 64px; height: 64px; }102  /* Gesture pill */103  .gesture-pill {104    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);105    width: 220px; height: 16px; border-radius: 8px; background: #CFCFCF;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>2:35</div>115    <div class="status-icons">116      <!-- simple status glyphs -->117      <svg width="32" height="32"><circle cx="16" cy="16" r="12" fill="#000"/></svg>118      <svg width="40" height="32" viewBox="0 0 40 32">119        <rect x="4" y="12" width="10" height="12" fill="#000"/>120        <rect x="18" y="8" width="10" height="16" fill="#000"/>121        <rect x="32" y="4" width="6" height="20" fill="#000"/>122      </svg>123      <svg width="36" height="32" viewBox="0 0 36 32">124        <path d="M6 12h24v12H6zM12 8h12v4H12z" fill="#000"/>125      </svg>126      <svg width="32" height="32" viewBox="0 0 32 32">127        <circle cx="16" cy="16" r="14" fill="none" stroke="#000" stroke-width="4"/>128        <path d="M20 20l6 6" stroke="#000" stroke-width="4" stroke-linecap="round"/>129      </svg>130      <svg width="44" height="32" viewBox="0 0 44 32">131        <path d="M6 26h28c2 0 4-2 4-4V6h-4V2H10v4H6v16c0 2 2 4 4 4z" fill="#000"/>132      </svg>133      <svg width="34" height="32" viewBox="0 0 34 32">134        <rect x="6" y="6" width="22" height="20" fill="none" stroke="#000" stroke-width="4"/>135        <path d="M17 10v12" stroke="#000" stroke-width="4"/>136      </svg>137    </div>138  </div>139 140  <!-- App header -->141  <div class="app-header">142    <button class="icon-btn" aria-label="Menu">143      <svg width="64" height="64" viewBox="0 0 64 64">144        <path d="M10 18h44M10 32h44M10 46h44" stroke="#111" stroke-width="6" stroke-linecap="round"/>145      </svg>146    </button>147    <div class="title">Chats</div>148  </div>149 150  <!-- Compose floating button -->151  <div class="compose-fab" aria-label="Compose">152    <svg width="46" height="46" viewBox="0 0 46 46">153      <path d="M10 30l6-16 10 10-16 6z" fill="#111"/>154      <path d="M24 12l10 10" stroke="#111" stroke-width="4" stroke-linecap="round"/>155    </svg>156  </div>157 158  <!-- Search bar -->159  <div class="search-bar">160    <svg width="56" height="56" viewBox="0 0 56 56">161      <circle cx="24" cy="24" r="18" fill="none" stroke="#777" stroke-width="6"/>162      <path d="M38 38l12 12" stroke="#777" stroke-width="6" stroke-linecap="round"/>163    </svg>164    <div>Search</div>165  </div>166 167  <!-- List content -->168  <div class="list">169    <!-- Your note -->170    <div class="list-row" style="position: relative;">171      <div class="avatar">[IMG: Note]</div>172      <div class="list-item-text">173        <div class="subtle">Your note</div>174      </div>175    </div>176    <div class="plus-badge">177      <svg width="44" height="44" viewBox="0 0 44 44">178        <path d="M22 10v24M10 22h24" stroke="#333" stroke-width="6" stroke-linecap="round"/>179      </svg>180    </div>181    <div class="row-spacer"></div>182 183    <!-- Richard (profile card style) -->184    <div class="list-row" style="position: relative;">185      <div class="avatar" style="background:#E0E0E0; border:1px solid #BDBDBD;">[IMG: User Avatar]</div>186      <div class="online-dot"></div>187      <div class="list-item-text">188        <div class="name">Richard</div>189      </div>190    </div>191    <div class="row-spacer"></div>192 193    <!-- Richard Wagner conversation -->194    <div class="list-row">195      <div class="avatar">[IMG: User Avatar]</div>196      <div class="list-item-text" style="width:760px;">197        <div class="name">Richard Wagner</div>198        <div class="subtle">You: Hlo · 2:33 PM</div>199      </div>200      <div class="check-wrap">201        <svg width="54" height="54" viewBox="0 0 54 54">202          <path d="M18 30l6 6 12-12" stroke="#9E9E9E" stroke-width="6" fill="none" stroke-linecap="round"/>203          <path d="M10 30l6 6 12-12" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round"/>204        </svg>205      </div>206    </div>207    <div class="row-spacer"></div>208 209    <!-- Amelia Miller conversation -->210    <div class="list-row">211      <div class="avatar" style="background:#E9E9E9;">[IMG: User Avatar]</div>212      <div class="list-item-text" style="width:760px;">213        <div class="name">Amelia Miller</div>214        <div class="subtle">You sent a live location. · 1:58 PM</div>215      </div>216      <div class="mini-time">43m</div>217    </div>218  </div>219 220  <!-- Dim overlay -->221  <div class="overlay"></div>222 223  <!-- Bottom sheet menu -->224  <div class="bottom-sheet">225    <div class="sheet-handle"></div>226 227    <div class="sheet-item">228      <svg class="sheet-icon" viewBox="0 0 64 64">229        <path d="M12 28h40v22H12z" fill="none" stroke="#000" stroke-width="5"/>230        <path d="M18 20h28" stroke="#000" stroke-width="5" stroke-linecap="round"/>231        <path d="M24 14h16" stroke="#000" stroke-width="5" stroke-linecap="round"/>232      </svg>233      <div>Archive</div>234    </div>235 236    <div class="sheet-item">237      <svg class="sheet-icon" viewBox="0 0 64 64">238        <path d="M22 18h20M18 22h28l-2 28H20l-2-28z" fill="none" stroke="#000" stroke-width="5"/>239        <path d="M26 14h12" stroke="#000" stroke-width="5" stroke-linecap="round"/>240      </svg>241      <div>Delete</div>242    </div>243 244    <div class="sheet-item">245      <svg class="sheet-icon" viewBox="0 0 64 64">246        <path d="M14 38h20l16 10V18L34 28H14z" fill="none" stroke="#000" stroke-width="5" stroke-linejoin="round"/>247        <path d="M12 12l40 40" stroke="#000" stroke-width="5" stroke-linecap="round"/>248      </svg>249      <div>Mute</div>250    </div>251 252    <div class="sheet-item">253      <svg class="sheet-icon" viewBox="0 0 64 64">254        <circle cx="22" cy="22" r="10" fill="none" stroke="#000" stroke-width="5"/>255        <circle cx="44" cy="26" r="8" fill="none" stroke="#000" stroke-width="5"/>256        <path d="M10 50c2-8 12-12 22-12M34 44c6-2 12-1 18 6" stroke="#000" stroke-width="5" fill="none" stroke-linecap="round"/>257      </svg>258      <div>Create group chat with Richard</div>259    </div>260 261    <div class="sheet-item">262      <svg class="sheet-icon" viewBox="0 0 64 64">263        <rect x="10" y="14" width="44" height="30" rx="4" fill="none" stroke="#000" stroke-width="5"/>264        <path d="M10 18l22 14 22-14" fill="none" stroke="#000" stroke-width="5"/>265      </svg>266      <div>Mark as unread</div>267    </div>268 269    <div class="sheet-item">270      <svg class="sheet-icon" viewBox="0 0 64 64">271        <circle cx="32" cy="32" r="22" fill="none" stroke="#000" stroke-width="5"/>272        <path d="M20 44L44 20" stroke="#000" stroke-width="5" stroke-linecap="round"/>273      </svg>274      <div>Restrict</div>275    </div>276 277    <div class="sheet-item">278      <svg class="sheet-icon" viewBox="0 0 64 64">279        <circle cx="32" cy="32" r="22" fill="none" stroke="#000" stroke-width="5"/>280        <path d="M20 32h24" stroke="#000" stroke-width="5" stroke-linecap="round"/>281      </svg>282      <div>Block</div>283    </div>284  </div>285 286  <div class="gesture-pill"></div>287</div>288</body>289</html>