Komunikat o pełnoletności

Komunikat informujący o przeznaczeniu materiałów znajdujących się na stronie internetowej dla osób dorosłych.

Komunikat o pełnoletności

Niektóre strony internetowe przeznaczone są dla pełnoletnich odbiorców. W takim przypadku twórca czy właściciel strony powinien o takim fakcie poinformować, aby sprostać temu wyzwaniu został stworzony poniższy moduł.

Skrypt zostanie stworzony z wykorzystaniem biblioteki COMP, i metodą dołączaną do biblioteki o nazwie STORAGE. Zostanie również stworzona wersja z jednym plikiem, zawierająca minimalną grupę metod w klasie COMP niezbędną do działania skryptu.

Zalety:

  • Łatwość instalacji
  • Niewielki rozmiar plików
  • Treść komunikatu znajdująca się w szablonie strony
  • Animacje CSS3

Demo:

Okienko wraz z komunikatem powinno wyskoczyć przy pierwszym załadowaniu strony. Jeżeli nie widzisz dema, kliknij przycisk "Wyczyść lokalny magazyn" i odśwież stronę.

Treści umieszczone na tej stronie internetowej przeznaczone są dla osób pełnoletnich. Czy masz ukończone 18 lat: (Tak naprawdę strona nie zawiera treści przeznaczonych dla osób pełnoletnich, a komunikat ma na celu zaprezentowanie skryptu)

HTML:

<div id="compsoul-adult" class="compsoul-adult">
  <div class="compsoul-adult-box">
    <p>Treści umieszczone na tej stronie internetowej przeznaczone są dla osób pełnoletnich. Czy masz ukończone 18 lat: (Tak naprawdę strona nie zawiera treści przeznaczonych dla osób pełnoletnich, a komunikat ma na celu zaprezentowanie skryptu)</p>
    <div class="compsoul-adult-buttons">
      <button>Dawaj!</button>
      <a href="http://compsoul.pl">Chcę do mamy :(</a>
    </div>
  </div>  
</div>

CSS:

.compsoul-adult {
  background: rgba(0, 0, 0, 0.94);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.compsoul-adult.active {
  animation: compsoul-adult-show linear 0.4s;
  opacity: 1;
  z-index: 2;
}

.compsoul-adult.hidden-click {
  animation: compsoul-adult-hidden linear 0.4s;
  opacity: 0;
  z-index: -1;
}

.compsoul-adult.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 1px; 
}

.compsoul-adult-box {
  background: #fff;
  box-sizing: border-box;
  height: 200px;
  left: 50%;
  padding: 16px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
}

.compsoul-adult-buttons {
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.compsoul-adult-buttons a, .compsoul-adult-buttons button, .compsoul-adult-buttons a:hover {
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  line-height: 16px;
  margin: 0 8px;
  padding: 8px;
  text-decoration: none;
  vertical-align: top;
}

.compsoul-adult-buttons button {
  background: #ffc000;
}

@keyframes compsoul-adult-hidden {
  0% {
    opacity: 1;
    z-index: 2;
  }
  99% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 0;
    z-index: -1;
  } 
}

@keyframes compsoul-adult-show {
  0% {
    opacity: 0;
    z-index: -1;
  }
  1% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 1;
    z-index: 2;
  } 
}

JS

<script src="comp.js"></script>
<script src="storage.js"></script>
<script>
  (function ($) {
    $("#compsoul-adult").storage({
      name : "adult",
      element : "#compsoul-adult button",
      event : "click"
    });
  })(Comp);
</script>

JS (wersja alternatywna)

 <script src="adult.js"></script>  

Instalacja (wersja alternatywna)

Wersja "spakowana" wymaga dodania tylko jednego pliku adult.js, nie jest ona jednak zalecana ponieważ jej użycie wyklucza dodanie innych modułów z tej strony opartych na bibliotece COMP.

