GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Google Meet Style</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1B191D; /* deep dark background */14    color: #E9E6EF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    color: #D7D2E4;25    font-size: 34px;26    letter-spacing: 0.5px;27  }28  .status-time {29    position: absolute;30    left: 54px;31    top: 34px;32    font-weight: 600;33  }34  .status-icons {35    position: absolute;36    right: 40px;37    top: 34px;38    display: flex;39    align-items: center;40    gap: 28px;41    opacity: 0.9;42  }43  .icon-wifi, .icon-signal, .icon-battery {44    width: 40px; height: 34px;45  }46  .icon-dot {47    width: 10px; height: 10px; background: #BCB4CC; border-radius: 50%;48  }49  .icon-battery {50    position: relative;51  }52  .icon-battery::before {53    content: "";54    position: absolute;55    right: -8px; top: 10px;56    width: 8px; height: 14px; background: #BCB4CC; border-radius: 2px;57  }58  .icon-battery svg, .icon-wifi svg, .icon-signal svg { fill: none; stroke: #D7D2E4; stroke-width: 4; }59 60  /* Search bar */61  .search-wrap {62    position: absolute;63    top: 140px;64    left: 40px;65    width: 1000px;66    height: 120px;67    display: flex;68    align-items: center;69    justify-content: space-between;70    padding: 0 24px 0 24px;71    box-sizing: border-box;72    background: #332D38;73    border-radius: 60px;74  }75  .hamburger {76    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;77  }78  .hamburger svg { stroke: #D7D2E4; stroke-width: 8; }79  .search-text {80    flex: 1;81    color: #CFC8D9;82    font-size: 40px;83    margin-left: 10px;84  }85  .avatar {86    width: 92px; height: 92px; border-radius: 50%;87    background: #29B7A7;88    color: #072B29;89    display: flex; align-items: center; justify-content: center;90    font-weight: 700; font-size: 44px;91  }92 93  /* Upgrade card */94  .card {95    position: absolute;96    top: 310px;97    left: 40px;98    width: 1000px;99    background: #231F27;100    border-radius: 34px;101    padding: 42px;102    box-sizing: border-box;103    color: #EEE8F7;104    border: 1px solid rgba(255,255,255,0.06);105  }106  .card h2 {107    margin: 0 0 10px 0;108    font-size: 56px;109    line-height: 1.08;110    font-weight: 700;111  }112  .card .subtitle {113    margin-top: 24px;114    font-size: 40px;115    color: #D2CBDE;116    line-height: 1.35;117    max-width: 620px;118  }119  .card-content {120    display: flex;121    align-items: center;122    justify-content: space-between;123  }124  .meet-art {125    width: 280px; height: 280px; border-radius: 140px;126    background: #E0E0E0; border: 1px solid #BDBDBD;127    display: flex; align-items: center; justify-content: center;128    color: #757575; font-size: 36px; text-align: center;129  }130  .card-actions {131    margin-top: 30px;132    display: flex; gap: 48px;133  }134  .link {135    color: #CFAAF7;136    font-size: 40px;137    font-weight: 600;138  }139 140  /* Floating action button */141  .fab {142    position: absolute;143    right: 40px;144    bottom: 160px;145    background: #E1BEFF;146    color: #1E1630;147    height: 120px;148    width: 360px;149    border-radius: 140px;150    display: flex; align-items: center;151    justify-content: center; gap: 26px;152    box-shadow: 0 10px 30px rgba(0,0,0,0.35);153    font-size: 46px; font-weight: 700;154  }155  .fab svg { fill: none; stroke: #2B1F3A; stroke-width: 8; }156 157  /* Decorative tiny confetti on card (subtle, optional) */158  .confetti { position: absolute; }159  .confetti .dot { width: 8px; height: 8px; border-radius: 50%; position: absolute; }160  .c1 { width: 18px; height: 4px; background: #F05A57; transform: rotate(30deg); right: 240px; top: 390px; }161  .c2 { width: 14px; height: 14px; background: #FFD12E; border-radius: 2px; right: 210px; top: 360px; }162  .c3 { width: 8px; height: 8px; background: #3AD168; border-radius: 50%; right: 300px; top: 420px; }163  .c4 { width: 20px; height: 4px; background: #FFFFFF; opacity: 0.6; transform: rotate(-15deg); right: 120px; top: 480px; }164  .c5 { width: 8px; height: 8px; background: #5AA1FF; border-radius: 50%; right: 98px; top: 444px; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-time">8:33</div>173    <div class="status-icons">174      <div class="icon-signal">175        <svg viewBox="0 0 40 34"><path d="M1 33h5M1 25h12M1 17h20M1 9h28M1 1h36"/></svg>176      </div>177      <div class="icon-wifi">178        <svg viewBox="0 0 40 34"><path d="M2 10c9-8 27-8 36 0M8 16c6-5 18-5 24 0M15 22c4-3 10-3 14 0M20 28l3 3"/></svg>179      </div>180      <div class="icon-dot"></div>181      <div class="icon-battery">182        <svg viewBox="0 0 40 34"><rect x="2" y="6" width="32" height="22" rx="4"></rect><rect x="6" y="10" width="20" height="14" rx="2" fill="#D7D2E4"></rect></svg>183      </div>184    </div>185  </div>186 187  <!-- Search bar -->188  <div class="search-wrap">189    <div class="hamburger">190      <svg viewBox="0 0 80 80">191        <line x1="16" y1="24" x2="64" y2="24"></line>192        <line x1="16" y1="40" x2="64" y2="40"></line>193        <line x1="16" y1="56" x2="64" y2="56"></line>194      </svg>195    </div>196    <div class="search-text">Search or enter code</div>197    <div class="avatar">C</div>198  </div>199 200  <!-- Upgrade card -->201  <div class="card">202    <div class="card-content">203      <div>204        <h2>Duo has been upgraded to<br>Meet</h2>205        <div class="subtitle">206          Look for the Meet name and icon as your one app for video calling and meetings207        </div>208        <div class="card-actions">209          <div class="link">Got it</div>210          <div class="link">Learn more</div>211        </div>212      </div>213      <div class="meet-art">[IMG: Meet logo]</div>214    </div>215  </div>216 217  <!-- Decorative confetti bits near the right of the card -->218  <div class="confetti">219    <div class="c1"></div>220    <div class="c2"></div>221    <div class="c3 dot"></div>222    <div class="c4"></div>223    <div class="c5 dot"></div>224  </div>225 226  <!-- Floating Action Button -->227  <div class="fab">228    <svg viewBox="0 0 64 64" width="64" height="64">229      <rect x="6" y="18" width="40" height="28" rx="6"></rect>230      <polygon points="46,30 58,24 58,40 46,34" fill="none"></polygon>231    </svg>232    <div>New</div>233  </div>234 235</div>236</body>237</html>