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>Chat UI</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; position: relative; overflow: hidden; background: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 92px;16    background: #0b6f8a; color: #ffffff;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; font-size: 36px; letter-spacing: 0.3px;19  }20  .status-center { display: flex; align-items: center; gap: 12px; opacity: 0.95; }21  .status-icons { display: flex; align-items: center; gap: 28px; }22 23  /* App bar */24  .app-bar {25    position: absolute; top: 92px; left: 0; width: 100%; height: 170px;26    background: #0d89c6; color: #ffffff; display: flex; align-items: center;27    padding: 0 36px; box-sizing: border-box;28  }29  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 18px; }30  .title-area { display: flex; align-items: center; gap: 16px; }31  .chat-title { font-size: 48px; font-weight: 600; }32  .online-dot {33    width: 22px; height: 22px; border-radius: 50%; background: #e6e6e6; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.6);34  }35  .info-btn {36    margin-left: auto; width: 72px; height: 72px; border-radius: 36px;37    border: 2px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;38    background: rgba(255,255,255,0.08);39  }40 41  /* Chat body */42  .chat-body {43    position: absolute; top: 262px; left: 0; right: 0; bottom: 310px; background: #ffffff;44  }45 46  /* Composer area */47  .composer {48    position: absolute; left: 0; right: 0; bottom: 110px; height: 200px; background: #ffffff;49    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);50  }51  .suggestions {52    height: 98px; display: flex; align-items: center; padding-left: 30px; overflow: hidden; position: relative;53  }54  .suggestions::before {55    content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 4px; background: #d9d9d9; border-radius: 2px;56  }57  .chip {58    border: 2px solid #0d89c6; color: #0d89c6; border-radius: 60px; padding: 18px 28px; margin-right: 22px;59    font-size: 36px; white-space: nowrap; background: #ffffff;60  }61  .input-row {62    height: 102px; display: flex; align-items: center; padding: 0 30px; gap: 24px;63  }64  .input-field {65    flex: 1; height: 100px; background: #f4f4f4; border: 2px solid #e5e5e5; border-radius: 50px;66    display: flex; align-items: center; padding: 0 28px 0 96px; font-size: 38px; color: #7a7a7a; position: relative;67    box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);68  }69  .attach-icon {70    position: absolute; left: 30px; width: 48px; height: 48px; opacity: 0.75;71  }72  .camera-btn {73    width: 120px; height: 120px; background: #0d89c6; border-radius: 60px; display: flex; align-items: center; justify-content: center;74    box-shadow: 0 6px 16px rgba(0,0,0,0.15);75  }76 77  /* Android home indicator */78  .home-indicator {79    position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #000000;80    display: flex; align-items: flex-end; justify-content: center;81  }82  .home-handle {83    width: 220px; height: 10px; background: #ffffff; border-radius: 5px; margin-bottom: 30px; opacity: 0.9;84  }85 86  /* SVG helpers */87  svg { display: block; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div>8:07</div>96    <div class="status-center">97      <!-- Lock icon -->98      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">99        <path d="M7 10V7a5 5 0 0 1 10 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>100        <rect x="5" y="10" width="14" height="10" rx="2" fill="#ffffff" opacity="0.25"/>101      </svg>102    </div>103    <div class="status-icons">104      <!-- Wi-Fi -->105      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">106        <path d="M2.5 8.5c4.7-4.7 14.3-4.7 19 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>107        <path d="M5.5 11.5c3.5-3.5 9.5-3.5 13 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>108        <path d="M8.5 14.5c2.3-2.3 6.7-2.3 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>109        <circle cx="12" cy="18" r="2" fill="#fff"/>110      </svg>111      <!-- Battery -->112      <svg width="44" height="44" viewBox="0 0 28 20" fill="none">113        <rect x="1" y="3" width="22" height="14" rx="2" stroke="#fff" stroke-width="2"/>114        <rect x="3" y="5" width="18" height="10" rx="1" fill="#ffffff"/>115        <rect x="23" y="7" width="4" height="6" rx="1" fill="#ffffff"/>116      </svg>117    </div>118  </div>119 120  <!-- App Bar -->121  <div class="app-bar">122    <div class="back-btn">123      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">124        <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>125      </svg>126    </div>127    <div class="title-area">128      <div class="chat-title">achi.gupta</div>129      <div class="online-dot"></div>130    </div>131    <div class="info-btn">132      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">133        <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" opacity="0.0"/>134        <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2"/>135        <path d="M12 17v-6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>136        <circle cx="12" cy="7" r="1.5" fill="#fff"/>137      </svg>138    </div>139  </div>140 141  <!-- Chat Body -->142  <div class="chat-body">143    <!-- Empty conversation area -->144  </div>145 146  <!-- Composer -->147  <div class="composer">148    <div class="suggestions">149      <div class="chip">Is it available?</div>150      <div class="chip">Is the price negotiable?</div>151      <div class="chip">How old is it?</div>152    </div>153    <div class="input-row">154      <div class="input-field">155        <svg class="attach-icon" viewBox="0 0 24 24" fill="none">156          <path d="M7 13l6-6a3 3 0 1 1 4 4l-8 8a5 5 0 0 1-7-7l7-7" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>157        </svg>158        Type your message here159      </div>160      <div class="camera-btn">161        <svg width="52" height="52" viewBox="0 0 24 24" fill="none">162          <rect x="3" y="6" width="18" height="14" rx="3" stroke="#fff" stroke-width="2"/>163          <path d="M9 6l1.5-2h3L15 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>164          <circle cx="12" cy="13" r="4" stroke="#fff" stroke-width="2"/>165        </svg>166      </div>167    </div>168  </div>169 170  <!-- Home Indicator -->171  <div class="home-indicator">172    <div class="home-handle"></div>173  </div>174 175</div>176</body>177</html>