From c03eeedc88ec6525490a040fce99fd5d9bd20658 Mon Sep 17 00:00:00 2001 From: Tubia Date: Sat, 18 Oct 2014 13:03:07 +0200 Subject: [PATCH 1/2] aggiunta spiegazione in cima - hardcoded --- index.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.php b/index.php index 3cdee65..b32a036 100644 --- a/index.php +++ b/index.php @@ -36,6 +36,8 @@ $img=$resource_path."images/";
+

ShareYourFingerprint

+

Hai sempre guardato con malcelata invidia chi si presenta ai keysigning party con tanti fogliettini da distribuire agli astanti con scritto fingerprint e ID? Non hai assolutamente idea di cosa stiamo parlando, ma vuoi imparare a usare GnuPG per crittare le tue mail e contribuire a costruire una rete di fiducia con i tuoi amici/compagni?
Questo piccolo tool, debitamente compilato, ti permette di ottenere un .pdf pronto per la stampa con tanti piccoli “biglietti da visita” da distribuire ai tuoi contatti.
Vuoi saperne di più su come organizzare un keysigning party? leggi qui
Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi qui

From ac1c4cb1aee58be0b18fd607f5e243f4119ed0cb Mon Sep 17 00:00:00 2001 From: Tubia Date: Tue, 28 Oct 2014 18:54:19 +0100 Subject: [PATCH 2/2] added language tabs and english text --- index.php | 31 ++++++- res/css/tabs.css | 201 ++++++++++++++++++++++++++++++++++++++++++++ res/js/cbpFWTabs.js | 72 ++++++++++++++++ 3 files changed, 302 insertions(+), 2 deletions(-) create mode 100644 res/css/tabs.css create mode 100644 res/js/cbpFWTabs.js diff --git a/index.php b/index.php index b32a036..d206285 100644 --- a/index.php +++ b/index.php @@ -33,11 +33,34 @@ $img=$resource_path."images/"; + +
+ +
+
+

ShareYourFingerprint

+

Hai sempre guardato con malcelata invidia chi si presenta ai keysigning party con tanti fogliettini da distribuire agli astanti con scritto fingerprint e ID? Non hai assolutamente idea di cosa stiamo parlando, ma vuoi imparare a usare GnuPG per crittare le tue mail e contribuire a costruire una rete di fiducia con i tuoi amici/compagni?
+ Questo piccolo tool, debitamente compilato, ti permette di ottenere un .pdf pronto per la stampa con tanti piccoli “biglietti da visita” da distribuire ai tuoi contatti.
+ Vuoi saperne di più su come organizzare un keysigning party? leggi qui
+ Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi qui

+
+
+

ShareYourFingerprint

+

Do you ever watched with barely concealed envy the ones who present themselves at keysigning parties with many slips of paper to distribute to bystanders which report their fingerprint and ID? Do you have absolutely no idea of what we're talking about, but you want to learn GnuPG to crypt your emails and contribute in the construction of a web of trust between your friends/comrades?
+This tiny little form, properly filled, gives you a print-ready .pdf with many little "visiting cards" that you can distribute to your contacts.
+Do you want to know more about organizing a keysigning party? Read here
+Do you want to learn something on openPGP good practices? Read here

+
+
+
-

ShareYourFingerprint

-

Hai sempre guardato con malcelata invidia chi si presenta ai keysigning party con tanti fogliettini da distribuire agli astanti con scritto fingerprint e ID? Non hai assolutamente idea di cosa stiamo parlando, ma vuoi imparare a usare GnuPG per crittare le tue mail e contribuire a costruire una rete di fiducia con i tuoi amici/compagni?
Questo piccolo tool, debitamente compilato, ti permette di ottenere un .pdf pronto per la stampa con tanti piccoli “biglietti da visita” da distribuire ai tuoi contatti.
Vuoi saperne di più su come organizzare un keysigning party? leggi qui
Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi qui

