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(title='Ajouter une note')
		i#smallify.fa.fa-expand.fa-2x.bottom-icon(title='Réduire la taille des notes')
		div.form-group
			label.control-label(for='choose-card-color') Choisir la couleur de la nouvelle note 
			select#choose-card-color.form-control
				option(value='random') Couleur au hasard
				option(value='yellow') Jaune
				option(value='green') Vert
				option(value='blue') Bleu
				option(value='white') Blanc


	div.stickers
		div.sticker#sticker-red(title='Ajouter une pastille rouge')
		div.sticker#sticker-blue(title='Ajouter une pastille bleue')
		div.sticker#sticker-yellow(title='Ajouter une pastille jaune')
		div.sticker#sticker-green(title='Ajouter une pastille verte')
		br
		div.sticker#sticker-pink(title='Ajouter une pastille rose')
		div.sticker#sticker-lightblue(title='Ajouter une pastille bleu clair')
		div.sticker#sticker-orange(title='Ajouter une pastille orange')
		div.sticker#sticker-purple(title='Ajouter une pastille violette')
		//div.sticker#sticker-silverstar
		//div#addsticker
		br
		div.sticker#sticker-gold(title='Ajouter une étoile dorée')
		//	image(src="/images/stickers/sticker-gold.png")
		div.sticker#sticker-bluestar(title='Ajouter une étoile bleue')
		//	image(src="/images/stickers/sticker-bluestar.png")
		div.sticker#sticker-silverstar(title='Ajouter une étoile argentée')
		//	image(src="/images/stickers/sticker-silverstar.png")
		div.sticker#sticker-redstar(title='Ajouter une étoile rouge')
		//	image(src="/images/stickers/sticker-redstar.png")
		br
		div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')


	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.share
		h3 Partager le tableau
		div.form-inline
			div.input-group
				input#taburl.form-control(disabled='disabled')
				div.input-group-addon
					a#copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
						i.fa.fa-clipboard

	div.export
		h3 Exporter le tableau
		button#export-txt.btn.btn-primary Format texte
		button#export-csv.btn.btn-primary Format CSV
		button#export-json.btn.btn-primary Format JSON (pour import dans Framemo)

	div.import
		h3 Importer un tableau
		div.form-inline
			div.form-group
				label(for="import-input") fichier JSON à importer
				input(type="file")#import-input.form-control
				button#import-file.btn.btn-primary Importer

	div.revisions
		h3 Révisions
		button#create-revision.btn.btn-primary Créer une révision
		div
			ul#revisions-list

	//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>