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: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13  }14 15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #0f1b1d; /* deep desaturated teal/black */21  }22 23  /* Back arrow */24  .back-btn {25    position: absolute;26    top: 160px;27    left: 40px;28    width: 72px;29    height: 72px;30    display: flex;31    align-items: center;32    justify-content: center;33    opacity: 0.9;34  }35  .back-btn svg {36    width: 48px;37    height: 48px;38    stroke: #718088;39    stroke-width: 8;40    fill: none;41    stroke-linecap: round;42    stroke-linejoin: round;43  }44 45  /* Speech bubble */46  .bubble {47    position: absolute;48    left: 160px;49    top: 740px;50    width: 760px;51    color: #e8eef0;52    border: 4px solid #2f3c41;53    border-radius: 36px;54    padding: 44px 48px;55    background: rgba(26,35,38,0.35);56    font-size: 46px;57    line-height: 1.3;58    font-weight: 600;59    box-sizing: border-box;60  }61  .bubble::after {62    content: "";63    position: absolute;64    left: 50%;65    bottom: -30px;66    width: 36px;67    height: 36px;68    background: transparent;69    transform: translateX(-50%) rotate(45deg);70    border-left: 4px solid #2f3c41;71    border-bottom: 4px solid #2f3c41;72    border-radius: 8px;73  }74 75  /* Owl image placeholder */76  .owl-img {77    position: absolute;78    top: 1040px;79    left: 410px; /* centered for 260px width */80    width: 260px;81    height: 260px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    border-radius: 30px;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #757575;89    text-align: center;90    font-size: 30px;91    padding: 12px;92    box-sizing: border-box;93  }94 95  /* Continue button */96  .cta {97    position: absolute;98    left: 60px;99    right: 60px;100    bottom: 210px;101    height: 160px;102  }103  .continue-btn {104    width: 100%;105    height: 100%;106    border: none;107    border-radius: 44px;108    background: #A8E64B; /* light duolingo green */109    color: #0d1a1d;110    font-size: 48px;111    font-weight: 800;112    letter-spacing: 2px;113    text-transform: uppercase;114    box-shadow: 0 18px 0 #7AC435;115    cursor: pointer;116  }117 118  /* Home indicator */119  .home-indicator {120    position: absolute;121    bottom: 90px;122    left: 50%;123    transform: translateX(-50%);124    width: 240px;125    height: 12px;126    background: #e6e6e6;127    border-radius: 10px;128    opacity: 0.9;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Back arrow -->136  <div class="back-btn" aria-label="Back">137    <svg viewBox="0 0 48 48">138      <path d="M30 8 L14 24 L30 40"></path>139    </svg>140  </div>141 142  <!-- Speech bubble -->143  <div class="bubble">144    It can be hard to stay<br>motivated...145  </div>146 147  <!-- Owl image placeholder -->148  <div class="owl-img">[IMG: Duolingo Owl holding pencil]</div>149 150  <!-- Continue button -->151  <div class="cta">152    <button class="continue-btn">CONTINUE</button>153  </div>154 155  <!-- System home indicator -->156  <div class="home-indicator"></div>157 158</div>159</body>160</html>