GD-ML/AndroidCode

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>FitAI Chat UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f0d19;20    color: #EAEAF0;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 36px;28    right: 36px;29    height: 90px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #ffffff;34    font-weight: 600;35    font-size: 46px;36    letter-spacing: 0.5px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .lr-pill {44    font-size: 32px;45    color: #0f0d19;46    background: #ffffff;47    border-radius: 10px;48    padding: 4px 14px;49    font-weight: 700;50  }51  .status-right {52    display: flex;53    align-items: center;54    gap: 26px;55  }56  .icon {57    display: inline-flex;58    align-items: center;59    justify-content: center;60  }61 62  /* App header */63  .app-bar {64    position: absolute;65    top: 140px;66    left: 36px;67    right: 36px;68    height: 120px;69    display: flex;70    align-items: center;71    justify-content: space-between;72  }73  .back-btn {74    width: 80px;75    height: 80px;76    border-radius: 40px;77    display: flex;78    align-items: center;79    justify-content: center;80  }81  .app-title {82    font-size: 64px;83    font-weight: 700;84    letter-spacing: 0.4px;85  }86  .app-title .fit {87    color: #e9e9f3;88  }89  .app-title .ai {90    color: #4c8cff;91  }92  .header-right {93    display: flex;94    align-items: center;95    gap: 26px;96  }97  .powered {98    font-size: 32px;99    color: #9aa0ad;100    text-align: right;101    line-height: 1.2;102  }103  .help-btn {104    width: 76px;105    height: 76px;106    border-radius: 12px;107    border: 2px solid #7a7f90;108    color: #e9e9f3;109    font-weight: 700;110    display: flex;111    align-items: center;112    justify-content: center;113  }114 115  /* Date */116  .date-line {117    position: absolute;118    top: 300px;119    left: 0;120    right: 0;121    text-align: center;122    color: #9aa0ad;123    font-size: 36px;124    font-weight: 600;125  }126 127  /* Chat bubble */128  .chat-area {129    position: absolute;130    top: 380px;131    left: 36px;132    right: 36px;133  }134  .bubble {135    max-width: 860px;136    background: #3c82ff;137    color: #ffffff;138    padding: 36px 40px;139    border-radius: 28px;140    font-size: 40px;141    line-height: 1.35;142    position: relative;143    box-shadow: 0 6px 18px rgba(0,0,0,0.25);144  }145  .bubble-tail {146    position: absolute;147    left: 24px;148    bottom: -24px;149    width: 0;150    height: 0;151    border-left: 36px solid #3c82ff;152    border-top: 26px solid transparent;153    border-bottom: 26px solid transparent;154    transform: rotate(25deg);155  }156 157  /* Input area */158  .input-wrap {159    position: absolute;160    left: 36px;161    right: 160px;162    bottom: 200px;163    height: 140px;164    background: #272634;165    border-radius: 48px;166    display: flex;167    align-items: center;168    justify-content: space-between;169    padding: 0 40px;170    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);171  }172  .input-placeholder {173    color: #a7a9b6;174    font-size: 40px;175  }176  .char-count {177    color: #8b8f9f;178    font-size: 36px;179    font-weight: 600;180  }181  .send-btn {182    position: absolute;183    right: 36px;184    bottom: 200px;185    width: 140px;186    height: 140px;187    border-radius: 70px;188    background: #3c82ff;189    display: flex;190    align-items: center;191    justify-content: center;192    box-shadow: 0 10px 20px rgba(60,130,255,0.45);193  }194  .home-pill {195    position: absolute;196    bottom: 70px;197    left: 50%;198    transform: translateX(-50%);199    width: 400px;200    height: 16px;201    background: #d9d9df;202    border-radius: 10px;203    opacity: 0.8;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="status-bar">212    <div class="status-left">213      <div>7:56</div>214      <div class="lr-pill">LR</div>215    </div>216    <div class="status-right">217      <!-- Signal/WiFi -->218      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none">219        <path d="M2 8c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>220        <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>221        <path d="M8.5 15.5c2-2 5-2 7 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>222        <circle cx="12" cy="19" r="1.6" fill="#ffffff"/>223      </svg>224      <!-- Battery -->225      <svg class="icon" width="64" height="48" viewBox="0 0 28 18" fill="none">226        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>227        <rect x="24" y="6" width="3" height="6" rx="1" fill="#ffffff"/>228        <rect x="3" y="5" width="17" height="8" rx="1.5" fill="#ffffff"/>229      </svg>230      <div style="font-size:32px; color:#ffffff;">1%</div>231    </div>232  </div>233 234  <!-- App header -->235  <div class="app-bar">236    <div class="back-btn">237      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">238        <path d="M15 5l-7 7 7 7" stroke="#e9e9f3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>239      </svg>240    </div>241 242    <div class="app-title">243      <span class="fit">Fit</span><span class="ai">AI</span>244    </div>245 246    <div class="header-right">247      <div class="powered">Powered by<br>ChatGPT</div>248      <div class="help-btn">?</div>249      <svg width="44" height="80" viewBox="0 0 24 24" fill="#e9e9f3">250        <circle cx="12" cy="5" r="2.2"></circle>251        <circle cx="12" cy="12" r="2.2"></circle>252        <circle cx="12" cy="19" r="2.2"></circle>253      </svg>254    </div>255  </div>256 257  <!-- Date -->258  <div class="date-line">20 October 2023</div>259 260  <!-- Chat bubble -->261  <div class="chat-area">262    <div class="bubble">263      Hi Karin, I am your personal smart workout assistant. I see that you are 45 years old, stand 160 cm tall, and weigh 59.0 kg. How can I assist with your workout today?264      <div class="bubble-tail"></div>265    </div>266  </div>267 268  <!-- Input -->269  <div class="input-wrap">270    <div class="input-placeholder">Ask any question</div>271    <div class="char-count">0/300</div>272  </div>273  <div class="send-btn">274    <svg width="68" height="68" viewBox="0 0 24 24" fill="#ffffff">275      <path d="M3 11l16-7-7 16-2-6-7-3z" />276    </svg>277  </div>278 279  <!-- Home pill -->280  <div class="home-pill"></div>281</div>282</body>283</html>