Sonel ID PL

To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu. Kliknij dwa razy, aby edytować

<head> <meta charset="utf-8"> <title>Accordion</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="robots" content="index, follow" /> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" type="text/css" href="style.css" /> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="script/accordion.js"></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script> $(document).ready(function() { $(".toggle-accordion").on("click", function() { var accordionId = $(this).attr("accordion-id"), numPanelOpen = $(accordionId + ' .collapse.in').length; $(this).toggleClass("active"); if (numPanelOpen == 0) { openAllPanels(accordionId); } else { closeAllPanels(accordionId); } }) openAllPanels = function(aId) { console.log("setAllPanelOpen"); $(aId + ' .panel-collapse:not(".in")').collapse('show'); } closeAllPanels = function(aId) { console.log("setAllPanelclose"); $(aId + ' .panel-collapse.in').collapse('hide'); } }); </script> <style> * { padding: 0; margin: 0; } html, body { font-family: Tahoma, sans-serif; font-weight: 300; width: 100%; font-size: 15px; color: #000000; margin: 0 auto; background-color: #FFFFFF; } a {outline: none; text-decoration: none; color: #000000;} a:hover {text-decoration: underline; color: #000000;} .page { margin: 0 auto; } img{ border: 0px; } .panel-default>.panel-heading { color: #FFF; background-color: #25335c !important; border:0px solid #25335c !important; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel.panel-default { border:0px solid #25335c !important; } .panel-body { color: #FFF; background-color: #25335c !important; border-top: 0px !important; } .panel-title { font-size: 20px !important; } .panel-default>.panel-heading a { display: block; background-color: #25335c !important; color: #FFF; padding: 10px 15px; } .panel-default>.panel-heading a:after { content: ""; color: #FFF !important; background-color: #25335c !important; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\2212"; color: #FFF !important; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\002b"; color: #FFF !important; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .accordion-option { width: 100%; float: left; clear: both; margin: 15px 0; color: #FFF !important; } .accordion-option .title { font-size: 20px; font-weight: bold; float: left; padding: 0; margin: 0; color: #FFF !important; } .accordion-option .toggle-accordion { float: right; font-size: 16px; color: #FFF !important; } @media only screen and (max-width: 800px) { img.sid { width:7% !important; } } </style> <body> <div class="page"> <div class="accordion-option"> <a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a> </div> <div class="clearfix"></div> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Jak założyć konto Sonel ID? </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Sonel ID możesz założyć za pomocą dowolnego adresu e-mail. Wystarczy podać adres swojej poczty oraz ustawić hasło. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Co jeśli mam już konto w którymś z serwisów SONEL? </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Dla posiadaczy konta w sklepie e-mierniki.pl wystarczy użyć dotychczasowych danych logowania. W przypadku posiadanego wcześniej konta na stronie sonel.pl będziesz mógł uzyskać dostęp do Sonel ID wprowadzając dotychczasowe dane logowania i akceptując nowe warunki użytkowania. Jeśli Twoje hasło nie spełnia nowych wymogów bezpieczeństwa zostaniesz poproszony o ustawienie nowego hasła. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Jak logować się w serwisach SONEL gdy posiadasz już konto Sonel ID? </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> W serwisie, który umożliwia logowanie z Sonel ID w prawym górnym rogu strony zobaczysz charakterystyczną ikonkę <img class="sid" src="https://us-ms.gr-cdn.com/getresponse-QZ5sB/photos/0a72df49-dec5-435e-bf93-68c9761460fb.png" alt="ID" width="2%"> „Zaloguj się z Sonel ID”. Ich wygląd może nieznacznie się różnic w zależności od serwisu. Gdy chcesz się zalogować wystarczy, że klikniesz nią i użyjesz dotychczasowych danych logowania. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Jak rozpoznać czy jesteś zalogowany z Sonel ID w którymś z serwisów SONEL? </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> W prawym górnym rogu strony znajdziesz ikonkę <img class="sid" src="https://us-ms.gr-cdn.com/getresponse-QZ5sB/photos/0a72df49-dec5-435e-bf93-68c9761460fb.png" alt="ID" width="2%"> oraz link do Panelu Klienta oraz Wyloguj. </div> </div> </div> </div> </div> </body>