diff --git a/index.html b/index.html index d6af588..70a3d19 100644 --- a/index.html +++ b/index.html @@ -7,33 +7,46 @@ +
+ Logo de Picasoft +
-
- Logo de Picasoft -

Portail des pads collaboratifs - Picasoft

-
+

Portail des pads collaboratifs

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.

- -
- CodiMD screenshot - EtherPad screenshot - WhitheBoard screenshot +
+
+ CodiMD + CodiMD screenshot +
+
+ EtherPad + EtherPad screenshot +
+
+ WhiteBoard + WhitheBoard screenshot +

Quel outil est adapté à mes besoins ?

-

Je souhaite faire une simple prise de notes seul ou avec des amis, rapidement et sans inscription

+

Je souhaite faire une simple prise de notes seul·e ou avec des ami·e·s, rapidement et sans inscription

- 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.
+ Dans ce cas la mise en forme m'importe peu, ce que je veux c'est pouvoir utiliser un espace d'échange où chacun peut 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 ami·e·s. 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.
Exemples : Notes de cours, brouillon avant de rédiger un rapport, partager des informations et des liens.

Je souhaite rédiger en collaboration un compte-rendu ou une documentation

- 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.
+ J'ai besoin d'une mise en forme plus avancée 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é·e·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.
Exemples : Compte-rendu de réunion, documentation d'un projet, tutoriel.

Je souhaite partager un tableau blanc afin de dessiner "à la main"

diff --git a/logo_picasoft_white.svg b/logo_picasoft_white.svg new file mode 100644 index 0000000..dea6e3f --- /dev/null +++ b/logo_picasoft_white.svg @@ -0,0 +1,120 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + diff --git a/main.css b/main.css index 51d28cf..b68ea20 100644 --- a/main.css +++ b/main.css @@ -1,10 +1,16 @@ +/*--------+ +| General | +---------*/ + *{ margin: 0; box-sizing: border-box; } + html{ height: 100%; } + body{ background-repeat: no-repeat; background-size: cover cover; @@ -12,94 +18,35 @@ body{ font-family: sans-serif; height: 100%; } -#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: 20%; - 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%; min-height: 100%; margin: auto; + margin-top: 80px; background-color: white; padding-right: 40px; padding-left: 40px; } -#content:first-child{ - margin-top: 0; + +/*----------------------+ +| Links to the services | ++----------------------*/ + +.cards{ + display: flex; + justify-content: space-between; + flex-direction: row; + margin-top: 30px; + margin-bottom: 30px; } -#content:last-child{ - margin-bottom: 0; + +.card{ + width: 30%; } -p{ - padding: 10px; - text-align: justify; -} -h2, h3{ - padding-top: 10px; - 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{ + +.card a{ + display: block; background-color: #0e610e; padding: 15px; border-radius: 10px; @@ -107,17 +54,134 @@ h2, h3{ font-weight: bold; text-decoration: none; transition: 0.5s; - display: inline-block; + width: 100%; + text-align: center; + margin-bottom: 10px; } -#link a:hover{ + +.card a:hover{ background-color: #1b8c1b; - transform: scale(1.1); + transform: scale(1.05); } -#link-wb input{ + +.card img{ + display: block; + width: 100%; + height: auto; +} + +/*-----+ +| Text | ++-----*/ + +h1{ + text-align: center; +} + + +h1, h2, h3{ + padding-top: 10px; + padding-bottom: 10px; + color: #080a4d; +} + +p{ + padding: 10px; + text-align: justify; +} + +/*-------+ +| Header | ++-------*/ + +header img{ + height: auto; + width: 60px; + vertical-align: middle; display: inline-block; - width: 80%; +} + +header{ + padding: 10px; + background-color: #2c3e50; + color: white; + position: fixed; + width: 100%; + top: 0; + left: 0; + z-index: 10; +} + +header ul{ + padding: 0; + list-style-type: none; + display: inline-block; + width: 50%; +} + +header ul:last-child{ + width: calc(50% - 60px); + text-align: right; +} + +header li{ + display: inline-block; + transition: 0.5s; + padding: 10px; + border-radius: 10px; + font-weight: bold; +} + +header li:hover{ + background-color: rgba(255, 255, 255, .3); +} + +header a{ + color: inherit; + text-decoration: inherit; +} + +/*-------------+ +| WB interface | ++-------------*/ + +#wb-interface a{ + display: inline-block; + vertical-align: middle; + width: 40%; + text-align: center; + background-color: #0e610e; + padding: 15px; + border-radius: 10px; + color: white; + font-weight: bold; + text-decoration: none; + transition: 0.5s; + margin-right: 20%; +} + +#wb-interface form{ + display: inline-block; + vertical-align: middle; + width: 40%; + text-align: center; +} + +#wb-interface a:hover{ + background-color: #1b8c1b; + transform: scale(1.05); +} + +/*------+ +| Forms | +-------*/ + +input{ + display: inline-block; + width: 100%; margin-bottom: 15px; } + input[type="submit"]{ background-color: #0e610e; padding: 15px; @@ -129,10 +193,12 @@ input[type="submit"]{ text-align: center; border: none; } + input[type="submit"]:hover{ background-color: #1b8c1b; - transform: scale(1.1); + transform: scale(1.05); } + input[type="text"]{ padding: 10px; border-radius: 10px; @@ -141,6 +207,7 @@ input[type="text"]{ text-align: center; border: solid #BFBFBF 3px; } + input[type="text"]:hover, input[type="text"]:focus{ border: solid #999999 3px; } diff --git a/picasoft_logo.png b/picasoft_logo.png deleted file mode 100644 index 594dbd1..0000000 Binary files a/picasoft_logo.png and /dev/null differ diff --git a/whiteboard.html b/whiteboard.html index d1bbf48..5402429 100644 --- a/whiteboard.html +++ b/whiteboard.html @@ -7,15 +7,23 @@ +
+ Logo de Picasoft +
-
- Logo de Picasoft -

WhiteBoard - Picasoft

-
-