Cookies panel v2022

by Petr Haluza

HTML

<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>





<section id="CPrivacy-Modal">
  <div>
  
    <div id="CPrivacy-Modal-Main">

      <ul class="CPrivacy-tab-nav">
          <li class="CPrivacy-tab-active"><a href="#CPrivacy-tab1" rel="nofollow">Nastavení</a></li>
          <li class=""><a href="#CPrivacy-tab2" rel="nofollow">Více o cookies</a></li>
      </ul>

      <div class="CPrivacy-tab-stage">
    
        <div id="CPrivacy-tab1" style="display: block;">

<aside>
Zde si můžete upravit nastavení cookies a personalizace. Některé údaje zpracováváme na základě tzv. oprávněného zájmu. V případě, že se rozhodnete souhlas neudělit či jej odvoláte, nebudeme Vám moci doručovat personalizovaný obsah a/nebo se Vám bude zobrazovat nerelevantní reklama.
</aside>
<!-- start položky -->
<details>  
    <summary>
      <div>
        <h5>Nezbytné funkční cookies<span>(1)</span></h5>
        <div class="CPrivacy-switcher">
          <button class="CPagree" disabled>Souhlasím</button><button class="CPnotAgree" disabled>Nesouhlasím</button>
        </div>
        <div class="CPrivacy-switch"><input type="checkbox" checked disabled id="id1"/><label for="id1"></label></div>
      </div>
      <p>Nezbytné soubory cookie pro základní funkce tohoto webu, jako je navigace na stránce a přístup do zabezpečených oblastí webu. Web nemůže bez těchto cookies správně fungovat.</p>
    </summary>  
    <ul>        
        <li>100Mega Distribution</li>        
    </ul>
</details>

<details>  
    <summary>
      <div>
        <h5>Cookies vašich nastavení<span>(1)</span></h5>
        <div...

CSS

/* Jen demo */
* {box-sizing: border-box;}
body {font:14px arial; color:black; margin:0; padding:0;
background: white;
background-image:  linear-gradient(#d9daff 2px, transparent 2px), linear-gradient(90deg, #dcddff 2px, transparent 2px), linear-gradient(#edeeff 1px, transparent 1px), linear-gradient(90deg, #f6f7ff 1px, #ffffff 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}


/*#CPrivacy-Modal {display:none}
/*#HPcookPanel {display:none}
/* /konec jen demo */





/**********************************/
/* Cookies & Privacy panel by HAP */
/**********************************/
/*             v 2.1              */
/**********************************/

/* reset pro HP cook */
#CPrivacy-Modal h5,
#CPrivacy-Modal ul,
#CPrivacy-Modal li,
#CPrivacy-Modal p,
#CPrivacy-Modal a,
#CPrivacy-Modal input,
#CPrivacy-Panel p,
#CPrivacy-Panel a
{ margin:0; padding:0;}



/* HP tlačítka */
.CPrivacy-Buttons {text-align: right;}
.CPrivacy-Buttons button { line-height: 1em; background-color: white; border-color: #41a5fd; color: #41a5fd; background-color: #ffffff; border: 2px solid #39a8ef; border-radius: .25em; font-weight: 600; justify-content: center; padding: 1em; user-select: none; width: auto; cursor: pointer; margin:.5em; white-space:nowrap}
.CPrivacy-Buttons button span { display: inline-block; border-style: solid; border-width: .15em .15em 0 0; height: .5em; transform: rotate(45deg); width: .5em; margin: .1em .5em;}
.CPrivacy-Buttons button.CP-allowAll { background-color: #41a5fd; color:white}


/* HP switcher + switch */
.CPrivacy-switcher button { color: #505050; border: 1px solid #d9d9d9; border-radius: .25em; justify-content: center; padding: .5em; user-select: none; width: auto; cursor: pointer; margin: .25em; background: #fafafa; font-size: .85em; line-height: 1em}
.CPrivacy-switcher [class*="CPagree"].selected {color:#00ab00; background: #bfffc1;}
.CPrivacy-switcher...

JavaScript

// záložky
$('.CPrivacy-tab-nav a').on('click', function (event) {
    event.preventDefault();
    
    $('.CPrivacy-tab-active').removeClass('CPrivacy-tab-active');
    $(this).parent().addClass('CPrivacy-tab-active');
    $('.CPrivacy-tab-stage > div').hide();
    $($(this).attr('href')).show();
});

$('.CPrivacy-tab-nav a:first').trigger('click');




// jen demo
$(".CP-close").click(function(e) {
    $("#CPrivacy-Modal").hide();
});
$(".CP-save").click(function(e) {
    $("#CPrivacy-Modal").hide();
});
$(".CP-allowAll").click(function(e) {
    $("#CPrivacy-Modal").hide();
});

$(".CP-settings").click(function(e) {
    $("#CPrivacy-Modal").show();
});