commit 48146f64e6422acab34c8209308d1af403115112 Author: August Date: Wed Mar 19 08:50:47 2025 +0000 Upload files to "/" diff --git a/index.html b/index.html new file mode 100644 index 0000000..177e60d --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + VM Cost Calculator + + + +
+

Virtual Machine Cost Calculator

+
+ + + + + + + + + + + + + + + + + + + + + + +
+

Total Cost: 0€

+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a5681c1 --- /dev/null +++ b/script.js @@ -0,0 +1,16 @@ +function calculateCost() { + const memory = parseInt(document.getElementById('memory').value) * 5; + const vcpus = parseInt(document.getElementById('vcpus').value) * 8; + const publicIp = parseInt(document.getElementById('public-ip').value); + const storageType = parseFloat(document.getElementById('storage-type').value); + const storageSize = parseInt(document.getElementById('storage-size').value); + const storageCost = storageType * storageSize; + const networkSpeed = parseInt(document.getElementById('network-speed').value); + const os = document.getElementById('os').value; + const windowsFee = os.includes('Windows') ? 10 : 0; + const setupFee = 3; + + const totalCost = memory + vcpus + publicIp + storageCost + networkSpeed + windowsFee + setupFee; + + document.getElementById('total-cost').innerText = `Total Cost: ${totalCost.toFixed(2)}€`; +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8e1829b --- /dev/null +++ b/styles.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background: #f4f4f9; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; +} + +.container { + max-width: 500px; + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h1, h2 { + text-align: center; +} + +form { + display: flex; + flex-direction: column; + gap: 10px; +} + +label { + font-weight: bold; +} + +input, select, button { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 1rem; +} + +button { + background: #007bff; + color: white; + border: none; + cursor: pointer; + transition: background 0.2s; +} + +button:hover { + background: #0056b3; +} + +footer { + margin-top: 20px; + text-align: center; + font-size: 0.9rem; + color: #555; +} + +footer a { + color: #007bff; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} \ No newline at end of file