ode-csslib-panda-paris 1.0.0-feat-produit.202209221209

package/dist/template/directory/massmail.mail.es.txt

@@ -0,0 +1,46 @@
+{{! Users that are not activated }}
+{{#activationCode}}
+Hola,<br/>
+<br/>
+Este mensaje se envía automáticamente con sus informaciones de primera conexión a ONE.<br/>
+<br/>
+Para conectarse, vaya a <a href="https://oneconnect.opendigitaleducation.com">oneconnect.opendigitaleducation.com</a>.<br/>
+<br/>
+Introduzca su nombre de usuario (se debe guardar para poder conectarse ulteriormente) y su código de activación:<br/>
+<br/>
+Id. de usuario: {{login}}<br/>
+Código de activación: {{activationCode}}<br/>
+<br/>
+Seleccione una nueva contraseña e introduzca su dirección de correo electrónico personal para obtener un correo electrónico de restauración si usted olvida su contraseña.<br/>
+<br/>
+Recomendamos que mezcle números, letras, mayúsculas, minúsculas y caracteres especiales al elegir su contraseña personal.<br/>
+<br/>
+¡Feliz navegación!<br/>
+<br/>
+El equipo ONE<br/>
+<br/>
+{{/activationCode}}
+{{! Users that are activated }}
+{{^activationCode}}
+Hola,<br/>
+<br/>
+Este mensaje se envía automáticamente con sus informaciones de primera conexión a ONE.<br/>
+<br/>
+Usted ya tiene una cuenta en ONE.<br/>
+Su Id. de usuario es: <i>{{login}}</i><br/>
+<br/>
+Si no recuerda su contraseña, puede establecer una nueva siguiendo las siguientes instrucciones:<br/>
+<br/>
+- Vaya a <a href="https://oneconnect.opendigitaleducation.com">https://oneconnect.opendigitaleducation.com</a> y haga clic en “Contraseña olvidada”<br/>
+<br/>
+- Introduzca su Id. de usuario y haga clic en “Enviar”.<br/>
+<br/>
+Se enviará un correo electrónico a la dirección que ingresó al activar su cuenta. Luego haga clic en el enlace de restauración de contraseña recibido para definir su nueva contraseña.<br/>
+<br/>
+Recomendamos que mezcle números, letras, mayúsculas, minúsculas y caracteres especiales al elegir su contraseña personal.<br/>
+<br/>
+¡Feliz navegación!<br/>
+<br/>
+El equipo ONE<br/>
+<br/>
+{{/activationCode}}

package/dist/template/directory/massmail.mail.txt

@@ -0,0 +1,49 @@
+{{! Users that are not activated }}
+{{#activationCode}}
+Bonjour,<br/>
+<br/>
+Ceci est un mail g&eacute;n&eacute;r&eacute; automatiquement qui contient vos informations de premi&egrave;re connexion &agrave; Paris Classe Num&eacute;rique.<br/>
+<br/>
+La premi&egrave;re connexion s'effectue sur <a href="https://parisclassenumerique.fr">www.parisclassenumerique.fr</a>.<br />
+Une premi&egrave;re &eacute;tape indispensable vous permettra de personnaliser vos informations de connexion.
+Cliquez sur <b>"Se connecter"</b> en haut à droite de l'&eacute;cran.<br/>
+<br/>
+Munissez-vous de votre adresse e-mail personnelle et des informations ci-dessous :<br/>
+<br/>
+Identifiant : <b>{{login}}</b><br/>
+Code d'activation : <b>{{activationCode}}</b><br/>
+<br/>
+Pour s&eacute;curiser vos acc&egrave;s, il vous sera demand&eacute; de choisir un nouveau mot de passe, d'indiquer votre adresse e-mail personnelle et, si vous le souhaitez, de saisir un num&eacute;ro de t&eacute;l&eacute;phone portable.<br/>
+<br/>
+Votre nouveau mot de passe doit contenir 8 caract&egrave;res minimum, dont au moins une majuscule, une minuscule et un chiffre. Pour plus de s&eacute;curit&eacute;, vous pouvez ajouter des caract&egrave;res sp&eacute;ciaux.<br/>
+<br/>
+Bonne navigation sur Paris Classe Num&eacute;rique !<br/>
+<br/>
+<b>-------------------------------------------------------</b>
+{{/activationCode}}
+{{! Users that are activated }}
+{{^activationCode}}
+Bonjour,<br/>
+<br/>
+Ceci est un mail g&eacute;n&eacute;r&eacute; automatiquement qui contient vos informations de premi&egrave;re connexion &agrave; Paris Classe Num&eacute;rique.<br/>
+<br/>
+Vous poss&eacute;dez d&eacute;j&agrave; un compte sur l'ENT (environnement num&eacute;rique de travail).<br/>
+<br/>
+Votre identifiant de connexion est rappel&eacute; ci-contre : <b><i>{{login}}</i></b><br/>
+<br/>
+Si vous ne vous souvenez pas de votre mot de passe, vous pouvez en d&eacute;finir un nouveau en suivant les instructions ci-dessous :<br/>
+<br/>
+
+
+Rendez-vous &agrave; l'adresse <a href="https://www.parisclassenumerique.fr">www.parisclassenumerique.fr</a>,
+cliquez sur <b>"Se connecter"</b> en haut &agrave; droite de l'&eacute;cran puis cliquez sur "Besoin d'aide ?"<br/>
+Cliquez ensuite sur "Vous avez perdu votre mot de passe ?", saisissez votre identifiant puis cliquez sur "Envoyer".<br/>
+<br/>
+Un mail sera envoy&eacute; &agrave; l'adresse que vous avez saisie lors de l'activation de votre compte. Cliquez ensuite sur le lien hypertexte dans le mail re&ccedil;u pour d&eacute;finir votre nouveau mot de passe.<br/>
+<br/>
+Votre nouveau mot de passe doit contenir 8 caract&egrave;res minimum, dont au moins une majuscule, une minuscule et un chiffre. Il est recommand&eacute; de choisir un mot de passe associant chiffres, lettres, majuscules, minuscules et caract&egrave;res sp&eacute;ciaux.<br/>
+<br/>
+Bonne navigation sur Paris Classe Num&eacute;rique !<br/>
+<br/>
+<b>-------------------------------------------------------</b>
+{{/activationCode}}

package/dist/template/directory/massmail.pdf.xhtml

@@ -0,0 +1,266 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
+
+<head>
+	<title>Guide de prise en main ENT Paris</title>
+	<style type="text/css">
+		body{
+			font-family: Calibri, serif;
+			font-size: 94%;
+			line-height: 17px;
+		}
+		header{
+			margin-left: 350px;
+		}
+		ul{
+			padding: 0;
+			margin: 0;
+		}
+
+		ul li{
+			list-style: none;
+		}
+
+		div.twocolumnsUnactivated > div{
+			max-width: 50%;
+			display: inline-block;
+			vertical-align: top;
+		}
+		div.twocolumns > div{
+			max-width: 45%;
+			display: inline-block;
+			vertical-align: top;
+		}
+		p.title{
+			font-size: 22px;
+			color: #005c92;
+		}
+		p.bullet{
+			padding-left: 20px;
+		}
+		img#logo{
+			width: 300px;
+		}
+		img#login{
+			width: 350px;
+			padding-left: 10px;
+		}
+		img#login2, img#login2-1d{
+			width: 300px;
+		}
+		img#demandereinitialisation{
+			width: 300px;
+			padding-right: 30px;
+		}
+		img#login1d{
+			width: 300px;
+			padding-right: 30px;
+		}
+		img#login1d1{
+			width: 320px;
+			margin-right: 10px;
+		}
+		img#login{
+			width: 320px;
+			padding-left: 30px;
+		}
+		img#reinitialisation{
+			width: 300px;
+			padding-left: 30px;
+		}
+		.footer p{
+			text-align: right;
+		}
+		.unActivated{
+			margin-right: 2%;
+		}
+		.activated{
+			margin-right: 1%;
+		}
+	</style>
+</head>
+
+<body>
+{{#users}}
+
+{{! Users that are not activated }}
+{{#activationCode}}
+<div{{^end}} style="page-break-after: always"{{/end}}>
+	<header>
+        <img id="logo" src="illustrations/logo.png"></img>
+	</header>
+
+	<div>
+		<br/>
+		<br/>
+		<span><b>
+				&Agrave; l&apos;attention de {{firstName}} {{lastName}} {{^isInClass}}.{{/isInClass}} </b></span>
+		{{#child}}
+		<br/>
+		<span><b><mark style="background: yellowgreen">Parent de {{firstName}} {{lastName}} en classe de {{classname}}.</mark></b></span>
+		{{/child}}
+
+		{{^child}}
+		{{#isInClass}}
+		<span class="content"><b>en classe(s) de{{^classes}} {{classname}}{{/classes}}{{#classes}} {{.}}{{/classes}}.</b></span>
+		{{/isInClass}}
+		{{/child}}
+		<br/>
+		<br/>
+		<u>Objet</u> : Connexion &agrave; Paris Classe Num&eacute;rique
+		<br/>
+		<br/>
+	</div>
+	<ul>
+		<li>
+			<div class="twocolumns">
+				<div>
+					<p>
+						Pour vous connecter, rendez-vous sur <br/>
+						<a href="https://www.parisclassenumerique.fr/">www.parisclassenumerique.fr/</a>
+                        puis cliquez sur le bouton <b>"Se connecter"</b> en haut &agrave; droite de l'&eacute;cran.
+					</p>
+					<p>
+						Entrez ensuite vos coordonn&eacute;es personnelles :
+						<br/>
+						Identifiant : <b>{{login}}</b>
+						<br/>
+						Mot de passe : <b>{{activationCode}}</b>
+					</p>
+					<p>
+						Lors de votre premi&egrave;re connexion &agrave; l&apos;ENT il vous sera
+						demand&eacute; de choisir un nouveau mot de passe, d&apos;indiquer
+						votre adresse e-mail personnelle et, si vous le souhaitez,
+						de saisir un num&eacute;ro de t&eacute;l&eacute;phone portable.
+					</p>
+				</div>
+
+				<div>
+					<img src="login.png" alt="login" id="login"></img>
+				</div>
+			</div>
+
+			<div>
+				<div style="text-align: justify;">
+					<p>
+						Votre nouveau mot de passe doit contenir 8 caract&egrave;res minimum,
+						dont au moins une majuscule, une minuscule et un chiffre.
+						Pour plus de s&eacute;curit&eacute;, vous pouvez ajouter des caract&egrave;res sp&eacute;ciaux.
+					</p>
+					<p>
+						Notez bien ce mot de passe. En cas d&apos;oubli, il vous suffira de cliquer
+						sur « Besoin d&apos;aide » puis de rentrer votre identifiant et un nouveau
+						mot de passe sera envoy&eacute; sur votre adresse email personnelle.
+					</p>
+					<p>
+						&Agrave; partir de cette connexion, vous pourrez acc&eacute;der &agrave; l&apos;espace num&eacute;rique
+						de travail de votre &eacute;tablissement. Les &eacute;l&egrave;ves ont des identifiants distincts
+						de ceux de leurs parents. Nous vous rappelons qu&apos;il est indispensable de conserver
+						vos donn&eacute;es confidentielles.
+					</p>
+				</div>
+			</div>
+
+		</li>
+	</ul>
+
+	<div class="footer">
+		<p class="unActivated">
+			Bonne navigation !
+		</p>
+	</div>
+</div>
+{{/activationCode}}
+
+
+{{! Users that are activated }}
+{{^activationCode}}
+<div{{^end}} style="page-break-after: always"{{/end}}>
+	<header>
+		<img id="logo" src="illustrations/logo.png"></img>
+	</header>
+
+	<div>
+		<br/>
+		<br/>
+		<span><b>&Agrave;  l&apos;attention de {{firstName}} {{lastName}}  {{^isInClass}}.{{/isInClass}}</b></span>
+		{{#child}}
+		<br/>
+		<span><b><mark style="background: greenyellow">Parent de {{firstName}} {{lastName}} en classe de {{classname}}.</mark></b></span>
+		{{/child}}
+		{{^child}}
+		{{#isInClass}}
+		<span><b>en classe{{^classes}}{{#classname}} {{classname}}{{/classname}}{{/classes}}{{#classes}} {{.}}{{/classes}}.</b></span>
+		{{/isInClass}}
+		{{/child}}
+		<br/>
+		<br/>
+		<u>Objet</u> : Connexion &agrave; Paris Classe Num&eacute;rique
+		<p>
+			Vous poss&eacute;dez d&eacute;j&agrave; un compte sur l&apos;ENT. <br/>
+			Votre identifiant de connexion est rappel&eacute; ci-contre :<mark style="background: yellow"> <b>{{login}}</b></mark>
+		</p>
+
+		<p>
+			Si vous ne vous souvenez pas de votre mot de passe, vous pouvez en d&eacute;finir
+			un nouveau en suivant les instructions ci-dessous.
+		</p>
+
+	</div>
+
+	<p class="title">
+		1. Demande de r&eacute;initialisation de mot de passe
+	</p>
+
+	<ul>
+		<li>
+			<div>
+				<div>
+					<p class="bullet">
+						&bull; Allez sur le site <a href="https://www.parisclassenumerique.fr/">www.parisclassenumerique.fr</a><br/>
+                        &bull; Cliquez sur le bouton <b>"Se connecter"</b> en haut &agrave; droite de l'&eacute;cran.
+					</p>
+                    <div style="text-align: center">
+					    <img id="login2" src="login.png" alt="login2"></img>
+                    </div>
+					<p class="bullet">
+						&bull; Cliquez sur <b>Besoin d&apos;aide pour vous connecter ?</b> <br/>
+						&bull; Cliquez ensuite sur <b>Vous avez perdu votre mot de passe ?</b>
+						Saisissez votre <b>identifiant</b> puis cliquez sur <b>Envoyer</b>
+					</p>
+				</div>
+
+			</div>
+			<p>
+				Un mail sera envoy&eacute; &agrave; l&apos;adresse que vous avez saisie lors
+				de l&apos;activation de votre compte.
+			</p>
+
+			<p class="title">
+				2. R&eacute;initialisation de mot de passe
+			</p>
+			<p>
+				Cliquez ensuite sur le lien figurant dans le mail re&ccedil;u pour d&eacute;finir votre nouveau mot de passe. <br/>
+				Ce dernier doit contenir 8 caract&egrave;res minimum, dont au moins une majuscule,
+				une minuscule et un chiffre. Pour plus de s&eacute;curit&eacute;, vous pouvez ajouter des caract&egrave;res sp&eacute;ciaux.<br/>
+				&Agrave; partir de cette connexion, vous pourrez acc&eacute;der &agrave; l&apos;espace num&eacute;rique de travail de votre &eacute;tablissement.
+				Les &eacute;l&egrave;ves ont des identifiants distincts de ceux de leurs parents.
+			</p>
+			<p>
+				Nous vous rappelons qu&apos;il est indispensable de conserver vos donn&eacute;es confidentielles.
+			</p>
+
+		</li>
+	</ul>
+	<div class="footer">
+		<p class="activated">
+			Bonne navigation !
+		</p>
+	</div>
+</div>
+{{/activationCode}}
+{{/users}}
+</body>
+
+</html>

package/dist/template/directory/massmail_new/massmail_new.pdf.de.xhtml

@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+    <!-- We use this i18n key to ensure portability because it is overriden by themes  -->
+	<title>{{#i18n}}directory.admin.massMailing{{/i18n}}</title>
+    <style type="text/css">
+			body {
+				font-family: sans-serif;
+				color: #333;
+			}
+			h2 {font-size: 1.2em}
+			h3 {font-size: 1.1em}
+			h4 {margin-left: 1.1em}
+			strong,
+			a,
+			.red {
+				font-weight: bold;
+				color: #d1232a;
+			}
+			ol li {
+				padding: 10px 0;
+				margin-left: -20px;
+			}
+			.column {
+				width: 30%;
+				margin: 1%;
+				display: inline-block;
+				vertical-align: top;
+				text-align: center;
+				font-size: 0.8em;
+			}
+			.column img {
+				width: 75px;
+				text-align: center;
+			}
+      .center{
+        text-align: center;
+      }
+      #right{
+				text-align: right;
+			}
+			.inline-block .baseline,
+			.inline-block #logo {
+				display: inline-block;
+				vertical-align: middle;
+			}
+      #logo{
+				width: 150px;
+			}
+			.baseline {
+				text-align: right;
+				color: #666;
+				letter-spacing: 2px;
+				font-weight: lighter;
+				padding: 5px;
+				border-bottom: 2px solid transparent;
+			}
+			.neo {
+				border-color: #4bafd5;
+			}
+			.one {
+				border-color: #FF8500;
+			}
+			{{#A5}}
+			@page {
+				size: landscape;
+			}
+			body {
+				font-size: 0.7em;
+			}
+			.size {
+				display: inline-block;
+				vertical-align: top;
+				width: 47%;
+				margin: 0 1%;
+			}
+			.column img {
+				width: 50px;
+			}
+			#logo {
+				width: 100px;
+			}
+			{{/A5}}
+	</style>
+</head>
+
+<body>
+
+{{#users}}
+
+<div class="size"{{^end}} style="page-break-after: always"{{/end}}>
+	<div class="inline-block">
+		<img id="logo" src="logo.png"></img>
+		<p class="baseline one">Die virtuelle Arbeitsplattform der Primarschulen</p>
+	</div>
+	{{^activationCode}}
+	<h2>Infos zu meinem Konto</h2>
+	{{/activationCode}}
+	{{#activationCode}}
+	<h2>Meine erste Anmeldung in 5 Schritten</h2>
+	{{/activationCode}}
+    <h3> » Dieses Datenblatt ist bestimmt für <strong>{{firstName}} {{lastName}}</strong></h3>
+	  {{^isGuestOrPersonnel}}
+    <h4>{{^firstChild}}{{#i18n}}{{profile}}{{/i18n}}{{/firstChild}}{{#firstChild}}Elter von <strong>{{firstName}} {{lastName}}</strong>{{#otherChildren}}, <strong>{{firstName}} {{lastName}}</strong>{{/otherChildren}}{{/firstChild}}{{#firstClass}} in der Klasse <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</h4>
+	  {{/isGuestOrPersonnel}}
+	  {{#isGuestOrPersonnel}}
+    <h4>{{#i18n}}{{profile}}{{/i18n}}.</h4>
+  	{{/isGuestOrPersonnel}}
+    <p>Der den Lehrpersonen, den Personalmitgliedern, den Schülern und ihrer Familie vorbehaltene Plattform ist eine gesicherte und leicht zu handhabende digitale Lösung, die dazu dient:</p>
+    <div class="column">
+        <img src="illustrations/Publipostage_Messagerie.png"></img>
+        <p>Die Austauschprozesse zwischen Schule und Elternhaus zu vereinfachen</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Cahier_Multimedia.png"></img>
+        <p>Interaktive pädagogische Inhalte zu erstellen</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Blog.png"></img>
+        <p>Die in der Klasse durchgeführten Projekte bekanntzumachen</p>
+    </div>
+    {{^activationCode}}
+    <h2> » Wie melde ich mich an?</h2>
+    <p>Sie besitzen bereits ein Konto auf der virtuellen Plattform. Sie müssen nur noch Ihren normalen Benutzernamen
+	und das bei Ihrer ersten Anmeldung festgelegte Passwort eingeben.
+    <br />Zur Erinnerung Ihr Benutzername:</p>
+    <p class="center red">{{login}}</p>
+    <br />
+    <h2> » 3 Schritte zum Zurücksetzen meines Passworts</h2>
+    <ol>
+			<li>Bei Vergessen des Passworts gehen Sie auf <a href="{{host}}://{{hostname}}">{{hostname}}</a> und klicken Sie auf<br />« Passwort vergessen ».</li>
+			<li>Geben Sie Ihren Benutzernamen ein und klicken Sie auf « Senden ». Es wird nun eine E-Mail an die bei der Aktivierung Ihres Kontos angegebene Adresse gesendet.</li>
+			<li>Öffnen Sie die E-Mail und klicken Sie dann auf den Link zur Festlegung Ihres neuen Passworts.</li>
+		</ol>
+    {{/activationCode}}
+    {{#activationCode}}
+    <h2> » Anleitung für meine erste Anmeldung</h2>
+    <ol>
+			<li>Gehen Sie zur Anmeldung auf <a href="{{host}}://{{hostname}}">{{hostname}}</a> und klicken Sie auf « Login ».</li>
+			<li>Geben Sie Ihren Benutzernamen (für spätere Anmeldungen aufbewahren) und Ihren Aktivierungscode ein: 
+				<div class="center">
+					<p class="red">Benutzername: {{login}}</p>
+					<p class="red">Aktivierungscode: {{activationCode}}</p>
+				</div>
+			</li>
+			<li>Wählen Sie ein neues Passwort, das aus mindestens 8 Zeichen besteht <strong>und mindestens einen Großbuchstaben, einen Kleinbuchstaben und eine Ziffer enthält</strong>.</li>
+			<li>Geben Sie Ihre persönliche E-Mail-Adresse ein, damit Sie bei Vergessen des Passworts eine E-Mail zum Zurücksetzen des Passworts erhalten.</li>
+			<li>Jetzt müssen Sie nur noch die Allgemeinen Nutzungsbedingungen lesen und akzeptieren.</li>
+		</ol>
+    {{/activationCode}}
+    <p id="right">Viel Vergnügen beim Navigieren!</p>
+</div>
+{{/users}}
+</body>
+
+</html>

package/dist/template/directory/massmail_new/massmail_new.pdf.en.xhtml

@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+    <!-- We use this i18n key to ensure portability because it is overriden by themes  -->
+	<title>{{#i18n}}directory.admin.massMailing{{/i18n}}</title>
+    <style type="text/css">
+			body {
+				font-family: sans-serif;
+				color: #333;
+			}
+			h2 {font-size: 1.2em}
+			h3 {font-size: 1.1em}
+			h4 {margin-left: 1.1em}
+			strong,
+			a,
+			.red {
+				font-weight: bold;
+				color: #d1232a;
+			}
+			ol li {
+				padding: 10px 0;
+				margin-left: -20px;
+			}
+			.column {
+				width: 30%;
+				margin: 1%;
+				display: inline-block;
+				vertical-align: top;
+				text-align: center;
+				font-size: 0.8em;
+			}
+			.column img {
+				width: 75px;
+				text-align: center;
+			}
+      .center{
+        text-align: center;
+      }
+      #right{
+				text-align: right;
+			}
+			.inline-block .baseline,
+			.inline-block #logo {
+				display: inline-block;
+				vertical-align: middle;
+			}
+      #logo{
+				width: 150px;
+			}
+			.baseline {
+				text-align: right;
+				color: #666;
+				letter-spacing: 2px;
+				font-weight: lighter;
+				padding: 5px;
+				border-bottom: 2px solid transparent;
+			}
+			.neo {
+				border-color: #4bafd5;
+			}
+			.one {
+				border-color: #FF8500;
+			}
+			{{#A5}}
+			@page {
+				size: landscape;
+			}
+			body {
+				font-size: 0.7em;
+			}
+			.size {
+				display: inline-block;
+				vertical-align: top;
+				width: 47%;
+				margin: 0 1%;
+			}
+			.column img {
+				width: 50px;
+			}
+			#logo {
+				width: 100px;
+			}
+			{{/A5}}
+	</style>
+</head>
+
+<body>
+
+{{#users}}
+
+<div class="size"{{^end}} style="page-break-after: always"{{/end}}>
+	<div class="inline-block">
+    	<img id="logo" src="logo.png"></img>
+    	<p class="baseline one">The digital learning environment for primary schools</p>
+	</div>
+	{{^activationCode}}
+	<h2>Information about my account</h2>
+	{{/activationCode}}
+	{{#activationCode}}
+	<h2>Sign in for the first time in 5 steps</h2>
+	{{/activationCode}}
+    <h3> » This document is for <strong>{{firstName}} {{lastName}}</strong></h3>
+	  {{^isGuestOrPersonnel}}
+    <h4>{{^firstChild}}{{#i18n}}{{profile}}{{/i18n}}{{/firstChild}}{{#firstChild}}The parent of <strong>{{firstName}} {{lastName}}</strong>{{#otherChildren}}, <strong>{{firstName}} {{lastName}}</strong>{{/otherChildren}}{{/firstChild}}{{#firstClass}} in class <strong>{{.}}</strong>{{#otherClasses}}, <strong>{{.}}</strong>{{/otherClasses}}{{/firstClass}}.</h4>
+	  {{/isGuestOrPersonnel}}
+	  {{#isGuestOrPersonnel}}
+    <h4>{{#i18n}}{{profile}}{{/i18n}}.</h4>
+  	{{/isGuestOrPersonnel}}
+    <p>Designed for teachers, school personnel, students, and their families, the virtual learning environment is a secure and easy-to-use digital solution for:</p>
+    <div class="column">
+        <img src="illustrations/Publipostage_Messagerie.png"></img>
+        <p>Streamlining communication between school and home</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Cahier_Multimedia.png"></img>
+        <p>Creating interactive educational content</p>
+    </div>
+    <div class="column">
+        <img src="illustrations/Publipostage_Blog.png"></img>
+        <p>Promoting the projects you've completed in class</p>
+    </div>
+    {{^activationCode}}
+    <h2> » How do I sign in?</h2>
+    <p>You already have an account in the virtual learning environment. All you have to do
+	is enter your normal username and the password you selected the first time you signed in.
+    <br />As a reminder, your username is:</p>
+    <p class="center red">{{login}}</p>
+    <br />
+    <h2> » Resetting your password in three steps</h2>
+    <ol>
+			<li>If you forget your password, visit <a href="{{host}}://{{hostname}}">{{hostname}}</a> and click on « Forgotten password ».</li>
+			<li>Enter your username, then click « Send ». An email will be sent to the address you provided when you activated your account.</li>
+			<li>Open the email and click on the link to reset your password.</li>
+		</ol>
+    {{/activationCode}}
+    {{#activationCode}}
+    <h2> » Signing in for the first time</h2>
+    <ol>
+			<li>To sign in, visit <a href="{{host}}://{{hostname}}">{{hostname}}</a> and click « Sign in ».</li>
+			<li>Enter your username (and be sure to make note of it so you can sign in again later) and your activation code:
+				<div class="center">
+					<p class="red">Username: {{login}}</p>
+					<p class="red">Activation code: {{activationCode}}</p>
+				</div>
+			</li>
+			<li>Choose a new password with at least 8 characters, <strong>including at least one uppercase letter, one lowercase letter, and a number</strong>.</li>
+			<li>Enter your personal email address so you can receive a reset email in case you forget your password.</li>
+			<li>All that's left is to read and accept the terms and conditions.</li>
+		</ol>
+    {{/activationCode}}
+    <p id="right">Enjoy!</p>
+</div>
+{{/users}}
+</body>
+
+</html>