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>XP Boost Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #101C1E;20  }21 22  /* Content layout */23  .content {24    position: absolute;25    inset: 0;26    text-align: center;27    color: #EAF2F4;28  }29 30  /* Illustration placeholder */31  .illustration {32    width: 560px;33    height: 560px;34    margin: 420px auto 40px auto;35    background: #E0E0E0;36    border: 1px solid #BDBDBD;37    border-radius: 28px;38    display: flex;39    align-items: center;40    justify-content: center;41    color: #757575;42    font-size: 44px;43    font-weight: 700;44  }45 46  .title {47    font-size: 72px;48    font-weight: 800;49    letter-spacing: 0.5px;50    margin: 40px 80px 20px;51    color: #F3FAFC;52  }53 54  .subtitle {55    font-size: 44px;56    line-height: 62px;57    color: #C6D2D6;58    margin: 0 120px;59  }60  .subtitle .highlight {61    color: #FFA726;62    font-weight: 800;63  }64 65  /* Bottom CTA button with layered shadow look */66  .cta-wrap {67    position: absolute;68    left: 48px;69    right: 48px;70    bottom: 220px;71    height: 168px;72  }73  .cta-shadow {74    position: absolute;75    inset: 0;76    transform: translateY(18px);77    background: #0F4B5C;78    border-radius: 34px;79  }80  .cta-btn {81    position: absolute;82    inset: 0;83    background: #4FC3F7;84    border-radius: 34px;85    display: flex;86    align-items: center;87    justify-content: center;88    font-size: 44px;89    font-weight: 800;90    letter-spacing: 4px;91    color: #0E2D35;92    text-transform: uppercase;93  }94</style>95</head>96<body>97<div id="render-target">98  <div class="content">99    <div class="illustration">[IMG: Purple Potion 2x]</div>100 101    <div class="title">You earned an XP Boost!</div>102 103    <div class="subtitle">104      Double your XP in lessons for the next105      <span class="highlight">15 minutes!</span>106    </div>107  </div>108 109  <div class="cta-wrap">110    <div class="cta-shadow"></div>111    <div class="cta-btn">CONTINUE</div>112  </div>113</div>114</body>115</html>