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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1400px 900px at 30% 65%, rgba(210,245,245,0.9), rgba(173,234,234,0.75) 40%, rgba(150,220,220,0.7) 70%, rgba(135,210,210,0.7)),15                linear-gradient(180deg, rgba(140,210,210,0.7) 0%, rgba(190,240,240,0.8) 45%, rgba(170,230,230,0.9) 100%);16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 36px;30    font-weight: 500;31    letter-spacing: 0.3px;32    z-index: 5;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 20px;38    font-size: 36px;39  }40  .status-right {41    margin-left: auto;42    display: flex;43    align-items: center;44    gap: 22px;45  }46  .status-icon svg { width: 44px; height: 44px; }47 48  /* Top overlay header */49  .top-overlay {50    position: absolute;51    top: 120px;52    left: 0;53    width: 100%;54    height: 360px;55    background: linear-gradient(180deg, rgba(35,35,35,0.35) 0%, rgba(35,35,35,0.15) 100%);56    color: #fff;57    padding: 40px 44px;58    box-sizing: border-box;59  }60  .title-row {61    display: flex;62    align-items: center;63    justify-content: space-between;64  }65  .name-wrap {66    display: flex;67    align-items: center;68    gap: 22px;69  }70  .icon-bubble {71    width: 76px;72    height: 76px;73    border-radius: 38px;74    background: rgba(255,255,255,0.25);75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .name {80    font-size: 56px;81    font-weight: 700;82  }83  .connecting {84    margin-left: 98px;85    margin-top: 12px;86    font-size: 28px;87    letter-spacing: 2px;88    opacity: 0.85;89  }90  .switch-icon {91    width: 90px;92    height: 90px;93    border-radius: 22px;94    background: rgba(255,255,255,0.22);95    display: flex;96    align-items: center;97    justify-content: center;98  }99 100  /* Right-side preview */101  .preview {102    position: absolute;103    top: 480px;104    right: 80px;105    width: 300px;106    height: 420px;107    border-radius: 40px;108    background: #0a0a0a;109    box-shadow: 0 10px 30px rgba(0,0,0,0.35);110    overflow: hidden;111  }112  .preview .img {113    width: 100%;114    height: 100%;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 28px;122    text-align: center;123    padding: 10px;124    box-sizing: border-box;125  }126 127  /* Center avatar */128  .avatar {129    position: absolute;130    top: 1180px;131    left: 50%;132    transform: translateX(-50%);133    width: 420px;134    height: 420px;135    border-radius: 50%;136    overflow: hidden;137    box-shadow: 0 18px 50px rgba(0,0,0,0.25);138    border: 6px solid rgba(255,255,255,0.6);139    background: #E0E0E0;140  }141  .avatar .img {142    width: 100%;143    height: 100%;144    background: #E0E0E0;145    border: 1px solid #BDBDBD;146    display: flex;147    align-items: center;148    justify-content: center;149    color: #757575;150    font-size: 30px;151    text-align: center;152    box-sizing: border-box;153  }154 155  /* Bottom gradient overlay */156  .bottom-overlay {157    position: absolute;158    bottom: 0;159    left: 0;160    width: 100%;161    height: 380px;162    background: linear-gradient(0deg, rgba(35,35,35,0.40) 0%, rgba(35,35,35,0.18) 50%, rgba(35,35,35,0.00) 100%);163    pointer-events: none;164  }165 166  /* Control bar */167  .control-bar {168    position: absolute;169    bottom: 120px;170    left: 0;171    width: 100%;172    display: flex;173    align-items: center;174    justify-content: space-between;175    padding: 0 70px;176    box-sizing: border-box;177  }178  .fab {179    width: 160px;180    height: 160px;181    border-radius: 50%;182    box-shadow: 0 12px 28px rgba(0,0,0,0.35);183    display: flex;184    align-items: center;185    justify-content: center;186  }187  .fab svg { width: 70px; height: 70px; }188  .fab.grey { background: #DADDE1; }189  .fab.blue { background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%); color: #fff; }190  .fab.red { background: #E53935; color: #fff; }191  .fab .dot {192    width: 20px; height: 20px; background: rgba(255,255,255,0.6); border-radius: 50%;193  }194 195  /* Home indicator */196  .home-indicator {197    position: absolute;198    bottom: 36px;199    left: 50%;200    transform: translateX(-50%);201    width: 440px;202    height: 16px;203    border-radius: 8px;204    background: rgba(255,255,255,0.85);205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status Bar -->212  <div class="status-bar">213    <div class="status-left">214      <div>11:08</div>215      <div class="status-icon">216        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">217          <path d="M12 2v6M4 12h6M12 16v6M14 12h6M20 20l-2-2M4 4l2 2"/>218        </svg>219      </div>220      <div class="status-icon">221        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">222          <circle cx="12" cy="12" r="5"/>223        </svg>224      </div>225      <div class="status-icon">226        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">227          <path d="M3 4h18v14H3z"/><path d="M3 8h18"/>228        </svg>229      </div>230    </div>231    <div class="status-right">232      <div class="status-icon">233        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234          <path d="M3 18c4-4 14-4 18 0" />235          <path d="M6 15c3-3 9-3 12 0" />236          <path d="M9 12c2-2 4-2 6 0" />237        </svg>238      </div>239      <div class="status-icon">240        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">241          <rect x="3" y="6" width="16" height="12" rx="2"/>242          <rect x="19" y="10" width="2" height="4" fill="#fff" stroke="none"/>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Top overlay header -->249  <div class="top-overlay">250    <div class="title-row">251      <div class="name-wrap">252        <div class="icon-bubble">253          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">254            <path d="M4 5h16v12H9l-5 5V5z"/>255          </svg>256        </div>257        <div class="name">Amelia miller</div>258      </div>259      <div class="switch-icon">260        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">261          <rect x="4" y="6" width="12" height="8" rx="2"/>262          <path d="M18 8l3-3M21 5v6"/>263          <path d="M3 15l3 3M6 18v-6"/>264        </svg>265      </div>266    </div>267    <div class="connecting">CONNECTING</div>268  </div>269 270  <!-- Right-side camera preview -->271  <div class="preview">272    <div class="img">[IMG: Local camera preview]</div>273  </div>274 275  <!-- Central avatar image -->276  <div class="avatar">277    <div class="img">[IMG: Small tree photo]</div>278  </div>279 280  <!-- Bottom overlay gradient -->281  <div class="bottom-overlay"></div>282 283  <!-- Control buttons -->284  <div class="control-bar">285    <div class="fab grey">286      <svg viewBox="0 0 24 24" fill="#757575">287        <path d="M12 21s-8-4.4-8-10a5 5 0 0 1 8-3.6A5 5 0 0 1 20 11c0 5.6-8 10-8 10z"/>288      </svg>289    </div>290    <div class="fab blue">291      <svg viewBox="0 0 24 24" fill="#fff">292        <path d="M12 3c2 0 3 1.7 3 3.7v5.6c0 2-1 3.7-3 3.7s-3-1.7-3-3.7V6.7C9 4.7 10 3 12 3z"/>293        <path d="M7 13a5 5 0 0 0 10 0M10 20h4" stroke="#fff" stroke-width="2" fill="none"/>294      </svg>295    </div>296    <div class="fab blue">297      <svg viewBox="0 0 24 24" fill="#fff">298        <rect x="4" y="6" width="12" height="9" rx="2"/>299        <path d="M16 9l4-3v9l-4-3z"/>300      </svg>301    </div>302    <div class="fab red">303      <svg viewBox="0 0 24 24" fill="#fff">304        <path d="M4 9c5-4 11-4 16 0l-3 3c-3-2-7-2-10 0L4 9z"/>305      </svg>306    </div>307    <div class="fab grey">308      <svg viewBox="0 0 24 24" fill="#757575">309        <circle cx="5" cy="12" r="2"/>310        <circle cx="12" cy="12" r="2"/>311        <circle cx="19" cy="12" r="2"/>312      </svg>313    </div>314  </div>315 316  <!-- Home indicator -->317  <div class="home-indicator"></div>318 319</div>320</body>321</html>