31
Πρόσθετα / Re: Insert html to article body
« Last post by datahell on May 20, 2025, 21:34:59 »Είμαστε εντάξει με το συνημμένο; Το άλλαξα λίγο, νομίζω έγινε καλύτερο.
Ρε μάστορα τι έκανες εκεί; Έβαλες ολόκληρη html σελίδα, όχι απλά τον κώδικα που θες. Εννοείται θα καταστραφεί η html του site.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Κόστος χρήσης λέβητα πετρελαίου vs αντλίας θερμότητος</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
align-items: center;
}
.narrow-input {
max-width: 150px; /* Adjust this value as needed */
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card shadow">
<div class="card-body">
<h2 class="card-title text-center mb-2">Κόστος χρήσης λέβητα πετρελαίου σε σύγκριση με αντλία θερμότητος</h2>
<div class="mb-2">
<label for="oil" class="form-label">Κόστος λίτρου πετρελαίου (€)</label>
<input type="number" id="oil" class="form-control narrow-input" value="1.10" step="0.01">
</div>
<div class="mb-2">
<label for="eff" class="form-label">Βαθμός απόδοσης λέβητα % (Συμπύκνωσης 93% Συμβατικός 70%)</label>
<input type="number" id="eff" class="form-control narrow-input" value="70">
</div>
<div class="mb-2">
<label for="OilkW" class="form-label">Ενέργεια πετρελαίου ανά λίτρο (10.36 kW Google)</label>
<input type="number" id="OilkW" class="form-control narrow-input" value="10.36" step="0.01">
</div>
<div class="mb-2">
<label for="electric" class="form-label">Κόστος κιλοβατώρας (€ kWh)</label>
<input type="number" id="electric" class="form-control narrow-input" value="0.2486" step="0.001">
</div>
<div class="mb-2">
<label for="scop" class="form-label">Βαθμός απόδοσης αντλίας SCOP (3 - 5 Σύνηθες 3.6)</label>
<input type="number" id="scop" class="form-control narrow-input" value="3.6" step="0.01" min="1" max="10">
</div>
<div class="mt-2">
<p>Κόστος κιλοβατώρας θέρμανσης πετρελαίου: <b>€</b><span id="oilResult" class="fw-bold"></span></p>
<p>Κόστος κιλοβατώρας θέρμανσης αντλίας: <b>€</b><span id="heatPumpResult" class="fw-bold"></span></p>
<p>Υπολογισμός: Η αντλία θερμότητος έχει κόστος χρήσης <span id="result" class="fw-bold"></span><b>%</b> σε σχέση με τον λέβητα πετρελαίου.</p>
<p>Νικητής: <span id="winner" class="fw-bold"></span></p>
</div>
<div>
Ο παρών υπολογισμός αποτελεί ένα γρήγορο & ενδεικτικό οδηγό. Τα αποτελέσματα μπορούν να διαφέρουν ανάλογα με τις κλιματικές συνθήκες, την ποιότητα της μόνωσης του κτιρίου και τις πραγματικές ενεργειακές ανάγκες.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS (optional, only needed if you're using Bootstrap's JavaScript components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
function calculate() {
const oil = parseFloat(document.getElementById('oil').value);
const eff = parseFloat(document.getElementById('eff').value);
const oilkW = parseFloat(document.getElementById('OilkW').value);
const electric = parseFloat(document.getElementById('electric').value);
const scop = parseFloat(document.getElementById('scop').value);
if (isNaN(oil) || isNaN(eff) || isNaN(oilkW) || isNaN(electric) || isNaN(scop)) {
document.getElementById('result').textContent = "Please enter valid numbers";
} else {
const oilResult = (oil / oilkW) / (eff / 100);
const heatPumpResult = (electric / scop);
document.getElementById('heatPumpResult').textContent = heatPumpResult.toFixed(3);
document.getElementById('oilResult').textContent = oilResult.toFixed(3);
document.getElementById('result').textContent = ((heatPumpResult / oilResult) * 100 -100).toFixed(2);
if (heatPumpResult < oilResult) {
document.getElementById('winner').textContent = "Αντλία θερμότητος"
}
else{
document.getElementById('winner').textContent = "Λέβητας πετρελαίου"
}
}
}
// Add event listeners to input fields
document.getElementById('oil').addEventListener('input', calculate);
document.getElementById('eff').addEventListener('input', calculate);
document.getElementById('OilkW').addEventListener('input', calculate);
document.getElementById('electric').addEventListener('input', calculate);
document.getElementById('scop').addEventListener('input', calculate);
// Call calculate when the page loads
window.addEventListener('load', calculate);
</script>
</body>
</html>