index.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <title>Autodifesa Digitale I</title>
  7. <link rel="stylesheet" href="css/reveal.css">
  8. <link rel="stylesheet" href="css/theme/black.css">
  9. <!-- Theme used for syntax highlighting of code -->
  10. <link rel="stylesheet" href="lib/css/zenburn.css">
  11. <!-- User style -->
  12. <style>
  13. .red { color: #ff2c2d; }
  14. .green { color: #17ff2e; }
  15. .blue { color: #1b91ff; }
  16. .slides section { text-align: right; }
  17. .top-right { top: -200px; }
  18. .reveal section img { max-height: 400px; }
  19. </style>
  20. <!-- Printing and PDF exports -->
  21. <script>
  22. var link = document.createElement( 'link' );
  23. link.rel = 'stylesheet';
  24. link.type = 'text/css';
  25. link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
  26. document.getElementsByTagName( 'head' )[0].appendChild( link );
  27. </script>
  28. </head>
  29. <body>
  30. <div class="reveal">
  31. <div class="slides">
  32. <section>
  33. <section
  34. data-separator="^--$"
  35. data-markdown="slides/intro.md"></section>
  36. </section>
  37. <section>
  38. <section
  39. data-separator="^--$"
  40. data-markdown="slides/liberta.md"></section>
  41. </section>
  42. <section>
  43. <section
  44. data-separator="^--$"
  45. data-markdown="slides/password.md">
  46. </section>
  47. <section id='passwordTest'>
  48. <p>Vediamo quanto sei bravo/a ad inventare una password:</p>
  49. <input type="password"
  50. v-model='password'
  51. @input='checkStrength'
  52. :class="['score' + estimationScore]"/>
  53. <button :disabled="estimationScore!==4"> ➜</button>
  54. <p v-if='password.length>2'>
  55. Questa password è {{score[estimationScore]}}, dopo un sequestro uno bravo
  56. ci mette più o meno <b>{{slowCrackTime}}</b> a scoprirla,
  57. la CIA circa <b>{{fastCrackTime}}</b>:
  58. </p>
  59. <li v-for="s in sequence">
  60. <span v-if="s.pattern=='bruteforce'"> {{s.token}} forza bruta</span>
  61. <span v-else-if="s.pattern=='dictionary'">
  62. {{s.token}} dizionario: {{s.dictionary_name}}
  63. {{s.reversed?'(invertita ' + s.matched_word + ')':''}}
  64. {{s.l33t?'(con sostituzione ' + s.sub_display +')':''}}
  65. {{s.uppercase_variations>1?'(con maiuscola)':''}}
  66. </span>
  67. <span v-else-if="s.pattern=='sequence'"> {{s.token}} sequenze: ({{s.sequence_name}})</span>
  68. <span v-else-if="s.pattern=='spatial'"> {{s.token}} sequenze spaziali: ({{s.graph}})</span>
  69. <span v-else-if="s.pattern=='repeat'"> {{s.token}} ripetizione: ({{s.base_token}})</span>
  70. <span v-else-if="s.pattern=='date'"> {{s.token}} data {{s.day}}/{{s.month}}/{{s.year}}</span>
  71. <span v-else-if="s.pattern=='regex'"> {{s.token}} pattern {{s.regex_name}}</span>
  72. <span v-else> {{s}}</span>
  73. <script src='js/moment.js'></script>
  74. <script src='js/vue.min.js'></script>
  75. <script src='js/zxcvbn.js'></script>
  76. <script src='js/password.js'></script>
  77. </section>
  78. </section>
  79. <section>
  80. <section
  81. data-separator="^--$"
  82. data-markdown="slides/dati.md"></section>
  83. </section>
  84. <section>
  85. <section
  86. data-separator="^--$"
  87. data-markdown="slides/navigare.md"></section>
  88. </section>
  89. <section>
  90. <section
  91. data-separator="^--$"
  92. data-markdown="slides/metadata.md"></section>
  93. </section>
  94. <section>
  95. <section
  96. data-separator="^--$"
  97. data-markdown="slides/smartphone.md"></section>
  98. </section>
  99. <section>
  100. <section
  101. data-separator="^--$"
  102. data-markdown="slides/comunicare.md"></section>
  103. </section>
  104. <section>
  105. <section
  106. data-separator="^--$"
  107. data-markdown="slides/anonimato.md"></section>
  108. </section>
  109. </div>
  110. </div>
  111. <script src="lib/js/head.min.js"></script>
  112. <script src="js/reveal.js"></script>
  113. <script>
  114. // More info about config & dependencies:
  115. // - https://github.com/hakimel/reveal.js#configuration
  116. // - https://github.com/hakimel/reveal.js#dependencies
  117. Reveal.initialize({
  118. width: 1300,
  119. height: 600,
  120. minScale: 0.1,
  121. history: true,
  122. progress: true,
  123. controls: true,
  124. maxScale: 3,
  125. center: false,
  126. defaultTiming: 120,
  127. slideNumber: 'c/t',
  128. dependencies: [
  129. { src: 'plugin/markdown/marked.js' },
  130. { src: 'plugin/markdown/markdown.js' },
  131. { src: 'plugin/notes/notes.js', async: true },
  132. { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
  133. ]
  134. });
  135. </script>
  136. </body>
  137. </html>