diff --git a/README.md b/README.md index fbc6cd5..a4562e8 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Can be used by designers and engineers as a quick estimation tool, as well as by ## License -The project is published intentionally with no license at the moment. +This product is intended for digital use only. It is prohibited to copy or distribute the whole or part of it, unless accorded between the parts. ## Usage @@ -32,6 +32,9 @@ All texts and numbers on the pages are able to be copied and pasted anywhere you A button for getting back to the main page is provided on every profile page, directly below its title. +The equations page is intuitive to use: clicking the shape from the list on the left makes the math for that shape visible. +Some other extra features from MathJax library are also available when right-clicking on a equation, like the ability of zooming the expression or copying the LaTex string for further use. + ## Known bugs and issues #### Ellipse perimeter not exact @@ -41,10 +44,14 @@ Notice that the more "squished" the ellipse, the more imprecise the result. The formula has been updated to a better one - this one - in version 1.2 and the approximation is totally suitable for the intended use of this tool. This might mean that it won't be upgraded to an even more precise calculation (infinite series are not infinite in programming). +#### Truncated material names + +When a material is selected from the dropdown menu, often the name overflows the space available. +The issue will be solved in a future release. + ## Next improvements to be added Note: _The order of this list might not match the order these features will be added through next versions._ -- Math page (showing formulas and symbols used in the tool) - More materials in the database - Materials divided in groups, in order to filter the available ones - Result finder (let the program change an input to return a specific result) @@ -55,6 +62,16 @@ Note: _The order of this list might not match the order these features will be a ## Versions log +#### v1.3 + +_Release date: July 25, 2021_ + +_Work Time: 11h 30min_ + +- Footer has been changed in a sidebar on the right +- Added equations page showing formulas and symbols used in the tool +- Bugs can be reported via Github or Google modules, from the "Credits" popup + #### v1.2 _Release date: April 25, 2021_ @@ -89,7 +106,9 @@ First release composed by an index page and 13 standard shapes to choose. Tables #### Libraries - [p5.js](https://p5js.org/) javascript library - +- [MathJax](https://www.mathjax.org/) javascript library #### Media -- Favicon made by [Vitaliy Gorbachev](https://www.flaticon.com/authors/vitaly-gorbachev) from [www.flaticon.com](www.flaticon.com) +- Favicon made by [Vitaliy Gorbachev](https://www.flaticon.com/authors/vitaly-gorbachev) from [www.flaticon.com](https://www.flaticon.com/) +- Icons made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/) +- Web font icons from [UIcons](https://www.flaticon.com/uicons) on [www.flaticon.com](https://www.flaticon.com/) diff --git a/assets/db/equations.json b/assets/db/equations.json new file mode 100644 index 0000000..1a89603 --- /dev/null +++ b/assets/db/equations.json @@ -0,0 +1,393 @@ +{ + "Cylinder": { + "title": "Cylinder", + "legend": [ + "D : diameter", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = D /cdot /pi/]", + "/[A = /pi r^{2}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{/pi /cdot D^{4}}{64}/]", + "/[W = /frac{/pi /cdot D^{3}}{32}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Hollow Cylinder": { + "title": "Hollow Cylinder", + "legend": [ + "D : diameter", + "d : internal diameter", + "t : thickness", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[d = D - 2t/]", + "/[P = D /cdot /pi + d /cdot /pi = /pi (D + d)/]", + "/[A = /pi r^{2} - /pi (r - t)^{2} = /pi t (D - t)/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{/pi /cdot (D^{4} - d^{4})}{64}/]", + "/[W = /frac{/pi /cdot (D^{3} - d^{3})}{32}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Rectangle Bar": { + "title": "Rectangle Bar", + "legend": [ + "B : base length", + "H : height", + "R : corner radius", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = 2 (B + H - 4R) + 2 /pi R/]", + "/[A = B (H - 2R) + 2R (H - 2R) + /pi R^{2}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I /approx /frac{B H^{3}}{12}/]", + "/[W /approx /frac{B H^{2}}{6}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Rectangular Tube": { + "title": "Rectangle Tube", + "legend": [ + "B : base length", + "H : height", + "R : outer radius", + "r : inner radius", + "t : thickness", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[r = max /left /{ 0 ; R - t /right /} /]", + "/[P_{inner} = 2 (B + H - 4t - 4r) + 2 /pi r/]", + "/[A_{inner} = (B - 2t)(H - 2t - 2r) + 2r (B - 2t - 2r) - /pi r^{2}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I /approx /frac{B H^{3} - (B - 2t)(H - 2t)^{3}}{12}/]", + "/[W /approx /frac{B H^{3} - (B - 2t)(H - 2t)^{3}}{6 H}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Triangle Prism": { + "title": "Triangular Prism", + "legend": [ + "B : base length", + "H : height", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = B + 2 /sqrt{/frac{B^2}{4} + H^2}/]", + "/[A = /frac{B H}{2}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{B H^3}{36}/]", + "/[W = /frac{B H^2}{24}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Trapezius Prism": { + "title": "Trapezius Prism", + "legend": [ + "B : major base length", + "b : minor base length", + "H : height", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = B + b + 2 /sqrt{/frac{(B - b)^{2}}{4} + H^2}/]", + "/[A = /frac{H (B + b)}{2}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{H^3 (b^3 + 4Bb + B^2)}{36 (B + b)}/]", + "/[W = /frac{H^2 (b^2 + 4Bb + B^2)}{12 (B + 2b)}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Hexagon Prism": { + "title": "Hexagonal Prism", + "legend": [ + "H : height (side to side)", + "e : edge length", + "s : circumscribed diameter", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[e = /frac{H}{2 sin/frac{/pi}{3}}/]", + "/[s = 2e/]", + "/[P = 6e/]", + "/[A = /frac{P /cdot H}{4}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{5 /sqrt{3}}{16} /cdot e^4/]", + "/[W_{A} = /frac{2 I}{H}/]", + "/[W_{B} = /frac{2 I}{s}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Octagonal Prism": { + "title": "Octagonal Prism", + "legend": [ + "H : side to side dimension", + "e : edge length", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[e = H /sqrt{2} - H = /frac{H}{1 + /sqrt{2}}/]", + "/[P = 8e/]", + "/[A = 2 (/sqrt{2} - 1) /cdot H^2/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{/sqrt{2} - 1}{6} /cdot H^4/]", + "/[W = /frac{2 I}{H} = /frac{/sqrt{2} - 1}{3} /cdot H^3/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Elliptic Bar": { + "title": "Elliptic Bar", + "legend": [ + "A : horizontal diameter", + "B : vertical diameter", + "a : horizontal radius", + "b : vertical radius", + "h : circularity factor", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[a = /frac{A}{2} /; , /; b = /frac{B}{2}/]", + "/[h = /frac{(a - b)^2}{(a + b)^2}/]", + "/[P /approx /pi (a + b) /left(1 + /frac{3h}{10 + /sqrt{4 - 3h}} /right)/]", + "/[A = /pi /frac{A /cdot B}{4}/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I = /frac{/pi A B^3}{64}/]", + "/[W = /frac{2 I}{B} = /frac{/pi A B^2}{32}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "Hollow Ellipse Bar": { + "title": "Elliptic Tube", + "legend": [ + "A : horizontal diameter", + "B : vertical diameter", + "a : horizontal external radius", + "b : vertical external radius", + "t : thickness", + "h : circularity factor", + "hi : internal circularity factor", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[a = /frac{A}{2} /; , /; b = /frac{B}{2}/]", + "/[h = /frac{(a - b)^2}{(a + b)^2} /; , /; h_i = /frac{(a - b)^2}{(a + b)^2}/]", + "/[P /approx /pi /left[ (a + b) /left(1 + /frac{3h}{10 + /sqrt{4 - 3h}} /right) + (a + b - 2t) /left(1 + /frac{3h_i}{10 + /sqrt{4 - 3h_i}} /right) /right]/]", + "/[A /simeq /frac{/pi}{4} /left [A B - (A - 2t)(B- 2t) /right ]/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I /simeq /frac{/pi}{64} /left [A B^3 - (A - 2t)(B- 2t)^3 /right ]/]", + "/[W = /frac{2 I}{B} /simeq /frac{/pi}{32 /cdot B} /left [A B^3 - (A - 2t)(B- 2t)^3 /right ]/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "H Profile": { + "title": "H Profile", + "legend": [ + "B : base length", + "H : height", + "t : central thickness", + "h : wings inner height", + "L : length", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = 2 (2B + H - t)/]", + "/[A = B (H - h) + ht/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I_{A} = /frac{B H^3 - (B-t) h^3}{12}/]", + "/[W_{A} = /frac{2 I_{A}}{H} = /frac{B H^3 - (B-t) h^3}{6H}/]", + "/[I_{B} = /frac{(H - h) B^3 - h t^3}{12}/]", + "/[W_{B} = /frac{2 I_{B}}{B} = /frac{(H - h) B^3 - h t^3}{6B}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "C / U Profile": { + "title": "C Profile", + "legend": [ + "B : base length", + "H : height", + "b : inner base", + "h : wings inner height", + "L : length", + "v1 : barycenter height", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = 2 (B + H + b)/]", + "/[A = B H - b h/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[I_{A} = /frac{B H^3 - b h^3}{12}/]", + "/[W_{A} = /frac{2 I_{A}}{H} = /frac{B H^3 - b h^3}{6H}/]", + "/[v_1B = /frac{1}{2} /cdot /frac{(H - h) B^2 + h (B - b)^2}{(H - h) B + h (B - b)}/]", + "/[I_{B} = /frac{H {v_1B}^3 - h (v_1B - B + b)^3 + (H - h)(B - v_1B)^3}{3}/]", + "/[W_{B} = /frac{I_{B}}{B - v_1B}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + }, + "T Profile": { + "title": "T Profile", + "legend": [ + "B : base length", + "H : height", + "t : central thickness", + "h : central height", + "L : length", + "v1 : barycenter height", + "Rm : braking/ultimate strength", + "ReH : yeld strength", + "I : moment of inertia on horiz. axis", + "W : strength modulus on vertical load", + "Fmax : max traction load" + ], + "geo": [ + "/[P = 2 (B + H)/]", + "/[A = B (H - h) - h t/]", + "/[V = A /cdot L/]", + "/[if (L = 0) /Rightarrow S = A/]", + "/[if (L /neq 0) /Rightarrow S = 2A + P /cdot L/]" + ], + "phi": [ + "/[m = V /cdot /rho/]", + "/[v_1A = /frac{1}{2} /cdot /frac{t H^2 + (B - t) (H - h)^2}{t H + (B - t) (H - h)}/]", + "/[I_{A} = /frac{B {v_1A}^3 - (B - t) (v_1A - H + h)^3 + t(H - v_1A)^3}{3}/]", + "/[W_{A} = /frac{I_{A}}{H - v_1A}/]", + "/[I_{B} = /frac{(H - h) B^3 - h t^3}{12}/]", + "/[W_{B} = /frac{2 I_{B}}{B} = /frac{(H - h) B^3 - h t^3}{6B}/]", + "/[if (R_{s} /neq 0) /Rightarrow F_{max} = /frac{R_{s}}{3} /cdot A/]", + "/[else /Rightarrow F_{max} = /frac{R_{m}}{4} /cdot A/]" + ] + } +} \ No newline at end of file diff --git a/assets/ico/GitHub_logo_2013-light.svg b/assets/ico/GitHub_logo_2013-light.svg new file mode 100644 index 0000000..3097fbc --- /dev/null +++ b/assets/ico/GitHub_logo_2013-light.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/assets/ico/GitHub_logo_2013.svg b/assets/ico/GitHub_logo_2013.svg new file mode 100644 index 0000000..c7f8fe4 --- /dev/null +++ b/assets/ico/GitHub_logo_2013.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/ico/exit-top-right.svg b/assets/ico/exit-top-right.svg new file mode 100644 index 0000000..a585663 --- /dev/null +++ b/assets/ico/exit-top-right.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 1cbc975..36d8559 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,10 @@ AnySection + + + @@ -16,34 +19,63 @@

