GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Course Screen - What is Data Science?</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0a1150;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 60px;23    padding: 10px 24px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #E6E9FF;29    font-size: 28px;30    opacity: 0.9;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 18px;36  }37  .wifi {38    width: 28px; height: 20px;39  }40  .battery {41    width: 34px; height: 18px;42  }43 44  /* Header / hero area */45  .hero {46    position: absolute;47    top: 60px;48    left: 0;49    width: 1080px;50    height: 1080px;51    padding: 40px 44px;52    box-sizing: border-box;53  }54  .top-actions {55    position: absolute;56    top: 28px;57    left: 24px;58    right: 24px;59    height: 60px;60    display: flex;61    align-items: center;62    justify-content: space-between;63  }64  .icon-btn {65    width: 56px; height: 56px;66    display: flex; align-items: center; justify-content: center;67  }68 69  .title {70    margin-top: 120px;71    font-size: 70px;72    line-height: 1.1;73    font-weight: 800;74    color: #ffffff;75  }76  .subtitle {77    margin-top: 26px;78    font-size: 34px;79    color: #c7d0ff;80  }81  .subtitle b { color: #ffffff; }82  .rating {83    margin-top: 46px;84    display: flex;85    align-items: center;86    gap: 16px;87    font-size: 30px;88    color: #dfe5ff;89  }90  .stars svg { margin-right: 6px; }91  .offered {92    margin-top: 54px;93    font-size: 32px;94    color: #cfd7ff;95    letter-spacing: 0.2px;96  }97  .ibm-logo {98    margin-top: 22px;99    width: 320px; height: 170px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    color: #555;103    display: flex; align-items: center; justify-content: center;104    font-weight: bold;105    font-size: 44px;106  }107 108  /* Body section */109  .body-section {110    position: absolute;111    left: 0;112    top: 1140px;113    width: 1080px;114    height: 1080px;115    background: #ffffff;116    color: #222;117    border-top-left-radius: 0;118    border-top-right-radius: 0;119    padding: 50px 50px 220px;120    box-sizing: border-box;121  }122  .section-title {123    font-size: 46px;124    font-weight: 800;125    margin-bottom: 24px;126  }127  .desc {128    font-size: 35px;129    line-height: 1.45;130    color: #333;131  }132  .more {133    color: #1a73e8; font-weight: 700; text-decoration: none;134  }135 136  .feature {137    margin-top: 44px;138    display: flex;139    align-items: flex-start;140    gap: 26px;141  }142  .feature .circle {143    width: 80px; height: 80px;144    border-radius: 50%;145    background: #f1f3f7;146    border: 2px solid #d9dee8;147    display: flex; align-items: center; justify-content: center;148  }149  .feature .text {150    flex: 1;151  }152  .feature .label {153    font-size: 38px; font-weight: 700; color: #222;154  }155  .feature .sub {156    font-size: 30px; color: #6b7280; margin-top: 6px;157  }158  .link {159    color: #1a73e8; text-decoration: none; font-weight: 700;160  }161 162  /* Bottom CTA */163  .cta {164    position: absolute;165    bottom: 0;166    left: 0;167    width: 1080px;168    height: 180px;169    background: #1e5ae9;170    color: #fff;171    display: flex;172    flex-direction: column;173    align-items: center;174    justify-content: center;175    gap: 10px;176  }177  .cta .main {178    font-size: 44px; font-weight: 800;179  }180  .cta .subtxt {181    font-size: 32px; opacity: 0.95;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status bar -->189  <div class="status-bar">190    <div>8:13</div>191    <div class="status-icons">192      <!-- WiFi -->193      <svg class="wifi" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">194        <path d="M2 8c5-4 15-4 20 0" stroke="#E6E9FF" stroke-width="2" stroke-linecap="round"/>195        <path d="M5 11c4-3 10-3 14 0" stroke="#E6E9FF" stroke-width="2" stroke-linecap="round"/>196        <path d="M9 14c2-2 4-2 6 0" stroke="#E6E9FF" stroke-width="2" stroke-linecap="round"/>197      </svg>198      <!-- Battery -->199      <svg class="battery" viewBox="0 0 30 14" xmlns="http://www.w3.org/2000/svg">200        <rect x="1" y="2" width="24" height="10" rx="2" fill="none" stroke="#E6E9FF" stroke-width="2"/>201        <rect x="3" y="4" width="18" height="6" rx="1" fill="#E6E9FF"/>202        <rect x="26" y="5" width="3" height="4" rx="1" fill="#E6E9FF"/>203      </svg>204    </div>205  </div>206 207  <!-- Hero / header content -->208  <div class="hero">209    <div class="top-actions">210      <div class="icon-btn">211        <!-- Back arrow -->212        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">213          <path d="M15 5L8 12l7 7" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>214        </svg>215      </div>216      <div class="icon-btn">217        <!-- Share icon -->218        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">219          <circle cx="18" cy="5" r="2.5" stroke="#ffffff" stroke-width="2"/>220          <circle cx="6" cy="12" r="2.5" stroke="#ffffff" stroke-width="2"/>221          <circle cx="18" cy="19" r="2.5" stroke="#ffffff" stroke-width="2"/>222          <path d="M8 12l8-7M8 12l8 7" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>223        </svg>224      </div>225    </div>226 227    <div class="title">What is Data Science?</div>228 229    <div class="subtitle">230      This course is part of the <b>IBM Data Science Professional Certificate</b>231    </div>232 233    <div class="rating">234      <div class="stars">235        <!-- 5 stars -->236        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16.9 6 19.4l1.5-6.5-5-4.3 6.6-.6L12 2z"/></svg>237        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16.9 6 19.4l1.5-6.5-5-4.3 6.6-.6L12 2z"/></svg>238        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16.9 6 19.4l1.5-6.5-5-4.3 6.6-.6L12 2z"/></svg>239        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16.9 6 19.4l1.5-6.5-5-4.3 6.6-.6L12 2z"/></svg>240        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff" opacity="0.7"><path d="M12 2l2.9 6 6.6.6-5 4.3 1.5 6.5L12 16.9 6 19.4l1.5-6.5-5-4.3 6.6-.6L12 2z"/></svg>241      </div>242      <div>4.7 (64k)</div>243    </div>244 245    <div class="offered">Offered By</div>246    <div class="ibm-logo">[IMG: IBM Logo]</div>247  </div>248 249  <!-- Body -->250  <div class="body-section">251    <div class="section-title">About this Course</div>252    <div class="desc">253      Do you want to know why Data Science has been labelled as the sexiest profession of the 21st century? After taking this course you will be able to answer this question, and get a thorough understanding of what is Data Science, what data scientists do, and learn about254      <a class="more" href="#">more...</a>255    </div>256 257    <!-- Feature 1 -->258    <div class="feature">259      <div class="circle">260        <!-- document icon -->261        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">262          <rect x="5" y="3" width="14" height="18" rx="2" stroke="#64748b" stroke-width="2"/>263          <line x1="8" y1="8" x2="16" y2="8" stroke="#64748b" stroke-width="2"/>264          <line x1="8" y1="12" x2="16" y2="12" stroke="#64748b" stroke-width="2"/>265        </svg>266      </div>267      <div class="text">268        <div class="label">Course 1 of 10 in the</div>269        <div class="sub">270          <a class="link" href="#">IBM Data Science Professional Certificate</a>271        </div>272      </div>273    </div>274 275    <!-- Feature 2 -->276    <div class="feature">277      <div class="circle">278        <!-- globe icon -->279        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">280          <circle cx="12" cy="12" r="9" stroke="#64748b" stroke-width="2"/>281          <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#64748b" stroke-width="2"/>282          <line x1="3" y1="12" x2="21" y2="12" stroke="#64748b" stroke-width="2"/>283        </svg>284      </div>285      <div class="text">286        <div class="label">100% online</div>287        <div class="sub">Start instantly and learn at your own schedule</div>288      </div>289    </div>290 291    <!-- Feature 3 -->292    <div class="feature">293      <div class="circle">294        <!-- calendar icon -->295        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">296          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#64748b" stroke-width="2"/>297          <line x1="3" y1="9" x2="21" y2="9" stroke="#64748b" stroke-width="2"/>298          <line x1="8" y1="3" x2="8" y2="7" stroke="#64748b" stroke-width="2"/>299          <line x1="16" y1="3" x2="16" y2="7" stroke="#64748b" stroke-width="2"/>300        </svg>301      </div>302      <div class="text">303        <div class="label">Flexible deadlines</div>304        <div class="sub">Reset deadline in accordance to your schedule</div>305      </div>306    </div>307 308    <!-- Feature 4 -->309    <div class="feature">310      <div class="circle">311        <!-- bar chart icon -->312        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">313          <line x1="4" y1="20" x2="20" y2="20" stroke="#64748b" stroke-width="2"/>314          <rect x="6" y="12" width="3" height="8" fill="#64748b"/>315          <rect x="11" y="9" width="3" height="11" fill="#64748b"/>316          <rect x="16" y="6" width="3" height="14" fill="#64748b"/>317        </svg>318      </div>319      <div class="text">320        <div class="label">Beginner Level</div>321        <div class="sub">No prior experience required</div>322      </div>323    </div>324 325    <!-- Feature 5 -->326    <div class="feature">327      <div class="circle">328        <!-- clock icon -->329        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">330          <circle cx="12" cy="12" r="9" stroke="#64748b" stroke-width="2"/>331          <path d="M12 7v6l4 2" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>332        </svg>333      </div>334      <div class="text">335        <div class="label">Approx. 7 hours to complete</div>336      </div>337    </div>338  </div>339 340  <!-- Bottom CTA -->341  <div class="cta">342    <div class="main">See enrollment options</div>343    <div class="subtxt">Starts Aug 1</div>344  </div>345 346</div>347</body>348</html>