diff options
author | jaseg <git@jaseg.de> | 2023-04-06 22:19:59 +0200 |
---|---|---|
committer | jaseg <git@jaseg.de> | 2023-04-06 22:19:59 +0200 |
commit | 10cd29b96c0bcca8f06b2375bed0c6280abca687 (patch) | |
tree | e2c6437a0a59a748a944cb7d1bcfe94fd4dd8937 /gerbonara/data/protoserve.html | |
parent | 48d4aeee947a913bf949ab60f09754089129835f (diff) | |
download | gerbonara-10cd29b96c0bcca8f06b2375bed0c6280abca687.tar.gz gerbonara-10cd29b96c0bcca8f06b2375bed0c6280abca687.tar.bz2 gerbonara-10cd29b96c0bcca8f06b2375bed0c6280abca687.zip |
protoboard webthing WIP
Diffstat (limited to 'gerbonara/data/protoserve.html')
-rw-r--r-- | gerbonara/data/protoserve.html | 322 |
1 files changed, 322 insertions, 0 deletions
diff --git a/gerbonara/data/protoserve.html b/gerbonara/data/protoserve.html new file mode 100644 index 0000000..757e292 --- /dev/null +++ b/gerbonara/data/protoserve.html @@ -0,0 +1,322 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Protoserve</title> + <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='pure-min.css')}}"> + <link rel="icon" type="image/png" href="{{url_for('static', filename='favicon-512.png')}}"> + <link rel="apple-touch-icon" href="{{url_for('static', filename='favicon-512.png')}}"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> +<style> +:root { + --u-display-metric: default; + --u-display-us: none; +} + +html, body { + margin: 0; + width: 100%; + height: 100%; +} + +body { + display: grid; + grid-template-columns: clamp(200px, 500px, 50vw) 1fr; + grid-template-rows: 1fr 0fr; + grid-template-areas: "controls main" + "links main"; + +} + +#controls { + grid-area: controls; + user-select: none; + display: grid; + grid-template-columns: 10fr 1fr 1fr; + align-content: start +} + +label { + grid-column-start: 1; + grid-column-end: span 3; + display: grid; + grid-template-columns: subgrid; + text-align: right; +} + +input[type="checkbox"] { + justify-self: start; +} + +input { + align-self: start; +} + +.group > h4 { + text-align: center; + margin: 5px; + grid-column-start: 1; + grid-column-end: span 3; +} + +.expand > :first-child { + grid-column-start: 1; + grid-column-end: span 3; +} + +.group, .field, .expand { + grid-column-start: 1; + grid-column-end: span 3; + display: grid; + grid-template-columns: subgrid; + align-content: start; +} + +.group { + background-color: hsl(.0turn 50% 10% / 4%); + padding: 10px; + border-radius: 10px; + box-shadow: 0 0 8px 0px hsl(0 0% 0% / 20%); + margin: 10px 0 10px 0; +} + +.expand > .field:first-child { + display: grid; + grid-template-columns: 1fr 100fr 1fr; + align-items: center; + text-align: left; + width: 100%; + position: relative; +} + +.group > .content { + grid-column-start: 1; + grid-column-end: span 3; + display: flex; + flex-direction: column; + text-align: center; +} + +.group > div > .proportion { + display: none; +} + +.group.proportional > div > .proportion { + display: grid; +} + +.field > input, .field > select { max-width: 5em; + text-align: right; + margin: 0 5px 0 5px; +} + +.group.expand { + border-radius: 0; +} + +.expand > :first-child { + font-weight: bold; +} + +.expand.collapsed > :nth-child(n+2) { + display: none; +} + +.unit.metric { + display: var(--u-display-metric); +} + +.unit.us { + display: var(--u-display-us); +} + +#preview { + grid-area: main; +} + +#links { + grid-area: links; +} + +.layout-area { + grid-column-start: 1; + grid-column-end: span 3; +} + +a.drop-target { + text-align: center; +} + +.placeholder hr { + width: 3em; + border: none; + border-top: 1px solid hsl(0 0% 60%); +} +</style> + </head> + <body> + <div id="controls"> + <div class="group"> + <h4>Board settings</h4> + <label id="g-board-units">Units + <select value="metric"> + <option value="metric">Metric</option> + <option value="us">US Customary</option> + </select> + </label> + + <label id="g-board-w">Board width + <input id="input-board-w" type="text" placeholder="width" value="100"> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + + <label id="g-board-h">Board height + <input id="input-board-h" type="text" placeholder="height" value="80"> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + + <div class="group expand"> + <label id="g-round-corners">Round corners + <input type="checkbox" checked> + </label> + + <label id="g-board-corner-radius">Radius + <input type="text" placeholder="radius" value="1.5"> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + </div> + + <div class="group expand"> + <label>Mounting holes + <input type="checkbox" name="has_holes" checked> + </label> + + <label>Diameter + <input type="text" placeholder="diameter" name="hole_dia" value="3.2"></input> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + + <label>Board edge to hole center (X) + <input type="text" placeholder="distance" name="hole_off_x" value="5"></input> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + + <label>Board edge to hole center (Y) + <input type="text" placeholder="distance" name="hole_off_y" value="5"></input> + <span class="unit metric">mm</span> + <span class="unit us">inch</span> + </label> + </div> + + <h4>Content</h4> + <div class="group proportional"> + <h4>Proportional Layout</h4> + <label>Direction + <select name="direction" value="horizontal"> + <option value="h">horizontal</option> + <option value="v">vertical</option> + </select> + </label> + + <div class="group placeholder"> + <h4>Empty area</h4> + <label class="proportion">Proportion + <input type="text" name="layout_prop"> + </label> + <div class="content"> + <a href="#">Add Layout</a> + <hr/> + <a href="#">Add SMD area</a> + <a href="#">Add THT area</a> + <a href="#">Add Manhattan area</a> + <a href="#">Add THT Flower area</a> + </div> + </div> + + <div class="group smd-area"> + <h4>SMD area</h4> + <label class="proportion">Proportion + <input type="text" name="layout_prop"> + </label> + <label>Pitch X + <input type="text" name="pitch_x" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pitch Y + <input type="text" name="pitch_y" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Clearance + <input type="text" name="clearance" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad shape + <select name="pad_shape" value="rect"> + <option value="rect">Rectangle</option> + <option value="circle">Circle</option> + <option value="obround">Obround</option> + </select> + </label> + <label>Pad width + <input type="text" name="pad_w" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad height + <input type="text" name="pad_h" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + </div> + <a class="content" href="#">Add element</a> + </div> + </div> + </div> + <div id="preview"> + <img src="/preview.svg" alt="Automaticallly generated preview image"/> + </div> + <div id="links"> + <a href="#controls">Settings</a> + <a href="#preview">Preview</a> + <a href='/download'> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em"> + <title>Download</title> + <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/> + </svg> + Gerbers + </a> + </div> + <template id="tpl-drop-target"> + <a class="drop-target" href="#"> + <svg viewBox="0 0 532 532" width="1em" xmlns="http://www.w3.org/2000/svg"> + <title>Move here</title> + <path id="path2" d="m 424.025,300.075 c 17.7,0 32,-14.3 32,-32 0,-17.7 -14.3,-32 -32,-32 h -82.7 l 181.3,-181.4 c 12.5,-12.5 12.5,-32.8 0,-45.3 -12.5,-12.5 -32.8,-12.5 -45.3,0 l -181.3,181.4 v -82.7 c 0,-17.7 -14.3,-32 -32,-32 -17.7,0 -32,14.3 -32,32 v 160 c 0,17.7 14.3,32 32,32 z M 80,52 C 35.8,52 0,87.8 0,132 v 320 c 0,44.2 35.8,80 80,80 h 320 c 44.2,0 80,-35.8 80,-80 v -72 c 0,-17.7 -14.3,-32 -32,-32 -17.7,0 -32,14.3 -32,32 v 72 c 0,8.8 -7.2,16 -16,16 H 80 c -8.8,0 -16,-7.2 -16,-16 V 132 c 0,-8.8 7.2,-16 16,-16 h 72 c 17.7,0 32,-14.3 32,-32 0,-17.7 -14.3,-32 -32,-32 z" /> + </svg> + </a> + </template> + <script> + document.querySelectorAll('.expand').forEach((elem) => { + const checkbox = elem.querySelector(':first-child > input'); + checkbox.addEventListener("change", (evt) => { + if (evt.currentTarget.checked) { + elem.classList.remove('collapsed'); + } else { + elem.classList.add('collapsed'); + } + }); + if (checkbox.checked) { + elem.classList.remove('collapsed'); + } else { + elem.classList.add('collapsed'); + } + }); + </script> + </body> +</html> |