GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Chat UI - Natalie</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; position: relative; overflow: hidden;9    background: #000000; color: #ffffff;10  }11  /* Status bar */12  .status-bar {13    position: absolute; top: 0; left: 0; width: 100%; height: 88px;14    display: flex; align-items: center; justify-content: space-between;15    padding: 0 32px; color: #fff; font-weight: 600; font-size: 36px;16  }17  .status-icons { display: flex; align-items: center; gap: 24px; }18  .status-icons .icon { width: 36px; height: 36px; opacity: 0.9; }19  .battery {20    display: flex; align-items: center; gap: 10px; font-size: 26px;21  }22  .battery .cell { width: 48px; height: 26px; border: 3px solid #fff; border-radius: 6px; position: relative; }23  .battery .cell::after { content: ""; position: absolute; right: 3px; top: 3px; bottom: 3px; left: 3px; background: #ffffff; border-radius: 4px; }24  .battery .cap { width: 8px; height: 14px; background: #fff; margin-left: 6px; border-radius: 3px; }25 26  /* Header */27  .header {28    position: absolute; top: 88px; left: 0; width: 100%; height: 150px;29    display: flex; align-items: center; padding: 0 24px; gap: 24px;30  }31  .back-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }32  .avatar {33    width: 74px; height: 74px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;34    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;35  }36  .title-area { flex: 1; }37  .title-area .name { font-size: 44px; font-weight: 700; }38  .title-area .status { font-size: 26px; color: #9e9e9e; margin-top: 6px; }39  .header-actions { display: flex; align-items: center; gap: 24px; }40  .action {41    width: 64px; height: 64px; background: #2a2a2a; border-radius: 18px;42    display: flex; align-items: center; justify-content: center;43  }44  .action svg { width: 34px; height: 34px; fill: #a78bfa; }45 46  /* Chat area */47  .chat {48    position: absolute; top: 250px; left: 0; right: 0; bottom: 220px;49    padding: 0 28px;50    overflow: hidden;51  }52  .timestamp {53    text-align: center; color: #9e9e9e; font-size: 26px; margin: 18px 0;54  }55  .msg { position: relative; margin: 22px 0; }56  .bubble {57    display: inline-block; max-width: 720px; padding: 26px 34px; font-size: 36px; line-height: 1.3;58    border-radius: 30px;59  }60  .left .bubble { background: #2a2a2a; color: #fff; border-top-left-radius: 8px; }61  .right { text-align: right; }62  .right .bubble { background: #7f39fb; color: #fff; border-top-right-radius: 8px; }63  .msg .avatar-small {64    position: absolute; left: 0; top: 50%; transform: translate(-88px, -50%);65    width: 60px; height: 60px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;66    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;67  }68  .hint {69    display: flex; align-items: center; gap: 10px; color: #9e9e9e; font-size: 26px; margin: 8px 12px;70  }71  .hint svg { width: 24px; height: 24px; fill: #9e9e9e; }72 73  /* Reaction bar */74  .reaction-bar {75    margin: 20px 0 20px 140px;76    display: inline-flex; align-items: center; gap: 26px;77    background: #1f1f1f; color: #fff;78    border-radius: 60px; padding: 20px 30px; font-size: 40px;79  }80  .reaction-bar .plus {81    width: 52px; height: 52px; border-radius: 16px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 40px;82  }83 84  /* Bottom action bar */85  .bottom-bar {86    position: absolute; bottom: 0; left: 0; width: 100%; height: 220px; background: #0d0d0d;87    display: flex; align-items: center; justify-content: space-around;88  }89  .tool {90    display: flex; flex-direction: column; align-items: center; gap: 16px; color: #3b82f6;91  }92  .tool svg { width: 52px; height: 52px; fill: #3b82f6; }93  .tool span { font-size: 30px; color: #cfd8ff; }94  .home-indicator {95    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);96    width: 200px; height: 8px; background: #ffffff; border-radius: 6px; opacity: 0.9;97  }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>9:17</div>106    <div class="status-icons">107      <div class="icon">⚪</div>108      <div class="icon">🔔</div>109      <div class="icon">●</div>110      <div class="battery">111        <div class="cell"></div><div class="cap"></div><div>100%</div>112      </div>113    </div>114  </div>115 116  <!-- Header -->117  <div class="header">118    <div class="back-btn">119      <svg viewBox="0 0 24 24">120        <path d="M15 5l-7 7 7 7" fill="none" stroke="#a78bfa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>121      </svg>122    </div>123    <div class="avatar">[IMG: Floral Avatar]</div>124    <div class="title-area">125      <div class="name">Natalie</div>126      <div class="status">Active 31 minutes ago</div>127    </div>128    <div class="header-actions">129      <div class="action">130        <svg viewBox="0 0 24 24"><path d="M6 3h4l2 4-3 2c1 2 3 4 5 5l2-3 4 2v4c-9 3-18-6-14-14z"/></svg>131      </div>132      <div class="action">133        <svg viewBox="0 0 24 24"><path d="M4 6h12c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2z"/><path d="M20 9l4 3-4 3V9z"/></svg>134      </div>135      <div class="action">136        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><rect x="11" y="6" width="2" height="8" fill="#0d0d0d"/><circle cx="12" cy="17" r="1" fill="#0d0d0d"/></svg>137      </div>138    </div>139  </div>140 141  <!-- Chat area -->142  <div class="chat">143 144    <!-- First outgoing message -->145    <div class="msg right" style="margin-top: 10px;">146      <div class="bubble">Hi Natalie</div>147    </div>148 149    <div class="timestamp">8:20 AM</div>150 151    <!-- Incoming message -->152    <div class="msg left">153      <div class="avatar-small">[IMG]</div>154      <div class="bubble">Hlo Richard</div>155    </div>156 157    <!-- Reaction bar over first incoming -->158    <div class="reaction-bar">159      <div>❤️</div><div>😆</div><div>😮</div><div>😢</div><div>😡</div><div>👍</div>160      <div class="plus">+</div>161    </div>162 163    <!-- You replied hint -->164    <div class="hint">165      <svg viewBox="0 0 24 24"><path d="M12 4l-8 8h6v8h4v-8h6z"/></svg>166      <span>You replied to Natalie</span>167    </div>168 169    <!-- Outgoing question -->170    <div class="msg right">171      <div class="bubble">How are you, Natalie?</div>172    </div>173 174    <div class="hint">175      <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-6v8h-4v-8H4z"/></svg>176      <span>Natalie replied to you</span>177    </div>178 179    <div class="msg left">180      <div class="avatar-small">[IMG]</div>181      <div class="bubble">I am good Richard, how about you?</div>182    </div>183 184  </div>185 186  <!-- Bottom bar -->187  <div class="bottom-bar">188    <div class="tool">189      <svg viewBox="0 0 24 24"><path d="M21 12l-6 6v-4H4v-4h11V6z"/></svg>190      <span>Reply</span>191    </div>192    <div class="tool">193      <svg viewBox="0 0 24 24"><path d="M16 1H5c-1.1 0-2 .9-2 2v14h2V3h11V1z"/><path d="M20 5H9c-1.1 0-2 .9-2 2v16h13c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/></svg>194      <span>Copy</span>195    </div>196    <div class="tool">197      <svg viewBox="0 0 24 24"><path d="M12 2l3 8h7l-5.5 4 2.5 8-7-5-7 5 2.5-8L2 10h7z"/></svg>198      <span>Pin</span>199    </div>200    <div class="tool">201      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>202      <span>More</span>203    </div>204    <div class="home-indicator"></div>205  </div>206 207</div>208</body>209</html>