GD-ML/AndroidCode

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; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    font-family: "Segoe UI", Roboto, Arial, sans-serif;12    color:#222;13  }14 15  /* Top app bar */16  .topbar {17    position:absolute; left:0; top:0; width:100%; height:190px;18    background:#122955; color:#fff;19  }20  .status-row {21    position:absolute; left:0; top:10px; width:100%; height:50px;22    display:flex; align-items:center; justify-content:space-between;23    padding:0 24px; font-size:30px; opacity:0.95;24  }25  .title-row {26    position:absolute; left:0; bottom:0; height:120px; width:100%;27    display:flex; align-items:center;28    padding:0 28px 0 24px;29  }30  .title-row h1 {31    font-size:48px; font-weight:700; margin:0 0 0 24px;32  }33  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }34  .top-icons { display:flex; align-items:center; gap:18px; }35 36  /* Content area */37  .content {38    position:absolute; left:0; top:190px; right:0; bottom:200px;39    padding:12px 34px 40px 34px; overflow:hidden;40  }41  .section {42    margin-top:26px; padding:24px 0;43    border-bottom:1px solid #e6e6e6;44  }45  .section-header {46    display:flex; align-items:center; gap:24px; margin-bottom:16px;47  }48  .badge {49    width:88px; height:88px; border-radius:50%;50    background:#66b27a; position:relative;51    display:flex; align-items:center; justify-content:center;52  }53  .section-title {54    font-size:44px; font-weight:700;55  }56  .list {57    margin:14px 0 0 0; padding:0 0 0 0;58  }59  .list .item {60    font-size:36px; color:#6a6a6a;61    margin:16px 0;62  }63 64  /* Bottom nav */65  .bottom-nav {66    position:absolute; left:0; bottom:0; width:100%; height:190px;67    background:#ffffff; border-top:1px solid #dcdcdc;68    display:flex; align-items:center; justify-content:space-around;69  }70  .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#4a4a4a; }71  .nav-item span { font-size:32px; }72  .home-indicator {73    position:absolute; bottom:192px; left:50%; transform:translateX(-50%);74    width:480px; height:18px; background:#cfcfcf; border-radius:9px;75  }76 77  /* Utility SVG styling */78  svg { display:block; }79</style>80</head>81<body>82<div id="render-target">83 84  <!-- Top Bar -->85  <div class="topbar">86    <div class="status-row">87      <div>9:11</div>88      <div class="top-icons">89        <!-- WiFi -->90        <svg width="42" height="42" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">91          <path d="M12 20c.9 0 1.6-.7 1.6-1.6S12.9 17 12 17s-1.6.7-1.6 1.6.7 1.4 1.6 1.4zM3 8c2.6-2 5.9-3 9-3s6.4 1 9 3l-1.7 1.7C17 8 14.6 7.3 12 7.3S7 8 4.7 9.7L3 8zm3.5 3.5c2-1.5 4.4-2.2 5.5-2.2s3.5.7 5.5 2.2l-1.6 1.6c-1.3-.9-2.7-1.4-3.9-1.4s-2.6.5-3.9 1.4L6.5 11.5zm3.8 3.8c.8-.6 1.7-.9 2.7-.9s1.9.3 2.7.9l-1.6 1.6c-.4-.3-.7-.4-1.1-.4s-.7.1-1.1.4l-1.6-1.6z"/>92        </svg>93        <!-- Battery -->94        <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">95          <path d="M18 7h1c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1h-1v1h-1v-1H5c-.6 0-1-.4-1-1V8c0-.6.4-1 1-1h12zm-1 2H6v8h11V9z"/>96        </svg>97      </div>98    </div>99 100    <div class="title-row">101      <div class="icon-btn">102        <!-- Back Arrow -->103        <svg width="52" height="52" viewBox="0 0 24 24" fill="#ffffff">104          <path d="M15.5 5.5L9 12l6.5 6.5-1.9 1.9L5.3 12l8.3-8.4 1.9 1.9z"/>105        </svg>106      </div>107      <h1>Class 11 Physics (India)</h1>108    </div>109  </div>110 111  <!-- Content -->112  <div class="content">113 114    <!-- Section 1 -->115    <div class="section">116      <div class="section-header">117        <div class="badge">118          <!-- Simple atom-like icon -->119          <svg width="60" height="60" viewBox="0 0 24 24">120            <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>121            <ellipse cx="12" cy="12" rx="8" ry="3.2" stroke="#ffffff" stroke-width="1.8" fill="none"/>122            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(60 12 12)"/>123            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(-60 12 12)"/>124          </svg>125        </div>126        <div class="section-title">Differentiation for physics (Prerequisite)</div>127      </div>128    </div>129 130    <!-- Section 2 -->131    <div class="section">132      <div class="section-header">133        <div class="badge">134          <svg width="60" height="60" viewBox="0 0 24 24">135            <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>136            <ellipse cx="12" cy="12" rx="8" ry="3.2" stroke="#ffffff" stroke-width="1.8" fill="none"/>137            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(60 12 12)"/>138            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(-60 12 12)"/>139          </svg>140        </div>141        <div class="section-title">Integration for physics (Prerequisite)</div>142      </div>143      <div class="list">144        <div class="item">Antiderivatives</div>145        <div class="item">Indefinite integrals of common functions</div>146        <div class="item">Definite integral as area</div>147        <div class="item">Riemann sums</div>148        <div class="item">Definite integral evaluation</div>149        <div class="item">u-substitution</div>150        <div class="item">Area &amp; net change</div>151      </div>152    </div>153 154    <!-- Section 3 -->155    <div class="section">156      <div class="section-header">157        <div class="badge">158          <svg width="60" height="60" viewBox="0 0 24 24">159            <circle cx="12" cy="12" r="2.4" fill="#ffffff"/>160            <ellipse cx="12" cy="12" rx="8" ry="3.2" stroke="#ffffff" stroke-width="1.8" fill="none"/>161            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(60 12 12)"/>162            <ellipse cx="12" cy="12" rx="3.2" ry="8" stroke="#ffffff" stroke-width="1.8" fill="none" transform="rotate(-60 12 12)"/>163          </svg>164        </div>165        <div class="section-title">Motion in a straight line</div>166      </div>167      <div class="list">168        <div class="item">Distance, displacement, and coordinate systems</div>169        <div class="item">Average velocity and average speed</div>170        <div class="item">Velocity and speed from graphs</div>171        <div class="item">Acceleration</div>172        <div class="item">Kinematic formulas</div>173        <div class="item">Objects in freefall</div>174        <div class="item">Rectilinear motion (integral calc)</div>175        <div class="item">Relative velocity in 1D</div>176      </div>177    </div>178 179  </div>180 181  <!-- Home indicator -->182  <div class="home-indicator"></div>183 184  <!-- Bottom navigation -->185  <div class="bottom-nav">186    <div class="nav-item">187      <!-- Home icon -->188      <svg width="64" height="64" viewBox="0 0 24 24" fill="#122955">189        <path d="M12 3l9 8h-2v9h-5v-5H10v5H5v-9H3l9-8z"/>190      </svg>191      <span>Home</span>192    </div>193    <div class="nav-item">194      <!-- Explore (magnifier) -->195      <svg width="64" height="64" viewBox="0 0 24 24" fill="#6d6d6d">196        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10.9.9l.3.3v.8l5 5-1.5 1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/>197      </svg>198      <span>Explore</span>199    </div>200    <div class="nav-item">201      <!-- Bookmark -->202      <svg width="64" height="64" viewBox="0 0 24 24" fill="#6d6d6d">203        <path d="M6 3h12v18l-6-4-6 4V3z"/>204      </svg>205      <span>Bookmarks</span>206    </div>207  </div>208 209</div>210</body>211</html>