<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <!-- MOA-ID 2.x BKUSelection Layout CSS --> <style type="text/css"> @media screen and (min-width: 650px) { body { margin:0; padding:0; color : #000; background-color : #fff; text-align: center; background-color: #6B7B8B; } #localBKU p { font-size: 0.7em; } #localBKU input{ font-size: 0.7em; /*border-radius: 5px;*/ } #bkuselectionarea input[type=button] { font-size: 0.85em; /*border-radius: 7px;*/ margin-bottom: 25px; min-width: 80px; } #mandateLogin { font-size: 0.85em; } #bku_header h2 { font-size: 0.8em; } #page { display: block; border: 2px solid rgb(0,0,0); width: 650px; height: 460px; margin: 0 auto; margin-top: 5%; position: relative; border-radius: 25px; background: rgb(255,255,255); } #page1 { text-align: center; } #main { /* clear:both; */ position:relative; margin: 0 auto; width: 250px; text-align: center; } .OA_header { /* background-color: white;*/ font-size: 20pt; margin-bottom: 25px; margin-top: 25px; } #leftcontent { /*float:left; */ width:250px; margin-bottom: 25px; text-align: left; border: 1px solid rgb(0,0,0); } #selectArea { font-size: 15px; padding-bottom: 65px; } #leftcontent { width: 300px; margin-top: 30px; } #bku_header { height: 5%; padding-bottom: 3px; padding-top: 3px; } #bkulogin { overflow:hidden; min-width: 190px; min-height: 180px; /*height: 260px;*/ } h2#tabheader{ font-size: 1.1em; padding-left: 2%; padding-right: 2%; position: relative; } #stork h2 { font-size: 1.0em; margin-bottom: 2%; } .setAssertionButton_full { background: #efefef; cursor: pointer; margin-top: 15px; width: 100px; height: 30px } #leftbutton { width: 30%; float:left; margin-left: 40px; } #rightbutton { width: 30%; float:right; margin-right: 45px; text-align: right; } button { height: 25px; width: 75px; margin-bottom: 10px; } #validation { position: absolute; bottom: 0px; margin-left: 270px; padding-bottom: 10px; } } @media screen and (max-width: 205px) { #localBKU p { font-size: 0.6em; } #localBKU input { font-size: 0.6em; min-width: 60px; /* max-width: 65px; */ min-height: 1.0em; /* border-radius: 5px; */ } #bkuselectionarea input[type=button] { font-size: 0.7em; min-width: 55px; /*min-height: 1.1em; border-radius: 5px;*/ margin-bottom: 2% } #mandateLogin { font-size: 0.65em; } #bku_header h2 { font-size: 0.8em; margin-top: -0.4em; padding-top: 0.4em; } #bkulogin { min-height: 150px; } } @media screen and (max-width: 249px) and (min-width: 206px) { #localBKU p { font-size: 0.7em; } #localBKU input { font-size: 0.7em; min-width: 70px; /* max-width: 75px; */ min-height: 0.95em; /* border-radius: 6px; */ } #bkuselectionarea input[type=button] { font-size: 0.75em; min-width: 60px; /* min-height: 0.95em; border-radius: 6px; */ margin-bottom: 5% } #mandateLogin { font-size: 0.75em; } #bku_header h2 { font-size: 0.9em; margin-top: -0.45em; padding-top: 0.45em; } #bkulogin { min-height: 180px; } } @media screen and (max-width: 299px) and (min-width: 250px) { #localBKU p { font-size: 0.9em; } #localBKU input { font-size: 0.8em; min-width: 70px; /* max-width: 75px; */ /* border-radius: 6px; */ } #bkuselectionarea input[type=button] { font-size: 0.85em; /* min-height: 1.05em; border-radius: 7px; */ margin-bottom: 10%; } #mandateLogin { font-size: 1em; } #bku_header h2 { font-size: 1.0em; margin-top: -0.50em; padding-top: 0.50em; } } @media screen and (max-width: 399px) and (min-width: 300px) { #localBKU p { font-size: 0.9em; } #localBKU input { font-size: 0.8em; min-width: 70px; /* max-width: 75px; */ /* border-radius: 6px; */ } #bkuselectionarea input[type=button] { font-size: 0.9em; /* min-height: 1.2em; border-radius: 8px; */ margin-bottom: 10%; max-width: 80px; } #mandateLogin { font-size: 1em; } #bku_header h2 { font-size: 1.1em; margin-top: -0.55em; padding-top: 0.55em; } } @media screen and (max-width: 649px) and (min-width: 400px) { #localBKU p { font-size: 0.9em; } #localBKU input { font-size: 0.8em; min-width: 70px; /* max-width: 80px; */ /* border-radius: 6px; */ } #bkuselectionarea input[type=button] { font-size: 1.0em; /* min-height: 1.3em; border-radius: 10px; */ margin-bottom: 10%; max-width: 85px; } #mandateLogin { font-size: 1.2em; } #bku_header h2 { font-size: 1.3em; margin-top: -0.65em; padding-top: 0.65em; } } @media screen and (max-width: 649px) { body { margin:0; padding:0; color : #000; text-align: center; font-size: 100%; background-color: #MAIN_BACKGOUNDCOLOR#; } #page { visibility: hidden; margin-top: 0%; } #page1 { visibility: hidden; } #main { visibility: hidden; } #validation { visibility: hidden; display: none; } .OA_header { margin-bottom: 0px; margin-top: 0px; font-size: 0pt; visibility: hidden; } #leftcontent { visibility: visible; margin-bottom: 0px; text-align: left; border:none; vertical-align: middle; min-height: 173px; min-width: 204px; } #bku_header { height: 10%; min-height: 1.2em; margin-top: 1%; } h2#tabheader{ padding-left: 2%; padding-right: 2%; position: relative; top: 50%; } #stork h2 { font-size: 0.9em; margin-bottom: 2%; } #bkulogin { min-width: 190px; min-height: 155px; } .setAssertionButton_full { background: #efefef; cursor: pointer; margin-top: 15px; width: 70px; height: 25px; } input[type=button] { /* height: 11%; */ width: 70%; } } * { margin: 0; padding: 0; font-family: #FONTTYPE#; } #selectArea { padding-top: 10px; padding-bottom: 55px; padding-left: 10px; } .setAssertionButton { background: #efefef; cursor: pointer; margin-top: 15px; width: 70px; height: 25px; } #leftbutton { width: 35%; float:left; margin-left: 15px; } #rightbutton { width: 35%; float:right; margin-right: 25px; text-align: right; } #stork { /*margin-bottom: 10px;*/ /* margin-top: 5px; */ } #mandateLogin { padding-bottom: 4%; padding-top: 4%; height: 10%; position: relative; text-align: center; } .verticalcenter { vertical-align: middle; } #mandateLogin div { clear: both; margin-top: -1%; position: relative; top: 50%; } #bkuselectionarea { position: relative; display: block; } #localBKU { padding-left: 5%; padding-right: 2%; padding-bottom: 4%; /*padding-top: 4%;*/ position: relative; clear: both; } #bkukarte { float:left; text-align:center; width:40%; min-height: 70px; padding-left: 5%; padding-top: 2%; } #bkuhandy { float:right; text-align:center; width:40%; min-height: 90px; padding-right: 5%; padding-top: 2%; } .bkuimage { width: 90%; height: auto; } #mandate{ text-align:center; padding : 5px 5px 5px 5px; } /* input[type=button], .sendButton { background: #BUTTON_BACKGROUNDCOLOR#; color: #BUTTON_COLOR#; /* border:1px solid #000; */ /* cursor: pointer; /* box-shadow: 3px 3px 3px #222222; */ /* } /* button:hover, button:focus, button:active, .sendButton:hover , .sendButton:focus, .sendButton:active, #mandateCheckBox:hover, #mandateCheckBox:focus, #mandateCheckBox:active { background: #BUTTON_BACKGROUNDCOLOR_FOCUS#; color: #BUTTON_COLOR#; /* border:1px solid #000; */ /* cursor: pointer; /* box-shadow: -1px -1px 3px #222222; */ /* } */ input { /*border:1px solid #000;*/ cursor: pointer; } #localBKU input { /* color: #BUTTON_COLOR#; */ border: 0px; display: inline-block; } #localBKU input:hover, #localBKU input:focus, #localBKU input:active { text-decoration: underline; } #installJava, #BrowserNOK { clear:both; font-size:0.8em; padding:4px; } .selectText{ } .selectTextHeader{ } .sendButton { width: 30%; margin-bottom: 1%; } #leftcontent a { text-decoration:none; color: #000; /* display:block;*/ padding:4px; } #leftcontent a:hover, #leftcontent a:focus, #leftcontent a:active { text-decoration:underline; color: #000; } .infobutton { background-color: #005a00; color: white; font-family: serif; text-decoration: none; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; padding-left: 4px; font-weight: bold; } .hell { background-color : #MAIN_BACKGOUNDCOLOR#; color: #MAIN_COLOR#; } .dunkel { background-color: #HEADER_BACKGROUNDCOLOR#; color: #HEADER_COLOR#; } .main_header { color: black; font-size: 32pt; position: absolute; right: 10%; top: 40px; } </style> <!-- MOA-ID 2.x BKUSelection JavaScript fucnctions--> <script type="text/javascript"> function isIE() { return (/MSIE (\d+\.\d+);/.test(navigator.userAgent)); } function isFullscreen() { try { return ((top.innerWidth == screen.width) && (top.innerHeight == screen.height)); } catch (e) { return false; } } function isActivexEnabled() { var supported = null; try { supported = !!new ActiveXObject("htmlfile"); } catch (e) { supported = false; } return supported; } function isMetro() { if (!isIE()) return false; return !isActivexEnabled() && isFullscreen(); } window.onload=function() { document.getElementById("localBKU").style.display="block"; return; } function bkuLocalClicked() { setMandateSelection(); } function bkuOnlineClicked() { if (isMetro()) document.getElementById("metroDetected").style.display="block"; document.getElementById("localBKU").style.display="block"; /* if (checkMandateSSO()) return; */ setMandateSelection(); /* setSSOSelection(); */ var iFrameURL = "#AUTH_URL#" + "?"; iFrameURL += "bkuURI=" + "#ONLINE#"; iFrameURL += "&useMandate=" + document.getElementById("useMandate").value; /* iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */ iFrameURL += "&MODUL=" + "#MODUL#"; iFrameURL += "&ACTION=" + "#ACTION#"; iFrameURL += "&MOASessionID=" + "#SESSIONID#"; generateIFrame(iFrameURL); } function bkuHandyClicked() { document.getElementById("localBKU").style.display="none"; /* if (checkMandateSSO()) return; */ setMandateSelection(); /* setSSOSelection(); */ var iFrameURL = "#AUTH_URL#" + "?"; iFrameURL += "bkuURI=" + "#HANDY#"; iFrameURL += "&useMandate=" + document.getElementById("useMandate").value; /* iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */ iFrameURL += "&MODUL=" + "#MODUL#"; iFrameURL += "&ACTION=" + "#ACTION#"; iFrameURL += "&MOASessionID=" + "#SESSIONID#"; generateIFrame(iFrameURL); } function storkClicked() { document.getElementById("localBKU").style.display="none"; /* if (checkMandateSSO()) return; */ setMandateSelection(); /* setSSOSelection(); */ var ccc = "AT"; var countrySelection = document.getElementById("cccSelection"); if (countrySelection != null) { ccc = document.getElementById("cccSelection").value; } var iFrameURL = "#AUTH_URL#" + "?"; iFrameURL += "bkuURI=" + "#ONLINE#"; iFrameURL += "&useMandate=" + document.getElementById("useMandate").value; iFrameURL += "&CCC=" + ccc; /* iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */ iFrameURL += "&MODUL=" + "#MODUL#"; iFrameURL += "&ACTION=" + "#ACTION#"; iFrameURL += "&MOASessionID=" + "#SESSIONID#"; generateIFrame(iFrameURL); } function generateIFrame(iFrameURL) { var el = document.getElementById("bkulogin"); var width = el.clientWidth; var heigth = el.clientHeight - 20; var parent = el.parentNode; iFrameURL += "&heigth=" + heigth; iFrameURL += "&width=" + width; var iframe = document.createElement("iframe"); iframe.setAttribute("src", iFrameURL); iframe.setAttribute("width", el.clientWidth - 1); iframe.setAttribute("height", el.clientHeight - 1); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("scrolling", "no"); iframe.setAttribute("title", "Login"); parent.replaceChild(iframe, el); } function setMandateSelection() { document.getElementById("moaidform").action = "#AUTH_URL#"; document.getElementById("useMandate").value = "false"; var checkbox = document.getElementById("mandateCheckBox"); if (checkbox != null) { if (document.getElementById("mandateCheckBox").checked) { document.getElementById("useMandate").value = "true"; } } } function onChangeChecks() { if (top.innerWidth < 650) { document.getElementById("moaidform").setAttribute("target","_parent"); } else { document.getElementById("moaidform").removeAttribute("target"); } } /* function setSSOSelection() { document.getElementById("useSSO").value = "false"; var checkbox = document.getElementById("SSOCheckBox"); if (checkbox != null) { if (document.getElementById("SSOCheckBox").checked) { document.getElementById("useSSO").value = "true"; } } } */ /* function checkMandateSSO() { var sso = document.getElementById("SSOCheckBox"); var mandate = document.getElementById("mandateCheckBox"); if (sso.checked && mandate.checked) { alert("Anmeldung in Vertretung in kombination mit Single Sign-On wird aktuell noch nicht unterstützt!") mandate.checked = false; sso.checked = false; return true; } else { return false; } } */ </script> <title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title> </head> <body onload="onChangeChecks();" onresize="onChangeChecks();"> <div id="page"> <div id="page1" class="case selected-case" role="main"> <h2 class="OA_header" role="heading">Anmeldung an: #OAName#</h2> <div id="main"> <div id="leftcontent" class="hell" role="application"> <div id="bku_header" class="dunkel"> <h2 id="tabheader" class="dunkel" role="heading">#HEADER_TEXT#</h2> </div> <div id="bkulogin" class="hell" role="form"> <div id="mandateLogin" style=""> <div> <input tabindex="1" type="checkbox" name="Mandate" id="mandateCheckBox" class="verticalcenter" role="checkbox" onClick='document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);'#MANDATECHECKED#> <label for="mandateCheckBox" class="verticalcenter">in Vertretung anmelden</label> <!--a href="info_mandates.html" target="_blank" class="infobutton verticalcenter" tabindex="5">i</a--> </div> </div> <div id="bkuselectionarea"> <div id="bkukarte"> <img class="bkuimage" src="#CONTEXTPATH#/img/online-bku.png" alt="OnlineBKU" /> <input name="bkuButtonOnline" type="button" onClick="bkuOnlineClicked();" tabindex="2" role="button" value="Karte" /> </div> <div id="bkuhandy"> <img class="bkuimage" src="#CONTEXTPATH#/img/mobile-bku.png" alt="HandyBKU" /> <input name="bkuButtonHandy" type="button" onClick="bkuHandyClicked();" tabindex="3" role="button" value="HANDY" /> </div> </div> <div id="localBKU"> <form method="get" id="moaidform" action="#AUTH_URL#" class="verticalcenter" target="_parent"> <input type="hidden" name="bkuURI" value="#LOCAL#"> <input type="hidden" name="useMandate" id="useMandate"> <input type="hidden" name="SSO" id="useSSO"> <input type="hidden" name="CCC" id="ccc"> <input type="hidden" name="MODUL" value="#MODUL#"> <input type="hidden" name="ACTION" value="#ACTION#"> <input type="hidden" name="MOASessionID" value="#SESSIONID#"> <input type="submit" value=">lokale Bürgerkartenumgebung" tabindex="4" role="button" class="hell" onclick="setMandateSelection();" > <!--p> <small>Alternativ können Sie eine lokal installierte BKU verwenden.</small> </p--> </form> </div> <div id="stork" align="center" style="#STORKVISIBLE#"> <h2 id="tabheader" class="dunkel">Home Country Selection</h2> <p> <select name="cccSelection" id="cccSelection" size="1" style="width: 120px; margin-right: 5px;" > #PEPSLIST# </select> <button name="bkuButton" type="button" onClick="storkClicked();">Proceed</button> <a href="info_stork.html" target="_blank" class="infobutton" style="color:#FFF">i</a> </p> </div> <div id="metroDetected" style="display: none"> <p>Anscheinend verwenden Sie Internet Explorer im Metro-Modus. Wählen Sie bitte "Auf dem Desktop anzeigen" aus den Optionen um die Karten-Anmeldung starten zu können.</p> </div> </div> </div> </div> </div> <div id="validation"> <a href="http://validator.w3.org/check?uri="> <img style="border: 0; width: 88px; height: 31px" src="#CONTEXTPATH#/img/valid-html5-blue.png" alt="HTML5 ist valide!" /> </a> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border: 0; width: 88px; height: 31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!" /> </a> </div> </div> </body> </html>