Added WhiteBoard portal
This commit is contained in:
parent
372660cf28
commit
1bb3504d80
GPG Key ID:
534845FADDF0C329
|
|
@ -16,9 +16,9 @@
|
|||
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>
|
||||
<a href="https://pad.rhizome-fai.net/">CodiMD</a>
|
||||
<a href="https://week.pad.picasoft.net/">EtherPad</a>
|
||||
<a href="whiteboard.html">WhiteBoard</a>
|
||||
</div>
|
||||
<div id="app-img">
|
||||
<img src="codimd.png" alt="CodiMD screenshot" />
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</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>
|
||||
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 (<a href="https://pad.rhizome-fai.net/features">liste complète des fonctionnalités</a>). 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>
|
||||
|
|
|
|||
70
main.css
70
main.css
|
|
@ -2,11 +2,15 @@
|
|||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html{
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover cover;
|
||||
background-attachment: fixed;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
#app-links{
|
||||
display: flex;
|
||||
|
|
@ -23,7 +27,7 @@ body{
|
|||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
width: 15%;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
#app-links a:hover{
|
||||
|
|
@ -56,6 +60,7 @@ h1{
|
|||
}
|
||||
#content{
|
||||
width: 80%;
|
||||
min-height: 100%;
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
padding-right: 40px;
|
||||
|
|
@ -76,3 +81,66 @@ h2, h3{
|
|||
padding-bottom: 10px;
|
||||
color: #080a4d;
|
||||
}
|
||||
#link-wb #link{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: calc(40% - 40px);
|
||||
text-align: center;
|
||||
}
|
||||
#link-wb form{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: calc(40% - 40px);
|
||||
text-align: center;
|
||||
}
|
||||
#link-wb #or{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
#link a{
|
||||
background-color: #0e610e;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
display: inline-block;
|
||||
}
|
||||
#link a:hover{
|
||||
background-color: #1b8c1b;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
#link-wb input{
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
input[type="submit"]{
|
||||
background-color: #0e610e;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
input[type="submit"]:hover{
|
||||
background-color: #1b8c1b;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
input[type="text"]{
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
border: solid #BFBFBF 3px;
|
||||
}
|
||||
input[type="text"]:hover, input[type="text"]:focus{
|
||||
border: solid #999999 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WhiteBoard - 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>WhiteBoard - Picasoft</h1>
|
||||
</div>
|
||||
<div id="link-wb">
|
||||
<p id="link"><a href="https://wb.pad.test.picasoft.net/?randomid=true">Nouveau tableau rapide</a></p>
|
||||
<p id="or">OU</p>
|
||||
<form action="https://wb.pad.test.picasoft.net" method="GET">
|
||||
<label for="name">Nom du pad : </label><br />
|
||||
<input type="text" id="name" name="title" /><br />
|
||||
<label for="id">ID du pad : </label><br />
|
||||
<input type="text" id="id" name="whiteboardid" /><br />
|
||||
<label for="username">Nom d'utilisateur : </label><br />
|
||||
<input type="text" id="username" name="username" /><br />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
<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>
|
||||
Reference in New Issue