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>Call UI - Connecting</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1500px 900px at 40% 40%, rgba(180,230,240,0.9), rgba(150,220,230,0.8) 50%, rgba(120,210,220,0.7) 70%, rgba(100,200,210,0.6) 100%);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-time { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 2.5; }40 41  /* Header info */42  .header {43    position: absolute;44    top: 150px;45    left: 44px;46    right: 44px;47    color: #ffffff;48  }49  .name-row {50    display: flex;51    align-items: center;52    justify-content: space-between;53  }54  .name-left {55    display: flex;56    align-items: center;57    gap: 22px;58  }59  .bubble-icon svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 3; opacity: 0.95; }60  .contact-name {61    font-size: 64px;62    font-weight: 700;63    letter-spacing: 0.2px;64    text-shadow: 0 2px 6px rgba(0,0,0,0.25);65  }66  .sub-status {67    margin-left: 78px;68    margin-top: 16px;69    font-size: 30px;70    letter-spacing: 2px;71    opacity: 0.9;72  }73  .switch-icon {74    width: 80px; height: 80px;75    display: flex; align-items: center; justify-content: center;76    border-radius: 18px;77    background: rgba(255,255,255,0.18);78    backdrop-filter: blur(2px);79  }80  .switch-icon svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 3; fill: none; }81 82  /* Remote preview card */83  .remote-card {84    position: absolute;85    right: 54px;86    top: 460px;87    width: 330px;88    height: 420px;89    background: #F5F7FA;90    border-radius: 28px;91    box-shadow: 0 8px 24px rgba(0,0,0,0.15);92    display: flex;93    align-items: center;94    justify-content: center;95  }96  .remote-avatar {97    width: 220px; height: 220px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 50%;101    display: flex; align-items: center; justify-content: center;102    color: #757575; font-size: 26px; text-align: center; padding: 8px;103  }104 105  /* Local large video circle */106  .local-video {107    position: absolute;108    left: 50%;109    top: 1080px;110    transform: translate(-50%, 0);111    width: 360px; height: 360px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    border-radius: 50%;115    display: flex; align-items: center; justify-content: center;116    color: #757575; font-size: 28px; text-align: center; padding: 12px;117    box-shadow: 0 8px 30px rgba(0,0,0,0.25);118  }119 120  /* Bottom gradient overlay */121  .bottom-fade {122    position: absolute;123    bottom: 0;124    left: 0;125    width: 1080px;126    height: 520px;127    background: linear-gradient(to top, rgba(0,0,0,0.40), rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.0));128    pointer-events: none;129  }130 131  /* Controls */132  .controls {133    position: absolute;134    bottom: 190px;135    left: 0; right: 0;136    display: flex;137    justify-content: space-between;138    align-items: center;139    padding: 0 72px;140  }141  .control-btn {142    width: 140px; height: 140px;143    border-radius: 50%;144    display: flex; align-items: center; justify-content: center;145    box-shadow: 0 8px 18px rgba(0,0,0,0.3);146  }147  .btn-grey { background: #D9D9DF; }148  .btn-blue { background: #1F79C9; }149  .btn-red { background: #E64B3C; }150  .control-btn svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 3; fill: none; }151 152  /* Gesture nav bar */153  .gesture-bar {154    position: absolute;155    bottom: 72px;156    left: 50%;157    transform: translateX(-50%);158    width: 240px; height: 10px;159    border-radius: 8px;160    background: rgba(255,255,255,0.85);161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Status Bar -->168  <div class="status-bar">169    <div class="status-left">170      <div class="status-time">11:08</div>171      <!-- small walking/person icon -->172      <div class="status-icon">173        <svg viewBox="0 0 24 24">174          <circle cx="12" cy="4" r="2"></circle>175          <path d="M10 8l2 3 3 1-2 3M10 10l-3 6M14 17l2 4"></path>176        </svg>177      </div>178      <!-- bell icon -->179      <div class="status-icon">180        <svg viewBox="0 0 24 24"><path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path><path d="M18 16H6c0-5 2-8 6-8s6 3 6 8z"></path></svg>181      </div>182      <!-- mail icon -->183      <div class="status-icon">184        <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 7l9 6 9-6"></path></svg>185      </div>186    </div>187    <div class="status-right">188      <!-- wifi -->189      <div class="status-icon">190        <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0"></path><path d="M5 12c4-3 10-3 14 0"></path><path d="M8 15c3-2 5-2 8 0"></path><circle cx="12" cy="18" r="1.8" fill="#fff" stroke="none"></circle></svg>191      </div>192      <!-- battery -->193      <div class="status-icon">194        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2"></rect><rect x="20" y="10" width="2" height="4" rx="1"></rect><rect x="5" y="8" width="12" height="8" fill="#fff" stroke="none"></rect></svg>195      </div>196    </div>197  </div>198 199  <!-- Header info -->200  <div class="header">201    <div class="name-row">202      <div class="name-left">203        <div class="bubble-icon">204          <svg viewBox="0 0 24 24">205            <path d="M4 5h16v10H9l-5 4V5z"></path>206          </svg>207        </div>208        <div class="contact-name">Amelia miller</div>209      </div>210      <div class="switch-icon" title="Switch camera">211        <svg viewBox="0 0 24 24">212          <rect x="6" y="7" width="12" height="8" rx="2"></rect>213          <path d="M8 4l2 2M16 4l-2 2"></path>214          <path d="M7 18a7 7 0 0 1-2-5l-2 2M17 6a7 7 0 0 1 2 5l2-2"></path>215        </svg>216      </div>217    </div>218    <div class="sub-status">CONNECTING</div>219  </div>220 221  <!-- Remote preview card -->222  <div class="remote-card">223    <div class="remote-avatar">[IMG: Floral avatar]</div>224  </div>225 226  <!-- Local video circle -->227  <div class="local-video">[IMG: Plant video]</div>228 229  <!-- Bottom gradient overlay -->230  <div class="bottom-fade"></div>231 232  <!-- Controls -->233  <div class="controls">234    <!-- Heart / reaction -->235    <div class="control-btn btn-grey" title="Reactions">236      <svg viewBox="0 0 24 24">237        <path d="M12 21s-7-4.5-9-8c-2-3.5 1-8 5-7 2 .5 3 2.5 4 3.5 1-1 2-3 4-3.5 4-1 7 3.5 5 7-2 3.5-9 8-9 8z"></path>238      </svg>239    </div>240 241    <!-- Microphone -->242    <div class="control-btn btn-blue" title="Mute/Unmute">243      <svg viewBox="0 0 24 24">244        <rect x="9" y="4" width="6" height="10" rx="3"></rect>245        <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v3M8 20h8"></path>246      </svg>247    </div>248 249    <!-- Video -->250    <div class="control-btn btn-blue" title="Video">251      <svg viewBox="0 0 24 24">252        <rect x="5" y="7" width="10" height="10" rx="2"></rect>253        <path d="M15 9l4-2v10l-4-2"></path>254      </svg>255    </div>256 257    <!-- Hang up -->258    <div class="control-btn btn-red" title="End call">259      <svg viewBox="0 0 24 24">260        <path d="M5 13c4-3 10-3 14 0M4 12l3 4M20 12l-3 4"></path>261      </svg>262    </div>263 264    <!-- More -->265    <div class="control-btn btn-grey" title="More">266      <svg viewBox="0 0 24 24">267        <circle cx="6" cy="12" r="2" fill="#fff" stroke="none"></circle>268        <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>269        <circle cx="18" cy="12" r="2" fill="#fff" stroke="none"></circle>270      </svg>271    </div>272  </div>273 274  <!-- Gesture navigation bar -->275  <div class="gesture-bar"></div>276 277</div>278</body>279</html>