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>Study Plan Intro</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  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Top hero area */23  .hero {24    position: relative;25    width: 1080px;26    height: 1140px;27  }28  .hero-img {29    position: absolute;30    left: 0;31    top: 0;32    width: 1080px;33    height: 1140px;34    background: #E0E0E0;35    border-bottom: 1px solid #BDBDBD;36    display: flex;37    align-items: center;38    justify-content: center;39    color: #757575;40    font-size: 34px;41    letter-spacing: 0.2px;42  }43  .hero .overlay {44    position: absolute;45    inset: 0;46    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.08) 100%);47    pointer-events: none;48  }49 50  /* Status bar simulation */51  .status-bar {52    position: absolute;53    top: 0;54    left: 0;55    height: 100px;56    width: 100%;57    padding: 0 28px;58    display: flex;59    align-items: center;60    justify-content: space-between;61    color: #FFFFFF;62    font-size: 34px;63    box-sizing: border-box;64  }65  .status-right {66    display: flex;67    align-items: center;68    gap: 20px;69    color: #FFFFFF;70    opacity: 0.95;71    font-size: 32px;72  }73  .sb-icon {74    width: 32px;75    height: 32px;76  }77 78  /* Close button */79  .close-btn {80    position: absolute;81    top: 120px;82    left: 36px;83    width: 64px;84    height: 64px;85    display: flex;86    align-items: center;87    justify-content: center;88  }89  .close-btn svg {90    width: 48px;91    height: 48px;92  }93 94  /* Calendar icon near title */95  .calendar-icon {96    position: absolute;97    left: 60px;98    top: 370px;99    width: 74px;100    height: 74px;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .calendar-icon svg {106    width: 74px;107    height: 74px;108  }109 110  /* Headings */111  .hero-title {112    position: absolute;113    left: 60px;114    top: 440px;115    width: 960px;116    color: #FFFFFF;117    font-weight: 800;118    font-size: 72px;119    line-height: 86px;120    letter-spacing: -0.3px;121  }122  .hero-sub {123    position: absolute;124    left: 60px;125    top: 830px;126    width: 960px;127    color: rgba(255,255,255,0.92);128    font-weight: 500;129    font-size: 40px;130    line-height: 56px;131  }132 133  /* Content area */134  .content {135    position: absolute;136    left: 0;137    top: 1140px;138    width: 1080px;139    height: 960px;140    background: #FFFFFF;141    box-sizing: border-box;142    padding: 60px 60px 220px 60px;143  }144  .checklist {145    margin: 40px 0 0 0;146    padding: 0;147    list-style: none;148  }149  .checklist li {150    display: flex;151    align-items: flex-start;152    gap: 28px;153    margin-bottom: 48px;154    font-size: 44px;155    line-height: 58px;156    color: #1E1E1E;157  }158  .check {159    width: 44px;160    height: 44px;161    flex: 0 0 44px;162    margin-top: 8px;163  }164 165  /* Primary button */166  .primary-btn {167    position: absolute;168    left: 60px;169    right: 60px;170    bottom: 180px;171    height: 140px;172    background: #3367FF;173    color: #FFFFFF;174    border: none;175    border-radius: 70px;176    font-size: 48px;177    font-weight: 700;178    letter-spacing: 0.3px;179    box-shadow: 0 6px 16px rgba(51,103,255,0.35);180    cursor: default;181  }182 183  /* Gesture bar */184  .gesture-bar {185    position: absolute;186    bottom: 36px;187    left: 50%;188    transform: translateX(-50%);189    width: 240px;190    height: 14px;191    background: #A6A6A6;192    border-radius: 8px;193  }194</style>195</head>196<body>197<div id="render-target">198  <div class="hero">199    <div class="hero-img">[IMG: Lisbon city street with statue]</div>200    <div class="overlay"></div>201 202    <div class="status-bar">203      <div class="time">5:42</div>204      <div class="status-right">205        <!-- simple status icons -->206        <svg class="sb-icon" viewBox="0 0 24 24">207          <circle cx="3" cy="12" r="2" fill="#FFFFFF"></circle>208          <circle cx="10" cy="12" r="2" fill="#FFFFFF" opacity="0.9"></circle>209          <circle cx="17" cy="12" r="2" fill="#FFFFFF" opacity="0.8"></circle>210        </svg>211        <svg class="sb-icon" viewBox="0 0 24 24">212          <path d="M3 8h18v10H3z" fill="none" stroke="#FFFFFF" stroke-width="2"/>213          <path d="M20 8l-2-3H6L4 8" fill="none" stroke="#FFFFFF" stroke-width="2"/>214        </svg>215        <svg class="sb-icon" viewBox="0 0 24 24">216          <path d="M3 18h18" stroke="#FFFFFF" stroke-width="2" />217          <rect x="6" y="6" width="12" height="10" fill="none" stroke="#FFFFFF" stroke-width="2" />218        </svg>219        <span style="font-size:32px;">94%</span>220      </div>221    </div>222 223    <div class="close-btn">224      <svg viewBox="0 0 24 24">225        <path d="M4 4L20 20M20 4L4 20" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>226      </svg>227    </div>228 229    <div class="calendar-icon">230      <svg viewBox="0 0 24 24">231        <rect x="2.5" y="3.5" width="19" height="17" rx="2.5" fill="none" stroke="#FFFFFF" stroke-width="2"/>232        <path d="M2.5 8.5H21.5" stroke="#FFFFFF" stroke-width="2"/>233        <path d="M7 3.5v5M17 3.5v5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>234      </svg>235    </div>236 237    <div class="hero-title">Take the stress out of learning Portuguese</div>238    <div class="hero-sub">with a personalised Study Plan that fits around your life</div>239  </div>240 241  <div class="content">242    <ul class="checklist">243      <li>244        <svg class="check" viewBox="0 0 24 24">245          <circle cx="12" cy="12" r="11" fill="none" stroke="#2979FF" stroke-width="2"></circle>246          <path d="M6 12.5l4 4 8-9" fill="none" stroke="#2979FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>247        </svg>248        <span>Choose your goals</span>249      </li>250      <li>251        <svg class="check" viewBox="0 0 24 24">252          <circle cx="12" cy="12" r="11" fill="none" stroke="#2979FF" stroke-width="2"></circle>253          <path d="M6 12.5l4 4 8-9" fill="none" stroke="#2979FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>254        </svg>255        <span>Set your schedule</span>256      </li>257      <li>258        <svg class="check" viewBox="0 0 24 24">259          <circle cx="12" cy="12" r="11" fill="none" stroke="#2979FF" stroke-width="2"></circle>260          <path d="M6 12.5l4 4 8-9" fill="none" stroke="#2979FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>261        </svg>262        <span>Generate a Study Plan</span>263      </li>264      <li>265        <svg class="check" viewBox="0 0 24 24">266          <circle cx="12" cy="12" r="11" fill="none" stroke="#2979FF" stroke-width="2"></circle>267          <path d="M6 12.5l4 4 8-9" fill="none" stroke="#2979FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>268        </svg>269        <span>Work in small, achievable steps to a completion date</span>270      </li>271    </ul>272  </div>273 274  <button class="primary-btn">Continue</button>275 276  <div class="gesture-bar"></div>277</div>278</body>279</html>