GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Chatbot Help UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  :root {9    --bg: #ffffff;10    --text: #1e1e1e;11    --muted: #6f7a83;12    --divider: #e6e6e6;13    --bubble: #e6edf1;14    --primary: #1e88e5;15    --teal: #11a39b;16  }17  * { box-sizing: border-box; }18  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); }19  #render-target {20    width: 1080px;21    height: 2400px;22    position: relative;23    overflow: hidden;24    background: var(--bg);25  }26 27  /* Status bar */28  .status-bar {29    height: 120px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #222;35  }36  .status-left {37    font-size: 40px;38    font-weight: 600;39    letter-spacing: 1px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .icon { display: inline-flex; width: 44px; height: 44px; }47 48  /* Header */49  .app-header {50    height: 140px;51    padding: 0 24px;52    border-bottom: 1px solid var(--divider);53    display: flex;54    align-items: center;55    gap: 16px;56    background: #fff;57  }58  .back-btn {59    width: 80px; height: 80px;60    display: flex; align-items: center; justify-content: center;61  }62  .app-title {63    font-size: 46px;64    font-weight: 600;65  }66 67  /* Content */68  .content {69    padding: 24px 36px 0 36px;70  }71  .section-row {72    display: flex;73    align-items: center;74    gap: 20px;75    padding: 18px 8px;76    color: #2b2b2b;77  }78  .section-row .dash {79    width: 36px; height: 36px; border-radius: 6px;80    background: #f1f2f3; border: 1px solid #e5e6e7;81    display:flex; align-items:center; justify-content:center;82  }83  .section-title {84    font-size: 40px; font-weight: 600;85  }86 87  .chat-area {88    padding: 6px 0 0 0;89  }90  .bubble {91    max-width: 880px;92    background: var(--bubble);93    padding: 28px 32px;94    border-radius: 26px;95    margin: 18px 0;96    line-height: 1.45;97    font-size: 36px;98    color: #1b2a34;99  }100  .avatar {101    width: 82px; height: 82px; border-radius: 50%;102    background: var(--teal);103    color: #fff;104    display: flex; align-items: center; justify-content: center;105    font-weight: 700; font-size: 44px;106    margin-left: 10px;107  }108  .start-row {109    display: flex;110    justify-content: flex-end;111    padding: 16px 8px 24px 8px;112  }113  .start-btn {114    border: 3px solid var(--primary);115    color: var(--primary);116    background: #fff;117    font-size: 38px;118    padding: 18px 36px;119    border-radius: 999px;120    display: inline-flex;121    align-items: center;122    gap: 16px;123    box-shadow: 0 2px 6px rgba(0,0,0,0.05);124  }125 126  /* Input area above keyboard */127  .input-wrap {128    position: absolute;129    left: 0;130    right: 0;131    bottom: 760px; /* sits above the keyboard placeholder */132    padding: 0 36px 18px 36px;133    background: transparent;134  }135  .input-row {136    display: flex;137    align-items: center;138    gap: 22px;139  }140  .menu-square {141    width: 84px; height: 84px;142    border-radius: 12px;143    display: flex; align-items: center; justify-content: center;144    color: #3c3f42;145  }146  .text-field {147    flex: 1;148    height: 96px;149    background: #fff;150    border: 2px solid #cfd8dc;151    border-radius: 14px;152    display: flex; align-items: center;153    padding: 0 26px;154    font-size: 36px;155    color: var(--muted);156    box-shadow: 0 2px 6px rgba(0,0,0,0.08);157  }158 159  /* Keyboard placeholder */160  .keyboard {161    position: absolute;162    left: 0; right: 0; bottom: 0;163    height: 760px;164    background: #0f1113;165    border-top-left-radius: 18px;166    border-top-right-radius: 18px;167    overflow: hidden;168  }169  .keyboard .top-accent {170    height: 6px; background: #16c39a;171  }172  .keyboard .keys {173    height: calc(100% - 6px);174    display: flex; align-items: center; justify-content: center;175    color: #d6d6d6;176    font-size: 34px; letter-spacing: 2px;177    opacity: 0.8;178  }179 180  /* Utility */181  .muted { color: var(--muted); }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div class="status-left">8:14</div>190    <div class="status-right">191      <div class="muted" style="font-size:34px;">83°</div>192      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 8l10-6 10 6v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z" fill="#9ea4aa"/></svg>193      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="12" r="2" fill="#9ea4aa"/><circle cx="12" cy="12" r="2" fill="#9ea4aa"/><circle cx="18" cy="12" r="2" fill="#9ea4aa"/></svg>194      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12l6 6 14-14" stroke="#9ea4aa" stroke-width="2" fill="none"/></svg>195      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 18 0" stroke="#9ea4aa" stroke-width="2" fill="none"/><path d="M7 12a5 5 0 0 1 10 0" stroke="#9ea4aa" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="1.5" fill="#9ea4aa"/></svg>196      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="2" ry="2" stroke="#9ea4aa" fill="none" stroke-width="2"/><rect x="19" y="10" width="2" height="4" fill="#9ea4aa"/></svg>197    </div>198  </div>199 200  <!-- Header -->201  <div class="app-header">202    <div class="back-btn" aria-label="Back">203      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>204    </div>205    <div class="app-title">Help</div>206  </div>207 208  <!-- Content -->209  <div class="content">210    <div class="section-row">211      <div class="dash"><svg width="24" height="24" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" fill="#9ea4aa"/></svg></div>212      <div class="section-title">Chatbot</div>213    </div>214 215    <div class="chat-area">216      <div class="bubble">217        Hi, I’m Kiwi.com’s chatbot 🤖 and I’m here to help.218      </div>219      <div class="bubble">220        I’m quick and effective but I’m still learning. If I can’t help, I’ll guide you to someone who can.221      </div>222      <div class="bubble" style="position: relative;">223        Please start by clicking on the button below. I’m not good at understanding written text just yet.224        <div style="position:absolute; left:-72px; bottom:-28px;" class="avatar">K</div>225      </div>226 227      <div class="start-row">228        <div class="start-btn">229          <span>Let’s start</span>230          <span>✈️</span>231        </div>232      </div>233    </div>234  </div>235 236  <!-- Input area -->237  <div class="input-wrap">238    <div class="input-row">239      <div class="menu-square">240        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#3b4046" stroke-width="2" stroke-linecap="round"/></svg>241      </div>242      <div class="text-field">Write a message...</div>243    </div>244  </div>245 246  <!-- Keyboard placeholder -->247  <div class="keyboard">248    <div class="top-accent"></div>249    <div class="keys">[ On-screen keyboard area ]</div>250  </div>251 252</div>253</body>254</html>