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>Placement Test</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top app bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 150px;24    background: #FFFFFF;25    border-bottom: 2px solid #e9e2ee;26    display: flex;27    align-items: flex-end;28    padding: 0 28px 22px 28px;29    box-sizing: border-box;30  }31  .appbar .back {32    width: 80px;33    height: 80px;34    display: flex;35    align-items: center;36    justify-content: center;37  }38  .appbar .title {39    flex: 1;40    text-align: center;41    color: #6f5d77;42    font-size: 52px;43    font-weight: 600;44    letter-spacing: 0.2px;45    transform: translateX(-40px); /* compensate for back button width to keep centered visual */46  }47  .appbar .skip {48    color: #6f5d77;49    font-size: 46px;50    font-weight: 700;51  }52 53  /* Content */54  .content {55    position: absolute;56    top: 170px;57    left: 0;58    width: 100%;59    padding: 20px 72px 0 72px;60    box-sizing: border-box;61    text-align: center;62  }63  .headline {64    font-size: 58px;65    font-weight: 700;66    color: #1c1b1f;67    margin: 40px 0 36px 0;68  }69  .illustration {70    margin: 0 auto 28px auto;71    width: 640px;72    height: 360px;73    background: #E0E0E0;74    border: 1px solid #BDBDBD;75    border-radius: 16px;76    color: #757575;77    display: flex;78    align-items: center;79    justify-content: center;80    font-size: 30px;81  }82  .paragraph {83    width: 940px;84    max-width: 100%;85    margin: 18px auto 0 auto;86    font-size: 36px;87    line-height: 1.5;88    color: #5e5861;89  }90 91  /* Bottom actions */92  .actions {93    position: absolute;94    left: 0;95    right: 0;96    bottom: 130px;97    display: flex;98    flex-direction: column;99    align-items: center;100    gap: 44px;101  }102  .cut-btn {103    width: 920px;104    padding: 32px 24px;105    background: #f7c616;106    color: #1c1b1f;107    font-size: 40px;108    font-weight: 600;109    text-align: center;110    box-shadow: 0 8px 14px rgba(0,0,0,0.12);111    /* create angled ends */112    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 28px, calc(100% - 18px) 100%, 18px 100%, 0 28px);113    border: 1px solid rgba(0,0,0,0.08);114  }115</style>116</head>117<body>118<div id="render-target">119  <!-- Top App Bar -->120  <div class="appbar">121    <div class="back">122      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#6f5d77" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">123        <path d="M15 18l-6-6 6-6"/>124      </svg>125    </div>126    <div class="title">Placement Test</div>127    <div class="skip">Skip</div>128  </div>129 130  <!-- Content -->131  <div class="content">132    <div class="headline">Want to test your vocabulary level?</div>133 134    <div class="illustration">[IMG: Clipboard & stopwatch illustration]</div>135 136    <div class="paragraph">137      Based on the results of the test you will be suggested what level to start learning from. However, keep in mind that this is just a suggestion and you can start learning at whatever level you want.138    </div>139  </div>140 141  <!-- Bottom Buttons -->142  <div class="actions">143    <div class="cut-btn">No, I’m a beginner</div>144    <div class="cut-btn">Yes, I want to take the test</div>145  </div>146</div>147</body>148</html>