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>Mondly Onboarding Mock</title>7<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">8<style>9  body { margin:0; padding:0; background:transparent; font-family: 'Poppins', Arial, sans-serif; }10  #render-target {11    width:1080px; height:2400px;12    position:relative; overflow:hidden;13    background: linear-gradient(180deg, #53A8FF 0%, #4C79F2 35%, #4B55E8 65%, #4A33C9 100%);14    color:#fff;15  }16  .content { position:absolute; left:48px; right:48px; }17  /* Status bar */18  .status-bar {19    top:20px; height:72px; display:flex; align-items:center; justify-content:space-between;20    padding:0 24px; font-size:34px; font-weight:600; letter-spacing:1px; opacity:0.95;21  }22  .status-icons { display:flex; align-items:center; gap:26px; }23  .icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; opacity:0.95; }24  .icon svg { width:32px; height:32px; fill:#ffffff; }25  /* Logo */26  .logo-wrap { top:160px; text-align:center; }27  .brand {28    font-size:144px; font-weight:300; letter-spacing:4px;29  }30  .brand .globe {31    display:inline-block; width:110px; height:110px; border-radius:55px;32    border:3px solid rgba(255,255,255,0.9); margin:0 16px; position:relative; top:8px;33  }34  .globe::before {35    content:"🌍"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);36    font-size:70px; line-height:1;37  }38  .sub { font-size:40px; margin-top:12px; opacity:0.9; }39  /* Section titles */40  .section-title {41    font-size:54px; font-weight:700; margin-top:140px; margin-bottom:26px;42  }43  /* Select card */44  .select-card {45    background: rgba(255,255,255,0.18);46    border-radius:56px; height:170px;47    display:flex; align-items:center; justify-content:space-between;48    padding:0 40px; backdrop-filter: blur(2px);49  }50  .select-left { display:flex; align-items:center; gap:30px; }51  .flag {52    width:96px; height:96px; border-radius:48px;53    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;54    color:#757575; font-size:28px; font-weight:600;55  }56  .select-text { font-size:56px; font-weight:600; }57  .chev { width:60px; height:60px; }58  .chev svg { width:60px; height:60px; stroke:#fff; stroke-width:8; fill:none; opacity:0.9; }59  /* Level tabs */60  .levels {61    margin-top:90px; background: rgba(255,255,255,0.18); border-radius:60px; height:180px;62    display:flex; align-items:center; padding:0 24px; gap:24px;63  }64  .level {65    flex:1; height:140px; border-radius:56px;66    display:flex; align-items:center; justify-content:center; gap:14px;67    color:rgba(255,255,255,0.85); font-size:46px; font-weight:600; border:2px solid rgba(255,255,255,0.35);68  }69  .level.selected {70    background: rgba(90,223,170,0.18);71    border:6px solid #7CF0C4;72    color:#ffffff;73  }74  .bubble { width:52px; height:52px; border:4px solid currentColor; border-radius:50%; opacity:0.9; }75  .bubble.stack::after {76    content:""; width:40px; height:40px; border:4px solid currentColor; border-radius:50%;77    position:absolute; transform:translate(18px, -10px); opacity:0.7;78  }79  .bubble.stack2::after {80    content:""; width:36px; height:36px; border:4px solid currentColor; border-radius:50%;81    position:absolute; transform:translate(18px, -12px); opacity:0.7;82  }83  /* Legal text */84  .legal {85    margin-top:380px; text-align:center; font-size:36px; line-height:52px; color:rgba(255,255,255,0.95);86  }87  .legal em { font-style:italic; }88  .legal a { color:#D8D9FF; text-decoration:underline; }89  /* Buttons */90  .btn-ring {91    margin-top:48px; padding:14px; border-radius:64px;92    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(120,70,220,0.6) 100%);93  }94  .btn-primary {95    height:140px; border-radius:60px;96    background: linear-gradient(180deg, #F05BCF 0%, #B447F2 100%);97    display:flex; align-items:center; justify-content:center;98    font-size:52px; font-weight:700; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.25);99  }100  .btn-outline {101    height:140px; border-radius:60px; margin-top:28px;102    border:4px solid rgba(255,255,255,0.6); color:#fff; background: transparent;103    display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:700;104  }105  /* Home indicator */106  .home-indicator {107    position:absolute; left:50%; transform:translateX(-50%);108    bottom:24px; width:360px; height:16px; border-radius:10px; background:rgba(255,255,255,0.5);109  }110</style>111</head>112<body>113<div id="render-target">114  <div class="content status-bar">115    <div class="status-time">6:41</div>116    <div class="status-icons">117      <span class="icon">118        <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 13L5 9l7-7z"/></svg>119      </span>120      <span class="icon">121        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3" ry="3"/></svg>122      </span>123      <span class="icon">124        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="9"/></svg>125      </span>126      <span class="icon">127        <svg viewBox="0 0 24 24"><path d="M4 10h12l-4-4M4 14h12l-4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>128      </span>129      <span class="icon">•</span>130      <span class="icon">131        <svg viewBox="0 0 24 24"><path d="M3 14h18M3 10h12" stroke="#fff" stroke-width="2"/></svg>132      </span>133      <span class="icon">134        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="14" height="12" rx="3" ry="3"/><rect x="6" y="8" width="10" height="8" fill="#fff"/></svg>135      </span>136      <div style="font-size:30px;">100%</div>137    </div>138  </div>139 140  <div class="content logo-wrap">141    <div class="brand">142      m<span class="globe"></span>ndly143    </div>144    <div class="sub">by Pearson</div>145  </div>146 147  <div class="content" style="top:680px;">148    <div class="section-title">I speak</div>149    <div class="select-card">150      <div class="select-left">151        <div class="flag">[IMG: UK Flag]</div>152        <div class="select-text">English</div>153      </div>154      <div class="chev">155        <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" /></svg>156      </div>157    </div>158 159    <div class="section-title" style="margin-top:70px;">I want to learn</div>160    <div class="select-card">161      <div class="select-left">162        <div class="flag">[IMG: Brazil Flag]</div>163        <div class="select-text">Portuguese</div>164      </div>165      <div class="chev">166        <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" /></svg>167      </div>168    </div>169 170    <div class="levels">171      <div class="level selected">172        <div class="bubble"></div>173        Beginner174      </div>175      <div class="level">176        <div class="bubble stack"></div>177        Intermediate178      </div>179      <div class="level">180        <div class="bubble stack2"></div>181        Advanced182      </div>183    </div>184  </div>185 186  <div class="content" style="top:1460px;">187    <div class="legal">188      By clicking <em>"agree and start tutorial"</em>, you indicate consent<br>189      to the <a href="#">Terms and Conditions</a> and confirm you've read the<br>190      <a href="#">Privacy Policy</a>.191    </div>192 193    <div class="btn-ring">194      <div class="btn-primary">Agree and Start Tutorial</div>195    </div>196 197    <div class="btn-outline">Log in / Create an account</div>198  </div>199 200  <div class="home-indicator"></div>201</div>202</body>203</html>