GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>eDreams Chat UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #212121;15    border-radius: 0;16    box-shadow: none;17    color: #FFFFFF;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    background: #111111;28    color: #ffffff;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    box-sizing: border-box;34    font-size: 36px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 22px;41    opacity: 0.9;42  }43  .status-dot {44    width: 12px; height: 12px; background: #ffffff; border-radius: 50%;45  }46  .icon-battery {47    width: 48px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;48  }49  .icon-battery::after {50    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;51  }52  .icon-battery .level {53    position: absolute; left: 3px; top: 3px; height: 16px; width: 28px; background: #fff;54  }55 56  /* App bar */57  .app-bar {58    position: absolute;59    top: 120px;60    left: 0;61    width: 1080px;62    height: 180px;63    background: #2a2a2a;64    border-bottom: 1px solid #333333;65    display: flex;66    align-items: center;67    padding: 0 36px;68    box-sizing: border-box;69    gap: 28px;70  }71  .back-btn {72    width: 72px;73    height: 72px;74    display: flex;75    align-items: center;76    justify-content: center;77  }78  .logo-placeholder {79    width: 96px;80    height: 96px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    border-radius: 50%;84    color: #757575;85    display: flex;86    align-items: center;87    justify-content: center;88    font-size: 24px;89  }90  .title {91    font-size: 54px;92    font-weight: 600;93    margin-left: 6px;94  }95 96  /* Content */97  .content {98    position: absolute;99    top: 320px;100    left: 0;101    width: 100%;102    padding: 0 56px;103    box-sizing: border-box;104  }105  .content p {106    font-size: 34px;107    line-height: 52px;108    color: #B9B9B9;109    margin: 20px 0;110    max-width: 960px;111  }112 113  /* Input bar */114  .input-bar {115    position: absolute;116    bottom: 120px;117    left: 0;118    width: 1080px;119    height: 170px;120    background: #3a3a3a;121    border-top: 1px solid #4a4a4a;122    padding: 0 36px;123    box-sizing: border-box;124    display: flex;125    align-items: center;126    justify-content: space-between;127  }128  .placeholder-text {129    font-size: 36px;130    color: #cfcfcf;131    opacity: 0.9;132  }133  .send-fab {134    width: 120px;135    height: 120px;136    border-radius: 60px;137    background: #234F7B;138    border: 1px solid rgba(0,0,0,0.25);139    display: flex;140    align-items: center;141    justify-content: center;142  }143  .nav-pill {144    position: absolute;145    bottom: 36px;146    left: 50%;147    transform: translateX(-50%);148    width: 300px;149    height: 14px;150    background: #E6E6E6;151    border-radius: 8px;152    opacity: 0.95;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>1:53</div>162    <div class="status-icons">163      <div>83°</div>164      <div class="status-dot"></div>165      <div class="status-dot"></div>166      <div class="status-dot"></div>167      <div class="icon-battery"><div class="level"></div></div>168    </div>169  </div>170 171  <!-- App Bar -->172  <div class="app-bar">173    <div class="back-btn">174      <svg width="48" height="48" viewBox="0 0 24 24">175        <path d="M15 18L9 12l6-6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>176      </svg>177    </div>178    <div class="logo-placeholder">[IMG: eDreams Logo]</div>179    <div class="title">eDreams</div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <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>185    <p>Feel free to leave us a message about anything that's on your mind. We'll get back to your questions, suggestion or anything else as soon as we can.</p>186  </div>187 188  <!-- Input Bar -->189  <div class="input-bar">190    <div class="placeholder-text">Type a message...</div>191    <div class="send-fab">192      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">193        <path d="M2 21l20-9L2 3l4 9-4 9 8-6z"/>194      </svg>195    </div>196  </div>197 198  <!-- Bottom navigation pill -->199  <div class="nav-pill"></div>200 201</div>202</body>203</html>