GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Class 11 Physics (India)</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 background: #0f2b54;25 color: #fff;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 36px;30 box-sizing: border-box;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .header {40 position: absolute;41 top: 96px;42 left: 0;43 width: 1080px;44 height: 420px;45 background: #0f2b54;46 color: #fff;47 box-sizing: border-box;48 padding: 36px 40px 24px 40px;49 }50 .back-row {51 display: flex;52 align-items: center;53 gap: 22px;54 }55 .back-btn {56 width: 72px;57 height: 72px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .section-label {63 margin-top: 18px;64 font-size: 42px;65 opacity: 0.85;66 }67 .main-title {68 margin-top: 14px;69 font-size: 72px;70 font-weight: 700;71 line-height: 1.12;72 letter-spacing: 0.5px;73 }74 75 /* Content */76 .content {77 position: absolute;78 top: 516px;79 left: 0;80 right: 0;81 bottom: 168px;82 overflow: hidden;83 padding-bottom: 16px;84 }85 .list {86 height: 100%;87 overflow-y: auto;88 padding: 0 0 200px 0;89 }90 .divider {91 height: 20px;92 background: #f1f2f6;93 border-top: 1px solid #e6e7eb;94 border-bottom: 1px solid #e6e7eb;95 }96 .block {97 padding: 34px 40px 18px 40px;98 }99 .row {100 display: flex;101 align-items: center;102 gap: 28px;103 }104 .atom-icon {105 width: 120px;106 height: 120px;107 background: #6bb27c;108 border-radius: 60px;109 display: flex;110 align-items: center;111 justify-content: center;112 }113 .row-title {114 font-size: 46px;115 font-weight: 700;116 color: #1b1b1b;117 }118 .sub {119 margin-left: 188px;120 margin-top: 22px;121 font-size: 38px;122 color: #6b6f7b;123 line-height: 1.5;124 }125 .sub + .sub { margin-top: 16px; }126 127 /* Bottom navigation */128 .bottom-nav {129 position: absolute;130 left: 0; right: 0; bottom: 0;131 height: 168px;132 background: #ffffff;133 border-top: 1px solid #e3e5ea;134 display: flex;135 align-items: center;136 justify-content: space-around;137 }138 .nav-item {139 width: 33.33%;140 display: flex;141 flex-direction: column;142 align-items: center;143 justify-content: center;144 gap: 14px;145 color: #80879a;146 font-size: 32px;147 }148 .nav-item.active { color: #2a77ff; }149 .nav-icon {150 width: 64px;151 height: 64px;152 }153 154 /* Thin scroll bar to resemble mobile */155 .list::-webkit-scrollbar { width: 10px; }156 .list::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 8px; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>9:11</div>165 <div class="status-right">166 <!-- Simple WiFi icon -->167 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">168 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>169 <path d="M5 11c3.5-3 10.5-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>170 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>171 <circle cx="12" cy="18" r="2" fill="#fff"/>172 </svg>173 <!-- Battery icon -->174 <svg width="46" height="40" viewBox="0 0 36 24" fill="none">175 <rect x="1" y="4" width="28" height="16" rx="3" stroke="#fff" stroke-width="2"/>176 <rect x="4" y="7" width="22" height="10" fill="#fff"/>177 <rect x="30" y="8" width="4" height="8" rx="1" fill="#fff"/>178 </svg>179 </div>180 </div>181 182 <!-- Header -->183 <div class="header">184 <div class="back-row">185 <div class="back-btn">186 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">187 <path d="M15 4L7 12l8 8" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>188 </svg>189 </div>190 </div>191 <div class="section-label">Science</div>192 <div class="main-title">Class 11 Physics (India)</div>193 </div>194 195 <!-- Content -->196 <div class="content">197 <div class="list">198 199 <div class="block">200 <div class="row">201 <div class="atom-icon">202 <svg width="80" height="80" viewBox="0 0 80 80">203 <circle cx="40" cy="40" r="6" fill="#ffffff"/>204 <ellipse cx="40" cy="40" rx="26" ry="12" stroke="#ffffff" stroke-width="3" fill="none"/>205 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(30 40 40)"/>206 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(-30 40 40)"/>207 </svg>208 </div>209 <div class="row-title">Physical world</div>210 </div>211 <div class="sub">Physics and its laws</div>212 </div>213 214 <div class="divider"></div>215 216 <div class="block">217 <div class="row">218 <div class="atom-icon">219 <svg width="80" height="80" viewBox="0 0 80 80">220 <circle cx="40" cy="40" r="6" fill="#ffffff"/>221 <ellipse cx="40" cy="40" rx="26" ry="12" stroke="#ffffff" stroke-width="3" fill="none"/>222 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(30 40 40)"/>223 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(-30 40 40)"/>224 </svg>225 </div>226 <div class="row-title">Units and measurement</div>227 </div>228 <div class="sub">Physical quantities and their measurement</div>229 <div class="sub">Scientific notation</div>230 <div class="sub">Significant figures</div>231 </div>232 233 <div class="divider"></div>234 235 <div class="block">236 <div class="row">237 <div class="atom-icon">238 <svg width="80" height="80" viewBox="0 0 80 80">239 <circle cx="40" cy="40" r="6" fill="#ffffff"/>240 <ellipse cx="40" cy="40" rx="26" ry="12" stroke="#ffffff" stroke-width="3" fill="none"/>241 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(30 40 40)"/>242 <ellipse cx="40" cy="40" rx="12" ry="26" stroke="#ffffff" stroke-width="3" fill="none" transform="rotate(-30 40 40)"/>243 </svg>244 </div>245 <div class="row-title">Basic math concepts for physics (Prerequisite)</div>246 </div>247 <div class="sub">Introduction to logarithms</div>248 <div class="sub">The constant e and the natural logarithm</div>249 <div class="sub">Slope</div>250 <div class="sub">Basics of trigonometry</div>251 <div class="sub">The unit circle definition of sine, cosine, and tangent</div>252 <div class="sub">The graphs of sine, cosine, and tangent</div>253 <div class="sub">Basic trigonometric identities</div>254 </div>255 256 <div style="height: 80px;"></div>257 </div>258 </div>259 260 <!-- Bottom navigation -->261 <div class="bottom-nav">262 <div class="nav-item active">263 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">264 <!-- hexagon-ish home badge -->265 <path d="M12 2l7 4v8l-7 4-7-4V6l7-4z" stroke="currentColor" stroke-width="2" fill="none"/>266 </svg>267 <div>Home</div>268 </div>269 <div class="nav-item">270 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">271 <circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/>272 <path d="M20 20l-4.2-4.2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>273 </svg>274 <div>Explore</div>275 </div>276 <div class="nav-item">277 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">278 <path d="M6 3h12v18l-6-4-6 4V3z" stroke="currentColor" stroke-width="2" fill="none"/>279 </svg>280 <div>Bookmarks</div>281 </div>282 </div>283 284</div>285</body>286</html>