GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Class 11 Physics - Motion in a straight line</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 24px;14 box-shadow: 0 6px 24px rgba(0,0,0,0.12);15 }16 17 /* Top status + header */18 .top-area { background:#0d2b6a; color:#fff; }19 .status-bar {20 height: 90px;21 padding: 0 36px;22 display:flex; align-items:center; justify-content:space-between;23 font-size:38px; letter-spacing:0.5px;24 }25 .status-right { display:flex; align-items:center; gap:26px; }26 .header {27 padding: 20px 36px 36px 36px;28 color:#fff;29 }30 .header-row {31 display:flex; align-items:center; justify-content:space-between;32 margin-bottom: 16px;33 }34 .header-title-small { font-size:36px; opacity:0.85; margin-bottom:8px; }35 .header-title { font-size:64px; font-weight:700; line-height:1.1; }36 .back-btn, .bookmark-btn {37 width:64px; height:64px; display:flex; align-items:center; justify-content:center;38 border-radius:16px;39 }40 .bookmark-btn { opacity:0.95; }41 42 /* Sections */43 .content { background:#fff; }44 .section {45 padding: 34px 36px 0 36px;46 }47 .section-header {48 display:flex; align-items:center; justify-content:space-between;49 font-size:44px; font-weight:700; color:#333;50 margin-bottom: 18px;51 }52 .section-header .bookmark-btn { color:#3f6be5; }53 .list {54 background:#fff;55 border-top: 1px solid #e9e9e9;56 border-bottom: 1px solid #e9e9e9;57 }58 .list-item {59 display:flex; align-items:center;60 padding: 30px 24px;61 gap: 28px;62 border-bottom:1px solid #efefef;63 }64 .list-item:last-child { border-bottom:none; }65 .item-text {66 font-size:42px; color:#111;67 line-height:1.25;68 }69 70 /* Icon styles */71 .circle-icon {72 width:78px; height:78px;73 border-radius:50%;74 border:4px solid #3f6be5;75 display:flex; align-items:center; justify-content:center;76 }77 .circle-gray {78 border-color:#8e9af5;79 }80 .star-icon svg, .doc-icon svg, .play-icon svg {81 width:40px; height:40px;82 }83 84 /* Bottom nav */85 .bottom-nav {86 position:absolute; left:0; right:0; bottom:70px;87 height:170px; border-top:1px solid #e6e6e6; background:#fff;88 display:flex; align-items:center; justify-content:space-around;89 }90 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#777; font-size:34px; }91 .nav-item.active { color:#2e63f7; }92 .hex {93 width:84px; height:84px; position:relative;94 clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);95 background: rgba(46,99,247,0.08);96 border:3px solid #2e63f7;97 display:flex; align-items:center; justify-content:center;98 }99 .home-indicator {100 position:absolute; bottom:18px; left:50%;101 transform:translateX(-50%);102 width:540px; height:14px; background:#000; opacity:0.20; border-radius:8px;103 }104 /* Helpers */105 .muted { color:#c9d2ff; }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Top area -->112 <div class="top-area">113 <div class="status-bar">114 <div>9:12</div>115 <div class="status-right">116 <!-- Wi-Fi icon -->117 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">118 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>119 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>120 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>121 <circle cx="12" cy="19" r="1.5" fill="#fff"/>122 </svg>123 <!-- Battery icon -->124 <svg width="46" height="40" viewBox="0 0 28 18" fill="none">125 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>126 <rect x="3" y="5" width="16" height="8" rx="1" fill="#fff"/>127 <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"/>128 </svg>129 </div>130 </div>131 132 <div class="header">133 <div class="header-row">134 <div class="back-btn">135 <!-- Back arrow -->136 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">137 <path d="M14 6L8 12l6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 <div class="bookmark-btn">141 <!-- Bookmark outline -->142 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">143 <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>144 </svg>145 </div>146 </div>147 <div class="header-title-small">Class 11 Physics (India)</div>148 <div class="header-title">Unit: Motion in a straight line</div>149 </div>150 </div>151 152 <!-- CONTENT -->153 <div class="content">154 <!-- Section 1 -->155 <div class="section">156 <div class="section-header">157 <div>Distance, displacement, and coordinate systems</div>158 <div class="bookmark-btn">159 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">160 <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#2e63f7" stroke-width="2" stroke-linejoin="round"/>161 </svg>162 </div>163 </div>164 165 <div class="list">166 <div class="list-item">167 <div class="circle-icon play-icon">168 <svg viewBox="0 0 24 24">169 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>170 </svg>171 </div>172 <div class="item-text">Distance and displacement introduction</div>173 </div>174 175 <div class="list-item">176 <div class="circle-icon play-icon">177 <svg viewBox="0 0 24 24">178 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>179 </svg>180 </div>181 <div class="item-text">Distance and displacement in one dimension</div>182 </div>183 184 <div class="list-item">185 <div class="circle-icon play-icon">186 <svg viewBox="0 0 24 24">187 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>188 </svg>189 </div>190 <div class="item-text">Position-time graphs</div>191 </div>192 193 <div class="list-item">194 <div class="circle-icon play-icon">195 <svg viewBox="0 0 24 24">196 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>197 </svg>198 </div>199 <div class="item-text">Worked example: distance and displacement from position-time graphs</div>200 </div>201 202 <div class="list-item">203 <div class="circle-icon star-icon">204 <svg viewBox="0 0 24 24" fill="none">205 <path d="M12 3l2.6 5.6 6.1.8-4.4 4.3 1.1 6.2-5.4-2.9-5.4 2.9 1.1-6.2-4.4-4.3 6.1-.8L12 3z" stroke="#3f6be5" stroke-width="2" fill="none"/>206 </svg>207 </div>208 <div class="item-text">Finding distance and displacement from graphs</div>209 </div>210 211 <div class="list-item">212 <div class="circle-icon doc-icon">213 <svg viewBox="0 0 24 24" fill="none">214 <path d="M6 4h8l4 4v12H6z" stroke="#3f6be5" stroke-width="2"/>215 <path d="M9 12h6M9 16h6M9 8h3" stroke="#3f6be5" stroke-width="2" stroke-linecap="round"/>216 </svg>217 </div>218 <div class="item-text">Distance and displacement review</div>219 </div>220 221 <div class="list-item">222 <div class="circle-icon star-icon">223 <svg viewBox="0 0 24 24" fill="none">224 <path d="M12 3l2.6 5.6 6.1.8-4.4 4.3 1.1 6.2-5.4-2.9-5.4 2.9 1.1-6.2-4.4-4.3 6.1-.8L12 3z" stroke="#3f6be5" stroke-width="2" fill="none"/>225 </svg>226 </div>227 <div class="item-text">Distance and displacement - properties</div>228 </div>229 </div>230 </div>231 232 <!-- Section 2 -->233 <div class="section" style="padding-top: 40px;">234 <div class="section-header">235 <div>Average velocity and average speed</div>236 <div class="bookmark-btn">237 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">238 <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#2e63f7" stroke-width="2" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 243 <div class="list">244 <div class="list-item">245 <div class="circle-icon play-icon">246 <svg viewBox="0 0 24 24">247 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>248 </svg>249 </div>250 <div class="item-text">Intro to vectors and scalars</div>251 </div>252 253 <div class="list-item">254 <div class="circle-icon play-icon">255 <svg viewBox="0 0 24 24">256 <polygon points="9,7 9,17 17,12" fill="#3f6be5"/>257 </svg>258 </div>259 <div class="item-text">Calculating average velocity or speed</div>260 </div>261 </div>262 </div>263 </div>264 265 <!-- Bottom navigation -->266 <div class="bottom-nav">267 <div class="nav-item active">268 <div class="hex">269 <!-- Home icon -->270 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">271 <path d="M3 12l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" stroke="#2e63f7" stroke-width="2"/>272 </svg>273 </div>274 <div>Home</div>275 </div>276 277 <div class="nav-item">278 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">279 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2"/>280 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" stroke-linecap="round"/>281 </svg>282 <div>Explore</div>283 </div>284 285 <div class="nav-item">286 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">287 <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z" stroke="#777" stroke-width="2" stroke-linejoin="round"/>288 </svg>289 <div>Bookmarks</div>290 </div>291 </div>292 293 <div class="home-indicator"></div>294</div>295</body>296</html>