GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Simone Chat UI</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;9    position:relative; overflow:hidden;10    background:#F6F6F8;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:110px;16    padding:30px 36px 0 36px;17    color:#111;18    font-weight:600;19    font-size:42px;20    display:flex; align-items:center; justify-content:space-between;21  }22  .status-left { display:flex; align-items:center; gap:22px; }23  .status-right { display:flex; align-items:center; gap:26px; }24  .icon { width:48px; height:48px; }25  .small-icon { width:40px; height:40px; }26  /* Header */27  .header {28    position:absolute; top:120px; left:0; right:0;29    height:140px;30    display:flex; align-items:center; padding:0 32px;31  }32  .back-btn {33    width:72px; height:72px; display:flex; align-items:center; justify-content:center;34  }35  .title-wrap { margin-left:8px; }36  .title {37    font-size:52px; font-weight:700; color:#1a1a1a;38  }39  .subtitle { font-size:36px; color:#7a7a7a; margin-top:6px; font-style:italic; }40  .header-actions {41    margin-left:auto; display:flex; align-items:center; gap:38px; padding-right:16px;42  }43  /* Avatar and info card */44  .avatar-wrap {45    position:absolute; top:276px; left:0; right:0;46    display:flex; justify-content:center; align-items:center;47  }48  .avatar {49    width:160px; height:160px; border-radius:50%;50    background:#E0E0E0; border:1px solid #BDBDBD;51    display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;52  }53  .flag-dot {54    position:absolute; margin-left:118px; margin-top:98px;55    width:34px; height:34px; border-radius:50%;56    background:linear-gradient(90deg,#27AE60 33%, #ffffff 33% 66%, #e74c3c 66%);57    border:2px solid #fff;58    box-shadow:0 2px 6px rgba(0,0,0,0.15);59  }60  .info-card {61    position:absolute; top:450px; left:44px; right:44px;62    background:#fff; border-radius:28px;63    box-shadow:0 6px 18px rgba(0,0,0,0.06);64    padding:40px 40px 36px;65  }66  .info-title {67    text-align:center; font-size:44px; font-weight:700; color:#2a2a2a; margin-bottom:36px;68  }69  .info-row { display:flex; align-items:flex-start; gap:20px; }70  .dot { width:16px; height:16px; background:#6E7AFF; border-radius:50%; margin-top:18px; }71  .bubble {72    flex:1; background:#B9C6FF; color:#1c1c1c;73    border-radius:18px; padding:24px 26px; font-size:36px; line-height:1.35;74  }75  /* Tip text + sticker + wave button */76  .tip {77    position:absolute; top:780px; left:0; right:0;78    text-align:center; font-size:44px; color:#3b3b3b;79  }80  .close-tip {81    position:absolute; top:800px; right:56px;82    width:60px; height:60px; border-radius:50%;83    background:#fff; border:1px solid #DADADA;84    display:flex; align-items:center; justify-content:center;85    box-shadow:0 4px 10px rgba(0,0,0,0.08);86    color:#777; font-size:38px; line-height:60px;87  }88  .sticker {89    position:absolute; top:900px; left:0; right:0;90    margin:0 auto; width:380px; height:380px;91    background:#E0E0E0; border:1px solid #BDBDBD;92    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; font-weight:600; border-radius:20px;93  }94  .wave-btn {95    position:absolute; top:1310px; left:0; right:0;96    width:260px; height:96px; margin:0 auto;97    background:#7387F9; color:#fff; border-radius:48px;98    display:flex; align-items:center; justify-content:center;99    font-size:40px; font-weight:700; letter-spacing:1px;100    box-shadow:0 10px 20px rgba(115,135,249,0.35);101  }102  /* Message input bar */103  .input-bar {104    position:absolute; bottom:0; left:0; right:0;105    height:180px; background:#fff; border-top:1px solid #E6E6E6;106    display:flex; align-items:center; padding:0 24px;107  }108  .input-field {109    flex:1; height:110px; border-radius:26px; border:1px solid #E6E6E6; background:#FAFAFA;110    display:flex; align-items:center; padding:0 28px; margin:0 18px;111    color:#9a9a9a; font-size:38px;112  }113  .input-icons { display:flex; align-items:center; gap:34px; margin-left:8px; }114  .mic {115    margin-left:auto; width:56px; height:56px;116  }117  /* helper */118  .pill-red {119    position:absolute; width:14px; height:14px; background:#FF5B5B; border-radius:50%;120    right:-6px; top:-6px; border:2px solid #fff;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-left">130      <div>12:33</div>131      <!-- Mail icon -->132      <svg class="small-icon" viewBox="0 0 24 24">133        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>134        <path d="M3 6l9 7 9-7" fill="none" stroke="#333" stroke-width="2"/>135      </svg>136    </div>137    <div class="status-right">138      <!-- signal bars -->139      <svg class="small-icon" viewBox="0 0 24 24">140        <rect x="3" y="13" width="3" height="7" fill="#333"/>141        <rect x="8" y="10" width="3" height="10" fill="#333"/>142        <rect x="13" y="7" width="3" height="13" fill="#333"/>143        <rect x="18" y="4" width="3" height="16" fill="#333"/>144      </svg>145      <!-- battery -->146      <svg class="small-icon" viewBox="0 0 28 24">147        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>148        <rect x="4" y="8" width="16" height="8" fill="#333"/>149        <rect x="23" y="9" width="3" height="6" rx="1" fill="#333"/>150      </svg>151    </div>152  </div>153 154  <!-- Header -->155  <div class="header">156    <div class="back-btn">157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>159      </svg>160    </div>161    <div class="title-wrap">162      <div class="title">Simone</div>163      <div class="subtitle">Online</div>164    </div>165    <div class="header-actions">166      <!-- phone -->167      <svg class="icon" viewBox="0 0 24 24">168        <path d="M6 3l4 2-2 3c1 2 3 4 5 5l3-2 2 4-3 2c-6-2-10-6-11-11L6 3z" fill="#333"/>169      </svg>170      <!-- gear -->171      <svg class="icon" viewBox="0 0 24 24">172        <circle cx="12" cy="12" r="3" fill="none" stroke="#333" stroke-width="2"/>173        <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M16.9 16.9l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M16.9 7.1l2.1-2.1" stroke="#333" stroke-width="2" stroke-linecap="round"/>174      </svg>175    </div>176  </div>177 178  <!-- Avatar -->179  <div class="avatar-wrap">180    <div class="avatar">[IMG: User Avatar]</div>181    <div class="flag-dot"></div>182  </div>183 184  <!-- Info card -->185  <div class="info-card">186    <div class="info-title">Simone's Info</div>187    <div class="info-row">188      <div class="dot"></div>189      <div class="bubble">Simone didn't list any hobbies 😳</div>190    </div>191  </div>192 193  <!-- Tip text -->194  <div class="tip">Send a message or say "hi" with a wave</div>195  <div class="close-tip">×</div>196 197  <!-- Sticker placeholder -->198  <div class="sticker">[IMG: Waving Hand Sticker]</div>199 200  <!-- Wave button -->201  <div class="wave-btn">WAVE</div>202 203  <!-- Input bar -->204  <div class="input-bar">205    <!-- leading icons -->206    <div class="input-icons">207      <!-- plus -->208      <svg class="icon" viewBox="0 0 24 24">209        <circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/>210        <path d="M12 7v10M7 12h10" stroke="#777" stroke-width="2" stroke-linecap="round"/>211      </svg>212      <!-- # icon -->213      <svg class="icon" viewBox="0 0 24 24">214        <path d="M7 3l-2 18M15 3l-2 18M3 8h18M2 16h18" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>215      </svg>216      <!-- smile -->217      <div style="position:relative;">218        <svg class="icon" viewBox="0 0 24 24">219          <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/>220          <circle cx="9" cy="10" r="1.2" fill="#777"/>221          <circle cx="15" cy="10" r="1.2" fill="#777"/>222          <path d="M8 14c1.2 1.3 2.7 2 4 2s2.8-.7 4-2" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>223        </svg>224        <span class="pill-red"></span>225      </div>226      <!-- translate -->227      <svg class="icon" viewBox="0 0 24 24">228        <path d="M4 4h8v8H4zM14 4h6M18 4v16M2 20h10" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>229      </svg>230      <!-- sparkle -->231      <svg class="icon" viewBox="0 0 24 24">232        <path d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z" fill="#777"/>233      </svg>234    </div>235 236    <div class="input-field">Type a message...</div>237 238    <!-- mic icon -->239    <svg class="mic" viewBox="0 0 24 24">240      <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#777" stroke-width="2"/>241      <path d="M5 10c0 4 3 6 7 6s7-2 7-6M12 16v4M8 20h8" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>242    </svg>243  </div>244 245</div>246</body>247</html>