Browse Source

Initial commit

master
Romain de Laage 2 years ago
commit
372660cf28
Signed by: rdelaage
GPG Key ID: 534845FADDF0C329
  1. BIN
      codimd.png
  2. BIN
      etherpad.png
  3. 62
      index.html
  4. 78
      main.css
  5. BIN
      picasoft_logo.png
  6. 1
      trianglify.min.js
  7. BIN
      whiteboard.png

BIN
codimd.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

BIN
etherpad.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 864 KiB

62
index.html

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Portail des pads collaboratifs - Picasoft</title>
<script src="trianglify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta charset="utf8" />
</head>
<body>
<div id="content">
<div id="title">
<img src="picasoft_logo.png" alt="Logo de Picasoft" />
<h1>Portail des pads collaboratifs - Picasoft</h1>
</div>
<p>
Nous vous proposons plusieurs outils de pads collaboratifs pouvant correspondre à vos besoins. Du simple néophite en informatique à l'expert en MarkDown et en LaTeX, chacun y trouvera son bonheur. Vous trouverez ci-dessous un petit guide afin de choisir quel outil est adapté à vos besoins. Vous pouvez aussi trouver un petit guide pour débuter avec la syntaxe MarkDown.
</p>
<div id="app-links">
<a href="#">CodiMD</a>
<a href="#">EtherPad</a>
<a href="#">WhiteBoard</a>
</div>
<div id="app-img">
<img src="codimd.png" alt="CodiMD screenshot" />
<img src="etherpad.png" alt="EtherPad screenshot" />
<img src="whiteboard.png" alt="WhitheBoard screenshot" />
</div>
<h2>Quel outil est adapté à mes besoins ?</h2>
<h3>Je souhaite faire une simple prise de notes seul ou avec des amis, rapidement et sans inscription</h3>
<p>
Dans ce cas la mise en forme m'importe peu, ce que je veux c'est pouvoir utiliser un espace d'échange où chacun peu contribuer et placer ses idées. Nous vous conseillons alors une instance EtherPad. Ce logiciel est intuitif et simple à prendre en main, aucune inscription n'est requise et c'est rapide. Il s'uffit d'entrer un nom pour votre Pad et de partager l'addresse à vos amis. Vous avez accès à un historique des modifications et votre Pad sera sauvegardé pendant un an après les dernières modifications. Cependant les capacités de mise en forme sont réduites au strict nécessaire.<br>
<span style="font-style: italic;">Exemples :</span> Notes de cours, brouillon avant de rédiger un rapport, partager des informations et des liens.
</p>
<h3>Je souhaite rédiger en collaboration un compte-rendu ou une documentation</h3>
<p>
J'ai besoin d'une mise en forme plus avancé et de fonctionnalités supplémentaires (tableaux, formules mathématiques, diagrammes, ...). J'ai toujours besoin de collaborer avec mes camarades mais nous sommes moins pressés et nous pouvons nous inscrire sur le service afin de faciliter la collaboration. Nous vous conseillons CodiMD. Ce logiciel permet d'accéder à une mise en forme avancée à l'aide d'une syntaxe MarkDown complétée de plusieurs fonctionnalités comme LaTeX pour des formules ou la possobilité de faire des diagramme (liste complète des fonctionnalités). L'inscription n'est pas obligatoire mais elle est tout de même recommandée. On peut mettre le pad en lecture-seule et accéder à un mode de publication.<br>
<span style="font-style: italic;">Exemples :</span> Compte-rendu de réunion, documentation d'un projet, tutoriel.
</p>
<h3>Je souhaite partager un tableau blanc afin de dessiner "à la main"</h3>
<p>
J'ai besoin de povoir dessiner sur une "feuille" avec des fonctions telles qu'un crayon, une règle, un compas, ... Il faut me tourner vers un outil comme WhiteBoard. Pas besoin de s'inscrire, il suffit de passer l'URL et de dessiner. Attention il n'y a pas de lecture-seule et pas de sauvegarde, pensez à exporter si besoin.<br>
<span style="font-style: italic;">Exemples :</span> Tableau de TD/Cours, brouillon de maths.
</p>
<script>
// Create Trianglify pattern - feel free to use whatever settings here
// **NOTE: Must export as svg with namespace included ".svg({ includeNamespace: true })"
var pattern = Trianglify({
height: window.innerHeight,
width: window.innerWidth,
}).svg({ includeNamespace: true });
// Take Trianglify SVG pattern and serialize it into XML string
var patternString = new XMLSerializer().serializeToString(pattern);
// URL encode the pattern and set into the proper format for SVG background
var patternMin = 'url("data:image/svg+xml,' + encodeURIComponent(patternString) + '")';
document.body.style.backgroundImage = patternMin;
</script>
</div>
</body>
</html>

78
main.css

@ -0,0 +1,78 @@
*{
margin: 0;
box-sizing: border-box;
}
body{
background-repeat: no-repeat;
background-size: cover cover;
background-attachment: fixed;
font-family: sans-serif;
}
#app-links{
display: flex;
justify-content: space-around;
flex-direction: row;
margin-top: 30px;
margin-bottom: 30px;
}
#app-links a{
background-color: #0e610e;
padding: 15px;
border-radius: 10px;
color: white;
font-weight: bold;
text-decoration: none;
transition: 0.5s;
width: 15%;
text-align: center;
}
#app-links a:hover{
background-color: #1b8c1b;
transform: scale(1.1);
}
#app-img{
display: flex;
justify-content: space-around;
flex-direction: row;
margin-top: 30px;
margin-bottom: 30px;
}
#app-img img{
width: 20%;
height: auto;
}
h1{
display: inline-block;
vertical-align: middle;
}
#title img{
height: 50px;
width: auto;
vertical-align: middle;
}
#title{
text-align: center;
padding: 10px;
}
#content{
width: 80%;
margin: auto;
background-color: white;
padding-right: 40px;
padding-left: 40px;
}
#content:first-child{
margin-top: 0;
}
#content:last-child{
margin-bottom: 0;
}
p{
padding: 10px;
text-align: justify;
}
h2, h3{
padding-top: 10px;
padding-bottom: 10px;
color: #080a4d;
}

BIN
picasoft_logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

1
trianglify.min.js vendored

File diff suppressed because one or more lines are too long

BIN
whiteboard.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB