GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Class 11 Physics (India) - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Top bars */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 80px;22 background: #0F2342;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .app-bar {37 position: absolute;38 top: 80px;39 left: 0;40 width: 1080px;41 height: 160px;42 background: #0F2342;43 color: #fff;44 display: flex;45 align-items: center;46 padding: 0 32px;47 box-sizing: border-box;48 }49 .app-title {50 font-weight: 700;51 font-size: 56px;52 margin-left: 22px;53 }54 55 /* Content area */56 .content {57 position: absolute;58 top: 240px;59 left: 0;60 right: 0;61 bottom: 200px;62 overflow: hidden; /* static screen */63 padding: 0 40px 0 40px;64 box-sizing: border-box;65 }66 67 .section {68 border-top: 1px solid #ECEFF1;69 padding-top: 36px;70 padding-bottom: 18px;71 }72 73 .heading {74 display: flex;75 align-items: center;76 gap: 26px;77 margin-bottom: 26px;78 }79 .atom-icon {80 width: 96px;81 height: 96px;82 border-radius: 50%;83 background: #67A56E;84 position: relative;85 display: flex;86 justify-content: center;87 align-items: center;88 }89 .heading-title {90 font-size: 50px;91 font-weight: 700;92 color: #111;93 }94 95 .subitem {96 font-size: 40px;97 color: #747D86;98 padding: 18px 0;99 border-bottom: 1px solid #F1F3F4;100 }101 102 /* Bottom navigation */103 .bottom-nav {104 position: absolute;105 bottom: 0;106 left: 0;107 width: 1080px;108 height: 200px;109 background: #FFFFFF;110 border-top: 1px solid #E0E0E0;111 display: flex;112 }113 .nav-item {114 flex: 1;115 display: flex;116 flex-direction: column;117 align-items: center;118 justify-content: center;119 gap: 16px;120 color: #7A8088;121 font-size: 34px;122 }123 .nav-item.active {124 color: #1675FF;125 font-weight: 600;126 }127 .icon {128 width: 72px;129 height: 72px;130 }131 132 /* Simple separators between groups */133 .spacer-xxl { height: 14px; }134 135 /* Thin gray scroll indicator at bottom center to mimic Android */136 .gesture-bar {137 position: absolute;138 bottom: 20px;139 left: 50%;140 width: 500px;141 height: 10px;142 margin-left: -250px;143 border-radius: 10px;144 background: #D9D9D9;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="status-bar">153 <div>9:09</div>154 <div class="status-right">155 <!-- Wi-Fi icon -->156 <svg class="icon" viewBox="0 0 24 24" fill="none">157 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>158 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>159 <path d="M8 16c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>160 <circle cx="12" cy="19" r="1.8" fill="#fff"/>161 </svg>162 <!-- Battery icon -->163 <svg class="icon" viewBox="0 0 26 24" fill="none">164 <rect x="2" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"/>165 <rect x="22" y="9" width="3" height="6" rx="1" fill="#fff"/>166 <rect x="4" y="7" width="14" height="10" rx="1" fill="#fff"/>167 </svg>168 </div>169 </div>170 171 <!-- App bar -->172 <div class="app-bar">173 <!-- Back arrow -->174 <svg class="icon" viewBox="0 0 24 24" fill="none">175 <path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>176 </svg>177 <div class="app-title">Class 11 Physics (India)</div>178 </div>179 180 <!-- Main content -->181 <div class="content">182 183 <!-- Section: Differentiation -->184 <div class="section">185 <div class="heading">186 <div class="atom-icon">187 <!-- simple atom-like lines -->188 <svg viewBox="0 0 100 100" width="70" height="70">189 <circle cx="50" cy="50" r="6" fill="#0F2342"/>190 <ellipse cx="50" cy="50" rx="28" ry="12" fill="none" stroke="#0F2342" stroke-width="4"/>191 <ellipse cx="50" cy="50" rx="12" ry="28" fill="none" stroke="#0F2342" stroke-width="4"/>192 </svg>193 </div>194 <div class="heading-title">Differentiation for physics (Prerequisite)</div>195 </div>196 <div class="subitem">Basic differentiation rules</div>197 <div class="subitem">Power rule</div>198 <div class="subitem">Polynomial functions differentiation</div>199 <div class="subitem">Sine & cosine derivatives</div>200 <div class="subitem">Product rule</div>201 <div class="subitem" style="border-bottom: none;">Chain rule</div>202 </div>203 204 <!-- Section: Integration -->205 <div class="section">206 <div class="heading">207 <div class="atom-icon">208 <svg viewBox="0 0 100 100" width="70" height="70">209 <circle cx="50" cy="50" r="6" fill="#0F2342"/>210 <ellipse cx="50" cy="50" rx="28" ry="12" fill="none" stroke="#0F2342" stroke-width="4"/>211 <ellipse cx="50" cy="50" rx="12" ry="28" fill="none" stroke="#0F2342" stroke-width="4"/>212 </svg>213 </div>214 <div class="heading-title">Integration for physics (Prerequisite)</div>215 </div>216 <div class="subitem">Antiderivatives</div>217 <div class="subitem">Indefinite integrals of common functions</div>218 <div class="subitem">Definite integral as area</div>219 <div class="subitem">Riemann sums</div>220 <div class="subitem">Definite integral evaluation</div>221 <div class="subitem">u-substitution</div>222 <div class="subitem" style="border-bottom: none;">Area & net change</div>223 </div>224 225 <!-- Section: Motion in a straight line -->226 <div class="section">227 <div class="heading">228 <div class="atom-icon">229 <svg viewBox="0 0 100 100" width="70" height="70">230 <circle cx="50" cy="50" r="6" fill="#0F2342"/>231 <ellipse cx="50" cy="50" rx="28" ry="12" fill="none" stroke="#0F2342" stroke-width="4"/>232 <ellipse cx="50" cy="50" rx="12" ry="28" fill="none" stroke="#0F2342" stroke-width="4"/>233 </svg>234 </div>235 <div class="heading-title">Motion in a straight line</div>236 </div>237 <div class="subitem">Distance, displacement, and coordinate systems</div>238 <div class="subitem" style="border-bottom: none;">Average velocity and average speed</div>239 </div>240 241 </div>242 243 <!-- Bottom navigation -->244 <div class="bottom-nav">245 <div class="nav-item active">246 <!-- Home hexagon icon -->247 <svg class="icon" viewBox="0 0 24 24" fill="none">248 <path d="M6 3l12 0 0 18-12 0z" opacity="0" />249 <path d="M12 2l7 4v8l-7 4-7-4V6l7-4z" fill="#1675FF"/>250 </svg>251 <div>Home</div>252 </div>253 <div class="nav-item">254 <!-- Explore / Search icon -->255 <svg class="icon" viewBox="0 0 24 24" fill="none">256 <circle cx="11" cy="11" r="6" stroke="#7A8088" stroke-width="2"/>257 <path d="M16 16l5 5" stroke="#7A8088" stroke-width="2" stroke-linecap="round"/>258 </svg>259 <div>Explore</div>260 </div>261 <div class="nav-item">262 <!-- Bookmark icon -->263 <svg class="icon" viewBox="0 0 24 24" fill="none">264 <path d="M6 3h12v18l-6-4-6 4V3z" stroke="#7A8088" stroke-width="2" fill="none"/>265 </svg>266 <div>Bookmarks</div>267 </div>268 </div>269 270 <!-- Gesture bar -->271 <div class="gesture-bar"></div>272</div>273</body>274</html>