Select a profile shape

-
- - -
-

Project developed by

- - - -

and hosted on

- - - -
- -

AnySection v1.2

- -
- - Buy Me A Coffee - + + + \ No newline at end of file diff --git a/pages/equations.css b/pages/equations.css new file mode 100644 index 0000000..ac440f8 --- /dev/null +++ b/pages/equations.css @@ -0,0 +1,166 @@ +.main-container { + display: flex; + position: relative; +} + +#list { + padding: 0.5em 1em; + display: flex; + flex-direction: column; +} + +#list div { + height: 2.5em; + display: flex; + align-items: center; +} + +label { + color: var(--color-2); + padding: 0.5em 1em; + margin: 0.3em; + position: relative; + font-size: 1em; + font-weight: bold; + width: 100%; +} + +label:hover { + color: var(--color-4); +} + +input[name=select]:checked ~ label { + background-color: var(--color-5); + color: var(--main-bg); + border-radius: 0.5em; +} + +input[name=select]:checked ~ label::before, input[name=select]:checked ~ label::after { + content: ''; + position: absolute; + width: 1em; + height: 1em; + background: white; + right: -2em; + z-index: -1; +} + +input[name=select]:checked ~ label::before { + transform: skewX(45deg); + top: 50%; +} + +input[name=select]:checked ~ label::after { + transform: skewX(-45deg); + bottom: 50%; +} + +label a { + position: absolute; + inset: 0; + border-radius: inherit; +} + +input[name=select] { + display: none; +} + +#board { + flex-grow: 1; + background-color: white; + border-radius: 1em; + width: 100px; + overflow: hidden; + max-height: calc(100vh - 129px - 1em); +} + +.math { + --marg: 2%; + width: calc(100% - 2 * var(--marg)); + height: calc(100% - 2 * var(--marg)); + margin: var(--marg); +} + +.math h4 { + color: var(--color-1); + text-align: center; +} + +.math > div { + display: grid; + grid-template: auto 1fr / repeat(3, 1fr); + gap: .5em; +} + +.math img { + margin: auto; + height: 12rem; +} + +.card { + border-top: solid 1px var(--color-1); + border-left: solid 1px var(--color-1); + border-radius: 16px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); + padding: 0.5em; +} + +.card:not(:first-of-type) > div { + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +h5 { + color: black; + text-align: center; + font-size: 1em; + margin-block-start: 0; + margin-block-end: 1em; +} + +.card p { + display: inline-block; + text-align: center; + color: black; + width: auto; + margin: .15em; + font-size: 80%; +} + +.card:first-of-type p { + text-align: left; +} + +.card p > span { + display: inline-block; + margin-left: 1em; +} + +.card p > span:nth-child(1) { + display: none; +} + +.card p > span:nth-child(2) { + width: 6ch; +} + +.card p > span:nth-child(3) { + width: max-content; +} + +.card:nth-child(2) { /*LEGEND*/ + grid-row: 2; +} + +.card:nth-child(3) { /*GEO*/ + grid-row: 1 / span 2; +} + +.card:nth-child(4) { /*PHI*/ + grid-row: 1 / span 2; +} + +mjx-container[jax="CHTML"][display="true"] { + margin: .5em 0 !important; +} \ No newline at end of file diff --git a/pages/equations.html b/pages/equations.html new file mode 100644 index 0000000..69d8b24 --- /dev/null +++ b/pages/equations.html @@ -0,0 +1,37 @@ + + + + + Equations + + + + + + + + + + +
+

