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.0">6<title>Chat UI - eDreams</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #fff; border-radius: 24px;12    box-shadow: 0 20px 60px rgba(0,0,0,0.35);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0; height: 110px;18    background: #0f0f0f; color: #d7d7d7; font-size: 34px;19    display: flex; align-items: center; padding: 0 36px; letter-spacing: 0.2px;20  }21  .status-icons { margin-left: auto; display: flex; gap: 18px; align-items: center; }22  .dot { width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%; display: inline-block; opacity: 0.8; }23 24  /* App bar */25  .appbar {26    position: absolute; top: 110px; left: 0; right: 0; height: 160px;27    background: #1c1c1c; display: flex; align-items: center; padding: 0 24px;28    box-shadow: 0 2px 0 rgba(255,255,255,0.03) inset;29  }30  .back-btn {31    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 10px;32  }33  .app-avatar {34    width: 86px; height: 86px; border-radius: 43px; margin-right: 22px;35    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;36    display: flex; align-items: center; justify-content: center; font-size: 22px;37  }38  .app-title { font-size: 48px; font-weight: 700; color: #ffffff; }39 40  /* Chat area */41  .chat-scroll {42    position: absolute; top: 270px; left: 0; right: 0; bottom: 1040px; /* leaves space above input/keyboard */43    padding: 32px 36px 0 36px; overflow: hidden;44  }45  .intro-text p {46    color: #b6b6b6; font-size: 30px; line-height: 44px; margin: 8px 0;47  }48  .timestamp {49    text-align: center; color: #A7A7A7; font-size: 28px; margin: 46px 0 18px 0;50    letter-spacing: 1.6px;51  }52  .message-row { display: flex; justify-content: flex-end; margin-top: 14px; }53  .bubble {54    max-width: 760px; background: #165EA6; color: #fff;55    padding: 30px 34px; font-size: 38px; line-height: 52px;56    border-radius: 28px; border-bottom-right-radius: 32px;57    box-shadow: 0 2px 0 rgba(0,0,0,0.2);58  }59  .sending {60    text-align: right; color: #8b8b8b; font-size: 28px; margin-top: 14px; padding-right: 18px;61  }62 63  /* Input bar above keyboard */64  .input-bar {65    position: absolute; left: 0; right: 0; bottom: 880px; height: 150px;66    background: #222222; display: flex; align-items: center; padding: 0 26px;67    box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset;68  }69  .text-field {70    flex: 1; height: 92px; background: #2b2b2b; border-radius: 16px;71    display: flex; align-items: center; padding: 0 24px; color: #9e9e9e; font-size: 32px;72    border: 1px solid #3a3a3a;73  }74  .send-btn {75    width: 90px; height: 90px; border-radius: 45px; margin-left: 16px;76    background: #1E78D6; display: flex; align-items: center; justify-content: center;77    box-shadow: 0 6px 12px rgba(0,0,0,0.35);78  }79  .send-btn svg { width: 44px; height: 44px; fill: #ffffff; }80 81  /* Keyboard */82  .keyboard {83    position: absolute; left: 0; right: 0; bottom: 0; height: 880px;84    background: #0e0e0e; border-top: 1px solid #2a2a2a; padding: 20px 24px 40px 24px;85  }86  .kb-top {87    display: flex; align-items: center; gap: 28px; padding: 6px 8px 10px 8px; color: #cfcfcf;88  }89  .kb-top .tool {90    background: #1a1a1a; border: 1px solid #2b2b2b; color: #d0d0d0;91    padding: 12px 18px; border-radius: 12px; font-size: 26px;92  }93  .row { display: flex; justify-content: center; margin-top: 24px; }94  .key {95    width: 90px; height: 110px; margin: 8px; border-radius: 16px;96    background: #1f1f1f; border: 1px solid #303030; color: #e6e6e6;97    display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 600;98  }99  .key.wide { width: 150px; }100  .key.space { flex: 1; max-width: 560px; }101  .key.circle {102    width: 110px; height: 110px; border-radius: 55px; background: #d6e676; color: #111;103    font-size: 40px; font-weight: 700; border: none;104  }105 106  /* Gesture pill */107  .home-pill {108    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);109    width: 260px; height: 12px; background: #e7e7e7; border-radius: 6px; opacity: 0.85;110  }111 112  /* Simple SVG icons */113  .back-btn svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 6px; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="status-bar">121    <div>1:55</div>122    <div class="status-icons">123      <div>83°</div>124      <div class="dot"></div>125      <div class="dot"></div>126      <div class="dot"></div>127    </div>128  </div>129 130  <!-- App b