GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Chatbot UI Mock</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1f2937;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;border-radius:0;12  }13 14  /* Status bar */15  .status-bar{16    height:96px; padding:0 34px; display:flex; align-items:center; justify-content:space-between;17    color:#111827; font-size:34px;18  }19  .status-left{display:flex;gap:22px; align-items:center;}20  .status-right{display:flex;gap:22px; align-items:center; color:#374151;}21  .icon{display:inline-flex; align-items:center; justify-content:center;}22  .icon svg{display:block}23 24  /* App bar */25  .app-bar{26    height:140px; display:flex; align-items:center; gap:22px; padding:0 28px;27    border-bottom:1px solid #eee; background:#fff;28  }29  .app-bar .title{font-weight:600; font-size:46px;}30 31  /* Section header */32  .section-header{33    height:116px; display:flex; align-items:center; gap:24px; padding:0 28px;34    border-bottom:1px solid #f2f2f2; background:#fff;35    position:relative; z-index:2;36  }37  .dash-box{38    width:48px;height:48px;border-radius:12px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:48px;line-height:0.9;39  }40  .section-title{font-size:42px;color:#111827;font-weight:600;}41 42  /* Chat area */43  .chat-area{padding:28px; padding-top:36px;}44  .chat-row{display:flex; justify-content:space-between; align-items:flex-start; gap:24px;}45  .left-wrap{display:flex; gap:20px; align-items:flex-start; max-width:760px;}46  .avatar{47    width:86px;height:86px;border-radius:50%; background:#06b6d4; display:flex; align-items:center; justify-content:center;48    box-shadow:0 2px 4px rgba(0,0,0,0.08); color:#fff; font-weight:700; font-size:44px;49  }50  .bubble{51    background:#e9eff3; color:#1f2937; font-size:38px; line-height:54px;52    padding:28px 30px; border-radius:26px; border-top-left-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,0.04);53  }54  .cta{55    border:2px solid #1976d2; color:#1976d2; background:#fff; font-weight:600;56    padding:22px 34px; border-radius:44px; font-size:38px; white-space:nowrap;57  }58 59  /* Bottom gradient + input */60  .fade{61    position:absolute; left:0; right:0; bottom:220px; height:320px;62    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 60%);63    pointer-events:none;64  }65  .composer{66    position:absolute; left:0; right:0; bottom:220px; height:120px; display:flex; align-items:center; gap:24px;67    padding:0 28px; background:#ffffff;68  }69  .menu-btn{70    width:90px;height:90px;border-radius:14px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;color:#374151;71  }72  .input{73    flex:1; height:90px; border:2px solid #d1d5db; border-radius:12px; display:flex; align-items:center; padding:0 26px; color:#6b7280; font-size:36px;74    background:#fff;75  }76 77  /* Bottom nav */78  .bottom-nav{79    position:absolute; left:0; right:0; bottom:0; height:220px; background:#fff; border-top:1px solid #ececec;80    display:flex; align-items:flex-start; justify-content:space-around; padding-top:26px;81  }82  .nav-item{display:flex; flex-direction:column; align-items:center; gap:12px; color:#4b5563; font-size:30px;}83  .nav-item .ico{width:64px;height:64px;display:flex; align-items:center; justify-content:center;}84  .nav-item.active{color:#10b981;}85  .home-indicator{86    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);87    width:360px; height:12px; background:#9ca3af; border-radius:8px; opacity:0.6;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div class="status-left">97      <div>8:13</div>98      <div>83°</div>99      <div class="icon" aria-hidden="true">100        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">101          <path d="M2 8c5-4 15-4 20 0"></path>102          <path d="M5 11c3-3 11-3 14 0"></path>103          <path d="M8 14c2-2 6-2 8 0"></path>104          <circle cx="12" cy="18" r="1.5" fill="#6b7280" stroke="none"></circle>105        </svg>106      </div>107      <div class="icon" aria-hidden="true">108        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">109          <rect x="2" y="7" width="18" height="10" rx="2"></rect>110          <rect x="3.5" y="8.5" width="15" height="7" fill="#6b7280" stroke="none" opacity="0.25"></rect>111          <rect x="21" y="10" width="1.5" height="4" fill="#6b7280" stroke="none"></rect>112        </svg>113      </div>114    </div>115    <div class="status-right">116      <div class="icon">117        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">118          <path d="M3 12h18"></path>119        </svg>120      </div>121      <div class="icon">122        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2">123          <path d="M20 7h-3l-2-2h-6l-2 2H4v13h16V7z"></path>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- App Bar -->130  <div class="app-bar">131    <div class="icon" style="width:72px;height:72px;">132      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">133        <path d="M15 18l-6-6 6-6"></path>134      </svg>135    </div>136    <div class="title">Help</div>137  </div>138 139  <!-- Section Header -->140  <div class="section-header">141    <div class="dash-box">—</div>142    <div class="section-title">Chatbot</div>143  </div>144 145  <!-- Chat -->146  <div class="chat-area">147    <div class="chat-row">148      <div class="left-wrap">149        <div class="avatar">K</div>150        <div class="bubble">151          Hi, I’m Kiwi.com’s chatbot 🤖 and I’m here to help.152        </div>153      </div>154      <button class="cta">Let’s start ✈️</button>155    </div>156  </div>157 158  <!-- Fade and Composer -->159  <div class="fade"></div>160  <div class="composer">161    <div class="menu-btn">162      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2.5" stroke-linecap="round">163        <path d="M4 6h16M4 12h16M4 18h16"></path>164      </svg>165    </div>166    <div class="input">Write a message...</div>167  </div>168 169  <!-- Bottom Navigation -->170  <div class="bottom-nav">171    <div class="nav-item">172      <div class="ico">173        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2">174          <circle cx="11" cy="11" r="6"></circle>175          <path d="M20 20l-4-4"></path>176        </svg>177      </div>178      <div>Search</div>179    </div>180    <div class="nav-item">181      <div class="ico">182        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2">183          <rect x="5" y="5" width="14" height="14" rx="3"></rect>184          <path d="M9 12l2 2 4-4"></path>185        </svg>186      </div>187      <div>Deals</div>188    </div>189    <div class="nav-item">190      <div class="ico">191        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2">192          <path d="M3 7h18v10H3z"></path>193          <path d="M7 7v10M17 7v10"></path>194        </svg>195      </div>196      <div>My trips</div>197    </div>198    <div class="nav-item active">199      <div class="ico">200        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">201          <circle cx="12" cy="8" r="3"></circle>202          <path d="M4 20c2-4 14-4 16 0"></path>203        </svg>204      </div>205      <div>Profile</div>206    </div>207    <div class="home-indicator"></div>208  </div>209 210</div>211</body>212</html>