Skip to content

Commit 83c4495

Browse files
janbenderjanbender
committed
- new style
1 parent c35495e commit 83c4495

1 file changed

Lines changed: 35 additions & 42 deletions

File tree

‎examples/Newton_solver.html‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
<html class="no-js" lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<style>
6-
body {font-family: Helvetica, sans-serif;}
7-
table {background-color:#CCDDEE;text-align:left}
8-
</style>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://interactivecomputergraphics.github.io/physics-simulation/examples/style.css">
97
<script type="text/x-mathjax-config">
108
MathJax.Hub.Config({
119
extensions: ["tex2jax.js"],
@@ -18,45 +16,42 @@
1816
"HTML-CSS": { fonts: ["TeX"] }
1917
});
2018
</script>
21-
<script type="text/javascript" aync src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
19+
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js"></script>
2220
<script src="https://cdn.plot.ly/plotly-2.5.1.min.js"></script>
2321
<title>Newton solver</title>
2422
</head>
2523
<body>
24+
25+
<header class="page-header">
26+
<h1>Newton solver</h1>
27+
</header>
28+
2629
<main>
27-
<h1 style="text-align:center">Newton solver</h1>
28-
<table style="align_center;border-radius: 20px;padding: 20px;margin:auto">
29-
<col width="1000">
30-
<tr>
31-
<td>
32-
<div id="plotOutput" style="width: 1000px; height: 600px;border:2px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
33-
</td>
34-
</tr>
35-
<tr>
36-
<td><table style="margin:20px">
37-
<col width="200" style="padding-right:10px">
38-
<col width="100">
39-
<tr>
40-
<td><label for="newton_steps">Newton steps</label></td>
41-
<td><input type="text" id="textInput" value="1" readonly></td>
42-
</tr>
43-
<tr>
44-
<td></td>
45-
<td><input onchange="document.getElementById('textInput').value=this.value;plot.reset()" id="newton_steps" value="1" type="range" min="1" max="50" step="1"></td>
46-
</tr>
47-
<tr>
48-
<td><label for="fct">Function</label></td>
49-
<td><select onchange="plot.reset()" id="fct" size="1">
50-
<option selected="selected">Quadratic function</option>
51-
<option>Cubic function</option>
52-
<option>Trigonometric function</option>
53-
</select>
54-
</td>
55-
</tr>
56-
</table></td>
57-
</tr>
58-
59-
<tr><td>
30+
<!-- Simulation panel: canvas + controls -->
31+
<div class="card sim-panel">
32+
<div class="sim-canvas-wrap">
33+
<div id="plotOutput" style="width: 100%; height: auto;border:0px solid #000000;border-radius: 0px;background-color:#EEEEEE"></div>
34+
</div>
35+
</div>
36+
<div class="controls-panel" style="width: 100%;align:center;margin-left:auto;margin-right:auto">
37+
<h3>Controls</h3>
38+
<div class="controls-grid" style="width: 400px;align:left">
39+
<label for="newton_steps">Newton steps</label>
40+
<span class="stat-value"><input type="text" id="textInput" value="1" readonly></span>
41+
42+
<label></label>
43+
<input onchange="document.getElementById('textInput').value=this.value;plot.reset()" id="newton_steps" value="1" type="range" min="1" max="50" step="1">
44+
<label for="fct">Function</label>
45+
<select onchange="plot.reset()" id="fct" size="1">
46+
<option selected="selected">Quadratic function</option>
47+
<option>Cubic function</option>
48+
<option>Trigonometric function</option>
49+
</select>
50+
</div>
51+
</div>
52+
53+
<!-- Theory section -->
54+
<div class="card theory">
6055
<h2>Newton's method</h2>
6156

6257
<p>Newton's method is an iterative approach to find the roots of a function. The method requires the function $f(x)$, its derivative $f'(x)$ and an initial guess $x_0$.</p>
@@ -66,8 +61,7 @@ <h2>Newton's method</h2>
6661
x_{n+1} = x_{n} - \frac{f(x_n)}{f'(x_n)}
6762
\end{equation*}$$
6863
<p>If the initial guess $x_0$ is close enough to the solution and $f'(x_n) \neq 0$, the method usually converges.</p>
69-
</td></tr>
70-
</table>
64+
</div>
7165

7266
</main>
7367

@@ -212,8 +206,7 @@ <h2>Newton's method</h2>
212206

213207
var layout = {
214208
title: 'Functions',
215-
width: 1000,
216-
height: 600
209+
autosize: true
217210
};
218211

219212
Plotly.newPlot('plotOutput', data, layout);

0 commit comments

Comments
 (0)