doctype html
html(lang="fr")
	head
		<!-- SCRIPTS -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/framemo.css" />
		<!-- FONTS -->
		<link href='css/rock_salt.css' rel='stylesheet' type='text/css'>
		<link href='css/covered_by_your_grace.css' rel='stylesheet' type='text/css'>
		<!-- NAV -->
		<script src="https://framasoft.org/nav/nav.js"></script>

		title Framemo

body
	div.container.ombre
		header(role="banner")
			h1
				span.frama Fra
				span.services memo
			p.lead Mettez vos idées au clair
			hr.trait(role="presentation")

		main
			div.row
				div.col-md-12
					div.board-outline
						div#board
							div#board-doodles


							table#board-table.board-table
								tr
									td
										form.home(onsubmit="return go();")
											label Nommez votre nouveau tableau :
											br
											input.text(type="text", name="name")
											a#go(onclick="return go();") &nbsp;Allons-y.
										<br><br>
										p.home Exemple :
										p.home!= '<a href="http://' + locals.url + '/demo">' + locals.url + '/demo</a>'

					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')
						br
						div.sticker#sticker-gold(title='Ajouter une étoile dorée')
						div.sticker#sticker-bluestar(title='Ajouter une étoile bleue')
						div.sticker#sticker-silverstar(title='Ajouter une étoile argentée')
						div.sticker#sticker-redstar(title='Ajouter une étoile rouge')


					//display # of active users here
					div.active-connections= "connexions en cours : " + connected

					//<div style="width: 980px; height: 450px; border: solid 2px; opacity:.1; margin-top: 100px"> this will be the backlog that only appears on drag or perhaps not at all</div>
			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 la modifier.
							li Déplacez-les en cliquant dessus puis en les faisant glisser vers leur destination
							li Modifiez-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, une priorité, un degré d'importance ou d'urgence…
							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.

					b Suppression des mémos

					p Il n’y a pas de suppression à proprement parler : il suffit de supprimer les post-it (et les révisions le cas échéant). Si quelqu’un réutilise la même adresse que votre mémo, il tombera sur un mémo vide.

				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>

	<script type="text/javascript">function go() {var value = document.forms[0].elements["name"].value; value = value.replace(/[\/\?&#]/g,  ''); window.location.href = value; return false;}</script>