diff options
Diffstat (limited to 'id/server/doc/htmlTemplates/BKU-selection.html')
-rw-r--r-- | id/server/doc/htmlTemplates/BKU-selection.html | 850 |
1 files changed, 850 insertions, 0 deletions
diff --git a/id/server/doc/htmlTemplates/BKU-selection.html b/id/server/doc/htmlTemplates/BKU-selection.html new file mode 100644 index 000000000..9d6ad4085 --- /dev/null +++ b/id/server/doc/htmlTemplates/BKU-selection.html @@ -0,0 +1,850 @@ +<!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 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"> + <!--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;" > + <option value="BE">België/Belgique</option> + <option value="EE">Eesti</option> + <option value="ES">España</option> + <option value="IS">Ísland</option> + <option value="IT">Italia</option> + <option value="LI">Liechtenstein</option> + <option value="LT">Lithuania</option> + <option value="PT">Portugal</option> + <option value="SI">Slovenija</option> + <option value="FI">Suomi</option> + <option value="SE">Sverige</option> + </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>
\ No newline at end of file |