552 lines
20 KiB
HTML
552 lines
20 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
|
<title>Hesla</title>
|
|
|
|
<link rel="stylesheet" href="reveal.js/dist/reveal.css">
|
|
<link rel="stylesheet" href="reveal.js/dist/theme/black.css">
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/firacode@1.206.0/distr/fira_code.css">
|
|
|
|
<style>
|
|
|
|
.dimbg .backgrounds {
|
|
-webkit-filter: blur(3px) saturate(.5) brightness(.6);
|
|
-moz-filter: blur(3px) saturate(.7) brightness(.6);
|
|
-o-filter: blur(3px) saturate(.7) brightness(.6);
|
|
-ms-filter: blur(3px) saturate(.7) brightness(.6);
|
|
filter: blur(3px) saturate(.7) brightness(.6);
|
|
}
|
|
|
|
.glič {
|
|
vertical-align: middle;
|
|
height: 64px;
|
|
}
|
|
|
|
section > section {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.reveal {
|
|
counter-reset: fn;
|
|
}
|
|
|
|
a.fn {
|
|
font-variant-position: super;
|
|
counter-increment: fn;
|
|
}
|
|
a.fn::after {
|
|
content: "[↗]";
|
|
}
|
|
|
|
.red-strike {
|
|
text-decoration-color: rgba(255,0,0,0) !important;
|
|
}
|
|
|
|
.red-strike.visible {
|
|
text-decoration-color: red !important;
|
|
text-decoration-thickness: 5px !important;
|
|
}
|
|
|
|
.reveal .slides section .fragment.no {
|
|
opacity: 1;
|
|
visibility: inherit;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.fragment.no.visible {
|
|
color: #ff2c2d;
|
|
}
|
|
.fragment.no.visible::before {
|
|
content: "";
|
|
border-top: solid 4px red;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: scale(1.2) rotate(25deg);
|
|
}
|
|
|
|
.nonf {
|
|
color: #ff2c2d;
|
|
text-decoration-line: line-through;
|
|
text-decoration-color: red;
|
|
}
|
|
|
|
.no-title h2 {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.password-reuse-table td {
|
|
border-bottom: none !important;
|
|
}
|
|
</style>
|
|
|
|
<script src="assets/js/patek-logo-custom-element/patek-logo.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
<section data-state="startHAXX" style="text-align: left;">
|
|
<label for="input" class="control-label">Zadejte nové heslo:</label><br/>
|
|
<input style="width: calc(100% - 0.2em);font-size: 2em;padding: 0.1em" type="text" id="input" placeholder="Heslo" autofocus="true">
|
|
</section>
|
|
<section data-state="stopHAXX">
|
|
<h1>Hesla</h1>
|
|
<div style="font-size: 2rem; color: #93a1a1; display: inline-flex; align-items: center;"><div><p>Jan Černohorský</p><p>Šimon Jan Šustek</p></div><div style="width: 1px; background-color: #93a1a1; height: 5em; margin: 1em;"></div><patek-logo title="Talks" subtitle="Pátek"></patek-logo></div>
|
|
<p style="font-size: medium">Slidy jsou dostupné na <a href="https://patek.cz/talks/passwords/">https://patek.cz/talks/passwords/</a> <img src="assets/qr.png" style="position: fixed; left:0; right: 0;" width="100"> </p>
|
|
<p style="font-size: medium"> Obsahují užitečné odkazy <a href="https://patek.cz/talks/passwords" class="fn"></a> </p>
|
|
</section>
|
|
<section>
|
|
<h3>Kdo jsme?</h3>
|
|
<section>
|
|
<img src="assets/images/photo_2022-01-03_00-42-47.jpg" style="width: 30%;">
|
|
<img src="assets/images/photo_2022-01-03_00-42-37.jpg" style="width: 30%;">
|
|
</section>
|
|
<section data-background="assets/images/IMG_0052.jpg" data-background-opacity="0.2">
|
|
<ul style="text-align: left; font-size: smaller;">
|
|
<li>IT (a STEM) nadšenci</li>
|
|
<li>pravidelní finalisti Kybersoutěže<a href="https://kybersoutez.cz" class="fn"></a> a členové Czech Cyber Teamu, hrajeme CTF</li>
|
|
<li>podíleli jsme se i na organizaci ECSC2021<a href="https://ecsc2021.cz" class="fn"></a> - mistrovství Evropy v kyberbezpečnosti</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h4>Zkušenosti s hledáním zranitelností</h4>
|
|
<img src="assets/images/TMobile.jpg" style="width: 40%;">
|
|
<img src="assets/images/Duck-Duck-Go-Featured.jpg" style="width: 40%;">
|
|
<img src="assets/images/CD-logo-621x201.png" style="width: 40%;">
|
|
<img src="assets/images/active24-reviews-logo.jpg" style="width: 40%;">
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Co jsou to hesla?
|
|
</h2>
|
|
<section>
|
|
<p class="fragment">Způsob, jak může aplikace ověřit, že jste to vy.</p>
|
|
</section>
|
|
<section>
|
|
<img src="assets/images/google-login.png" height=500 alt="Screenshot of Google login dialogue">
|
|
<img src="assets/images/facebook-login.png" height=500 alt="Screenshot of Facebook login dialogue">
|
|
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Proč jsou důležitá?
|
|
</h2>
|
|
<section>
|
|
<p class="fragment">Jedná se o klíče k celému vašemu (onlinovému) životu.</p>
|
|
</section>
|
|
<section>
|
|
<h3>S vaším heslem můžu:</h3>
|
|
<p class="fragment">podívat se na vaše kontakty, <span class="fragment">fotky</span></p>
|
|
<p class="fragment">vymazat všechna data ve vašem telefonu</p>
|
|
</section>
|
|
<section>
|
|
<h3>S vaším heslem můžu být vy. <a href="https://www.youtube.com/watch?v=dM72LqTb5jA" class="fn"></a></h3>
|
|
<p class="fragment">(to nechcete)</p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Znám vaše heslo
|
|
</h2>
|
|
<section>
|
|
<code class="fragment" data-fragment-index="0" style="font-size:2.5em"><span class="fragment highlight-red" data-fragment-index="1">Pepicek</span><span class="fragment highlight-green" data-fragment-index="2">84</span><span class="fragment highlight-blue" data-fragment-index="3">!</span></code>
|
|
<p class="fragment" data-fragment-index="1" style="color: #ff2c2d;">slovo s velkým písmenem - nějaké jméno (čehokoliv)</p>
|
|
<p class="fragment" data-fragment-index="2" style="color: #17ff2e;">číslo - číslo popisné, datum narození, lomítko rč</p>
|
|
<p class="fragment" data-fragment-index="3" style="color: #1b91ff;">speciální znak, ! nebo @, ale jenom když musím</p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<img style="width: 100%" src="assets/images/password-years.png" alt="">
|
|
<p><a href="https://cybernews.com/best-password-managers/most-common-passwords/" class="fn"></a></p>
|
|
</section>
|
|
<!-- Stačí říct
|
|
<section>
|
|
<h2>
|
|
Hesla <i>jsou předvídatelná</i>
|
|
</h2>
|
|
</section>
|
|
-->
|
|
<section>
|
|
<h2>
|
|
Hesla <i>unikají stránkám</i>
|
|
</h2>
|
|
<section>
|
|
<img src="assets/images/adobe-reset.png" style="" alt="">
|
|
</section>
|
|
<section>
|
|
<p><q>The attackers may have obtained access to your Adobe ID and <b>encrypted</b> password.</q></p>
|
|
<p><q>We have reset your password.</q></p>
|
|
</section>
|
|
<section>
|
|
<img src="assets/images/hashes.png" alt="">
|
|
</section>
|
|
<section>
|
|
<h3>Hashování je fajn, ale</h3>
|
|
<p>mnoho stránek ho stále nepoužívá <a class="fn" href="https://pulse.michalspacek.cz/passwords/storages"></a></p>
|
|
<p>slabé heslo se dá rychle <q>cracknout</q><a href="https://www.youtube.com/watch?v=oYNnvTXwlAw" class="fn"></a></p>
|
|
</section>
|
|
<section>
|
|
<p>a unikají pořád <a href="https://www.google.com/search?tbm=nws&q=password+leak" class="fn"></a></p>
|
|
</section>
|
|
<section data-background-opacity=".3" data-background="assets/images/haveibeenpwned.png">
|
|
<p>ověřte si svoji emailovou adresu na haveibeenpwned.com <a href="https://haveibeenpwned.com" class="fn"></a></p>
|
|
<p class="fragment">nastavte si notifikace</p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Hesla <i>unikají vám</i>
|
|
</h2>
|
|
<section>
|
|
<br>
|
|
<img src="assets/images/paymentisready.png">
|
|
</section>
|
|
<section data-state="no-title" data-background="assets/images/snoogl.png">
|
|
|
|
</section>
|
|
<section>
|
|
<!--<p>Michael Reeves a phishing <a href="https://www.youtube.com/watch?v=O502R_LugE4" class="fn"></a></p>
|
|
<iframe src="https://youtube.com/embed/O502R_LugE4" width="500" height="279"></iframe>-->
|
|
<div style="display: flex; justify-content: center; align-items: center;">
|
|
<img src="assets/images/phishing.jpg" style="width: 40%" alt="">
|
|
<img class="fragment" src="assets/images/phishing2.jpg" style="width: 40%; margin-left: 0.25em;" alt="">
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
<p>Hesla <i>jsou na h<img src="assets/gifs/glič1.gif" alt="glič" class="glič"><img src="assets/gifs/glič1.gif" alt="glič" class="glič">o</i>,</p>
|
|
<p> ale co s tím? </p>
|
|
</h2>
|
|
</section>
|
|
<section>
|
|
<h2>Jak vypadá dobré heslo?</h2>
|
|
</section>
|
|
<section>
|
|
<h2>Musí být dlouhé</h2>
|
|
<section>
|
|
<p>alespoň</p>
|
|
<p style="font-size: 1.5em">
|
|
<span class="fragment"><span class="fragment strike">8</span></span>
|
|
<span class="fragment"><span class="fragment strike">12</span></span>
|
|
<span class="fragment">20?</span>
|
|
</p>
|
|
<p>znaků</p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>Nepředvídatelné</h2>
|
|
<section>
|
|
<p><code class="fragment strike red-strike highlight-red" style="font-size: 1.5em">Pepik92</code></p>
|
|
</section>
|
|
<section>
|
|
<p><code class="fragment strike red-strike highlight-red">correct horse battery staple</code></p>
|
|
</section>
|
|
<section>
|
|
<p><code class="fragment strike red-strike highlight-red">Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn</code></p>
|
|
</section>
|
|
<section>
|
|
<p><code class="fragment highlight-green" data-fragment-index="1" style="font-size: 1.5em">d!13p$*W1Z2RnxUc</code></p>
|
|
<p class="fragment" data-fragment-index="1">náhodné = <span style="font-size: 2em">👍</span></p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>Unikátní</h2>
|
|
<section>
|
|
<p style="font-size: 1.5em">jeden účet = jedno heslo</p>
|
|
</section>
|
|
<section>
|
|
<div class="fragment no">
|
|
<p>d!13p$*W1Z2RnxUc1</p>
|
|
<p>d!13p$*W1Z2RnxUc2</p>
|
|
<p>d!13p$*W1Z2RnxUc3</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Kdo si to má pamatovat?
|
|
</h2>
|
|
<br>
|
|
<h2 class="fragment">
|
|
Password manager!
|
|
</h2>
|
|
</section>
|
|
<section>
|
|
<h2>Password manager</h2>
|
|
<section>
|
|
<h4 class="fragment">Program, který se o hesla stará za vás</h4>
|
|
</section>
|
|
<section>
|
|
<br>
|
|
<h4>pamatuje si hesla</h4>
|
|
<img src="assets/images/dashlane.png" alt="">
|
|
</section>
|
|
<section>
|
|
<h4>generuje silná hesla</h4>
|
|
<img src="assets/images/suggestedpass.png" alt="">
|
|
</section>
|
|
<section>
|
|
<h4>vyplňuje hesla za vás</h4>
|
|
<img src="assets/gifs/autofill.gif" alt="">
|
|
</section>
|
|
<section>
|
|
<h4>Kde to seženu?</h4>
|
|
<div class="fragment">
|
|
<p>Umí to váš prohlížeč.</p>
|
|
<img src="assets/images/youwanttosave.png" height="300" alt="">
|
|
</div>
|
|
</section>
|
|
<section data-auto-animate>
|
|
<h4>V prohlížeči</h4>
|
|
<ul>
|
|
<li class="fragment">jednoduché používání</li>
|
|
<li class="fragment">vytvoříte si účet a synchronizujete</li>
|
|
<li class="fragment">dejte pozor na počítače, které <b>používá i někdo jiný</b> - ve škole, v knihovně...</li>
|
|
<ul>
|
|
<li class="fragment">když už je musíte použít, <b>pořádně se odhlaste</b></li>
|
|
<li class="fragment"><b>najděte</b> si konkrétní <b>heslo na telefonu</b> a přepište ho</li>
|
|
</ul>
|
|
</ul>
|
|
</section>
|
|
<section data-auto-animate>
|
|
<h4>V prohlížeči</h4>
|
|
<div style="text-align: left;">
|
|
<b>Chrome</b>
|
|
<p>Synchronizováno přímo s Google účtem</p>
|
|
</div>
|
|
<img src="assets/images/chrome_sync.png">
|
|
</section>
|
|
<section data-auto-animate>
|
|
<h4>V prohlížeči</h4>
|
|
<div style="text-align: left;">
|
|
<b>Firefox</b>
|
|
<p>Synchronizováno přes Firefox Sync</p>
|
|
</div>
|
|
<img src="assets/images/firefox_sync.png">
|
|
</section>
|
|
<section data-auto-animate>
|
|
<h4>Samostatný</h4>
|
|
<ul>
|
|
<li class="fragment">větší kontrola</li>
|
|
<li class="fragment">rozšíření do prohlížeče → srovnatelný komfort</li>
|
|
<li class="fragment">offline i online</li>
|
|
<li class="fragment">snadně uložíte i hesla, která nejsou z internetu - PIN k občance, kódy k ☢️ hlavicím...</li>
|
|
<li class="fragment">různé funkce navíc - sdílení hesel...</li>
|
|
</ul>
|
|
</section>
|
|
<section data-auto-animate>
|
|
<h4>Samostatný</h4>
|
|
<div style="text-align: left;">
|
|
<b>Bitwarden - bitwarden.com</b><a href="https://bitwarden.com/" class="fn"></a>
|
|
<p>Synchronizace mezi neomezeným počtem zařízení</p>
|
|
</div>
|
|
<img src="assets/images/bitwarden.png">
|
|
</section>
|
|
<section>
|
|
<img src="assets/images/passwordmanagers.png" alt="">
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<p>
|
|
Do password manageru se musím přihlásit...
|
|
</p>
|
|
<p class="fragment">
|
|
...heslem.
|
|
</p>
|
|
<p class="fragment">
|
|
Jak ale takové heslo vymyslet?
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h2>Jak vytvořit heslo?</h2>
|
|
<section>
|
|
<p><span class="nonf">password</span> ⟶ passphrase
|
|
<p style="font-size: .8em" class="fragment">V heslech <b>můžou</b> být mezery. </p>
|
|
</section>
|
|
<section>
|
|
<p style="font-size: .8em"><code>Královna Válenda vrátila veverku a pak šla na Bajkal</code></p>
|
|
<p>↓</p>
|
|
<p style="font-size: .8em"><code>Kr_lovnaVnda vratilaVarku a8slaNAB.</code></p>
|
|
<p style="font-size: .8em"><code>KrnaV.d.V4V pakŠlanaB.jk.l</code></p>
|
|
<p style="font-size: .8em"><code>KrV-aW4paS.anAbJKA.</code></p>
|
|
</section>
|
|
<section>
|
|
<p>Diceware - generování hesel pomocí kostek <a href="https://theworld.com/~reinhold/diceware.html" class="fn"></a></p>
|
|
<p><code style="white-space: pre-line; font-size: .8em; text-align: left; display: inline-block">
|
|
22423 hanka
|
|
35631 nq
|
|
21656 foton
|
|
21344 eur
|
|
33162 máslo
|
|
63646 výkres
|
|
</code></p>
|
|
<br>
|
|
<code>hanka nq fot$n eur máslo výkres</code>
|
|
</section>
|
|
<section>
|
|
<p> Napište si heslo na papírek </p>
|
|
<img src="assets/images/postit.webp">
|
|
<p class="fragment">Takhle samozřejmě ne...</p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
<p style="font-size:.9em">Hesla <i>jsou ale na h<img src="assets/gifs/glič1.gif" alt="glič" class="glič"><img src="assets/gifs/glič1.gif" alt="glič" class="glič">o</i>, ne?</p>
|
|
</h2>
|
|
<p>Jsou...</p>
|
|
<p>...ale co s tím?</p>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Vícefaktorové přihlašovaní
|
|
</h2>
|
|
<section>
|
|
<p class="fragment">Heslo není jediný způsob, jak ověřit uživatele<a class="fn" href="https://www.youtube.com/watch?v=hGRii5f_uSc"></a></p>
|
|
</section>
|
|
<section>
|
|
<h3>tři faktory:</h3>
|
|
<p class="fragment"><strong>něco, co vím </strong> <span class="fragment">- klasické heslo</span></p>
|
|
<p class="fragment"><strong>něco, co jsem</strong> <span class="fragment">- biometrika, otisk, ksichtID</span></p>
|
|
<p class="fragment"><strong>něco, co mám</strong> <span class="fragment">- ???</span></p>
|
|
</section>
|
|
<section>
|
|
<p>Co máme všichni neustále u sebe </p>
|
|
<p>a dá se pomocí toho ověřit? </p>
|
|
<img class="fragment fade-up" style="box-shadow: 0 0 7px 0 #050505; border-radius: 20px" src="assets/images/iphoneclipart.png" height="300">
|
|
</section>
|
|
<section>
|
|
<img src="assets/images/googleconfirm.png" height="400" alt="">
|
|
<!-- phone from: https://facebook.design/devices generated using: https://mockuphone.com/ -->
|
|
<img src="assets/images/googleconfirm-phone.png" height="400" alt="">
|
|
<p style="font-size: smaller">myaccount.google.com/security<a href="https://myaccount.google.com/security" class="fn"> </a></p>
|
|
</section>
|
|
<section>
|
|
<img src="assets/images/authy-features-setup_phone.png" height="500" alt="" style="float: left;">
|
|
<img src="assets/images/authy-logo.png" height="100" alt="">
|
|
<h3>Aplikace Authy</h3>
|
|
<a href="https://authy.com">authy.com</a>
|
|
<p>
|
|
návody, jak vícefaktor zapnout<a href="https://authy.com/guides/" class="fn"></a>
|
|
</p>
|
|
<p style="font-size: smaller"> (Google Authenticator) </p>
|
|
</section>
|
|
</section>
|
|
<section>
|
|
<h2>
|
|
Závěr
|
|
</h2>
|
|
<ul>
|
|
<li class="fragment">
|
|
hesla si nepamatujeme <span class="fragment">- tedy až na jedno</span>
|
|
</li>
|
|
<li class="fragment">
|
|
to je:
|
|
</li>
|
|
<ul>
|
|
<li class="fragment"><b>unikátní</b> <span class="fragment">- není použité nikde jinde</span></li>
|
|
<li class="fragment"><b>dlouhé</b> <span class="fragment">- nejlépe fráze nebo věta</span></li>
|
|
<li class="fragment"><b>náhodné</b> <span class="fragment">- není předvídatelné, speciální znaky uprostřed slov atd.</span></li>
|
|
</ul>
|
|
<li class="fragment">
|
|
kde to jde, používáme vícefaktorové přihlašování
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<h2> Myslete! </h2>
|
|
<div class="fragment">Každý má na bezpečnost jiný názor.</div>
|
|
<div class="fragment">Když už se něčím řídím, je třeba vědět <b>proč</b>.</div>
|
|
</section>
|
|
<section>
|
|
<h2> Poděkování </h2>
|
|
<p>
|
|
Rádi bychom poděkovali <b>Michalovi Špačkovi</b><a href="https://michalspacek.cz" class="fn"></a> za jeho
|
|
celoživotní úsilí v oblasti bezpečných hesel a za všechny jeho skvělé přednášky, které byly inspirací
|
|
a významým zdrojem při přípravě této prezentace.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h1>Dotazy & asistence</h1>
|
|
<!-- v těchto místech bychom jim možná mohli i workshopově pomoc s tím co budou potřebovat? Třeba nastavit MFA, lockwise, google passwords atd.-->
|
|
</section>
|
|
<section>
|
|
<h1>Kontakt</h1>
|
|
<p>jan.cernohorsky@gbl.cz<br>&<br>simon.sustek@gbl.cz</p>
|
|
<!-- tady bych jim klidně předal kontakt, pokud jim přijde něco podezřelého, budou potřebovat s něčím poradit nebo tak, tak ať se na nás obrátí... vyrobit třeba i hesla@gbl.cz, security@gbl.cz nebo cisrt@gbl.cz ? nebo jen maily na nás. nebo je to totální overkill? (je) -->
|
|
</section>
|
|
<section>
|
|
<h1>Děkujeme za pozornost!</h1>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="reveal.js/dist/reveal.js"></script>
|
|
|
|
<script>
|
|
Reveal.initialize({"hash":true});
|
|
|
|
const wait = ms => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
|
|
|
const input = document.querySelectorAll("#input")[0];
|
|
input.select();
|
|
input.value="";
|
|
|
|
const texts = ["toneuhodnes","Tomasek12","cNVh$2rn#wpSrLsw","••••••••","Listova306!","1203Anicka","12345678","edward211","327fstka","Bruno168","Jiricek1","password","123456","12345678","1234","qwerty","12345","dragon","p**sy","baseball","football","letmein","monkey","696969","abc123","mustang","michael","shadow","master","jennifer","111111","2000","jordan","superman","harley","1234567","f**kme","hunter","f**kyou","trustno1","ranger"];
|
|
|
|
let write_text = async (text,time,current=0) => {
|
|
if(current===0) {
|
|
input.select();
|
|
await wait(1000);
|
|
input.value="";
|
|
}
|
|
const l=text.length;
|
|
input.value+=text[current];
|
|
if(current < l-1) {
|
|
current++;
|
|
setTimeout(() => {write_text(text,time,current)},time);
|
|
} else {
|
|
input.setAttribute('value',input.value);
|
|
}
|
|
};
|
|
let haxx;
|
|
Reveal.on( 'startHAXX', () => {
|
|
haxx = setInterval(function(){write_text(texts[Math.floor(Math.random() * texts.length)],125)},2500);
|
|
} );
|
|
Reveal.on( 'stopHAXX', () => {
|
|
clearInterval(haxx);
|
|
} );
|
|
|
|
let tykame = true;
|
|
|
|
class VT extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.print()
|
|
}
|
|
print() {
|
|
if (tykame) this.innerText = this.getAttribute("t")
|
|
else this.innerText = this.getAttribute("v")
|
|
}
|
|
static get observedAttributes() {
|
|
return ["v", "t"];
|
|
}
|
|
attributeChangedCallback() {
|
|
this.print()
|
|
}
|
|
}
|
|
customElements.define("v-t", VT);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|