GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Chat UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #0C0E10; color: #EAECEF;12 }13 14 /* Top system status bar */15 .status-bar {16 height: 110px; background: #0A0B0C; display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;17 color: #EAECEF; font-size: 42px; letter-spacing: 0.5px;18 }19 .status-right { margin-left: auto; display: flex; gap: 22px; align-items: center; }20 .status-icon svg { width: 38px; height: 38px; fill: #EAECEF; opacity: 0.85; }21 22 /* App bar */23 .appbar {24 height: 200px; background: #121416; border-bottom: 1px solid #22272B; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;25 }26 .back-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }27 .back-btn svg { width: 56px; height: 56px; fill: #EAECEF; }28 .avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 2px solid #2A3035; margin-right: 24px; display: flex; align-items: center; justify-content: center; background: #E0E0E0; color: #757575; font-size: 24px; }29 .title-wrap { flex: 1; }30 .title { font-size: 50px; font-weight: 700; }31 .subtitle { font-size: 30px; color: #F6C64C; display: flex; align-items: center; gap: 10px; margin-top: 8px; }32 .subtitle .dot { width: 12px; height: 12px; background: #F6C64C; border-radius: 50%; display: inline-block; }33 .appbar-actions { display: flex; align-items: center; gap: 28px; }34 .action-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #1A1F23; }35 .action-icon svg { width: 40px; height: 40px; fill: #EAECEF; }36 .mic-pill { background: #20D67B; color: #0A120D; padding: 18px 28px; border-radius: 40px; display: flex; align-items: center; gap: 14px; font-weight: 700; }37 .mic-pill svg { width: 34px; height: 34px; fill: #092015; }38 39 /* Chat area */40 .chat {41 position: absolute; left: 0; right: 0; top: 310px; bottom: 220px; /* leaves space for bottom controls */42 padding: 24px; box-sizing: border-box; overflow: hidden;43 }44 .messages { height: 100%; overflow-y: auto; padding-right: 14px; }45 .row { display: flex; margin: 26px 0; align-items: flex-end; }46 .row.left { justify-content: flex-start; }47 .row.right { justify-content: flex-end; }48 49 .msg-meta { font-size: 28px; color: #9AA5AD; margin-left: 140px; margin-bottom: 12px; }50 .msg-meta.right { text-align: right; margin-right: 140px; margin-left: 0; }51 52 .bubble {53 max-width: 820px; border-radius: 28px; padding: 26px; box-sizing: border-box; font-size: 38px; line-height: 1.35;54 box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset;55 }56 .bubble.sent { background: #1857A4; color: #ffffff; border-top-right-radius: 10px; }57 .bubble.recv { background: #1E2328; color: #EAECEF; border-top-left-radius: 10px; }58 59 .quote {60 background: rgba(255,255,255,0.06); border-radius: 18px; padding: 18px 22px; margin-bottom: 18px; position: relative;61 }62 .quote.dark { background: rgba(0,0,0,0.25); }63 .quote .reply-arrow { position: absolute; left: 16px; top: -6px; }64 .quote .reply-arrow svg { width: 30px; height: 30px; fill: #CFE2FF; opacity: 0.9; }65 .quote .label { font-size: 36px; font-weight: 700; margin-bottom: 6px; }66 .quote .sub { font-size: 28px; color: #BFD6F9; }67 68 .stripe { position: absolute; left: 14px; top: 14px; bottom: 14px; width: 8px; background: #1BB2E6; border-radius: 6px; }69 .emoji { margin-left: 12px; color: #9AA5AD; font-size: 46px; }70 71 /* Image message */72 .image-card {73 width: 700px; background: #FFFFFF; border-radius: 40px; padding: 24px; box-sizing: border-box; box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;74 }75 .placeholder-img {76 width: 100%; height: 880px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 36px; border-radius: 22px;78 }79 .tiny-avatar { width: 60px; height: 60px; border-radius: 50%; margin-left: 16px; background: #E0E0E0; border: 2px solid #2A3035; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px; }80 81 /* Bottom recorder / composer */82 .bottom-bar {83 position: absolute; left: 0; right: 0; bottom: 0;84 height: 200px; background: #0F1215; border-top: 1px solid #262B31; box-sizing: border-box;85 }86 .progress {87 height: 6px; background: #2A2F35; margin: 12px 18px 0; border-radius: 4px; overflow: hidden;88 }89 .progress span { display: block; width: 120px; height: 100%; background: #1F87FF; }90 .rec-wrap { display: flex; align-items: center; justify-content: space-between; padding: 28px; font-size: 40px; color: #9AA5AD; }91 .cancel { color: #A6B0B7; font-size: 50px; }92 .send-btn {93 position: absolute; right: 28px; bottom: 36px; width: 120px; height: 120px; background: #2196F3; border-radius: 60px;94 display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(33,150,243,0.35);95 }96 .send-btn svg { width: 56px; height: 56px; fill: #FFFFFF; }97 98 /* Gesture bar */99 .gesture { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 280px; height: 14px; border-radius: 8px; background: #E8E8E8; opacity: 0.85; }100</style>101</head>102<body>103<div id="render-target">104 105 <!-- Status bar -->106 <div class="status-bar">107 <div>2:38</div>108 <div class="status-right">109 <div class="status-icon">110 <!-- simple circle icon -->111 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>112 </div>113 <div class="status-icon">114 <!-- check icon -->115 <svg viewBox="0 0 24 24"><path d="M9 16l-4-4 1.5-1.5L9 13l8.5-8.5L19 6z"></path></svg>116 </div>117 <div class="status-icon">118 <!-- mail icon -->119 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm9 6L3 7v12h18V7l-9 4z"/></svg>120 </div>121 <div class="status-icon">122 <!-- dot -->123 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>124 </div>125 </div>126 </div>127 128 <!-- App bar -->129 <div class="appbar">130 <div class="back-btn">131 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#EAECEF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>132 </div>133 <div class="avatar">[IMG: Avatar]</div>134 <div class="title-wrap">135 <div class="title">Natalie Larson</div>136 <div class="subtitle"><span class="dot"></span>Last seen 5h ago</div>137 </div>138 <div class="appbar-actions">139 <div class="action-icon">140 <!-- video camera -->141 <svg viewBox="0 0 24 24"><path d="M3 6h12v12H3z"/><path d="M15 10l6-3v10l-6-3z"/></svg>142 </div>143 <div class="action-icon">144 <!-- phone -->145 <svg viewBox="0 0 24 24"><path d="M6 2l5 3-2 3c1 2 3 4 5 5l3-2 3 5-3 3c-7-2-12-7-14-14L6 2z"/></svg>146 </div>147 <div class="mic-pill">148 <svg viewBox="0 0 24 24"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-12 0z"/></svg>149 <span>Voice</span>150 </div>151 </div>152 </div>153 154 <!-- Chat area -->155 <div class="chat">156 <div class="messages">157 158 <!-- Sent message with quote -->159 <div class="row right">160 <div class="bubble sent" style="margin-right: 36px;">161 <div class="quote">162 <div class="reply-arrow"><svg viewBox="0 0 24 24"><path d="M10 7l-5 5 5 5v-3h6v-4h-6V7z"/></svg></div>163 <div class="label">How are you doing?</div>164 <div class="sub">Natalie Larson, Today at 8:14 AM</div>165 </div>166 <div>I'm good, what about you, Natalie?</div>167 </div>168 </div>169 170 <!-- Received message with quote and stripe -->171 <div class="msg-meta">Natalie, 9:32 AM</div>172 <div class="row left">173 <div class="avatar" style="width:84px;height:84px;margin-right:16px;">[IMG]</div>174 <div class="bubble recv" style="position: relative;">175 <span class="stripe"></span>176 <div class="quote dark" style="padding-left: 40px;">177 <div class="reply-arrow"><svg viewBox="0 0 24 24"><path d="M10 7l-5 5 5 5v-3h6v-4h-6V7z"/></svg></div>178 <div class="label" style="color:#FFFFFF;">I'm good, what about you, Natalie?</div>179 <div class="sub" style="color:#9AC5F9;">Richard Wagner, Today at 8:41 AM</div>180 </div>181 <div style="margin-top: 12px;">I’m Good</div>182 </div>183 <div class="emoji">☺</div>184 </div>185 186 <!-- Image message from Natalie -->187 <div class="row right" style="margin-top: 60px;">188 <div class="bubble" style="background: transparent; box-shadow: none; padding: 0; margin-right: 16px;">189 <div class="image-card">190 <div class="placeholder-img">[IMG: Potted Plant]</div>191 </div>192 </div>193 <div class="tiny-avatar">[A]</div>194 </div>195 <div class="msg-meta right" style="margin-top: -12px;">2:31 PM</div>196 197 </div>198 </div>199 200 <!-- Bottom recorder/composer -->201 <div class="bottom-bar">202 <div class="progress"><span></span></div>203 <div class="rec-wrap">204 <div class="cancel">×</div>205 <div>0:02</div>206 </div>207 <div class="send-btn">208 <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3l5 8-5 10z"/></svg>209 </div>210 </div>211 212 <div class="gesture"></div>213</div>214</body>215</html>