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">6<title>Your Plan summary</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #263238;16  }17  /* Status bar (mock) */18  .status-bar {19    height: 60px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #424242;25    font-size: 32px;26  }27  .top-appbar {28    height: 140px;29    display: flex;30    align-items: center;31    padding: 0 20px 0 8px;32    border-bottom: 1px solid #eeeeee;33    background: #ffffff;34  }35  .back-btn {36    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; cursor: default;37  }38  .title {39    font-size: 48px;40    font-weight: 600;41    color: #202124;42  }43 44  .content {45    padding: 28px;46  }47  .summary-card {48    background: #d8e0e9;49    border-radius: 20px;50    padding: 28px;51    display: flex;52    align-items: center;53    gap: 28px;54  }55  .avatar {56    width: 150px; height: 150px; border-radius: 50%;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center;60    color: #757575; font-size: 26px; text-align: center; padding: 8px;61  }62  .summary-text small {63    display: block;64    color: #596a79;65    font-size: 34px;66    margin-bottom: 8px;67  }68  .summary-text .date {69    font-size: 56px;70    font-weight: 700;71    color: #1a1a1a;72  }73 74  .section-title {75    margin-top: 36px;76    font-size: 40px;77    color: #757575;78  }79 80  .days-row {81    margin-top: 16px;82    display: flex;83    gap: 28px;84    padding-left: 8px;85  }86  .day {87    width: 120px;88    text-align: center;89    color: #78909C;90    font-size: 28px;91  }92  .check {93    width: 92px; height: 92px; margin: 0 auto 10px;94    background: #76A7FF;95    border-radius: 50%;96    display: flex; align-items: center; justify-content: center;97  }98  .divider {99    height: 1px; background: #e0e0e0; margin: 28px 0;100  }101 102  .row {103    display: flex; align-items: center; justify-content: space-between;104    padding: 8px 8px;105  }106  .row .label {107    font-size: 38px; color: #757575;108  }109  .row .value {110    font-size: 54px; color: #9E9E9E; font-weight: 500;111  }112 113  .link {114    margin-top: 40px;115    text-align: center;116    color: #1A73E8;117    font-size: 40px;118    font-weight: 600;119    letter-spacing: 1px;120  }121 122  .cta {123    position: absolute;124    left: 0; right: 0; bottom: 120px;125    padding: 0 0;126  }127  .cta-btn {128    width: 100%;129    height: 140px;130    background: #1976D2;131    color: #fff;132    font-size: 48px;133    font-weight: 700;134    display: flex; align-items: center; justify-content: center;135  }136  .gesture {137    position: absolute; bottom: 40px; left: 50%;138    transform: translateX(-50%);139    width: 320px; height: 12px; background: #BDBDBD; border-radius: 8px;140  }141 142  /* Simple icon styling */143  svg { display: block; }144</style>145</head>146<body>147<div id="render-target">148  <!-- Mock status bar -->149  <div class="status-bar">150    <div>5:42</div>151    <div style="display:flex; gap:18px; align-items:center;">152      <span>◦</span>153      <span>◯</span>154      <span>◔</span>155      <span>94%</span>156    </div>157  </div>158 159  <!-- Top app bar -->160  <div class="top-appbar">161    <div class="back-btn" aria-label="Back">162      <svg width="48" height="48" viewBox="0 0 24 24">163        <path d="M15.5 19L8.5 12l7-7" fill="none" stroke="#1f1f1f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>164      </svg>165    </div>166    <div class="title">Your Plan summary</div>167  </div>168 169  <!-- Page content -->170  <div class="content">171    <div class="summary-card">172      <div class="avatar">[IMG: City street photo]</div>173      <div class="summary-text">174        <small>You should be able to reach Beginner A1 by:</small>175        <div class="date">January 12, 2024</div>176      </div>177    </div>178 179    <div class="section-title">Days</div>180    <div class="days-row">181      <div class="day">182        <div class="check">183          <svg width="44" height="44" viewBox="0 0 24 24">184            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>185          </svg>186        </div>187        Mon188      </div>189      <div class="day">190        <div class="check">191          <svg width="44" height="44" viewBox="0 0 24 24">192            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>193          </svg>194        </div>195        Tue196      </div>197      <div class="day">198        <div class="check">199          <svg width="44" height="44" viewBox="0 0 24 24">200            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>201          </svg>202        </div>203        Wed204      </div>205      <div class="day">206        <div class="check">207          <svg width="44" height="44" viewBox="0 0 24 24">208            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>209          </svg>210        </div>211        Thu212      </div>213      <div class="day">214        <div class="check">215          <svg width="44" height="44" viewBox="0 0 24 24">216            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>217          </svg>218        </div>219        Fri220      </div>221      <div class="day">222        <div class="check">223          <svg width="44" height="44" viewBox="0 0 24 24">224            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>225          </svg>226        </div>227        Sat228      </div>229      <div class="day">230        <div class="check">231          <svg width="44" height="44" viewBox="0 0 24 24">232            <path d="M20 7l-9 9-4-4" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>233          </svg>234        </div>235        Sun236      </div>237    </div>238 239    <div class="divider"></div>240 241    <div class="row">242      <div class="label">Time</div>243      <div class="value">5:00 AM</div>244    </div>245 246    <div class="divider"></div>247 248    <div class="row">249      <div class="label">Minutes / day</div>250      <div class="value">5</div>251    </div>252 253    <div class="divider"></div>254 255    <div class="link">EDIT YOUR STUDY PLAN</div>256  </div>257 258  <!-- Bottom CTA -->259  <div class="cta">260    <div class="cta-btn">Continue</div>261  </div>262 263  <div class="gesture"></div>264</div>265</body>266</html>