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</title>7<style>8  :root{9    --bg:#0e0b17;10    --text:#d6d6e3;11    --muted:#7b8094;12    --blue:#3f86ff;13    --bubble-blue:#4286f6;14    --bubble-dark:#2a2b36;15    --input:#2b2c37;16  }17  html,body{margin:0;padding:0;background:transparent;font-family: "Segoe UI", Roboto, Arial, sans-serif;color:var(--text);}18  #render-target{19    width:1080px;height:2400px;position:relative;overflow:hidden;20    background:var(--bg); border-radius:28px;21  }22 23  /* Status bar */24  .status-bar{25    height:120px; padding:0 40px; display:flex; align-items:flex-end; justify-content:space-between;26    box-sizing:border-box;27  }28  .status-left{font-size:44px;color:#fff;letter-spacing:1px;}29  .status-right{display:flex;align-items:center;gap:22px;}30  .pill{font-size:28px;color:#111;background:#e9edf7;border-radius:10px;padding:6px 12px;}31  .icon{display:inline-flex;align-items:center;justify-content:center;}32  .icon svg{display:block}33  /* Header */34  .header{35    height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;36    box-sizing:border-box;37  }38  .header-left{display:flex;align-items:center;gap:18px;}39  .back-btn{40    width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;41    color:#c8cbe0;42  }43  .title{44    font-size:52px;font-weight:600;color:#e8eaf6;letter-spacing:0.3px;45  }46  .title .ai{color:var(--blue)}47  .header-right{display:flex;align-items:center;gap:20px;}48  .powered{color:var(--muted);font-size:30px;white-space:nowrap;margin-right:6px;}49  .help-box{50    width:66px;height:66px;border-radius:12px;border:2px solid #6f748b;color:#e8eaf6;51    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:36px;52  }53  .dots{width:10px;height:46px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;}54  .dots span{width:10px;height:10px;background:#cfd3e6;border-radius:50%}55 56  /* Dates */57  .date-sep{58    text-align:center;color:#9aa0b4;font-size:34px;margin:24px 0;59  }60 61  /* Chat area */62  .chat{63    padding:10px 36px 220px 36px; /* leave space for input */64    box-sizing:border-box;65  }66  .msg{67    margin:26px 0; max-width:850px; position:relative;68  }69  .bubble{70    padding:34px 36px; border-radius:26px; line-height:1.35; font-size:38px;71    box-shadow:0 8px 18px rgba(0,0,0,0.25);72  }73  .left .bubble{background:var(--bubble-blue); color:#fff; border-top-left-radius:14px;}74  .right{margin-left:auto;}75  .right .bubble{background:var(--bubble-dark); color:#e9e9f3; border-top-right-radius:14px;}76  /* Tails */77  .left .bubble:after{78    content:""; position:absolute; left:18px; bottom:-26px; width:0; height:0;79    border-left:22px solid transparent; border-right:22px solid transparent;80    border-top:26px solid var(--bubble-blue); filter:drop-shadow(0 6px 6px rgba(0,0,0,0.18));81  }82  .right .bubble:after{83    content:""; position:absolute; right:18px; bottom:-26px; width:0; height:0;84    border-left:22px solid transparent; border-right:22px solid transparent;85    border-top:26px solid var(--bubble-dark); filter:drop-shadow(0 6px 6px rgba(0,0,0,0.18));86  }87 88  /* Input area */89  .input-bar{90    position:absolute; left:0; right:0; bottom:110px; padding:0 32px; box-sizing:border-box;91    display:flex; align-items:center; gap:22px;92  }93  .text-field{94    flex:1; background:var(--input); height:120px; border-radius:36px; display:flex; align-items:center;95    padding:0 36px; box-sizing:border-box; color:#cfd2e3; font-size:40px; position:relative;96  }97  .placeholder{color:#a7adbf}98  .counter{position:absolute; right:36px; color:#9aa0b4; font-size:34px;}99  .send{100    width:120px;height:120px;border-radius:60px;background:var(--blue); display:flex; align-items:center; justify-content:center;101    box-shadow:0 10px 22px rgba(63,134,255,0.45);102  }103  /* Gesture bar */104  .gesture{105    position:absolute; left:50%; transform:translateX(-50%); bottom:36px;106    width:360px;height:12px;border-radius:8px;background:#cfcfd8; opacity:0.8;107  }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status bar -->114  <div class="status-bar">115    <div class="status-left">8:00 <span class="pill">LR</span></div>116    <div class="status-right">117      <span class="icon" title="Do Not Disturb">118        <svg width="42" height="42" viewBox="0 0 24 24" fill="#cfd2e5"><circle cx="12" cy="12" r="10"/><rect x="6" y="11" width="12" height="2" fill="#0e0b17"/></svg>119      </span>120      <span class="icon" title="Wi‑Fi">121        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e8ebff" stroke-width="2" stroke-linecap="round">122          <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.6" fill="#e8ebff" stroke="none"/>123        </svg>124      </span>125      <span class="icon" title="Battery">126        <svg width="54" height="46" viewBox="0 0 32 16">127          <rect x="1" y="2" width="26" height="12" rx="3" fill="none" stroke="#e8ebff" stroke-width="2"/>128          <rect x="3" y="4" width="18" height="8" rx="2" fill="#e8ebff"/>129          <rect x="28" y="6" width="3" height="4" rx="1" fill="#e8ebff"/>130        </svg>131      </span>132      <span style="color:#e8ebff;font-size:34px;">3%</span>133    </div>134  </div>135 136  <!-- Header -->137  <div class="header">138    <div class="header-left">139      <div class="back-btn" aria-label="Back">140        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfd3e8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">141          <path d="M15 18l-6-6 6-6"/>142        </svg>143      </div>144      <div class="title">Fit<span class="ai">AI</span></div>145    </div>146    <div class="header-right">147      <div class="powered">Powered by ChatGPT</div>148      <div class="help-box">?</div>149      <div class="dots"><span></span><span></span><span></span></div>150    </div>151  </div>152 153  <!-- Chat content -->154  <div class="chat">155    <div class="date-sep">20 October 2023</div>156 157    <div class="msg left">158      <div class="bubble">159        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?160      </div>161    </div>162 163    <div class="date-sep">25 October 2023</div>164 165    <div class="msg right">166      <div class="bubble">I want to customize my workout</div>167    </div>168 169    <div class="msg left">170      <div class="bubble">171        You currently do not have an active subscription with FitAI. To send a message, please upgrade your plan.172      </div>173    </div>174  </div>175 176  <!-- Input -->177  <div class="input-bar">178    <div class="text-field">179      <span class="placeholder">Ask any question</span>180      <span class="counter">0/300</span>181    </div>182    <div class="send" aria-label="Send">183      <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">184        <path d="M22 2L11 13"/><path d="M22 2L15 22l-4-9-9-4 20-7z"/>185      </svg>186    </div>187  </div>188 189  <!-- Gesture bar -->190  <div class="gesture"></div>191 192</div>193</body>194</html>