<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DCC Beregner for Lang Lokomotivadresse</title>

<style>

body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    padding:20px;
    background:#f5f5f5;
    color:#333;
}

.container{
    max-width:900px;
    margin:auto;
    background:#ffffff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

.logo img{
    width:100%;
    display:block;
}

.content{
    padding:30px;
}

h1{
    color:#c00000;
    margin-top:0;
    text-align:center;
}

.intro{
    text-align:center;
    margin-bottom:25px;
}

.form-group{
    text-align:center;
    margin-bottom:20px;
}

input[type=number]{
    width:200px;
    padding:12px;
    font-size:18px;
    border:1px solid #ccc;
    border-radius:5px;
}

button{
    background:#c00000;
    color:white;
    border:none;
    padding:12px 24px;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
    margin-left:5px;
}

button:hover{
    background:#900000;
}

.result{
    display:none;
    margin-top:25px;
    padding:20px;
    background:#fafafa;
    border-left:5px solid #c00000;
}

.cv-box{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.cv{
    background:white;
    border:1px solid #ddd;
    padding:15px;
    min-width:150px;
    border-radius:5px;
    text-align:center;
}

.cv-title{
    font-size:18px;
    font-weight:bold;
}

.cv-value{
    font-size:36px;
    color:#c00000;
    font-weight:bold;
    margin-top:8px;
}

.instructions{
    margin-top:25px;
    padding:15px;
    background:#fff8f8;
    border:1px solid #e6cfcf;
    border-radius:5px;
}

.instructions h3{
    margin-top:0;
}

.info-box{
    margin-top:25px;
    padding:15px;
    background:#f3f7ff;
    border:1px solid #ccd8ef;
    border-radius:5px;
}

.footer{
    text-align:center;
    margin-top:25px;
    color:#666;
    font-size:0.9em;
}

@media (max-width: 600px){

    button{
        display:block;
        margin:10px auto 0;
        width:200px;
    }

    input[type=number]{
        width:100%;
        max-width:300px;
    }

}

</style>
</head>

<body>

<div class="container">

    <div class="logo">
        https://digitaltog.dk/Digital/DCC/digitaltog-dk-logo-smalt.png
    </div>

    <div class="content">

        <h1>DCC Beregner for Lang Lokomotivadresse</h1>

        <p class="intro">
            Beregn automatisk CV17 og CV18 for lange DCC-adresser
            fra 128 til 10239.
        </p>

        <div class="form-group">

            <input
                type="number"
                id="adresse"
                min="128"
                max="10239"
                placeholder="Indtast DCC-adresse">

            <button onclick="beregnAdresse()">
                Beregn
            </button>

        </div>

        <div id="resultat" class="result">

            <h2>Resultat</h2>

            <div class="cv-box">

                <div class="cv">
                    <div class="cv-title">CV17</div>
                    <div id="cv17" class="cv-value"></div>
                </div>

                <div class="cv">
                    <div class="cv-title">CV18</div>
                    <div id="cv18" class="cv-value"></div>
                </div>

            </div>

            <div class="instructions">

                <h3>Programmeringsvejledning</h3>

                <ol>
                    <li>Aktivér lange adresser ved at sætte <strong>Bit 5 = ON</strong> i CV29.</li>

                    <li>
                        Læg <strong>32</strong> til den eksisterende værdi i CV29.
                    </li>

                    <li>
                        Programmer <strong>CV17 = <span id="instrCV17"></span></strong>
                    </li>

                    <li>
                        Programmer <strong>CV18 = <span id="instrCV18"></span></strong>
                    </li>

                </ol>

                <p>
                    Eksempel: Hvis CV29 tidligere havde værdien 6,
                    skal den nye værdi være 38.
                </p>

            </div>

        </div>

        <div class="info-box">

            <h3>Hvad er en lang DCC-adresse?</h3>

            <p>
                Korte DCC-adresser anvender CV1 og kan have værdier fra
                1 til 127.
            </p>

            <p>
                Adresser fra 128 til 10239 anvender derimod CV17 og CV18
                og kaldes lange adresser.
            </p>

            <p>
                Denne beregner udregner automatisk de korrekte værdier,
                som skal indskrives i dekoderen.
            </p>

        </div>

        <div class="footer">
            © digitaltog.dk • DCC-værktøj til modeljernbaner
        </div>

    </div>

</div>

<script>

function beregnAdresse(){

    let adresse =
        parseInt(document.getElementById('adresse').value);

    if(isNaN(adresse)){
        alert('Indtast en DCC-adresse.');
        return;
    }

    if(adresse < 128 || adresse > 10239){
        alert('Lang DCC-adresse skal være mellem 128 og 10239.');
        return;
    }

    let cv17 =
        192 + Math.floor(adresse / 256);

    let cv18 =
        adresse % 256;

    document.getElementById("cv17").textContent = cv17;
    document.getElementById("cv18").textContent = cv18;

    document.getElementById("instrCV17").textContent = cv17;
    document.getElementById("instrCV18").textContent = cv18;

    document.getElementById("resultat").style.display = "block";
}

</script>

</body>
</html>