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>eDreams Chat Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f1f1f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; background: #0f0f0f;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px; font-size: 40px; color: #e6e6e6;22  }23  .status-right { display: flex; align-items: center; gap: 26px; }24  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #e6e6e6; stroke-width: 4; }25 26  /* App bar */27  .app-bar {28    position: absolute; top: 120px; left: 0; right: 0;29    height: 160px; background: #212121; border-bottom: 1px solid #2a2a2a;30    display: flex; align-items: center; gap: 28px; padding: 0 32px;31  }32  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }33  .back-btn svg { width: 48px; height: 48px; fill: none; stroke: #e6e6e6; stroke-width: 6; }34  .avatar {35    width: 96px; height: 96px; border-radius: 50%;36    background: #E0E0E0; border: 1px solid #BDBDBD;37    display: flex; align-items: center; justify-content: center;38    color: #757575; font-size: 26px;39  }40  .title { font-size: 48px; font-weight: 600; color: #f5f5f5; }41 42  /* Content text */43  .content {44    position: absolute; top: 280px; left: 0; right: 0; bottom: 1020px;45    padding: 36px 48px 0 48px;46  }47  .intro p {48    font-size: 36px; line-height: 1.6; color: #cfcfcf; margin: 0 0 28px 0;49  }50 51  /* Message composer */52  .composer {53    position: absolute; left: 0; right: 0; bottom: 900px;54    height: 120px; background: #333438; border-top: 1px solid #3d3d3d;55    display: flex; align-items: center; padding: 0 24px 0 32px; gap: 18px;56  }57  .input-text {58    flex: 1; height: 76px; display: flex; align-items: center;59    color: #eaeaea; font-size: 36px;60  }61  .send-btn {62    width: 96px; height: 96px; border-radius: 50%; background: #1976d2;63    display: flex; align-items: center; justify-content: center;64    box-shadow: 0 4px 10px rgba(0,0,0,0.35);65  }66  .send-btn svg { width: 48px; height: 48px; fill: #fff; }67 68  /* Keyboard */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 0;71    height: 900px; background: #121212; border-top: 1px solid #2e2e2e;72    padding: 32px 36px 64px 36px;73    color: #ddd;74  }75  .kbd-top-icons { display: flex; gap: 30px; margin-bottom: 14px; }76  .kbd-icon {77    width: 80px; height: 80px; border-radius: 18px; background: #1e1e1e; border: 1px solid #2a2a2a;78    display: flex; align-items: center; justify-content: center; color: #c7c7c7; font-size: 28px;79  }80 81  .row { display: flex; gap: 18px; margin-top: 22px; }82  .key {83    flex: 0 0 85px; height: 110px;84    border-radius: 24px; background: #1e1e1e; border: 1px solid #2a2a2a;85    display: flex; align-items: center; justify-content: center;86    font-size: 42px; color: #e0e0e0;87    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.5);88  }89  .key.small { font-size: 36px; }90  .row.center { justify-content: center; }91  .key.wide { flex: 0 0 130px; }92  .key.shift { flex: 0 0 130px; }93  .key.back { flex: 0 0 130px; }94  .space { flex: 1 1 auto; height: 110px; border-radius: 24px; background: #1e1e1e; border: 1px solid #2a2a2a; }95  .ball { width: 110px; height: 110px; border-radius: 55px; background: #d3e7a4; color: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 42px; }96 97  /* Home pill */98  .home-pill {99    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);100    width: 240px; height: 12px; background: #e9e9e9; border-radius: 8px;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div>1:54</div>110    <div class="status-right">111      <div>83°</div>112      <div class="status-icon">113        <svg viewBox="0 0 48 48">114          <path d="M6 28c9-10 27-10 36 0" />115          <path d="M12 28c6-6 18-6 24 0" />116          <path d="M18 28c3-3 9-3 12 0" />117          <circle cx="24" cy="32" r="2" fill="#e6e6e6"/>118        </svg>119      </div>120      <div class="status-icon">121        <svg viewBox="0 0 48 48">122          <rect x="6" y="14" width="32" height="20" rx="3" />123          <rect x="40" y="20" width="4" height="8" rx="1" />124          <rect x="10" y="18" width="24" height="12" fill="#e6e6e6" stroke="none"/>125        </svg>126      </div>127    </div>128  </div>129 130  <!-- App bar -->131  <div class="app-bar">132    <div class="back-btn">133      <svg viewBox="0 0 48 48">134        <path d="M28 10 L14 24 L28 38" />135        <path d="M16 24 H40" />136      </svg>137    </div>138    <div class="avatar">[IMG: eDreams Logo]</div>139    <div class="title">eDreams</div>140  </div>141 142  <!-- Content area -->143  <div class="content">144    <div class="intro">145      <p>This is the start of your conversation with the eDreams team. We'll stay in touch to help you get the most out of your app.</p>146      <p>Feel free to leave us a message about anything that's on your mind.</p>147      <p>We'll get back to your questions, suggestion or anything else as soon as we can.</p>148    </div>149  </div>150 151  <!-- Composer -->152  <div class="composer">153    <div class="input-text">Do you have a weekend traveling discount ?</div>154    <div class="send-btn" aria-label="Send">155      <svg viewBox="0 0 48 48">156        <path d="M6 42 L42 24 L6 6 L12 22 L28 24 L12 26 Z" />157      </svg>158    </div>159  </div>160 161  <!-- Keyboard -->162  <div class="keyboard">163    <div class="kbd-top-icons">164      <div class="kbd-icon">⬛</div>165      <div class="kbd-icon">🙂</div>166      <div class="kbd-icon">GIF</div>167      <div class="kbd-icon">⚙️</div>168      <div class="kbd-icon">G↔️</div>169      <div class="kbd-icon">🎨</div>170      <div class="kbd-icon">🎤</div>171    </div>172 173    <div class="row">174      <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>175      <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>176    </div>177 178    <div class="row center">179      <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>180      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>181    </div>182 183    <div class="row center">184      <div class="key shift">⇧</div>185      <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>186      <div class="key back">⌫</div>187    </div>188 189    <div class="row">190      <div class="key wide" style="background:#333a2a;color:#e9f3d0;border-color:#3f4a38;">?123</div>191      <div class="key small">,</div>192      <div class="key small">🙂</div>193      <div class="space"></div>194      <div class="key small">.</div>195      <div class="ball">↵</div>196    </div>197  </div>198 199  <div class="home-pill"></div>200</div>201</body>202</html>