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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 border-radius:0;12 box-shadow:none;13 }14 /* Top bars */15 .top-bar {16 position:absolute; left:0; top:0; width:100%;17 height:220px; background:#0f2b57; color:#fff;18 }19 .status {20 height:80px; display:flex; align-items:center; justify-content:space-between;21 padding:0 36px; font-size:34px; letter-spacing:0.5px;22 opacity:0.95;23 }24 .status .right-icons { display:flex; align-items:center; gap:26px; }25 .app-bar {26 height:140px; display:flex; align-items:center;27 padding:0 36px; gap:24px;28 }29 .title { font-size:46px; font-weight:700; color:#fff; }30 .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }31 .back-btn svg { width:44px; height:44px; fill:none; stroke:#fff; stroke-width:6; }32 /* Content area */33 .content {34 position:absolute; left:0; top:220px; width:100%; height:2060px;35 background:#ffffff;36 overflow:hidden;37 }38 .section {39 padding:30px 42px 12px 42px;40 }41 .section-header {42 display:flex; align-items:center; gap:22px; margin-bottom:10px;43 }44 .icon-circle {45 width:96px; height:96px; border-radius:50%; background:#69a36c; display:flex; align-items:center; justify-content:center;46 }47 .icon-circle svg { width:64px; height:64px; }48 .section-title {49 font-size:42px; font-weight:700; color:#222;50 line-height:1.2;51 }52 .list { margin-top:18px; }53 .list-item {54 font-size:38px; color:#707070; line-height:72px;55 }56 .divider {57 height:16px; background:#f0f0f0; margin:18px 0;58 border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;59 }60 /* Bottom navigation */61 .bottom-nav {62 position:absolute; left:0; bottom:0; width:100%; height:180px; background:#ffffff;63 border-top:1px solid #e0e0e0;64 display:flex; align-items:center; justify-content:space-around;65 }66 .nav-item { width:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#7a7a7a; }67 .nav-item svg { width:64px; height:64px; stroke:#888; fill:none; stroke-width:6; }68 .nav-item.active { color:#0f2b57; }69 .nav-item.active svg { stroke:#0f2b57; }70 .gesture {71 position:absolute; left:50%; transform:translateX(-50%);72 bottom:200px; width:420px; height:16px; background:#d8d8d8; border-radius:8px; opacity:0.8;73 }74</style>75</head>76<body>77<div id="render-target">78 79 <!-- Top dark header -->80 <div class="top-bar">81 <div class="status">82 <div>9:12</div>83 <div class="right-icons">84 <!-- simple wifi icon -->85 <svg viewBox="0 0 24 24">86 <path d="M2 8c5-4 15-4 20 0" />87 <path d="M5 12c3-2 11-2 14 0" />88 <path d="M9 16c2-1 4-1 6 0" />89 <circle cx="12" cy="20" r="1.6" fill="#fff"></circle>90 </svg>91 <!-- battery icon -->92 <svg viewBox="0 0 32 20">93 <rect x="2" y="4" width="24" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>94 <rect x="4" y="6" width="18" height="8" fill="#fff"></rect>95 <rect x="26" y="7" width="4" height="6" rx="1" ry="1" fill="#fff"></rect>96 </svg>97 </div>98 </div>99 <div class="app-bar">100 <div class="back-btn">101 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>102 </div>103 <div class="title">Class 11 Physics (India)</div>104 </div>105 </div>106 107 <!-- Scroll content -->108 <div class="content">109 <!-- Section 1 -->110 <div class="section">111 <div class="section-header">112 <div class="icon-circle">113 <!-- simple atom-like icon -->114 <svg viewBox="0 0 24 24">115 <circle cx="12" cy="12" r="2.5" fill="#e9f6ea"></circle>116 <ellipse cx="12" cy="12" rx="9" ry="4.5" fill="none" stroke="#e9f6ea" stroke-width="2"></ellipse>117 <ellipse cx="12" cy="12" rx="4.5" ry="9" fill="none" stroke="#e9f6ea" stroke-width="2" transform="rotate(60 12 12)"></ellipse>118 <ellipse cx="12" cy="12" rx="4.5" ry="9" fill="none" stroke="#e9f6ea" stroke-width="2" transform="rotate(-60 12 12)"></ellipse>119 </svg>120 </div>121 <div class="section-title">Basic math concepts for physics (Prerequisite)</div>122 </div>123 <div class="list">124 <div class="list-item">The graphs of sine, cosine, and tangent</div>125 <div class="list-item">Basic trigonometric identities</div>126 <div class="list-item">Evaluating functions</div>127 <div class="list-item">Inputs and outputs of a function</div>128 <div class="list-item">Maximum and minimum points</div>129 <div class="list-item">Intervals where a function is positive, negative,<br/>increasing, or decreasing</div>130 <div class="list-item">Interpreting features of graphs</div>131 </div>132 </div>133 134 <div class="divider"></div>135 136 <!-- Section 2 -->137 <div class="section">138 <div class="section-header">139 <div class="icon-circle">140 <svg viewBox="0 0 24 24">141 <circle cx="12" cy="12" r="2.5" fill="#e9f6ea"></circle>142 <ellipse cx="12" cy="12" rx="9" ry="4.5" fill="none" stroke="#e9f6ea" stroke-width="2"></ellipse>143 <ellipse cx="12" cy="12" rx="4.5" ry="9" fill="none" stroke="#e9f6ea" stroke-width="2" transform="rotate(60 12 12)"></ellipse>144 <ellipse cx="12" cy="12" rx="4.5" ry="9" fill="none" stroke="#e9f6ea" stroke-width="2" transform="rotate(-60 12 12)"></ellipse>145 </svg>146 </div>147 <div class="section-title">Differentiation for physics (Prerequisite)</div>148 </div>149 <div class="list">150 <div class="list-item">Slope</div>151 <div class="list-item">Introduction to differential calculus</div>152 <div class="list-item">Secant lines</div>153 <div class="list-item">Limit basics</div>154 <div class="list-item">Derivative as a limit</div>155 <div class="list-item">Using the formal definition of derivative</div>156 <div class="list-item">Derivative as a function</div>157 <div class="list-item">Basic differentiation rules</div>158 <div class="list-item">Power rule</div>159 <div class="list-item">Polynomial functions differentiation</div>160 <div class="list-item">Sine & cosine derivatives</div>161 </div>162 </div>163 </div>164 165 <!-- Gesture handle (small bar above nav) -->166 <div class="gesture"></div>167 168 <!-- Bottom navigation bar -->169 <div class="bottom-nav">170 <div class="nav-item active">171 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H6V10z"/><path d="M10 21V13h4v8" stroke="none" fill="none"/></svg>172 <div>Home</div>173 </div>174 <div class="nav-item">175 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><line x1="17" y1="17" x2="22" y2="22" stroke-linecap="round"/></svg>176 <div>Explore</div>177 </div>178 <div class="nav-item">179 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>180 <div>Bookmarks</div>181 </div>182 </div>183 184</div>185</body>186</html>