3D-Druck_Landingpage/content/calc/index.html

<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?
    <button class=button id=pool_filament>Pool Filament</button>
    <button class=button id=own_filament>
        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>
    <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=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> €
    pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten
    <span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>
(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(){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>
update calculator, add warning and minimum price 2024-11-24 14:59:58 +01:00			<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?
			`<button class=button id=pool_filament>Pool Filament</button>`
			`<button class=button id=own_filament>`
			`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>`
			`<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=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> €`
			`pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten`
			`<span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>`
remove ald assets, add cost-calc 2024-09-26 13:29:30 +02:00			`(Zusätzlich wird <span id=idval></span> € addiert damit wir`
update calculator, add warning and minimum price 2024-11-24 14:59:58 +01:00			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=(pricePerMaterialGrammInEuro1e3).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=npricePerPrintingHourInEuro/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>