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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: radial-gradient(1200px 1200px at 540px 400px, #151327 0%, #0B0A16 60%, #0A0914 100%);13    color: #EAEAF2;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    font-weight: 600; font-size: 44px;22  }23  .sb-right { display: flex; align-items: center; gap: 26px; color: #C9C9D3; font-size: 40px; }24  .icon {25    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;26  }27  .icon svg { width: 100%; height: 100%; }28 29  /* Header */30  .header {31    position: absolute; top: 120px; left: 0; right: 0;32    height: 120px; padding: 0 32px;33    display: flex; align-items: center; justify-content: space-between;34  }35  .hdr-left { display: flex; align-items: center; gap: 24px; }36  .back {37    width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; color: #C9C9D3;38  }39  .title { font-size: 54px; font-weight: 700; letter-spacing: 0.2px; }40  .title .ai { color: #5EA2FF; }41  .hdr-right { display: flex; align-items: center; gap: 24px; }42  .powered { text-align: right; color: #A6A6B6; font-size: 30px; line-height: 1.1; }43  .square-btn {44    width: 70px; height: 70px; border-radius: 16px;45    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);46    display: flex; align-items: center; justify-content: center; color: #EAEAF2; font-weight: 700;47  }48  .dots { display: flex; gap: 10px; }49  .dot { width: 10px; height: 10px; border-radius: 50%; background: #B6C5FF; }50 51  /* Date */52  .date {53    position: absolute; top: 260px; left: 0; right: 0;54    text-align: center; color: #A0A0AF; font-size: 36px;55  }56 57  /* Chat area */58  .chat-area {59    position: absolute; top: 340px; left: 0; right: 0; padding: 0 40px 0 40px;60  }61  .bubble {62    max-width: 880px;63    background: #448CF9;64    color: #FFFFFF;65    padding: 36px 36px 40px 36px;66    border-radius: 28px;67    font-size: 40px; line-height: 1.36;68    position: relative;69    box-shadow: 0 8px 20px rgba(68,140,249,0.25);70  }71  .bubble::after {72    content: "";73    position: absolute; left: 18px; bottom: -24px;74    width: 0; height: 0;75    border-left: 26px solid #448CF9;76    border-top: 24px solid transparent;77    border-bottom: 0 solid transparent;78  }79 80  /* Input bar */81  .input-wrap {82    position: absolute; left: 32px; right: 32px; top: 1460px;83    display: flex; align-items: center; gap: 26px;84  }85  .input {86    flex: 1;87    height: 120px; border-radius: 60px;88    background: rgba(255,255,255,0.06);89    border: 1px solid rgba(255,255,255,0.08);90    display: flex; align-items: center; padding: 0 40px;91    color: #D7D7E2; font-size: 40px;92  }93  .input .placeholder { color: #A4A5B5; }94  .input .count { margin-left: auto; color: #8B8D9D; font-size: 34px; }95  .send {96    width: 120px; height: 120px; border-radius: 60px;97    background: #448CF9;98    display: flex; align-items: center; justify-content: center;99    box-shadow: 0 10px 24px rgba(68,140,249,0.4);100  }101  .send svg { width: 56px; height: 56px; fill: #fff; }102 103  /* Keyboard mock */104  .keyboard {105    position: absolute; left: 0; right: 0; bottom: 110px;106    height: 760px;107    background: #1D1D22;108    border-top: 1px solid rgba(255,255,255,0.06);109    padding: 26px 30px 30px 30px;110    box-sizing: border-box;111  }112  .kbd-top { display: flex; align-items: center; gap: 34px; margin-bottom: 18px; }113  .kbd-icon {114    width: 86px; height: 86px; border-radius: 18px;115    background: #2A2A30; color: #D6D6DE; font-size: 32px;116    display: flex; align-items: center; justify-content: center;117    border: 1px solid rgba(255,255,255,0.08);118  }119  .rows { display: flex; flex-direction: column; gap: 16px; }120  .row { display: flex; justify-content: center; gap: 14px; }121  .key {122    width: 92px; height: 110px;123    border-radius: 20px; background: #2A2A30; color: #EDEDF1;124    display: flex; align-items: center; justify-content: center;125    font-size: 40px; border: 1px solid rgba(255,255,255,0.07);126  }127  .wide { width: 140px; }128  .wider { width: 220px; }129  .space { width: 500px; }130  .backspace { width: 160px; }131  .enter-circle {132    position: absolute; right: 26px; bottom: 206px;133    width: 120px; height: 120px; border-radius: 60px;134    background: #B9E889; display: flex; align-items: center; justify-content: center;135    color: #0E0E13;136  }137 138  /* Home indicator */139  .home-indicator {140    position: absolute; bottom: 30px; left: 50%;141    transform: translateX(-50%);142    width: 300px; height: 12px; border-radius: 8px; background: #FFFFFF;143    opacity: 0.6;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status bar -->151  <div class="status-bar">152    <div class="sb-left">7:58</div>153    <div class="sb-right">154      <span class="icon">155        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#C9C9D3" stroke-width="2" fill="none"/><line x1="5" y1="5" x2="19" y2="19" stroke="#C9C9D3" stroke-width="2"/></svg>156      </span>157      <span class="icon">158        <svg viewBox="0 0 24 24"><path d="M2 9l10-7 10 7v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9z" fill="none" stroke="#C9C9D3" stroke-width="2"/></svg>159      </span>160      <span class="icon">161        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" stroke="#C9C9D3" stroke-width="2" fill="none"/><rect x="20" y="10" width="2" height="4" rx="1" fill="#C9C9D3"/></svg>162      </span>163      <span style="min-width:70px; text-align:right;">2%</span>164    </div>165  </div>166 167  <!-- Header -->168  <div class="header">169    <div class="hdr-left">170      <div class="back">171        <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>172      </div>173      <div class="title">Fit<span class="ai">AI</span></div>174    </div>175    <div class="hdr-right">176      <div class="powered">Powered by<br>ChatGPT</div>177      <div class="square-btn">?</div>178      <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>179    </div>180  </div>181 182  <!-- Date -->183  <div class="date">20 October 2023</div>184 185  <!-- Chat bubble -->186  <div class="chat-area">187    <div class="bubble">188      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?189    </div>190  </div>191 192  <!-- Input -->193  <div class="input-wrap">194    <div class="input">195      <span class="placeholder">Ask any question</span>196      <span class="count">0/300</span>197    </div>198    <div class="send">199      <svg viewBox="0 0 24 24"><path d="M3 11l18-8-8 18-2-7-8-3z"/></svg>200    </div>201  </div>202 203  <!-- Keyboard mock -->204  <div class="keyboard">205    <div class="kbd-top">206      <div class="kbd-icon">▦</div>207      <div class="kbd-icon">🙂</div>208      <div class="kbd-icon">GIF</div>209      <div class="kbd-icon">⚙️</div>210      <div class="kbd-icon">G↔️</div>211      <div class="kbd-icon">🎨</div>212      <div class="kbd-icon">🎤</div>213    </div>214 215    <div class="rows">216      <div class="row">217        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>218        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>219      </div>220      <div class="row">221        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>222        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>223      </div>224      <div class="row">225        <div class="wide key">shift</div>226        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>227        <div class="backspace key">⌫</div>228      </div>229      <div class="row">230        <div class="wider key">?123</div>231        <div class="space key">space</div>232        <div class="wider key">,</div>233      </div>234    </div>235 236    <div class="enter-circle">↵</div>237  </div>238 239  <div class="home-indicator"></div>240</div>241</body>242</html>