added language tabs and english text
This commit is contained in:
parent
c03eeedc88
commit
ac1c4cb1ae
3 changed files with 302 additions and 2 deletions
31
index.php
31
index.php
|
|
@ -33,11 +33,34 @@ $img=$resource_path."images/";
|
|||
<link rel="stylesheet" href="<?php echo $css_path?>jquery.idealforms.css" media="screen" />
|
||||
<link rel="stylesheet" href="<?php echo $css_path?>normalize.css">
|
||||
<link rel="stylesheet" href="<?php echo $css_path?>form.css">
|
||||
<link rel="stylesheet" href="<?php echo $css_path?>tabs.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="tabs" class="tabs">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#section-it"><span>IT</span></a></li>
|
||||
<li><a href="#section-en"><span>EN</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<section id="section-it">
|
||||
<h1>ShareYourFingerprint</h1>
|
||||
<p>Hai sempre guardato con malcelata invidia chi si presenta ai <a href="http://www.wikiwand.com/en/Key_signing_party" target="_blank">keysigning party</a> 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?<br />
|
||||
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.<br />
|
||||
Vuoi saperne di più su come organizzare un keysigning party? leggi <a href="http://herrons.com/keysigning-party-guide/" target="_blank">qui</a><br />
|
||||
Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi <a href="https://we.riseup.net/riseuplabs+paow/openpgp-best-practices" target="_blank">qui</a></p>
|
||||
</section>
|
||||
<section id="section-en">
|
||||
<h1>ShareYourFingerprint</h1>
|
||||
<p>Do you ever watched with barely concealed envy the ones who present themselves at <a href="http://www.wikiwand.com/en/Key_signing_party" target="_blank">keysigning parties</a> 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?<br />
|
||||
This tiny little form, properly filled, gives you a print-ready .pdf with many little "visiting cards" that you can distribute to your contacts.<br />
|
||||
Do you want to know more about organizing a keysigning party? Read <a href="http://herrons.com/keysigning-party-guide/" target="_blank">here</a><br />
|
||||
Do you want to learn something on openPGP good practices? Read <a href="https://we.riseup.net/riseuplabs+paow/openpgp-best-practices" target="_blank">here</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>ShareYourFingerprint</h1>
|
||||
<p>Hai sempre guardato con malcelata invidia chi si presenta ai <a href="http://www.wikiwand.com/en/Key_signing_party">keysigning party</a> 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?<br />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.<br />Vuoi saperne di più su come organizzare un keysigning party? leggi <a href="http://herrons.com/keysigning-party-guide/">qui</a><br />Vuoi imparare qualcosa sulle buone pratiche di openPGP? leggi <a href="https://we.riseup.net/riseuplabs+paow/openpgp-best-practices">qui</a></p>
|
||||
<div class="idealsteps-container">
|
||||
<nav class="idealsteps-nav"></nav>
|
||||
<form action="print.php" method="post" novalidate autocomplete="off" class="idealforms">
|
||||
|
|
@ -93,5 +116,9 @@ $img=$resource_path."images/";
|
|||
<script src="<?php echo $js_path?>lib/jquery.idealforms.js"></script>
|
||||
<script src="<?php echo $js_path?>jq-idealforms-extend-validate.js"></script>
|
||||
<script src="<?php echo $js_path?>form.js"></script>
|
||||
<script src="<?php echo $js_path?>cbpFWTabs.js"></script>
|
||||
<script>
|
||||
new CBPFWTabs( document.getElementById( 'tabs' ) );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
201
res/css/tabs.css
Normal file
201
res/css/tabs.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
72
res/js/cbpFWTabs.js
Normal file
72
res/js/cbpFWTabs.js
Normal file
|
|
@ -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 );
|
||||
Loading…
Reference in a new issue