GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Chat Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 24px;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 1080px; height: 100px;22    background: #0b6f92;23    color: #fff;24  }25  .status-content {26    position: absolute; top: 26px; left: 36px; right: 36px;27    display: flex; align-items: center; justify-content: space-between;28    font-size: 34px; letter-spacing: 0.5px;29  }30  .status-left { display: flex; align-items: center; gap: 18px; }31  .status-right { display: flex; align-items: center; gap: 28px; }32 33  /* App bar */34  .app-bar {35    position: absolute;36    top: 100px; left: 0;37    width: 1080px; height: 140px;38    background: #0b77a5;39    color: #fff;40  }41  .app-content {42    position: absolute; top: 30px; left: 24px; right: 24px;43    display: flex; align-items: center; justify-content: space-between;44  }45  .title-wrap { display: flex; align-items: center; gap: 22px; }46  .app-title { font-size: 48px; font-weight: 600; }47  .presence {48    width: 22px; height: 22px; border-radius: 50%;49    background: #e9ecef; border: 2px solid rgba(255,255,255,0.8);50  }51 52  .icon-btn { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }53  .icon-btn svg { width: 48px; height: 48px; }54 55  /* Chat area */56  .chat-area {57    position: absolute;58    top: 240px; left: 0;59    width: 1080px; height: 880px;60    background: #ffffff;61  }62 63  /* Quick reply chips */64  .chips-area {65    position: absolute;66    top: 1120px; left: 0;67    width: 1080px; height: 180px;68    display: flex; align-items: center;69    padding: 0 24px;70    gap: 28px;71    box-sizing: border-box;72  }73  .chips-area .divider {74    width: 6px; height: 120px; background: #E0E0E0; border-radius: 3px; margin-right: 14px;75  }76  .chip {77    padding: 26px 34px;78    border: 3px solid #0b77a5; border-radius: 60px;79    color: #0b77a5; background: #fff;80    font-size: 36px; white-space: nowrap;81  }82 83  /* Input row */84  .composer {85    position: absolute;86    top: 1300px; left: 0;87    width: 1080px; height: 160px;88    display: flex; align-items: center; justify-content: center;89    gap: 22px;90  }91  .input-wrap {92    width: 840px; height: 140px;93    background: #F7F7F7; border: 2px solid #DDDDDD;94    border-radius: 70px;95    display: flex; align-items: center;96    padding: 0 34px; box-sizing: border-box;97    gap: 24px;98  }99  .input-text {100    font-size: 38px; color: #333; line-height: 1.3;101  }102  .send-btn {103    width: 120px; height: 120px; border-radius: 50%;104    background: #0b77a5; display: flex; align-items: center; justify-content: center;105  }106  .send-btn svg { width: 64px; height: 64px; }107 108  /* Keyboard */109  .keyboard {110    position: absolute;111    bottom: 40px; left: 0;112    width: 1080px; height: 900px;113    background: #1f1f1f; color: #eaeaea;114  }115  .kbd-toolbar {116    height: 100px; padding: 0 34px;117    display: flex; align-items: center; gap: 28px;118    color: #cfd3d7; font-size: 32px;119  }120  .kbd-toolbar .tool {121    height: 64px; padding: 0 24px; border-radius: 16px; background: #2a2a2a; display: flex; align-items: center; justify-content: center;122  }123  .keys {124    padding: 20px 24px; box-sizing: border-box;125    display: grid; gap: 14px;126  }127  .row { display: grid; gap: 12px; }128  .row.row1 { grid-template-columns: repeat(10, 1fr); }129  .row.row2 { grid-template-columns: repeat(9, 1fr); margin: 0 44px; }130  .row.row3 { grid-template-columns: 1.3fr repeat(7, 1fr) 1.5fr; margin: 0 44px; }131  .row.row4 { grid-template-columns: 1.5fr 1fr 4fr 1fr 1.7fr; margin: 0 44px; }132 133  .key {134    height: 120px; background: #2a2a2a; border-radius: 22px;135    display: flex; align-items: center; justify-content: center;136    font-size: 42px; color: #f2f2f2;137  }138  .key.light { background: #cfd3d7; color: #000; }139  .key.space { background: #2a2a2a; color: #bfbfbf; font-size: 34px; }140  .gesture-bar {141    position: absolute; bottom: 10px; left: 50%;142    transform: translateX(-50%);143    width: 240px; height: 16px; border-radius: 8px; background: #eaeaea;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-content">153      <div class="status-left">154        <div>8:18</div>155        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">156          <rect x="6" y="10" width="12" height="10" rx="2" stroke="white" stroke-width="2"></rect>157          <path d="M8 10V8a4 4 0 018 0v2" stroke="white" stroke-width="2"></path>158        </svg>159      </div>160      <div class="status-right">161        <!-- WiFi -->162        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">163          <path d="M2 8c5-4 15-4 20 0" stroke="white" stroke-width="2" stroke-linecap="round"></path>164          <path d="M5 12c4-3 10-3 14 0" stroke="white" stroke-width="2" stroke-linecap="round"></path>165          <path d="M9 16c3-2 5-2 6 0" stroke="white" stroke-width="2" stroke-linecap="round"></path>166          <circle cx="12" cy="19" r="2" fill="white"></circle>167        </svg>168        <!-- Battery -->169        <svg width="44" height="32" viewBox="0 0 32 20" fill="none">170          <rect x="2" y="2" width="24" height="16" rx="3" stroke="white" stroke-width="2"></rect>171          <rect x="4" y="4" width="16" height="12" rx="2" fill="white"></rect>172          <rect x="26" y="6" width="4" height="8" rx="1" fill="white"></rect>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- App Bar -->179  <div class="app-bar">180    <div class="app-content">181      <div class="title-wrap">182        <!-- Back Arrow -->183        <div class="icon-btn">184          <svg viewBox="0 0 24 24" fill="none">185            <path d="M15 4 L7 12 L15 20" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>186          </svg>187        </div>188        <div class="app-title">achi.gupta</div>189        <div class="presence"></div>190      </div>191      <!-- Info icon -->192      <div class="icon-btn">193        <svg viewBox="0 0 24 24" fill="none">194          <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2"></circle>195          <circle cx="12" cy="7" r="1.6" fill="white"></circle>196          <rect x="11" y="10" width="2" height="7" fill="white"></rect>197        </svg>198      </div>199    </div>200  </div>201 202  <!-- Chat area (empty) -->203  <div class="chat-area"></div>204 205  <!-- Quick Reply Chips -->206  <div class="chips-area">207    <div class="divider"></div>208    <div class="chip" style="width: 300px;">Is it available?</div>209    <div class="chip" style="width: 420px;">Is the price negotiable?</div>210    <div class="chip" style="width: 360px;">How old is the product?</div>211  </div>212 213  <!-- Composer -->214  <div class="composer">215    <div class="input-wrap">216      <!-- Paperclip -->217      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">218        <path d="M7 13l6-6a4 4 0 116 6l-7 7a6 6 0 11-9-9l7-7" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>219      </svg>220      <div class="input-text">Can we make a deal of 4500 rupees of the product?</div>221    </div>222    <div class="send-btn">223      <svg viewBox="0 0 24 24" fill="none">224        <path d="M4 20L20 12L4 4L7 11L14 12L7 13Z" fill="white"></path>225      </svg>226    </div>227  </div>228 229  <!-- Keyboard -->230  <div class="keyboard">231    <div class="kbd-toolbar">232      <div class="tool">▦</div>233      <div class="tool">🙂</div>234      <div class="tool">GIF</div>235      <div class="tool">Gx</div>236      <div class="tool">🎨</div>237    </div>238    <div class="keys">239      <div class="row row1">240        <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><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>241      </div>242      <div class="row row2">243        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>244      </div>245      <div class="row row3">246        <div class="key">⇧</div>247        <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>248        <div class="key">⌫</div>249      </div>250      <div class="row row4">251        <div class="key light">?123</div>252        <div class="key">,</div>253        <div class="key space">space</div>254        <div class="key">.</div>255        <div class="key light">↵</div>256      </div>257    </div>258  </div>259 260  <!-- Gesture bar -->261  <div class="gesture-bar"></div>262 263</div>264</body>265</html>