From a5a501879005230e7598f4892c25658cded03753 Mon Sep 17 00:00:00 2001 From: miguel Date: Tue, 17 Nov 2020 00:14:43 +1100 Subject: [PATCH] Inductor calculator check-in --- inductor.css | 147 ++++++++++++++++++ inductor.html | 411 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 558 insertions(+) create mode 100644 inductor.css create mode 100644 inductor.html diff --git a/inductor.css b/inductor.css new file mode 100644 index 0000000..0c487ca --- /dev/null +++ b/inductor.css @@ -0,0 +1,147 @@ +body { + background: rgb(226, 226, 226); + margin: 0px; +} + +header { + background: rgb(226, 226, 226); + color: black; + font-family: 'Courier New', Courier, monospace; + font-weight: bold; + font-size: smaller; + text-align: center; +} + +canvas.inductorClass { + background: rgb(255, 255, 255); + margin: 0px; + padding: 5px; + border: 1px solid rgb(0, 0, 0); + display: block; + box-sizing: border-box; +} + +section div.slider_container { + width: 100%; + height: 100%; + background: rgb(255, 255, 255); + border: 1px solid rgb(0, 0, 0); + margin: 0px; + padding: 0px; + /*display: inline-block;*/ + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +section div.inductor-container { + width: 100%; + height: 100%; + display: block; + box-sizing: border-box; + margin: 0px; + padding: 0px; + background: white; + border: 1px solid rgb(0, 0, 0); + position: relative; +} + +section div.sliders { + background:white; + display: inline-block; + font-size: small; + margin: 0px; + padding: 0px; + width: auto; + height: auto; +} + +div label { + background:white; + display: inline-block; + width: 12%; + font-size: small; + text-align: right; +} + +div input { + background:lightsalmon; + display: inline-block; + width: 85%; +} + +@media (orientation: portrait) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 0.3fr; + grid-template-areas: + "inductor-container" + "slider-container"; + justify-items: stretch; + } + + section div.inductor-container { + height: 75vh; + width: 100vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 100%; + } +} + +@media (orientation: landscape) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr 0.3fr; + grid-template-rows: 1fr; + grid-template-areas: + "inductor-container" "slider-container"; + /*justify-items: stretch;*/ + } + + section div.inductor-container { + height: 90vh; + width: 60vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 40vw; + } +} +/* +@media print (orientation: landscape) { + section.gridLayoutClass { + display: grid; + grid-template-columns: repeat(4, 300px); + grid-template-rows: repeat(1, 300px) 150px; + justify-items: stretch; + } + section div.chart-container { + min-height: 100%; + max-width: 100%; + max-height: 100%; + height: auto!important; + width: auto!important; + } +} + +@media print (orientation: portrait) { + section.gridLayoutClass { + display: grid; + grid-template-columns: repeat(2, 200px); + grid-template-rows: repeat(2, 300px) 150px 120px; + justify-items: stretch; + } + section div.chart-container { + min-height: 100%; + max-width: 100%; + max-height: 100%; + height: auto!important; + width: auto!important; + } +} +*/ diff --git a/inductor.html b/inductor.html new file mode 100644 index 0000000..c95dab3 --- /dev/null +++ b/inductor.html @@ -0,0 +1,411 @@ + + + + + + VK3CPU Inductor Calculator + + + +
Miguel VK3CPU - Inductor Calculator v1
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + + + \ No newline at end of file