chore: Add first target webpage and package to serve it

This commit is contained in:
Glen Whitney 2023-08-28 10:31:35 -07:00
parent 3a14bb1e89
commit 16f38e769e
4 changed files with 461 additions and 0 deletions

View File

@ -7,6 +7,7 @@
build: 'civet --js -c src/*.civet -o obj/.js',
start: 'node obj',
go: 'pnpm --sequential "/build|start/"',
serve: 'http-server',
},
packageManager: 'pnpm',
keywords: [
@ -22,5 +23,6 @@
},
devDependencies: {
'@danielx/civet': '^0.6.26',
'http-server': '^14.1.1',
},
}

View File

@ -8,6 +8,9 @@ devDependencies:
'@danielx/civet':
specifier: ^0.6.26
version: 0.6.26
http-server:
specifier: ^14.1.1
version: 14.1.1
packages:
@ -41,3 +44,268 @@ packages:
'@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15
dev: true
/ansi-styles@4.3.0:
resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
engines: {node: '>=8'}
dependencies:
color-convert: 2.0.1
dev: true
/async@2.6.4:
resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
dependencies:
lodash: 4.17.21
dev: true
/basic-auth@2.0.1:
resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
engines: {node: '>= 0.8'}
dependencies:
safe-buffer: 5.1.2
dev: true
/call-bind@1.0.2:
resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
dependencies:
function-bind: 1.1.1
get-intrinsic: 1.2.1
dev: true
/chalk@4.1.2:
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
engines: {node: '>=10'}
dependencies:
ansi-styles: 4.3.0
supports-color: 7.2.0
dev: true
/color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}
dependencies:
color-name: 1.1.4
dev: true
/color-name@1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
dev: true
/corser@2.0.1:
resolution: {integrity: sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==}
engines: {node: '>= 0.4.0'}
dev: true
/debug@3.2.7:
resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.3
dev: true
/eventemitter3@4.0.7:
resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
dev: true
/follow-redirects@1.15.2:
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dev: true
/function-bind@1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
dev: true
/get-intrinsic@1.2.1:
resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
dependencies:
function-bind: 1.1.1
has: 1.0.3
has-proto: 1.0.1
has-symbols: 1.0.3
dev: true
/has-flag@4.0.0:
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
engines: {node: '>=8'}
dev: true
/has-proto@1.0.1:
resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
engines: {node: '>= 0.4'}
dev: true
/has-symbols@1.0.3:
resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
engines: {node: '>= 0.4'}
dev: true
/has@1.0.3:
resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
engines: {node: '>= 0.4.0'}
dependencies:
function-bind: 1.1.1
dev: true
/he@1.2.0:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true
dev: true
/html-encoding-sniffer@3.0.0:
resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
engines: {node: '>=12'}
dependencies:
whatwg-encoding: 2.0.0
dev: true
/http-proxy@1.18.1:
resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
engines: {node: '>=8.0.0'}
dependencies:
eventemitter3: 4.0.7
follow-redirects: 1.15.2
requires-port: 1.0.0
transitivePeerDependencies:
- debug
dev: true
/http-server@14.1.1:
resolution: {integrity: sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==}
engines: {node: '>=12'}
hasBin: true
dependencies:
basic-auth: 2.0.1
chalk: 4.1.2
corser: 2.0.1
he: 1.2.0
html-encoding-sniffer: 3.0.0
http-proxy: 1.18.1
mime: 1.6.0
minimist: 1.2.8
opener: 1.5.2
portfinder: 1.0.32
secure-compare: 3.0.1
union: 0.5.0
url-join: 4.0.1
transitivePeerDependencies:
- debug
- supports-color
dev: true
/iconv-lite@0.6.3:
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
engines: {node: '>=0.10.0'}
dependencies:
safer-buffer: 2.1.2
dev: true
/lodash@4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: true
/mime@1.6.0:
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
engines: {node: '>=4'}
hasBin: true
dev: true
/minimist@1.2.8:
resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
dev: true
/mkdirp@0.5.6:
resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
hasBin: true
dependencies:
minimist: 1.2.8
dev: true
/ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
dev: true
/object-inspect@1.12.3:
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
dev: true
/opener@1.5.2:
resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
hasBin: true
dev: true
/portfinder@1.0.32:
resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
engines: {node: '>= 0.12.0'}
dependencies:
async: 2.6.4
debug: 3.2.7
mkdirp: 0.5.6
transitivePeerDependencies:
- supports-color
dev: true
/qs@6.11.2:
resolution: {integrity: sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==}
engines: {node: '>=0.6'}
dependencies:
side-channel: 1.0.4
dev: true
/requires-port@1.0.0:
resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
dev: true
/safe-buffer@5.1.2:
resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
dev: true
/safer-buffer@2.1.2:
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
dev: true
/secure-compare@3.0.1:
resolution: {integrity: sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==}
dev: true
/side-channel@1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
dependencies:
call-bind: 1.0.2
get-intrinsic: 1.2.1
object-inspect: 1.12.3
dev: true
/supports-color@7.2.0:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}
dependencies:
has-flag: 4.0.0
dev: true
/union@0.5.0:
resolution: {integrity: sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==}
engines: {node: '>= 0.8.0'}
dependencies:
qs: 6.11.2
dev: true
/url-join@4.0.1:
resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
dev: true
/whatwg-encoding@2.0.0:
resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
engines: {node: '>=12'}
dependencies:
iconv-lite: 0.6.3
dev: true

