c3re
/
3D-Druck_Landingpage
forked from c3re/c3re-website
6
0
Fork 0
Code Pull Requests Activity

update calculator, add warning and minimum price

master
Dirk Heilig 2024-11-24 14:59:58 +01:00
parent 6f26107508
commit 6c30145296
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
content/calc/index.html
View File

@ -1,14 +1,18 @@
<html class=theme-light><meta charset=UTF-8><title>3D-Druck Kostenrechner</title> <html class=theme-light><meta charset=UTF-8><title>3D-Druck Kostenrechner</title><script>const pricePerPrintingHourInEuro=.3,pricePerMaterialGrammInEuro=.025,roundUpStep=.5,minimumCost=1,identifierAddition=.03</script><link rel=stylesheet href=./bulma.min.css><meta name=viewport content="width=device-width,initial-scale=1"><div class=block id=filamentcalc><style>body{padding:2em;background-color:#f5f5f5}#below_minimum{display:none;color:#a33}.box{border:.125em solid #dbdbdb}.box>.column{padding:.5em}#logo{float:right;position:absolute;top:0;right:0}.selected{filter:brightness(90%);text-decoration:underline}.box{margin:2em auto 0;max-width:50em}.b button{float:right;margin-right:1em}input{margin-left:1em;width:5em}h2{margin-bottom:.5em;font-weight:700}li{list-style:none}</style><section class=hero><div class=hero-body><h1 class=title>3D-Druck Filamentkostenrechner</h1><p id=logo class="image is-128x128"><img src=logo.png></div></section><div class="columns box"><div class="column is-full b">Wo kommt dein Filament her?
<script>const pricePerPrintingHourInEuro=.3,pricePerMaterialGrammInEuro=.025,roundUpStep=.5,identifierAddition=.03</script><link rel=stylesheet href=./bulma.min.css><meta name=viewport content="width=device-width,initial-scale=1"><div class=block id=filamentcalc><style>body{padding:2em;background-color:#f5f5f5}.box{border:.125em solid #dbdbdb}#logo{float:right;position:absolute;top:0;right:0}.selected{filter:brightness(90%);text-decoration:underline}.box{margin:2em auto 0;max-width:50em}.b button{float:right;margin-right:1em}input{margin-left:1em;width:5em}h2{margin-bottom:.5em;font-weight:700}li{list-style:none}</style><section class=hero><div class=hero-body><h1 class=title>3D-Druck Filamentkostenrechner</h1><p id=logo class="image is-128x128"><img src=logo.png></div></section><div class="columns box"><div class="column is-full b">Wo kommt dein Filament her?
<button class=button id=pool_filament>Pool Filament</button> <button class=button id=pool_filament>Pool Filament</button>
<button class=button id=own_filament> <button class=button id=own_filament>
Eigenes/Spenden- Filament</button></div></div><div class="columns box step2"><div class=column><label for=printtime_h>Druckzeit</label></div><div class=column><input id=printtime_h class=half type=number min=0 max=1000 step=1 placeholder=0> Eigenes/Spenden- Filament</button></div></div><div class="columns box"><div class="column is-full warning"></div><h2>Achtung!</h2><p>Es ist für die Abrechnung wichtig, das du den genauen Betrag überweist
und weder aufrundest noch die 3ct abziehst!</div><div class="columns box step2"><div class=column><label for=printtime_h>Druckzeit</label></div><div class=column><input id=printtime_h class=half type=number min=0 max=1000 step=1 placeholder=0>
<label for=printtime_h>h</label> <label for=printtime_h>h</label>
<input id=printtime_m class=half type=number min=0 max=5000 step=1 placeholder=0> <input id=printtime_m class=half type=number min=0 max=5000 step=1 placeholder=0>
<label for=printtime_m>m</label></div></div><div class="columns box step2 material"><div class=column><label for=material>Materialmenge</label></div><div class=column><input id=material type=number min=0 max=1000 step=1 placeholder=0> <label for=printtime_m>m</label></div></div><div class="columns box step2 material"><div class=column><label for=material>Materialmenge</label></div><div class=column><input id=material type=number min=0 max=1000 step=1 placeholder=0>
<label for=material>g</label></div></div><div class="columns box step2"><div class=column><label for=cost_euro>Kosten in €</label></div><div class=column><input id=cost_euro aria-disabled=true disabled></div></div><div class="columns box step2"><div class="column is-two"><h2>Wie entsteht der Preis?</h2><ul><li>Pro Druckstunde fallen <span id=pricePerHour>...</span> € Kosten <label for=material>g</label></div></div><div class="columns box step2"><div class=column><label for=cost_euro>Kosten in €</label></div><div class=column><input id=cost_euro aria-disabled=true disabled>
<span id=below_minimum>Deine tatsächlichen Druckkosten sind unter dem technischen Minimum
von <span class=minimum></span>€. Es wird auf
<span class=minimum></span>€ aufgerundet. Gerne kannst du weitere
Kleinteile mit Drucken um das auszugleichen.</span></div></div><div class="columns box step2"><div class="column is-two"><h2>Wie entsteht der Preis?</h2><ul><li>Pro Druckstunde fallen <span id=pricePerHour>...</span> € Kosten
für Strom und Verschleiß an.<li>Pool-Filament wird mit <span id=pricePerMaterial>...</span> € für Strom und Verschleiß an.<li>Pool-Filament wird mit <span id=pricePerMaterial>...</span> €
pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten
<span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext> <span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>
(Zusätzlich wird <span id=idval></span> € addiert damit wir (Zusätzlich wird <span id=idval></span> € addiert damit wir
auf der Abrechnung den Verwendungszweck erkennen können.)</span></ul></div></div></div><script>const pool_filament=document.getElementById("pool_filament"),own_filament=document.getElementById("own_filament"),step1=document.getElementsByClassName("step1"),step2=document.getElementsByClassName("step2"),printtime_h=document.getElementById("printtime_h"),printtime_m=document.getElementById("printtime_m"),material=document.getElementById("material"),cost_euro=document.getElementById("cost_euro");let ownFilament;pool_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++)step2[e].style.display="flex";ownFilament=!1,updateCost()}),own_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++){const t=step2[e];t.classList.contains("material")?t.style.display="none":t.style.display="flex"}ownFilament=!0,updateCost()}),printtime_h.addEventListener("input",updateCost),printtime_m.addEventListener("input",updateCost),material.addEventListener("input",updateCost);function updateCost(){pricePerHour.innerHTML=pricePerPrintingHourInEuro.toFixed(2),pricePerMaterial.innerHTML=(pricePerMaterialGrammInEuro*1e3).toFixed(2),roundUpLimit.innerHTML=roundUpStep.toFixed(2),idval.innerHTML=identifierAddition.toFixed(2),identifierAddition===0?idtext.style.display="none":idtext.style.display="inherit";const t=parseInt("0"+printtime_h.value)*60+parseInt("0"+printtime_m.value),n=parseInt("0"+material.value)*pricePerMaterialGrammInEuro;let e=t*pricePerPrintingHourInEuro/60;ownFilament||(e+=n),e=Math.ceil(e/roundUpStep)*roundUpStep,e>0&&(e+=identifierAddition),console.log(e),cost_euro.value=e.toFixed(2)+" €",ownFilament?(own_filament.classList.add("selected"),pool_filament.classList.remove("selected")):(pool_filament.classList.add("selected"),own_filament.classList.remove("selected"))}updateCost()</script> auf der Abrechnung den Verwendungszweck erkennen können.)</span></ul></div></div></div><script>const pool_filament=document.getElementById("pool_filament"),own_filament=document.getElementById("own_filament"),step1=document.getElementsByClassName("step1"),step2=document.getElementsByClassName("step2"),printtime_h=document.getElementById("printtime_h"),printtime_m=document.getElementById("printtime_m"),material=document.getElementById("material"),cost_euro=document.getElementById("cost_euro");let ownFilament;pool_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++)step2[e].style.display="flex";ownFilament=!1,updateCost()}),own_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++){const t=step2[e];t.classList.contains("material")?t.style.display="none":t.style.display="flex"}ownFilament=!0,updateCost()}),printtime_h.addEventListener("input",updateCost),printtime_m.addEventListener("input",updateCost),material.addEventListener("input",updateCost);function updateCost(){for(let e of document.querySelectorAll(".minimum"))e.innerHTML=minimumCost.toFixed(2);pricePerHour.innerHTML=pricePerPrintingHourInEuro.toFixed(2),pricePerMaterial.innerHTML=(pricePerMaterialGrammInEuro*1e3).toFixed(2),roundUpLimit.innerHTML=roundUpStep.toFixed(2),idval.innerHTML=identifierAddition.toFixed(2),identifierAddition===0?idtext.style.display="none":idtext.style.display="inherit";const n=parseInt("0"+printtime_h.value)*60+parseInt("0"+printtime_m.value),s=parseInt("0"+material.value)*pricePerMaterialGrammInEuro;let e=n*pricePerPrintingHourInEuro/60;ownFilament||(e+=s);let t=!1;e+roundUpStep<minimumCost&&e>0&&(t=!0,e=minimumCost),t?document.getElementById("below_minimum").style.display="inherit":document.getElementById("below_minimum").style.display="none",e=Math.ceil(e/roundUpStep)*roundUpStep,e>0&&(e+=identifierAddition),cost_euro.value=e.toFixed(2)+" €",ownFilament?(own_filament.classList.add("selected"),pool_filament.classList.remove("selected")):(pool_filament.classList.add("selected"),own_filament.classList.remove("selected"))}updateCost()</script>