memo/views/index.jade

extends layout

block body
	- if (locals.demo)
		div.notice-bar Ceci est un tableau de démonstration. N’y mettez rien d’important

	//div.config
	//	i.fa.fa-cog.fa-lg.faded-icon

	div.board-outline
		div#board
			div#board-doodles
			image#marker(src='images/marker.png')
			image#eraser(src='images/eraser.png')


			table#board-table.board-table
				tr
					td#icon-col(width='1%')
						image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png' alt='Ajouter une colonne')
						image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png' alt='Supprimer une colonne')


	div.buttons
		i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
		i#smallify.fa.fa-expand.fa-2x.bottom-icon


	div.stickers
		div.sticker#sticker-red
		div.sticker#sticker-blue
		div.sticker#sticker-yellow
		div.sticker#sticker-green
		br
		div.sticker#sticker-pink
		div.sticker#sticker-lightblue
		div.sticker#sticker-orange
		div.sticker#sticker-purple
		//div.sticker#sticker-silverstar
		//div#addsticker
		br
		div.sticker#sticker-gold
		//	image(src="/images/stickers/sticker-gold.png")
		div.sticker#sticker-bluestar
		//	image(src="/images/stickers/sticker-bluestar.png")
		div.sticker#sticker-silverstar
		//	image(src="/images/stickers/sticker-silverstar.png")
		div.sticker#sticker-redstar
		//	image(src="/images/stickers/sticker-redstar.png")
		br
		div.sticker#nosticker


	div.names
		p connectés :
		//image#user-icon(src="/images/icons/cc/black/png/user_icon&16.png")
		input#yourname-input
		span.you-text (vous)
		ul#names-ul

	div.export
		h3 Export board
		button#export-txt Text format
		button#export-csv CSV format
		button#export-json JSON format (for import in Scrumblr)

	div.import
		h3 Import board
		div
			label(for="import-input") JSON file to import
			input(type="file")#import-input
			button#import-file Import

	//div.trash
	//	i.fa.fa-trash-o.fa-lg.faded-icon
	hr(role="presentation")
	div.row
		div#tuto-faq.col-md-4
			h2 Prise en main
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-question-sign
			div#aboutbox
				p
					b.violet Fra
					b.vert memo
					span  est un service en ligne libre et minimaliste qui permet d’éditer et d’organiser collaborativement des idées sous forme de notes
				ol
					li Créez un tableau en choisissant son nom (attention, ne choisissez pas un nom trop générique, il risque d’être choisi par d’autres personnes)
					li Votre tableau est sauvegardé en temps réel, il vous suffit de partager son adresse web.
					li Créez une note en cliquant sur le (+) à gauche (cliquez plusieurs fois pour en changer la couleur), puis déplacez la sur le tableau. Double-cliquez pour l’éditer.
					li Déplacez-les en cliquant dessus et en les faisant glisser vers leur destination
					li Éditez-les en double-cliquant dessus
					li Les gommettes (en bas à droite) peuvent être placées sur les notes, pour représenter — par exemple — une personne ou une priorité.
					li Organisez votre tableau avec des colonnes ! Pour ajouter ou supprimer une colonne, cliquez sur les (+) ou (-) qui apparaissent en plaçant votre souris à droite du tableau. Double-cliquez sur le nom d’une colonne pour la renommer.

		div#le-logiciel.col-md-4
			h2 Le logiciel
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-cloud
			p
				b.violet Fra
				b.vert memo
				span  repose sur le logiciel <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> développé par Ali Asaria.
			p Scrumblr et ses composants sont <a href="https://github.com/aliasaria/scrumblr/blob/master/LICENSE.txt">sous licence libre</a>.
			p
				b.violet Fra
				b.vert memo
				span  requiert l’activation du Javascript pour fonctionner ainsi qu’un navigateur web récent :
			ul
				li <a href="http://www.mozilla.org/firefox/">Firefox</a>,
				li Opera,
				li Chrome,
				li Safari…
			p L’utilisation d’Internet Explorer n’est pas recommandée.

		div#jardin.col-md-4
			h2 Cultivez votre jardin
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-tree-deciduous
			p Pour participer au développement du logiciel, proposer des améliorations ou simplement le télécharger, rendez-vous sur <a href="https://github.com/aliasaria/scrumblr">le site de développement</a>.
			p Si vous souhaitez installer ce logiciel pour votre propre usage et ainsi gagner en autonomie, nous vous aidons sur :
			p.text-center <a href="http://framacloud.org/cultiver-son-jardin/installation-de-scrumblr/" class="btn btn-success"><span class="glyphicon glyphicon-tree-deciduous"></span> framacloud.org</a></p>