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>Motivation Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f1a1c;20  }21 22  /* Back arrow */23  .top-back {24    position: absolute;25    left: 36px;26    top: 140px;27    width: 64px;28    height: 64px;29    display: flex;30    align-items: center;31    justify-content: center;32    opacity: 0.9;33  }34  .top-back svg {35    width: 44px;36    height: 44px;37    fill: none;38    stroke: #8ea3a8;39    stroke-width: 6;40    stroke-linecap: round;41    stroke-linejoin: round;42  }43 44  /* Speech bubble */45  .bubble {46    position: absolute;47    left: 170px;48    top: 690px;49    width: 740px;50    padding: 44px 60px;51    border: 3px solid #3b4a4f;52    border-radius: 36px;53    color: #e6f0f2;54    font-size: 44px;55    line-height: 1.35;56    font-weight: 600;57    letter-spacing: 0.2px;58    box-sizing: border-box;59    text-align: left;60  }61  .bubble:after {62    content: "";63    position: absolute;64    left: 50%;65    transform: translateX(-50%);66    bottom: -38px;67    width: 0;68    height: 0;69    border-left: 22px solid transparent;70    border-right: 22px solid transparent;71    border-top: 38px solid #3b4a4f;72  }73  .bubble:before {74    content: "";75    position: absolute;76    left: 50%;77    transform: translateX(-50%);78    bottom: -34px;79    width: 0;80    height: 0;81    border-left: 18px solid transparent;82    border-right: 18px solid transparent;83    border-top: 34px solid #0f1a1c;84    z-index: 2;85  }86 87  /* Owl placeholder image */88  .owl {89    position: absolute;90    top: 950px;91    left: 390px;92    width: 300px;93    height: 300px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    border-radius: 28px;97    display: flex;98    align-items: center;99    justify-content: center;100    color: #757575;101    font-size: 28px;102    text-align: center;103    box-shadow: 0 20px 0 rgba(0,0,0,0.25);104  }105 106  /* Continue button */107  .cta {108    position: absolute;109    left: 40px;110    bottom: 220px;111    width: 1000px;112    height: 150px;113    border-radius: 48px;114    background: #A7DB3E;115    box-shadow: 0 24px 0 #5b8f2a;116    display: flex;117    align-items: center;118    justify-content: center;119  }120  .cta span {121    font-size: 46px;122    font-weight: 800;123    letter-spacing: 2px;124    color: #0f1a1c;125    text-transform: uppercase;126  }127 128  /* Home indicator */129  .home-indicator {130    position: absolute;131    bottom: 90px;132    left: 350px;133    width: 380px;134    height: 14px;135    background: #D9D9D9;136    border-radius: 7px;137    opacity: 0.85;138  }139</style>140</head>141<body>142<div id="render-target">143  <div class="top-back" aria-label="Back">144    <svg viewBox="0 0 24 24">145      <path d="M15 6l-6 6 6 6"/>146    </svg>147  </div>148 149  <div class="bubble">150    It can be hard to stay<br>151    motivated...152  </div>153 154  <div class="owl">[IMG: Duolingo Owl illustration]</div>155 156  <div class="cta"><span>CONTINUE</span></div>157 158  <div class="home-indicator"></div>159</div>160</body>161</html>