GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Class 11 Physics (India) UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", 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 navy app bar */16 .topbar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 220px;22 background: #14264B; /* deep navy */23 color: #FFFFFF;24 }25 .sb-row {26 height: 90px;27 display: flex;28 align-items: center;29 padding: 0 36px;30 font-size: 40px;31 letter-spacing: 0.5px;32 }33 .sb-row .time { flex: 1; }34 .sb-row .icons { display: flex; gap: 26px; align-items: center; }35 .nav-row {36 height: 130px;37 display: flex;38 align-items: center;39 padding: 0 30px 0 30px;40 gap: 28px;41 }42 .title {43 font-size: 50px;44 font-weight: 700;45 }46 47 /* Content area */48 .content {49 position: absolute;50 top: 220px;51 left: 0;52 right: 0;53 bottom: 180px;54 overflow: hidden;55 background: #FFFFFF;56 }57 58 .section {59 padding: 34px 36px 24px 36px;60 border-bottom: 1px solid #e9e9e9;61 }62 .section-header {63 display: flex;64 align-items: center;65 gap: 28px;66 margin-bottom: 14px;67 }68 .section-title {69 font-size: 46px;70 font-weight: 700;71 color: #111;72 }73 74 .atom {75 width: 96px;76 height: 96px;77 border-radius: 50%;78 background: #5FAE6F;79 position: relative;80 display: flex;81 align-items: center;82 justify-content: center;83 }84 .items { margin-top: 10px; }85 .item {86 font-size: 40px;87 color: #666666;88 line-height: 1.6;89 margin: 14px 6px;90 }91 92 /* Bottom navigation */93 .bottom-nav {94 position: absolute;95 bottom: 60px;96 left: 0;97 width: 1080px;98 height: 140px;99 border-top: 1px solid #e6e6e6;100 background: #ffffff;101 display: flex;102 align-items: center;103 justify-content: space-around;104 }105 .nav-item {106 display: flex;107 flex-direction: column;108 align-items: center;109 gap: 10px;110 color: #888888;111 font-size: 34px;112 }113 .nav-item.active { color: #2A79F5; }114 115 .gesture {116 position: absolute;117 bottom: 16px;118 left: 50%;119 transform: translateX(-50%);120 width: 560px;121 height: 18px;122 background: #BDBDBD;123 border-radius: 12px;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Top status + title bar -->131 <div class="topbar">132 <div class="sb-row">133 <div class="time">9:12</div>134 <div class="icons">135 <!-- WiFi icon -->136 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">137 <path d="M2.5 8.5a14 14 0 0 1 19 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>138 <path d="M5 11.5a10 10 0 0 1 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>139 <path d="M8 14.5a6 6 0 0 1 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>140 <circle cx="12" cy="18" r="2" fill="#ffffff"/>141 </svg>142 <!-- Battery with bolt -->143 <svg width="54" height="44" viewBox="0 0 30 20" fill="none">144 <rect x="1" y="3" width="24" height="14" rx="2" stroke="#ffffff" stroke-width="2"/>145 <rect x="25" y="7" width="4" height="6" rx="1" fill="#ffffff"/>146 <path d="M12 5.5l-3 5h3l-2 5 7-7h-3l1.8-3.2z" fill="#ffffff"/>147 </svg>148 </div>149 </div>150 <div class="nav-row">151 <!-- Back arrow -->152 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">153 <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 <div class="title">Class 11 Physics (India)</div>156 </div>157 </div>158 159 <!-- Scrollable content -->160 <div class="content">161 <!-- Differentiation section header -->162 <div class="section">163 <div class="section-header">164 <div class="atom">165 <!-- Simple atom lines -->166 <svg width="72" height="72" viewBox="0 0 24 24">167 <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>168 <ellipse cx="12" cy="12" rx="9" ry="4" stroke="#ffffff" stroke-width="1.6" fill="none"/>169 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(35 12 12)"/>170 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(-35 12 12)"/>171 </svg>172 </div>173 <div class="section-title">Differentiation for physics (Prerequisite)</div>174 </div>175 </div>176 177 <!-- Integration section -->178 <div class="section">179 <div class="section-header">180 <div class="atom">181 <svg width="72" height="72" viewBox="0 0 24 24">182 <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>183 <ellipse cx="12" cy="12" rx="9" ry="4" stroke="#ffffff" stroke-width="1.6" fill="none"/>184 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(35 12 12)"/>185 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(-35 12 12)"/>186 </svg>187 </div>188 <div class="section-title">Integration for physics (Prerequisite)</div>189 </div>190 <div class="items">191 <div class="item">Antiderivatives</div>192 <div class="item">Indefinite integrals of common functions</div>193 <div class="item">Definite integral as area</div>194 <div class="item">Riemann sums</div>195 <div class="item">Definite integral evaluation</div>196 <div class="item">u-substitution</div>197 <div class="item">Area & net change</div>198 </div>199 </div>200 201 <!-- Motion in a straight line section -->202 <div class="section">203 <div class="section-header">204 <div class="atom">205 <svg width="72" height="72" viewBox="0 0 24 24">206 <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>207 <ellipse cx="12" cy="12" rx="9" ry="4" stroke="#ffffff" stroke-width="1.6" fill="none"/>208 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(35 12 12)"/>209 <ellipse cx="12" cy="12" rx="4" ry="9" stroke="#ffffff" stroke-width="1.6" fill="none" transform="rotate(-35 12 12)"/>210 </svg>211 </div>212 <div class="section-title">Motion in a straight line</div>213 </div>214 <div class="items">215 <div class="item">Distance, displacement, and coordinate systems</div>216 <div class="item">Average velocity and average speed</div>217 <div class="item">Velocity and speed from graphs</div>218 <div class="item">Acceleration</div>219 <div class="item">Kinematic formulas</div>220 <div class="item">Objects in freefall</div>221 <div class="item">Rectilinear motion (integral calc)</div>222 </div>223 </div>224 225 </div>226 227 <!-- Bottom navigation -->228 <div class="bottom-nav">229 <div class="nav-item active">230 <!-- Hexagon/Home icon -->231 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">232 <path d="M7 3l10 0 4 7-4 7H7L3 10 7 3z" stroke="#2A79F5" stroke-width="2" fill="none"/>233 </svg>234 <div>Home</div>235 </div>236 <div class="nav-item">237 <!-- Magnifier search -->238 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">239 <circle cx="10" cy="10" r="6" stroke="#888888" stroke-width="2"/>240 <path d="M15 15l6 6" stroke="#888888" stroke-width="2" stroke-linecap="round"/>241 </svg>242 <div>Explore</div>243 </div>244 <div class="nav-item">245 <!-- Bookmark icon -->246 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">247 <path d="M6 3h12v17l-6-4-6 4V3z" stroke="#888888" stroke-width="2" fill="none"/>248 </svg>249 <div>Bookmarks</div>250 </div>251 </div>252 253 <!-- Gesture bar -->254 <div class="gesture"></div>255</div>256</body>257</html>