GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Enroll - IBM Data Science</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1b1b1b;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#F7F8FA;10  }11  .status-bar{12    height:70px;display:flex;align-items:center;justify-content:space-between;13    padding:0 36px;font-weight:600;color:#3e3e3e;font-size:32px;14  }15  .top-icons{display:flex;align-items:center;gap:24px;color:#555;}16  .title-bar{17    height:110px;display:flex;align-items:center;justify-content:center;18    position:relative;border-bottom:1px solid #e5e5e5;background:#fff;19    font-size:46px;font-weight:700;color:#222;20  }21  .close-btn{22    position:absolute;left:24px;top:50%;transform:translateY(-50%);23    width:84px;height:84px;display:flex;align-items:center;justify-content:center;24    cursor:pointer;25  }26  .close-btn svg{width:40px;height:40px;stroke:#333;stroke-width:7;stroke-linecap:round;}27  .content{padding:24px 28px 0 28px;}28  .card{29    background:#fff;border-radius:18px;box-shadow:0 2px 8px rgba(0,0,0,0.06);30    padding:0;margin-bottom:28px;border:1px solid #eee;31  }32  .card-header{display:flex;gap:24px;align-items:center;padding:28px;}33  .logo{34    width:120px;height:120px;border:1px solid #BDBDBD;background:#E0E0E0;35    border-radius:16px;display:flex;align-items:center;justify-content:center;36    color:#757575;font-size:28px;text-align:center;37  }38  .header-text .brand{color:#616161;font-size:34px;margin-bottom:6px;font-weight:700;}39  .header-text .title{font-size:44px;font-weight:800;color:#1b1b1b;margin-bottom:12px;}40  .courses-row{display:flex;align-items:center;gap:10px;color:#616161;font-size:34px;font-weight:600;}41  .courses-row svg{width:28px;height:28px;fill:#616161;}42  .divider{height:1px;background:#eee;width:100%;}43  .sub-course{padding:26px 28px 32px 28px;}44  .sub-course h3{margin:0;font-size:40px;font-weight:800;color:#1b1b1b;}45  .sub-course .audit{color:#1976d2;font-weight:700;font-size:34px;position:absolute;right:32px;top:26px;}46  .sub-course p{margin-top:18px;color:#4c4c4c;font-size:34px;line-height:1.35;}47  .blue-panel{48    background:#E9F1FF;border:2px solid #6F94FF;border-radius:20px;padding:28px;margin:0 0 26px 0;49  }50  .blue-panel h4{margin:0 0 18px 0;color:#1f2a44;font-size:40px;font-weight:800;}51  .price{font-size:50px;font-weight:900;color:#1f2a44;margin:6px 0 16px 0;}52  .price span{font-size:36px;font-weight:700;color:#5b6b8f;margin-left:10px;}53  .tick{display:flex;gap:22px;margin:18px 0;color:#1b1b1b;font-size:34px;line-height:1.35;}54  .tick .icon{55    width:42px;height:42px;border-radius:50%;border:2px solid #4787ff;display:flex;56    align-items:center;justify-content:center;color:#4787ff;font-weight:900;font-size:30px;background:#fff;57  }58  .terms{59    display:flex;gap:22px;color:#5a5a5a;font-size:30px;line-height:1.45;margin:26px 6px;60  }61  .terms svg{width:34px;height:34px;fill:#8a8a8a;flex-shrink:0;margin-top:6px;}62  .cta{63    position:absolute;left:0;bottom:86px;width:100%;height:110px;background:#1f6fe5;64    display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:800;65  }66  .gesture{67    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);68    width:180px;height:14px;background:#C0C3C7;border-radius:8px;69  }70</style>71</head>72<body>73<div id="render-target">74 75  <!-- Status Bar -->76  <div class="status-bar">77    <div>8:14</div>78    <div class="top-icons">79      <!-- simple wifi icon -->80      <svg viewBox="0 0 24 24">81        <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>82        <path d="M5 12c4-3 10-3 14 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>83        <circle cx="12" cy="16" r="2" fill="#555"/>84      </svg>85      <!-- battery icon -->86      <svg viewBox="0 0 28 16">87        <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#555" stroke-width="2"/>88        <rect x="3" y="5" width="16" height="6" rx="1" fill="#555"/>89        <rect x="24" y="6" width="3" height="4" rx="1" fill="#555"/>90      </svg>91    </div>92  </div>93 94  <!-- Title Bar -->95  <div class="title-bar">96    <div class="close-btn">97      <svg viewBox="0 0 24 24">98        <path d="M5 5 L19 19 M19 5 L5 19" />99      </svg>100    </div>101    Enroll102  </div>103 104  <div class="content">105    <!-- Main Card -->106    <div class="card">107      <div class="card-header">108        <div class="logo">[IMG: IBM Logo]</div>109        <div class="header-text">110          <div class="brand">IBM</div>111          <div class="title">IBM Data Science</div>112          <div class="courses-row">113            10 Courses114            <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>115          </div>116        </div>117      </div>118      <div class="divider"></div>119      <div class="sub-course" style="position:relative;">120        <a class="audit">Audit</a>121        <h3>What is Data Science?</h3>122        <p>123          What is Data Science? is one course in the larger IBM Data Science series.124          The course is only available when subscribed to the entire series.125        </p>126      </div>127    </div>128 129    <!-- Blue Subscription Panel -->130    <div class="blue-panel">131      <h4>Subscribe to this Professional Certificate</h4>132      <div class="price">₹3,650.00 <span>per month + tax</span></div>133 134      <div class="tick">135        <div class="icon">✓</div>136        <div>High quality video content, practice materials, graded assignments, and discussion forums</div>137      </div>138      <div class="tick">139        <div class="icon">✓</div>140        <div>Stand out with a valuable credential. Earn an employer-recognized certificate of completion</div>141      </div>142      <div class="tick">143        <div class="icon">✓</div>144        <div>Learn the latest in-demand skills taught at the most prestigious universities and used every day at world class innovative companies.</div>145      </div>146    </div>147 148    <!-- Terms and Conditions -->149    <div class="terms">150      <svg viewBox="0 0 24 24">151        <path d="M7 11h10v8H7z" />152        <path d="M9 11V8a3 3 0 016 0v3" fill="none" stroke="#8a8a8a" stroke-width="2"/>153      </svg>154      <div>155        By enrolling you agree to be charged the amount shown above plus applicable taxes starting today and monthly thereafter until you cancel, and you agree to Coursera's Terms of Use, Refund Policy, and acknowledge our Privacy Notice. You can cancel your subscription at any time. No refunds are given on products purchased through the Play Store. You'll receive an email receipt through Google.156      </div>157    </div>158  </div>159 160  <!-- CTA Button -->161  <div class="cta">Enroll (Starts Aug 1)</div>162 163  <!-- Gesture bar -->164  <div class="gesture"></div>165</div>166</body>167</html>