GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Class 11 Physics (India)</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0F2A52; /* deep navy */13    color: #fff;14  }15  .status-bar {16    height: 100px;17    padding: 0 40px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    font-weight: 600;22    font-size: 34px;23    letter-spacing: 0.2px;24    opacity: 0.95;25  }26  .status-right {27    display: flex;28    gap: 26px;29    align-items: center;30  }31  .header {32    padding: 20px 40px 40px 40px;33  }34  .back-row {35    height: 80px;36    display: flex;37    align-items: center;38    color: #fff;39  }40  .back-btn {41    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;42    margin-right: 10px;43  }44  .section-label {45    font-size: 40px;46    color: #C8D6EF;47    margin-top: 10px;48  }49  .title {50    font-size: 72px;51    font-weight: 700;52    margin-top: 14px;53    line-height: 1.15;54  }55  .content {56    background: #F7F8FA;57    border-top-left-radius: 24px;58    border-top-right-radius: 24px;59    margin-top: 22px;60    color: #1d2a3a;61    overflow-y: auto;62    height: 1680px;63  }64  .card {65    background: #fff;66    margin-top: 24px;67    border-top: 1px solid #e6e9ef;68    border-bottom: 1px solid #e6e9ef;69  }70  .card:first-child { margin-top: 12px; }71  .card-header {72    display: flex;73    align-items: center;74    padding: 28px 40px;75    gap: 28px;76  }77  .green-icon {78    width: 110px; height: 110px; border-radius: 55px; background: #78B87B;79    display: flex; align-items: center; justify-content: center;80    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.2);81  }82  .card-title {83    font-size: 44px;84    font-weight: 700;85    color: #1f2a3d;86  }87  .item {88    padding: 26px 40px;89    font-size: 40px;90    color: #5a6678;91    border-top: 1px solid #ECEFF3;92    background: #fff;93  }94  .divider { height: 18px; background: #F7F8FA; }95  .bottom-nav {96    position: absolute;97    bottom: 0;98    left: 0;99    width: 1080px;100    height: 180px;101    background: #ffffff;102    border-top: 1px solid #E1E4EA;103    display: flex;104    align-items: center;105    justify-content: space-around;106    color: #3b4a62;107  }108  .nav-item {109    width: 240px;110    display: flex;111    flex-direction: column;112    align-items: center;113    gap: 14px;114    font-size: 34px;115  }116  .nav-item.active { color: #2A74FF; }117  .home-indicator {118    position: absolute;119    bottom: 190px;120    left: 50%;121    transform: translateX(-50%);122    width: 420px;123    height: 12px;124    background: #C9CDD4;125    border-radius: 6px;126    opacity: 0.8;127  }128  /* Utility for placeholder images if needed */129  .img {130    width: 100%; height: 100%;131    background: #E0E0E0; border: 1px solid #BDBDBD;132    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div>9:08</div>142    <div class="status-right">143      <!-- WiFi icon -->144      <svg width="50" height="50" viewBox="0 0 24 24" fill="none">145        <path d="M2.5 8.5c5.3-4.6 13.7-4.6 19 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>146        <path d="M5 11.5c4-3.3 10-3.3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>147        <path d="M7.5 14.5c2.6-2 6.4-2 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>148        <circle cx="12" cy="18" r="1.6" fill="#fff"/>149      </svg>150      <!-- Battery icon -->151      <svg width="56" height="50" viewBox="0 0 28 24" fill="none">152        <rect x="1" y="5" width="20" height="14" rx="2" stroke="#fff" stroke-width="2"/>153        <rect x="3" y="7" width="16" height="10" fill="#fff"/>154        <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>155      </svg>156    </div>157  </div>158 159  <!-- Header -->160  <div class="header">161    <div class="back-row">162      <div class="back-btn">163        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">164          <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>165        </svg>166      </div>167    </div>168    <div class="section-label">Science</div>169    <div class="title">Class 11 Physics (India)</div>170  </div>171 172  <!-- Content area with cards -->173  <div class="content">174 175    <!-- Card: Physical world -->176    <div class="card">177      <div class="card-header">178        <div class="green-icon">179          <!-- simple atom icon -->180          <svg width="70" height="70" viewBox="0 0 24 24" fill="none">181            <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>182            <ellipse cx="12" cy="12" rx="9" ry="4.2" stroke="#fff" stroke-width="1.6"/>183            <ellipse cx="12" cy="12" rx="4.2" ry="9" stroke="#fff" stroke-width="1.6"/>184            <path d="M3.5 8.5c3 2.2 7.5 4 10.8 4.5" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>185          </svg>186        </div>187        <div class="card-title">Physical world</div>188      </div>189      <div class="item">Physics and its laws</div>190    </div>191 192    <!-- Card: Units and measurement -->193    <div class="card">194      <div class="card-header">195        <div class="green-icon">196          <svg width="70" height="70" viewBox="0 0 24 24" fill="none">197            <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>198            <ellipse cx="12" cy="12" rx="9" ry="4.2" stroke="#fff" stroke-width="1.6"/>199            <ellipse cx="12" cy="12" rx="4.2" ry="9" stroke="#fff" stroke-width="1.6"/>200          </svg>201        </div>202        <div class="card-title">Units and measurement</div>203      </div>204      <div class="item">Physical quantities and their measurement</div>205      <div class="item">Scientific notation</div>206      <div class="item">Significant figures</div>207    </div>208 209    <!-- Divider -->210    <div class="divider"></div>211 212    <!-- Card: Basic math concepts for physics -->213    <div class="card">214      <div class="card-header">215        <div class="green-icon">216          <svg width="70" height="70" viewBox="0 0 24 24" fill="none">217            <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>218            <ellipse cx="12" cy="12" rx="9" ry="4.2" stroke="#fff" stroke-width="1.6"/>219            <ellipse cx="12" cy="12" rx="4.2" ry="9" stroke="#fff" stroke-width="1.6"/>220          </svg>221        </div>222        <div class="card-title">Basic math concepts for physics (Prerequisite)</div>223      </div>224      <div class="item">Introduction to logarithms</div>225      <div class="item">The constant e and the natural logarithm</div>226      <div class="item">Slope</div>227      <div class="item">Basics of trigonometry</div>228      <div class="item">The unit circle definition of sine, cosine, and tangent</div>229      <div class="item">The graphs of sine, cosine, and tangent</div>230      <div class="item">Basic trigonometric identities</div>231    </div>232 233    <!-- Spacer for bottom nav -->234    <div style="height: 230px;"></div>235  </div>236 237  <!-- Home indicator (gesture bar) -->238  <div class="home-indicator"></div>239 240  <!-- Bottom navigation -->241  <div class="bottom-nav">242    <div class="nav-item active">243      <!-- Home hex icon -->244      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">245        <path d="M12 2l8 4.6v9.2L12 20l-8-4.2V6.6L12 2z" fill="#2A74FF"/>246      </svg>247      <div>Home</div>248    </div>249    <div class="nav-item">250      <!-- Search icon -->251      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">252        <circle cx="10.5" cy="10.5" r="6.5" stroke="#3b4a62" stroke-width="2"/>253        <path d="M15.8 15.8l5 5" stroke="#3b4a62" stroke-width="2" stroke-linecap="round"/>254      </svg>255      <div>Explore</div>256    </div>257    <div class="nav-item">258      <!-- Bookmark icon -->259      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">260        <path d="M6 3h12v18l-6-4-6 4V3z" fill="#3b4a62"/>261      </svg>262      <div>Bookmarks</div>263    </div>264  </div>265 266</div>267</body>268</html>