Equations

+ + +

Back to index

+ +
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/pages/equations.js b/pages/equations.js new file mode 100644 index 0000000..392b6a4 --- /dev/null +++ b/pages/equations.js @@ -0,0 +1,94 @@ +var list; +var radio; +var profiles; +var database; + +function preload() { + list = document.getElementById('list'); + radio = document.getElementById('radio'); + profiles = loadTable("../assets/db/profiles.csv", "csv", "header"); + database = loadJSON("../assets/db/equations.json"); +} + +function setup() { + noCanvas(); + + // sidebar list generation + for (let i = 0; i < profiles.rows.length; i++) { + let div = document.createElement('div'); + let num = i + 1; + let id = "radio" + num; + let btn = document.createElement('input'); + btn.setAttribute('type', 'radio'); + btn.setAttribute('name', 'select'); + btn.setAttribute('value', num); + btn.setAttribute('id', id); + if (i == 0) { btn.checked = true } + let label = document.createElement('label'); + label.setAttribute('for', id); + label.innerText = profiles.rows[i].obj["Name"]; + let link = document.createElement('a'); + link.href = "#" + database[profiles.rows[i].obj["Name"]].title.replace(" ", ""); + link.setAttribute('onclick', 'checkMe(' + (i + 1) + ')'); + label.append(link); + div.append(btn, label, document.createElement('br')); + list.append(div); + } + + // content generation + for (let elt of profiles.rows) { + let math = document.createElement('div'); + math.classList.add('math'); + document.getElementById('board').append(math); + let title = document.createElement('h4'); + title.innerHTML = database[elt.obj["Name"]].title; + title.id = title.innerHTML.replace(" ", ""); + let main = document.createElement('div'); + math.append(title, main); + let pic = document.createElement('img'); + pic.src = '../assets/img/' + elt.obj["MediaName"] + '.png'; + main.append(pic); + let cards = new Array(3); + let titles = ["Legend", "Geometry equations", "Phisical equations"]; + let indices = ["legend", "geo", "phi"]; + for (let i = 0; i < cards.length; i++) { + cards[i] = document.createElement('div'); + cards[i].classList.add('card'); + main.append(cards[i]); + let title = document.createElement('h5'); + title.innerHTML = titles[i]; + let innerContainer = document.createElement('div'); + let strings = database[elt.obj["Name"]][indices[i]]; + for (let j = 0; j < strings.length; j++) { + let p = document.createElement('p'); + if (i != 0) { + p.innerHTML = strings[j]; + p.innerHTML = strings[j].replaceAll("/", "\\"); + innerContainer.append(p); + } else { + let re = /(.+)\s?:\s?(.+)/; + let spans = re.exec(strings[j]); + for (let str of spans) { + let s = document.createElement('span'); + s.innerHTML = str; + p.append(s); + } + let br = document.createElement('br'); + innerContainer.append(p, br); + } + } + cards[i].append(title, innerContainer); + } + } + + // load MathJax after all + let mathjax = document.createElement('script'); + mathjax.id = "MathJax-script"; + mathjax.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"; + mathjax.defer = true; + document.head.appendChild(mathjax); +} + +function checkMe(index) { + document.getElementById('radio' + index).checked = true; +} \ No newline at end of file diff --git a/popup.css b/popup.css new file mode 100644 index 0000000..10d697e --- /dev/null +++ b/popup.css @@ -0,0 +1,83 @@ +.popup { + width: 100vw; + height: 100vh; + z-index: 100; + position: fixed; + top: 0; + left: 0; + background-color: hsla(0, 0%, 0%, 0.65); + backdrop-filter: blur(8px); + /*display: grid;*/ + place-items: center; +} + +.popup > .outer { + width: 40%; + background-color: var(--main-bg); + border-radius: 0.5em; + padding: 1em; + display: grid; + place-items: center; + border: solid 3px var(--color-1); +} + +close { + position: absolute; + top: 0; + right: 0; + width: fit-content; + height: fit-content; + color: var(--color-1); + cursor: pointer; +} + +close:hover { + color: var(--color-4); +} + +.popup > .outer > .content { + width: 100%; + height: 100%; + font-family: Arial, sans-serif; + color: #ffffff; + position: relative; + line-height: 1.5em; +} + +.popup a { + color: inherit; +} + +.popup button { + padding: 0.5em; + border-radius: 0.5em; + border: solid 3px var(--color-4); + color: var(--color-4); + background-color: transparent; + transition: 0.2s ease-out; + cursor: pointer; +} + +.popup button:hover { + background-color: var(--color-1); + border-color: var(--color-1); +} + +.popup button i { + margin-right: 1ch; +} + +.popup button.secondary { + border: none; +} + +.popup button.secondary:hover { + background-color: transparent; + color: var(--color-1); +} + +.popup p { + margin-block-start: 0; + margin-block-end: 0; + line-height: 1.2em; +} \ No newline at end of file diff --git a/script.js b/script.js index 3b3e3d4..eeaabd6 100644 --- a/script.js +++ b/script.js @@ -26,4 +26,12 @@ function setup() { p.parent(a); p.addClass('label'); } +} + +function openCredits() { + document.getElementById('credits').style.display = 'grid'; +} + +function closeCredits() { + document.getElementById('credits').style.display = 'none'; } \ No newline at end of file diff --git a/style.css b/style.css index c34d3d1..16349ce 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,7 @@ --color-4: #ffffff; --color-5: #df5327; --side-margin: 16px; - --side-bar: 0px; /*30px;*/ + --side-bar: 10rem; } body { @@ -17,25 +17,11 @@ body { background-color: var(--main-bg); } -div.copyright { - display: block; - background: linear-gradient(90deg, #00000000, #00000000, var(--color-1), #00000000, #00000000); - height: 12px; - padding: 3px; - padding-bottom: 12px; - text-align: center; -} - -p.copyright { - display: inline; - font-family: serif; - color: #ffffff; - font-size: 75%; -} - .logo { - height: 100%; - margin: 0 4px 0 4px; + height: 1em; + margin: 0 4px; + position: relative; + top: 4px; } h1 { @@ -64,6 +50,13 @@ h3.back { display: inline-block; } +h4 { + margin-block-end: 0.25em; + margin-block-start: 0.66em; + font-size: 1.2rem; + color: var(--color-1); +} + p { font-size: 14px; } @@ -92,11 +85,15 @@ a.thumbnail { width: 140px; } +#main { + display: flex; +} + .container { display: inline-block; - padding: 0 48px 0 48px; /*16px for side bar*/ + padding: 0 16px; margin: 0 auto 0 auto; - text-align: center; + /*text-align: center;*/ width: calc(100% - 2 * var(--side-margin) - var(--side-bar) - 4 * 16px); } @@ -104,8 +101,41 @@ a.thumbnail { float: right; margin-top: 24px; padding: 16px; - text-align: right; width: var(--side-bar); + display: flex; + flex-direction: column; + align-items: flex-end; + flex-grow: 0; +} + +.menu > a { + color: var(--color-1); + border: solid 3px var(--color-1); + border-radius: 0.5em; + padding: 0.5em; + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 1.5em; + height: 1.5em; + transition: 0.2s ease-out; + overflow: hidden; + margin-bottom: 2em; +} + +.menu > a:hover { + width: 100%; + background-color: var(--color-1); + color: var(--color-4); +} + +.menu span { + padding-right: 2ch; +} + +.menu i { + font-size: 150%; + margin-top: 0.15em; } img.ico { @@ -224,26 +254,4 @@ input, select { border: none; font-family: Rockwell; font-size: 14px; -} - -h4 { - text-align: center; - color: var(--color-2); -} - -.math { - /*display: inline-block;*/ - /*margin: var(--side-margin);*/ - /*background-color: var(--color-4);*/ - float: left; - width: 256px; - height: 270px; - margin-bottom: 30px; - color: var(--color-4); -} - -.list { - text-align: left; - color: var(--color-4); - margin-left: 16px; } \ No newline at end of file