Home Explore Help
Register Sign In
gine
/
shareyourfingerprint
0
0
Fork 0
Files Issues 2 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of ssh://git/gine/shareyourfingerprint

gine 9 years ago
parent
90a0a8a2f6 ac1c4cb1ae
commit
1f806c3df0
3 changed files with 302 additions and 0 deletions
Split View Show Diff Stats
  1. 29 0
      index.php
  2. 201 0
      res/css/tabs.css
  3. 72 0
      res/js/cbpFWTabs.js

+ 29 - 0
index.php
View File 

@@ -33,8 +33,33 @@ $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">
 
 		<div class="idealsteps-container">
 
 			<nav class="idealsteps-nav"></nav>
 
@@ -91,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 - 0
res/css/tabs.css
View 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 - 0
res/js/cbpFWTabs.js
View 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 );