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>Duolingo Style Onboarding</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #111a1c; /* deep charcoal */20    color: #E6F0F2;21  }22 23  /* Back arrow */24  .back-btn {25    position: absolute;26    top: 160px;27    left: 36px;28    width: 72px;29    height: 72px;30    border-radius: 36px;31    display: flex;32    align-items: center;33    justify-content: center;34    color: #8ea3a7;35    cursor: default;36  }37  .back-btn svg {38    width: 48px;39    height: 48px;40    fill: none;41    stroke: #8ea3a7;42    stroke-width: 10;43    stroke-linecap: round;44    stroke-linejoin: round;45  }46 47  /* Speech bubble */48  .bubble {49    position: absolute;50    left: 50%;51    transform: translateX(-50%);52    top: 720px;53    width: 860px;54    padding: 56px 60px;55    border: 6px solid #3a4a4c;56    border-radius: 40px;57    background: transparent;58    color: #d6e1e3;59    font-size: 46px;60    line-height: 1.35;61    letter-spacing: 0.4px;62    box-sizing: border-box;63  }64  /* Tail - outlined style */65  .bubble::after {66    content: "";67    position: absolute;68    left: 50%;69    transform: translateX(-50%);70    bottom: -44px;71    width: 0;72    height: 0;73    border-style: solid;74    border-width: 44px 32px 0 32px;75    border-color: #3a4a4c transparent transparent transparent;76  }77  .bubble::before {78    content: "";79    position: absolute;80    left: 50%;81    transform: translateX(-50%);82    bottom: -38px;83    width: 0;84    height: 0;85    border-style: solid;86    border-width: 38px 28px 0 28px;87    border-color: #111a1c transparent transparent transparent;88  }89 90  /* Owl image placeholder */91  .owl {92    position: absolute;93    left: 50%;94    transform: translateX(-50%);95    top: 1060px;96    width: 320px;97    height: 320px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 24px;101    display: flex;102    align-items: center;103    justify-content: center;104    color: #757575;105    font-weight: 600;106    text-align: center;107  }108  .owl-shadow {109    position: absolute;110    left: 50%;111    transform: translateX(-50%);112    top: 1360px;113    width: 280px;114    height: 120px;115    background: #212c30;116    border-radius: 50%;117    opacity: 0.6;118    filter: blur(2px);119  }120 121  /* Continue button */122  .cta {123    position: absolute;124    left: 60px;125    right: 60px;126    bottom: 220px;127    height: 140px;128    border-radius: 40px;129    background: #A8E64C; /* Duolingo-like green */130    color: #0e1a1d;131    font-size: 48px;132    font-weight: 800;133    letter-spacing: 2px;134    text-align: center;135    line-height: 140px;136    box-shadow: 0 22px 0 #6db234; /* thick drop shadow to mimic raised pill */137  }138 139  /* Home indicator */140  .home-indicator {141    position: absolute;142    left: 50%;143    transform: translateX(-50%);144    bottom: 64px;145    width: 360px;146    height: 16px;147    background: #d9d9d9;148    border-radius: 12px;149    opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155  <div class="back-btn" aria-label="Back">156    <svg viewBox="0 0 24 24">157      <path d="M15 5l-8 7 8 7" />158    </svg>159  </div>160 161  <div class="bubble">162    ...so Duolingo is designed to be fun like a game!163  </div>164 165  <div class="owl">[IMG: Duolingo Owl Mascot]</div>166  <div class="owl-shadow"></div>167 168  <div class="cta">CONTINUE</div>169 170  <div class="home-indicator"></div>171</div>172</body>173</html>