Author Topic: Insert html to article body (Read 503 times)

Blacksoll · « **on:** May 17, 2025, 13:55:48 »

Καλησπέρα !
Έχω βρεί έτοιμο σχεδόν ένα calculator απο το GitHub, το τροποποίησα & μετάφρασα κατά τις ανάγκες μου και προσπάθησα να το ενσωματώσω σε ένα άρθρο. Εκεί έγινε ο κακός χαμός. Το άρθρο απο το backend μετά δεν ήταν προσβάσιμο για edit. Έπαιξα με διάφορα στον κώδικα αλλά δεν έβγαλα άκρη. Αρχάριος βλέπεις.....

Το καθαρό html το έχω ανεβάσει εδώ.

Πώς μπορώ να το ενσωματώσω σε άρθρο ?
Ο κώδικας του html είναι ο παρακάτω:

Code: [Select]

<!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>

datahell · « **Reply #1 on:** May 18, 2025, 21:19:00 »

Ρε μάστορα τι έκανες εκεί; Έβαλες ολόκληρη html σελίδα, όχι απλά τον κώδικα που θες. Εννοείται θα καταστραφεί η html του site. Στον editor θα βάλεις μόνο τη βασική html. css και javascript πρέπει να φορτωθούν στο head του site μέσω του template σου. Το bootstrap δεν χρειάζεται, μπορείς να χρησιμοποιήσεις ενσωματωμένη στο elxis μορφοποίηση με τις γραμμές που κάνει το Elxis στις φόρμες. Οπότε στο head φορτώνεις μόνο το αρχείο javascript με τη συνάρτηση calculate.

Παράδειγμα:

<div class="elx5_formrow">
<label class="elx5_label" for="oil">Κόστος λίτρου πετρελαίου (€)</label>
<div class="elx5_labelside">
<input type="number" id="oil" class="elx5_text elx5_minitext" value="1.10" step="0.01" onchange="calculate();">
</div>
</div>

Author Topic: Insert html to article body (Read 503 times)

Blacksoll

Insert html to article body

datahell

Re: Insert html to article body