Instalacja skryptu w wersji alternatywnej odbywa się poprzez dodanie styli CSS (okienko z nagłówkiem CSS) w formie niezmienionej, do głównego katalogu ze stylami na naszej stronie internetowej. Możemy oczywiście edytować aspekty wizualne modułu. Kolejnym krokiem jest dodanie kodu HTML (okienko z nagłówkiem HTML) do szablonu naszej strony, tuż przed zamknięciem znacznika </body> . Kolejnym i ostatnim już krokiem jest dodanie skryptu JS znajdującego się w pliku ADULT (wersja alternatywna) (Kliknij aby otworzyć w nowym oknie, następnie zapisz plik za pomocą komendy zapisz bądź kombinacji klawiszy ctrl + s). Plik powinien zostać dodany do szablonu za pomocą importu zewnętrznego pliku, kod:

 <script src="adult.js"></script> 

wklejamy tuż pod wcześniej dodanym kodem HTML, pamiętając o zmianie ścieżki. Przykład poprawnej instalacji:

<div id="compsoul-adult" class="compsoul-adult">
  <div class="compsoul-adult-box">
    <p>Treści umieszczone na tej stronie internetowej przeznaczone są dla osób pełnoletnich. Czy masz ukończone 18 lat: (Tak naprawdę strona nie zawiera treści przeznaczonych dla osób pełnoletnich, a komunikat ma na celu zaprezentowanie skryptu)</p>
    <div class="compsoul-adult-buttons">
      <button>Dawaj!</button>
      <a href="http://compsoul.pl">Chcę do mamy :(</a>
    </div>
  </div>  
</div>
<script src="adult.js"></script>  

Instalacja

W pierwszej kolejności musimy stworzyć szkielet naszego komunikatu, aby tego dokonać wystarczy skopiować wcześniej przygotowany przez mnie kod HTML:

<div id="compsoul-adult" class="compsoul-adult">
  <div class="compsoul-adult-box">
    <p>Treści umieszczone na tej stronie internetowej przeznaczone są dla osób pełnoletnich. Czy masz ukończone 18 lat: (Tak naprawdę strona nie zawiera treści przeznaczonych dla osób pełnoletnich, a komunikat ma na celu zaprezentowanie skryptu)</p>
    <div class="compsoul-adult-buttons">
      <button>Dawaj!</button>
      <a href="http://compsoul.pl">Chcę do mamy :(</a>
    </div>
  </div>  
</div>

... i wkleić go tuż przed zamknięciem tag-u </body>

Zmiana treści komunikatu:

Aby zmienić treść komunikatu w wyskakującym okienku wystarczy edytować zawartość <div id="compsoul-adult" class="compsoul-adult">. Warto zauważyć że komunikat może zawierać dowolną treść, zdjęcie, film a do zamknięcia okienka nie musimy używać <button>.

Nadajemy wygląd naszemu modułowi:

Kolejnym krokiem instalacyjnym jest dodanie styli CSS. Umieszczamy je na końcu naszego arkusza.

.compsoul-adult {
  background: rgba(0, 0, 0, 0.94);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.compsoul-adult.active {
  animation: compsoul-adult-show linear 0.4s;
  opacity: 1;
  z-index: 2;
}

.compsoul-adult.hidden-click {
  animation: compsoul-adult-hidden linear 0.4s;
  opacity: 0;
  z-index: -1;
}

.compsoul-adult.hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: 1px; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 1px; 
}

.compsoul-adult-box {
  background: #fff;
  box-sizing: border-box;
  height: 200px;
  left: 50%;
  padding: 16px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
}

.compsoul-adult-buttons {
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

.compsoul-adult-buttons a, .compsoul-adult-buttons button, .compsoul-adult-buttons a:hover {
  background: #000;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  line-height: 16px;
  margin: 0 8px;
  padding: 8px;
  text-decoration: none;
  vertical-align: top;
}

.compsoul-adult-buttons button {
  background: #ffc000;
}

@keyframes compsoul-adult-hidden {
  0% {
    opacity: 1;
    z-index: 2;
  }
  99% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 0;
    z-index: -1;
  } 
}

@keyframes compsoul-adult-show {
  0% {
    opacity: 0;
    z-index: -1;
  }
  1% {
    opacity: 0;
    z-index: 2;
  }
  100% {
    opacity: 1;
    z-index: 2;
  } 
}

Instalacja skryptów JS:

Ostatnim krokiem w procesie instalacyjnym, tak jak w przypadku większości dodawanych modułów, jest implementacja skryptów JS. Aby tego dokonać musimy pobrać pliki z biblioteką oraz jej rozszerzeniem. Lista niezbędnych plików:

  • COMP (Kliknij aby otworzyć w nowym oknie, następnie zapisz plik za pomocą komendy "zapisz" bądź kombinacji klawiszy ctrl + s) - Biblioteka. W tym przypadku może zostać całowiecie zastąpiona przez jQuery (dowolna wersja), jeżeli będzie taka potrzeba opiszę co nalezy zrobić aby moduł był kompatybilny z jQ (dosłownie zmiana kilku zmiennych).
  • STORAGE (Pobieramy w identyczny sposób) - Plik zawierający skrypt z komunikatem o plikach cookies.

Instancja:

<script>
  (function ($) {
    $("#compsoul-adult").storage({
      name : "adult",
      element : "#compsoul-adult button",
      event : "click"
    });
  })(Comp);
</script>

Pliki wraz z wywołaniem skryptu umieszczamy tuż pod, dodanym wcześniej szkieletem naszego komunikatu, czyli zaraz przed zamknięciem znacznika </body>. Przykładowa instalacja: Pamiętaj o zmianie ścieżek do plików!!!

<div id="compsoul-adult" class="compsoul-adult">
  <div class="compsoul-adult-box">
    <p>Treści umieszczone na tej stronie internetowej przeznaczone są dla osób pełnoletnich. Czy masz ukończone 18 lat: (Tak naprawdę strona nie zawiera treści przeznaczonych dla osób pełnoletnich, a komunikat ma na celu zaprezentowanie skryptu)</p>
    <div class="compsoul-adult-buttons">
      <button>Dawaj!</button>
      <a href="http://compsoul.pl">Chcę do mamy :(</a>
    </div>
  </div>  
</div>
<script src="comp.js"></script>
<script src="storage.js"></script>
<script>
  (function ($) {
    $("#compsoul-adult").storage({
      name : "adult",
      element : "#compsoul-adult button",
      event : "click"
    });
  })(Comp);
</script>

C'est fini!

Zapraszam do zapoznania się z moimi pozostałymi wpisami. Jeżeli nie radzisz sobie z instalacją, masz uwagi co do skryptu bądź chcesz się skontaktować: napisz komentarz!

Jakie skrypty chciałbyś zobaczyć na tej stronie?

Gotowe szablony stron www z wdrożeniem!

Komentarze:

Radek

15.11.2018
@Admin Dziękuję ślicznie :)

Admin

14.11.2018
Szanowny Panie @Radosławie, jeżeli doda Pan nowy skrypt na stroną WWW jako osobny plik zostanie on pobrany przez przeglądarkę. Natomiast, jeżeli doda Pan skrypt do już istniejącego pliku ze skryptami będzie Pan musiał poinformować przeglądarkę ze dany plik został zaktualizowany przez dodanie losowego parametru, przykładowo: script src="script.js?v=1" , kod samej strony renderowany jest każdorazowo, temu nie zalecane jest aby dodawać lokalnie skrypty gdyż niewykorzystywany wówczas jest cache przeglądarki i każdorazowo użytkownik musi pobierać go na nowo.

Radek

14.11.2018
Panie Adminie, mam pytanko :) Czy jeśli ktoś regularnie odwiedza moją stronę, a wgram taki skrypcik, to zmusi on przeglądarkę tego kogoś, aby zassała skrypt jak do mnie przyjdzie? Czy wydarzy się to dopiero jak wygasną cache? Może zna Pan jakiś patent na to, jak zmusić przeglądarki ludzi, aby zassały wszystko "na nowo"? Próbowałem u mnie w htaccess pozmieniać wszystko na kilka sekund, ale mam wrażenie, że nie reaguje o.O

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".