@@ -93,5 +116,9 @@ $img=$resource_path."images/"; + + diff --git a/res/css/tabs.css b/res/css/tabs.css new file mode 100644 index 0000000..f60a847 --- /dev/null +++ b/res/css/tabs.css @@ -0,0 +1,201 @@ +.tabs { + position: relative; + width: 100%; + overflow: hidden; + margin: 1em 0 2em; + font-weight: 300; +} + +/* Nav */ +.tabs nav { + text-align: center; +} + +.tabs nav ul { + padding: 0; + margin: 0; + list-style: none; + display: inline-block; +} + +.tabs nav ul li { + border: 1px solid #becbd2; + border-bottom: none; + margin: 0 0.25em; + display: block; + float: left; + position: relative; +} + +.tabs nav li.tab-current { + border: 1px solid #cc2a18; + box-shadow: inset 0 2px #cc2a18; + border-bottom: none; + z-index: 100; +} + +.tabs nav li.tab-current:before, +.tabs nav li.tab-current:after { + content: ''; + position: absolute; + height: 1px; + right: 100%; + bottom: 0; + width: 1000px; + background: #cc2a18; +} + +.tabs nav li.tab-current:after { + right: auto; + left: 100%; + width: 4000px; +} + +.tabs nav a { + color: #becbd2; + display: block; + font-size: 1.45em; + line-height: 2.5; + padding: 0 1.25em; + white-space: nowrap; +} + +.tabs nav a:hover { + color: #768e9d; +} + +.tabs nav li.tab-current a { + color: #cc2a18; +} + +/* Content */ +.content section { + font-size: 1.25em; + /*padding: 3em 1em;*/ + display: none; + max-width: 1230px; + margin: 0 auto; +} + +.content section:before, +.content section:after { + content: ''; + display: table; +} + +.content section:after { + clear: both; +} + +/* Fallback example */ +.no-js .content section { + display: block; + padding-bottom: 2em; + border-bottom: 1px solid #cc2a18; +} + +.content section.content-current { + display: block; +} + +.mediabox { + float: left; + width: 33%; + padding: 0 25px; +} + +.mediabox img { + max-width: 100%; + display: block; + margin: 0 auto; +} + +.mediabox h3 { + margin: 0.75em 0 0.5em; +} + +.mediabox p { + padding: 0 0 1em 0; + margin: 0; + line-height: 1.3; +} + +/* Example media queries */ + +@media screen and (max-width: 52.375em) { + .tabs nav a span { + display: none; + } + + .tabs nav a:before { + margin-right: 0; + } + + .mediabox { + float: none; + width: auto; + padding: 0 0 35px 0; + font-size: 90%; + } + + .mediabox img { + float: left; + margin: 0 25px 10px 0; + max-width: 40%; + } + + .mediabox h3 { + margin-top: 0; + } + + .mediabox p { + margin-left: 40%; + margin-left: calc(40% + 25px); + } + + .mediabox:before, + .mediabox:after { + content: ''; + display: table; + } + + .mediabox:after { + clear: both; + } +} + +@media screen and (max-width: 32em) { + .tabs nav ul, + .tabs nav ul li a { + width: 100%; + padding: 0; + } + + .tabs nav ul li { + width: 20%; + width: calc(20% + 1px); + margin: 0 0 0 -1px; + } + + .tabs nav ul li:last-child { + border-right: none; + } + + .mediabox { + text-align: center; + } + + .mediabox img { + float: none; + margin: 0 auto; + max-width: 100%; + } + + .mediabox h3 { + margin: 1.25em 0 1em; + } + + .mediabox p { + margin: 0; + } +} \ No newline at end of file diff --git a/res/js/cbpFWTabs.js b/res/js/cbpFWTabs.js new file mode 100644 index 0000000..0145e09 --- /dev/null +++ b/res/js/cbpFWTabs.js @@ -0,0 +1,72 @@ +/** + * cbpFWTabs.js v1.0.0 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2014, Codrops + * http://www.codrops.com + */ +;( function( window ) { + + 'use strict'; + + function extend( a, b ) { + for( var key in b ) { + if( b.hasOwnProperty( key ) ) { + a[key] = b[key]; + } + } + return a; + } + + function CBPFWTabs( el, options ) { + this.el = el; + this.options = extend( {}, this.options ); + extend( this.options, options ); + this._init(); + } + + CBPFWTabs.prototype.options = { + start : 0 + }; + + CBPFWTabs.prototype._init = function() { + // tabs elemes + this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) ); + // content items + this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) ); + // current index + this.current = -1; + // show current content item + this._show(); + // init events + this._initEvents(); + }; + + CBPFWTabs.prototype._initEvents = function() { + var self = this; + this.tabs.forEach( function( tab, idx ) { + tab.addEventListener( 'click', function( ev ) { + ev.preventDefault(); + self._show( idx ); + } ); + } ); + }; + + CBPFWTabs.prototype._show = function( idx ) { + if( this.current >= 0 ) { + this.tabs[ this.current ].className = ''; + this.items[ this.current ].className = ''; + } + // change current + this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; + this.tabs[ this.current ].className = 'tab-current'; + this.items[ this.current ].className = 'content-current'; + }; + + // add to global namespace + window.CBPFWTabs = CBPFWTabs; + +})( window ); \ No newline at end of file