View File

@ -0,0 +1,135 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- fix buggy IE8, especially for mathjax -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>An equilateral triangle inscribed in a rectangle</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML,http://userpages.umbc.edu/~rostamia/mathjax-config.js">
MathJax.Hub.Queue( function() {document.body.style.visibility="visible"} );
</script>
</head>
<body style="visibility:hidden">
<h1>An equilateral triangle inscribed in a rectangle</h1>
<table class="centered">
<tr><td align="center">
<applet code="Geometry" archive="Geometry.zip" width="410" height="370">
<param name="background" value="ffffff">
<param name="title" value="An equilateral triangle inscribed in a rectangle">
<!-- the moving mechanism -->
<param name="e[1]" value="O;point;fixed;290,320;0;0;0;0">
<param name="e[2]" value="U1;point;fixed;510,320;0;0;0;0">
<param name="e[3]" value="V1;point;perpendicular;O,U1;0;0;0;0">
<param name="e[4]" value="U;point;angleDivider;U1,O,V1,3;0;0;0;0">
<param name="e[5]" value="V;point;angleDivider;V1,O,U1,3;0;0;0;0">
<param name="e[6]" value="circ1;circle;radius;O,U;0;0;0;0">
<param name="e[7]" value="li1;line;parallel;U,O,U1;0;0;0;0">
<param name="e[8]" value="li2;line;parallel;V,O,V1;0;0;0;0">
<param name="e[9]" value="W;point;intersection;li1,li2;0;0;0;0">
<param name="e[10]" value="VW;line;connect;V,W;0;0;lightGray">
<param name="e[11]" value="@;point;lineSegmentSlider;V,W,0,220;red;red">
<param name="e[12]" value="li3;line;parallel;@,O,U1;0;0;0;0">
<param name="e[13]" value="li4;line;chord;circ1,li3;0;0;0;0">
<param name="e[14]" value="X1;point;first;li4;0;0;0;0">
<!-- the triangle -->
<param name="e[15]" value="A;point;fixed;50,320">
<param name="e[16]" value="V2;point;perpendicular;A,U1;0;0;0;0">
<param name="e[17]" value="li5;line;parallel;A,O,X1;0;0;0;0">
<param name="e[18]" value="X2;point;last;li5;0;0;0;0">
<param name="e[19]" value="X;point;extend;A,X2,A,X2;0;0;0;0">
<param name="e[20]" value="tri1;polygon;equilateralTriangle;X,A;0;0;0;0">
<param name="e[21]" value="Y;point;vertex;tri1,3;0;0;0;0">
<param name="e[22]" value="B;point;midpoint;X,Y">
<param name="e[23]" value="ABC;polygon;equilateralTriangle;A,B">
<param name="e[24]" value="C;point;vertex;ABC,3">
<!-- the rectangle -->
<param name="e[25]" value="D;point;foot;B,A,U1">
<param name="e[26]" value="F;point;foot;C,A,V2">
<param name="e[27]" value="FE;line;parallel;F,A,D;0;0;0;0">
<param name="e[28]" value="E;point;last;FE">
<param name="e[29]" value="rect;polygon;quadrilateral;A,D,E,F;0;0;black;0">
<param name="e[30]" value="ADB;polygon;triangle;A,D,B;0;0;0;pink">
<param name="e[31]" value="ACF;polygon;triangle;A,C,F;0;0;0;pink">
<param name="e[32]" value="BCE;polygon;triangle;B,C,E;0;0;0;cyan">
</applet>
</td></tr>
<tr><td>
<b>
Slide the &ldquo;@&rdquo; up and down to change the geometry.<br>
Press &ldquo;r&rdquo; to reset the diagram to its initial state.<br>
Proposition: The blue area equals the sum of the two pink areas.
</b>
</td></tr></table>
<h2>Problem statement</h2>
<p>
The diagram above shows an equilateral triangle inscribed in a rectangle
in such a way that the two have a vertex in common. This subdivides the
rectangle into four disjoint triangles.
The original equilateral triangle is shown in white
in the diagram; the other three are shown in color.
<p>
<b>Proposition</b>
<em>
The area of the blue triangle equals the sum
of the areas of the two pink triangles.
</em>
<p>
The trigonometric proof is quite straightforward. I don't
know of a classical proof <i>a la</i> <span class="name">Euclid</span>.
(Well, actually I haven't tried much.)
If you can think of a neat non-trigonometric proof, let me know. I will
put it here with due credit.
<p>
This problem appeared as a conjecture
<a href="http://mathforum.org/kb/thread.jspa?forumID=129&amp;messageID=1083967">in an article</a>
in the <code>geometry.puzzles</code> newsgroup on March 15, 1997.
<p>
<b>Note added January 8, 2017:</b>
Here is a
<a href="inscribed-equilateral-solution.html">clever solution</a>
that <b>Peter Renz</b> sent me a in December 2016. Thanks, Peter!
<hr width="60%">
<p>
<em>This applet was created by
<a href="http://userpages.umbc.edu/~rostamia">Rouben Rostamian</a>
using
<a href="http://aleph0.clarku.edu/~djoyce/home.html">David Joyce</a>'s
<a href="http://aleph0.clarkU.edu/~djoyce/java/Geometry/Geometry.html">Geometry
Applet</a>
on July 2, 2010.
</em>
<p>
<table width="100%">
<tr>
<td valign="top">Go to <a href="index.html">Geometry Problems and Puzzles</a></td>
<td align="right" style="width:200px;">
<a href="http://validator.w3.org/check?uri=referer">
<img src="/~rostamia/images/valid-html401.png" class="noborder" width="88" height="31" alt="Valid HTML"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="/~rostamia/images/valid-css.png" class="noborder" width="88" height="31" alt="Valid CSS"></a>
</td></tr>
</table>
</body>
</html>

56
public/style.css Normal file
View File

@ -0,0 +1,56 @@
body {
/* margin:35px auto; */
/* width: 780px; */
margin-top: 35px;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 30px;
line-height: 140%;
font-size: 110%;
/* font-family: Verdana, sans-serif; */
/* background: #ff8247; */
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 2ex;
}
li {
margin-bottom: 1.0ex;
}
.smallersize {
font-size: smaller;
}
table.centered {
margin: auto;
}
p.centered {
text-align: center;
}
div.centered {
text-align: center;
}
span.name {
font-variant: small-caps;
}
img.noborder {
border-width: 0px;
}
div.highlight { background: yellow }
span.highlight { background: yellow; }
span.strike { text-decoration: line-through; }
span.uline { text-decoration: underline; }