<script src="https://kit.fontawesome.com/de946a5f81.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<body>
    <div class="background">
        <div class="topshit"><span style="color:#fff;"></span>Krankenversicherungen<br>
            <div class="wegmitmirbruderherz"><i class="fa fa-times"></i></div>
        </div>
        <div class="inoutline">
            <div class="versicherung1">
                <div class="button1" :disabled="button1.length == 0" id="button1" v-on:click="button1">Versicherung auswählen</div>
                <div class="button1topshit"><span style="color:#fff;"></span>Keine Krankenversicherung<br></div>
                <div class="infotext1"><span style="color:#fff;"></span>⦁ 100% Operationskosten<br>⦁ 0% Chance sein hab und gut zu behalten<br>⦁ 100% Geldverlusst</div>
                <div class="kosten1"><span style="color:#fff;"></span>Kosten: Keine Kosten<br></div>
            </div>
            <div class="versicherung2">
                <div class="button2" :disabled="button2.length == 0" id="button2" v-on:click="button2">Versicherung auswählen</div>
                <div class="button2topshit"><span style="color:#fff;"></span>Krankenversicherung<br></div>
                <div class="infotext2"><span style="color:#fff;"></span>⦁ 50% Operationskosten<br>⦁ 10% Chance sein hab und gut zu behalten<br>⦁ 80% Geldverlusst</div>
                <div class="kosten2"><span style="color:#fff;"></span>Kosten: 1.500$ alle 5 Stunden<br></div>
            </div>
            <div class="versicherung3">
                <div class="button3" :disabled="button3.length == 0" id="button3" v-on:click="button3">Versicherung auswählen</div>
                <div class="button3topshit"><span style="color:#fff;"></span>Private Krankenversicherung<br></div>
                <div class="infotext2"><span style="color:#fff;"></span>⦁ 0% Operationskosten<br>⦁ 20% Chance sein hab und gut zu behalten<br>⦁ 50% Geldverlusst</div>
                <div class="kosten3"><span style="color:#fff;"></span>Kosten: 5.000$ alle 5 Stunden<br></div>
            </div>
        </div>
        <div class="infotext"><span style="color:#fff;"></span>Aktuell: Private Krankenversicherung</div>
        <div class="message"><span style="color:#fff;"></span><br></div>
    </div>
</body>

