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>Busuu Onboarding Mock</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: #1e3a8a;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: #1f3b66;25    color: #eaf2ff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 600;31    letter-spacing: 0.5px;32  }33  .status-left { display: flex; align-items: center; gap: 20px; font-size: 40px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35  .status-icon svg { width: 44px; height: 44px; fill: #eaf2ff; }36 37  /* Hero gradient area */38  .hero {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 1580px;44    background: linear-gradient(180deg, #2e62f5 0%, #3b43e6 50%, #4a2ee6 100%);45  }46 47  /* Branding */48  .brand {49    position: absolute;50    top: 120px;51    left: 80px;52    display: flex;53    align-items: center;54    gap: 26px;55  }56  .logo-bubble {57    position: relative;58    width: 110px;59    height: 110px;60    background: #ffffff;61    border-radius: 32px;62  }63  .logo-bubble::after{64    content:"";65    position:absolute;66    bottom:0;67    right:0;68    width: 72px;69    height: 72px;70    background:#8fb4ff;71    border-radius: 50% 50% 28px 28px;72    transform: translate(-10px,-6px);73    opacity: 0.9;74  }75  .brand-title {76    font-size: 96px;77    font-weight: 800;78    color: #ffffff;79    line-height: 1;80    letter-spacing: 1px;81  }82  .brand-sub {83    position: absolute;84    top: 250px;85    left: 220px;86    font-size: 40px;87    color: rgba(255,255,255,0.85);88  }89 90  /* Circular placeholders (flags and icons) */91  .circle-img {92    position: absolute;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    color: #757575;96    display: flex;97    justify-content: center;98    align-items: center;99    border-radius: 50%;100    text-align: center;101    font-size: 32px;102    padding: 10px;103    box-sizing: border-box;104  }105 106  /* Central avatar circle */107  .avatar {108    position: absolute;109    top: 700px;110    left: 360px;111    width: 360px;112    height: 360px;113    background: #ffffff;114    border-radius: 50%;115    display: flex;116    justify-content: center;117    align-items: center;118    border: 1px solid rgba(255,255,255,0.5);119    color: #3949ab;120    font-weight: 600;121    box-shadow: 0 10px 30px rgba(0,0,0,0.15);122  }123 124  /* Bottom card */125  .card {126    position: absolute;127    left: 0;128    bottom: 120px;129    width: 1080px;130    height: 820px;131    background: #ffffff;132    border-top-left-radius: 90px;133    border-top-right-radius: 90px;134    box-shadow: 0 -10px 20px rgba(0,0,0,0.1);135    display: flex;136    flex-direction: column;137    align-items: center;138    padding-top: 120px;139    box-sizing: border-box;140  }141  .card h1 {142    margin: 0 80px;143    font-size: 72px;144    line-height: 1.18;145    text-align: center;146    color: #111111;147    font-weight: 800;148  }149  .primary-btn {150    margin-top: 80px;151    width: 920px;152    height: 140px;153    border-radius: 80px;154    background: #66E39A;155    color: #0b3d2b;156    font-size: 48px;157    font-weight: 700;158    display: flex;159    align-items: center;160    justify-content: center;161    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.05);162  }163  .login {164    margin-top: 60px;165    color: #8a94a6;166    font-size: 36px;167  }168  .login a {169    color: #6b7a99;170    text-decoration: underline;171  }172 173  /* Home indicator */174  .home-indicator {175    position: absolute;176    bottom: 36px;177    left: 50%;178    transform: translateX(-50%);179    width: 240px;180    height: 18px;181    background: #000000;182    border-radius: 12px;183    opacity: 0.1;184  }185</style>186</head>187<body>188<div id="render-target">189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>12:40</div>193      <div style="font-size:36px; opacity:.8;">83°</div>194    </div>195    <div class="status-right">196      <div class="status-icon">197        <!-- Simple cellular icon -->198        <svg viewBox="0 0 24 24"><path d="M3 17h2v4H3v-4zm4-6h2v10H7V11zm4-4h2v14h-2V7zm4-4h2v18h-2V3z"/></svg>199      </div>200      <div class="status-icon">201        <!-- Wifi icon -->202        <svg viewBox="0 0 24 24"><path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5s-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zM2 9.5c5.5-5.3 14.5-5.3 20 0l-1.6 1.6C16.3 6.9 7.7 6.9 3.6 11.1L2 9.5zm4 4c4.1-4 10-4 14 0l-1.6 1.6c-3.2-3-7.6-3-10.8 0L6 13.5z"/></svg>203      </div>204      <div class="status-icon">205        <!-- Battery icon -->206        <svg viewBox="0 0 28 24"><path d="M2 7c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7zm22 3h2v4h-2v-4zm-20 6h16V7H4v10z"/></svg>207      </div>208    </div>209  </div>210 211  <!-- Gradient hero with branding -->212  <div class="hero">213    <div class="brand">214      <div class="logo-bubble"></div>215      <div class="brand-title">Busuu</div>216    </div>217    <div class="brand-sub">a Chegg service</div>218 219    <!-- Floating circular placeholders -->220    <div class="circle-img" style="top: 440px; left: 240px; width: 160px; height: 160px;">[IMG: Flag - UK]</div>221    <div class="circle-img" style="top: 420px; left: 650px; width: 190px; height: 190px;">[IMG: Flag - Turkey]</div>222    <div class="circle-img" style="top: 380px; left: 820px; width: 280px; height: 280px;">[IMG: Flag - Austria]</div>223 224    <div class="circle-img" style="top: 670px; left: 70px; width: 300px; height: 300px;">[IMG: Language Icon]</div>225    <div class="circle-img" style="top: 990px; left: 220px; width: 380px; height: 380px;">[IMG: Flag - Japan]</div>226 227    <div class="circle-img" style="top: 1020px; left: 760px; width: 240px; height: 240px;">[IMG: Flag - Russia]</div>228    <div class="circle-img" style="top: 840px; left: 940px; width: 160px; height: 160px;">[IMG: Flag - Korea]</div>229    <div class="circle-img" style="top: 1180px; left: 590px; width: 180px; height: 180px;">[IMG: Flag - Arabic]</div>230 231    <!-- Central avatar -->232    <div class="avatar">[IMG: Person with phone]</div>233  </div>234 235  <!-- Bottom white card -->236  <div class="card">237    <h1>Learn a language in 3 minutes a day</h1>238    <div class="primary-btn">Start learning</div>239    <div class="login">Already have an account? <a href="#">Log in</a></div>240  </div>241 242  <!-- Home indicator -->243  <div class="home-indicator"></div>244</div>245</body>246</html>