GD-ML/AndroidCode
13.4k
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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Inter", "Helvetica Neue", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 110px;28 background: #1f4b7a;29 color: #ffffff;30 display: flex;31 align-items: center;32 padding: 0 36px;33 box-sizing: border-box;34 font-weight: 600;35 }36 .status-bar .time {37 font-size: 40px;38 letter-spacing: 1px;39 }40 .status-bar .right {41 margin-left: auto;42 display: flex;43 align-items: center;44 gap: 18px;45 }46 .status-dot {47 width: 12px; height: 12px; background: #fff; opacity: 0.7; border-radius: 50%;48 }49 .battery {50 width: 70px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;51 }52 .battery::after {53 content: "";54 position: absolute; right: -10px; top: 9px; width: 6px; height: 12px; background: #fff; border-radius: 2px;55 }56 .battery .level {57 position: absolute; left: 3px; top: 3px; bottom: 3px; right: 12px; background: #fff;58 }59 60 /* Hero gradient area */61 .hero {62 position: absolute;63 top: 110px; /* under status bar */64 left: 0;65 width: 1080px;66 height: 1550px;67 background: linear-gradient(180deg, #3e7df0 0%, #4b2be7 100%);68 }69 70 /* Logo */71 .logo-wrap {72 width: 100%;73 box-sizing: border-box;74 padding: 120px 80px 0 80px;75 display: flex;76 align-items: center;77 gap: 26px;78 }79 .logo-icon {80 width: 120px;81 height: 120px;82 border-radius: 32px;83 background: #ffffff;84 position: relative;85 overflow: hidden;86 }87 .logo-icon::after {88 content: "";89 position: absolute;90 right: -14%;91 bottom: -14%;92 width: 80%;93 height: 80%;94 background: #a9c3ff;95 border-top-left-radius: 100px;96 border-bottom-right-radius: 24px;97 }98 .logo-text {99 color: #ffffff;100 }101 .logo-text .brand {102 font-weight: 800;103 font-size: 110px;104 line-height: 1;105 }106 .logo-text .tagline {107 font-size: 44px;108 opacity: 0.9;109 margin-top: 10px;110 }111 112 /* Floating circle placeholders (flags/illustration) */113 .circle {114 position: absolute;115 border-radius: 50%;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 color: #757575;119 display: flex;120 align-items: center;121 justify-content: center;122 text-align: center;123 padding: 12px;124 box-sizing: border-box;125 }126 .circle.small { font-size: 28px; }127 .circle.medium { font-size: 30px; }128 .circle.large { font-size: 32px; }129 .circle.center-illustration { font-size: 34px; background: #E0E0E0; }130 131 /* Bottom sheet */132 .sheet {133 position: absolute;134 left: 0;135 right: 0;136 top: 1520px;137 height: 880px;138 background: #ffffff;139 border-top-left-radius: 90px;140 border-top-right-radius: 90px;141 box-shadow: 0 -8px 24px rgba(0,0,0,0.12);142 padding: 80px 64px 40px 64px;143 box-sizing: border-box;144 display: flex;145 flex-direction: column;146 align-items: center;147 }148 .title {149 text-align: center;150 color: #111419;151 font-size: 68px;152 font-weight: 800;153 line-height: 1.15;154 margin: 10px 0 56px 0;155 max-width: 920px;156 }157 .btn {158 width: 960px;159 height: 140px;160 background: #66e39c;161 border-radius: 90px;162 display: flex;163 align-items: center;164 justify-content: center;165 color: #10351d;166 font-weight: 700;167 font-size: 48px;168 box-shadow: 0 8px 0 rgba(0,0,0,0.05) inset;169 }170 .meta {171 margin-top: 40px;172 font-size: 36px;173 color: #7b8594;174 }175 .meta a {176 color: #3b72f6;177 text-decoration: underline;178 }179 180 /* Bottom gesture bar (visual only) */181 .gesture {182 position: absolute;183 bottom: 22px;184 left: 50%;185 transform: translateX(-50%);186 width: 320px;187 height: 10px;188 border-radius: 6px;189 background: #000;190 opacity: 0.6;191 }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status bar -->198 <div class="status-bar">199 <div class="time">6:40</div>200 <div class="right">201 <div class="status-dot"></div>202 <div class="status-dot"></div>203 <div class="status-dot"></div>204 <div class="battery"><div class="level"></div></div>205 </div>206 </div>207 208 <!-- Hero area -->209 <div class="hero">210 <div class="logo-wrap">211 <div class="logo-icon"></div>212 <div class="logo-text">213 <div class="brand">Busuu</div>214 <div class="tagline">a Chegg service</div>215 </div>216 </div>217 218 <!-- Floating circle placeholders -->219 <div class="circle small" style="width:170px;height:170px; top:520px; left:170px;">[IMG: Flag]</div>220 <div class="circle small" style="width:160px;height:160px; top:520px; left:470px;">[IMG: Flag]</div>221 <div class="circle large" style="width:380px;height:380px; top:460px; right:60px;">[IMG: Flag]</div>222 <div class="circle medium" style="width:330px;height:330px; top:850px; left:60px; opacity:0.9;">[IMG: Flag]</div>223 <div class="circle center-illustration" style="width:440px;height:440px; top:860px; left:320px;">[IMG: Person using phone]</div>224 <div class="circle small" style="width:170px;height:170px; top:930px; right:120px;">[IMG: Flag]</div>225 <div class="circle medium" style="width:320px;height:320px; top:1180px; left:170px; opacity:0.85;">[IMG: Flag]</div>226 <div class="circle medium" style="width:200px;height:200px; top:1200px; left:660px;">[IMG: Emblem]</div>227 <div class="circle medium" style="width:300px;height:300px; top:1180px; right:80px;">[IMG: Flag]</div>228 </div>229 230 <!-- Bottom content sheet -->231 <div class="sheet">232 <div class="title">Learn a language in 3 minutes a day</div>233 <div class="btn">Start learning</div>234 <div class="meta">Already have an account? <a href="#">Log in</a></div>235 </div>236 237 <div class="gesture"></div>238</div>239</body>240</html>