<style>
    .message {
        position: absolute;
        text-align: center;
        font-size: 14px;
        line-height: 0.7em;
        width: 45vw;
        height: 29px;
        top: 97%;
        left: 0%;
        transform: translateX(-50%, 0);
        color: rgb(255, 255, 255);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
        border-radius: 0px 0px 5px 5px;
        text-shadow: 0px 0px 10px #af1616;
    }
    
    .kosten1 {
        position: relative;
        width: 95%;
        top: 49%;
        left: 2%;
        font-size: 80%;
        text-align: center;
        color: rgb(101, 223, 90);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
    }
    
    .kosten2 {
        position: relative;
        width: 95%;
        top: 49%;
        left: 2%;
        font-size: 80%;
        text-align: center;
        color: rgb(101, 223, 90);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
    }
    
    .kosten3 {
        position: relative;
        width: 95%;
        top: 49%;
        left: 2%;
        font-size: 80%;
        text-align: center;
        color: rgb(101, 223, 90);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
    }
    
    .infotext1 {
        position: relative;
        width: 95%;
        bottom: 8%;
        left: 2%;
        font-size: 80%;
        text-align: left;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .infotext2 {
        position: relative;
        width: 95%;
        bottom: 8%;
        left: 2%;
        font-size: 80%;
        text-align: left;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .infotext3 {
        position: relative;
        bottom: 8%;
        width: 95%;
        left: 2%;
        font-size: 80%;
        text-align: left;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .button3topshit {
        position: relative;
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: 500px;
        box-shadow: 0px 0px 54px 0px rgb(0, 0, 0);
        bottom: 11.8%;
        width: 100%;
        height: 10%;
        text-align: center;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
        line-height: 2.9em;
        font-size: 83%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.349);
    }
    
    .button2topshit {
        position: relative;
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: 500px;
        box-shadow: 0px 0px 54px 0px rgb(0, 0, 0);
        bottom: 11.8%;
        width: 100%;
        height: 10%;
        text-align: center;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
        line-height: 2.9em;
        font-size: 83%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.349);
    }
    
    .button1topshit {
        position: relative;
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: 500px;
        box-shadow: 0px 0px 54px 0px rgb(0, 0, 0);
        bottom: 11.8%;
        width: 100%;
        height: 10%;
        text-align: center;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
        line-height: 2.9em;
        font-size: 83%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.349);
    }
    
    .button2 {
        position: relative;
        height: 11.7%;
        color: #ffffff;
        border-radius: 5px;
        margin: 0 auto;
        top: 103%;
        font-size: 0.8vw;
        line-height: 330%;
        background-color: rgb(73, 73, 73);
        text-align: center;
        box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.945);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .button3 {
        position: relative;
        height: 11.7%;
        color: #ffffff;
        border-radius: 5px;
        margin: 0 auto;
        top: 103%;
        font-size: 0.8vw;
        line-height: 330%;
        background-color: rgb(73, 73, 73);
        text-align: center;
        box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.945);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .button1 {
        position: relative;
        height: 11.7%;
        color: #ffffff;
        border-radius: 5px;
        margin: 0 auto;
        top: 103%;
        font-size: 0.8vw;
        line-height: 330%;
        background-color: rgb(73, 73, 73);
        text-align: center;
        box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.945);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: lighter;
    }
    
    .button1:hover {
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: cover;
        background-position-y: 0px;
        color: #fff;
        outline: hidden;
        cursor: pointer;
    }
    
    .button2:hover {
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: cover;
        background-position-y: 0px;
        color: #fff;
        outline: hidden;
        cursor: pointer;
    }
    
    .button3:hover {
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: cover;
        background-position-y: 0px;
        color: #fff;
        outline: hidden;
        cursor: pointer;
    }
    
    .infotext {
        position: absolute;
        text-align: left;
        font-size: 11px;
        line-height: 0.7em;
        width: 15vw;
        height: 29px;
        top: 1.9%;
        left: 1%;
        color: rgb(255, 255, 255);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
        border-radius: 0px 0px 5px 5px;
    }
    
    .background .inoutline .versicherung3 {
        border: 1px solid rgba(255, 255, 255, 0.349);
        position: absolute;
        background-color: rgba(29, 29, 29, 0);
        width: 13.2vw;
        height: 38vh;
        top: 44%;
        left: 68.74%;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-50%, 0);
    }
    
    .background .inoutline .versicherung1:hover {
        transition: 100ms;
        box-shadow: 0px 0px 24px 0px rgba(136, 18, 18, 0.534);
    }
    
    .background .inoutline .versicherung2:hover {
        transition: 100ms;
        box-shadow: 0px 0px 24px 0px rgba(136, 18, 18, 0.534);
    }
    
    .background .inoutline .versicherung3:hover {
        transition: 100ms;
        box-shadow: 0px 0px 24px 0px rgba(136, 18, 18, 0.534);
    }
    
    .background .inoutline .versicherung2 {
        border: 1px solid rgba(255, 255, 255, 0.349);
        position: absolute;
        background-color: rgba(29, 29, 29, 0);
        width: 13.2vw;
        height: 38vh;
        top: 44%;
        left: 35.14%;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-50%, 0);
    }
    
    .background .inoutline .versicherung1 {
        border: 1px solid rgba(255, 255, 255, 0.349);
        position: absolute;
        background-color: rgba(29, 29, 29, 0);
        width: 13.2vw;
        height: 38vh;
        top: 44%;
        left: 1.84%;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-50%, 0);
    }
    
    .wegmitmirbruderherz {
        position: relative;
        width: 10%;
        height: 10%;
        left: 93.2%;
        bottom: 70%;
        color: white;
    }
    
    .wegmitmirbruderherz:hover {
        color: rgba(255, 255, 255, 0.705);
    }
    
    .background .topshit {
        position: absolute;
        background-image: url(https://i.ibb.co/5hbdL6H/season-six-logo3-1-512-compressed-1.gif);
        background-size: 500px;
        box-shadow: 0px 0px 54px 0px rgb(0, 0, 0);
        border-radius: 2px 2px 0px 0px;
        width: 100%;
        height: 5%;
        text-align: center;
        color: white;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: bold;
    }
    
    .background .inoutline {
        border: 1px solid rgba(255, 255, 255, 0.349);
        border-radius: 0px 0px 2px 2px;
        position: absolute;
        background-color: rgba(29, 29, 29, 0);
        width: 45.2vw;
        height: 46vh;
        top: 51%;
        left: 0.74%;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-50%, 0);
    }
    
    .background {
        display: none;
        border-radius: 5px;
        position: relative;
        background-color: rgba(0, 0, 0, 0.89);
        box-shadow: 0px 0px 54px 0px rgb(0, 0, 0);
        width: 46vw;
        height: 52vh;
        left: 1VW;
        top: 48%;
        transform: translateY(-50%);
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-50%, 0);
    }
    
    .noselect {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Old versions of Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
    }
    
    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>

<script>
    $(function() {
        function display(bool) {
            if (bool) {
                $('.background').css('display', 'block');
            } else {
                $('.background').css('display', 'none');
            }
        }

        window.addEventListener('message', function(event) {
            if (event.data.type === "ui") {
                if (event.data.status == true) {
                    display(true)
                } else {
                    display(false)
                }
            } else if (event.data.action == "nachricht") {
                $(".message").html(event.data.text);
            } else if (event.data.action == "infotext") {
                $(".infotext").html(event.data.text);
            }
        })

        display(false)

        $(".wegmitmirbruderherz").click(function() {
            $.post('http://vl_versicherung/close');
        });

        $(".button1").click(function() {
            $.post('http://vl_versicherung/versicherung1');
        });

        $(".button2").click(function() {
            $.post('http://vl_versicherung/versicherung2');
        });

        $(".button3").click(function() {
            $.post('http://vl_versicherung/versicherung3');
        });
    })
</script>