Browse Source

Changed style and upgraded whiteboard panel

master
Romain de Laage 2 years ago
parent
commit
bc6d6a0c1c
Signed by: rdelaage
GPG Key ID: 534845FADDF0C329
  1. 45
      index.html
  2. 120
      logo_picasoft_white.svg
  3. 187
      main.css
  4. BIN
      picasoft_logo.png
  5. 263
      whiteboard.html

45
index.html

@ -7,33 +7,46 @@
<meta charset="utf8" />
</head>
<body>
<header>
<img src="logo_picasoft_white.svg" alt="Logo de Picasoft" /><!--
--><ul>
<a href="https://md.pad.test.picasoft.net/"><li>CodiMD</li></a>
<a href="https://week.pad.picasoft.net/"><li>EtherPad</li></a>
<a href="whiteboard.html"><li>WhiteBoard</li></a>
</ul><!--
--><ul>
<a href="https://picasoft.net/co/cgu.html"><li>CGU</li></a>
<a href="mailto:picasoft@assos.utc.fr"><li>Contact</li></a>
</ul>
</header>
<div id="content">
<div id="title">
<img src="picasoft_logo.png" alt="Logo de Picasoft" />
<h1>Portail des pads collaboratifs - Picasoft</h1>
</div>
<h1>Portail des pads collaboratifs</h1>
<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="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" />
<img src="etherpad.png" alt="EtherPad screenshot" />
<img src="whiteboard.png" alt="WhitheBoard screenshot" />
<div class="cards">
<div class="card">
<a href="https://md.pad.test.picasoft.net/">CodiMD</a>
<img src="codimd.png" alt="CodiMD screenshot" />
</div>
<div class="card">
<a href="https://week.pad.picasoft.net/">EtherPad</a>
<img src="etherpad.png" alt="EtherPad screenshot" />
</div>
<div class="card">
<a href="whiteboard.html">WhiteBoard</a>
<img src="whiteboard.png" alt="WhitheBoard screenshot" />
</div>
</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>
<h3>Je souhaite faire une simple prise de notes seul·e ou avec des ami·e·s, 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>
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.<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 (<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>
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 (<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>

120
logo_picasoft_white.svg

@ -0,0 +1,120 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new"
id="svg5580"
version="1.1"
viewBox="0 0 120 120"
height="120mm"
width="120mm"
sodipodi:docname="logo_picasoft_white.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="704"
id="namedview19"
showgrid="false"
inkscape:zoom="0.52034722"
inkscape:cx="216.20179"
inkscape:cy="226.77165"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg5580" />
<defs
id="defs5574" />
<metadata
id="metadata5577">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="picasoft_logo_fond_noir"
transform="translate(-32.506122,-7.0588434)">
<g
id="layer10"
style="display:inline">
<path
style="display:inline;fill:#ffffff;fill-opacity:0.58823529;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
d="m 69.015211,83.111666 c 0.03133,-0.615271 3.537744,-0.978125 8.804872,-1.016568 1.911624,0.04462 4.216154,0.175588 6.580278,0.58552 0.815679,0.138499 1.711581,0.329921 2.634368,0.653292 0.364768,0.07244 0.853411,0.276064 1.388583,0.683257 0.232165,0.176645 0.471626,0.390524 0.712126,0.646576 0.529775,0.698664 0.861501,1.382016 1.094882,1.959861 0.369109,0.862869 0.659774,1.717102 0.905951,2.521922 0.662259,2.159645 1.116236,4.263416 1.436066,6.032917 0.728654,4.685654 0.901463,7.789917 0.341855,7.929397 0,0 -10e-7,0 -10e-7,0 -0.0061,0.001 -0.006,0.001 -0.006,0.001 4.2e-5,-1e-5 8.1e-5,0 -0.006,0.001 0,0 -10e-7,0 -10e-7,0 -0.568667,0.0971 -1.738926,-2.79168 -3.065283,-7.283818 -0.52027,-1.610626 -1.178868,-3.717053 -1.871318,-5.622891 -0.269804,-0.741459 -0.553322,-1.49116 -0.875352,-2.192851 -0.246532,-0.508517 -0.440857,-0.944736 -0.667369,-1.203143 0.04555,0.0095 0.05379,0.01542 0.02972,0.01193 -0.05637,-0.0082 -0.278758,-0.06597 -0.590325,-0.237993 -0.633543,-0.238465 -1.358871,-0.403779 -2.103773,-0.565589 -2.063966,-0.441153 -4.327425,-0.743027 -6.132637,-1.00101 -5.194671,-0.570881 -8.641925,-1.288334 -8.61061,-1.903342 z"
id="path4670"
inkscape:connector-curvature="0" />
<path
id="path4996-8"
d="m 111.29758,46.441617 c -0.003,-0.0051 -0.005,-0.01049 -0.006,-0.01604 -0.002,-0.0054 -0.003,-0.01105 -0.004,-0.01685 -0.002,-0.01159 -0.002,-0.02391 -6.6e-4,-0.03696 0,0 0,0 0,0 v 0 c 0.003,-0.02606 0.0115,-0.05496 0.0264,-0.08667 0,0 0,0 0,0 v 0 c 0.0297,-0.06321 0.0835,-0.137342 0.16044,-0.221731 v 0 c 0.1528,-0.167688 0.39613,-0.375001 0.72278,-0.616284 v 0 c 0.6427,-0.474722 1.60209,-1.076682 2.82414,-1.758641 v 0 c 2.30128,-1.284404 5.5584,-2.869756 9.31465,-4.320967 0.51716,-0.199831 1.04477,-0.397402 1.58136,-0.590905 1.31148,-0.472938 2.5889,-0.889908 3.83881,-1.250767 1.86983,-0.540615 3.57749,-0.927229 5.20554,-1.160175 1.73638,-0.253501 3.16286,-0.293567 4.4351,-0.114955 0.69321,0.09602 1.26413,0.262665 1.7267,0.4767 0.92602,0.422082 1.15989,0.952714 1.06145,1.078233 -0.10606,0.135219 -0.57791,-0.01181 -1.33989,-0.06719 -0.43327,-0.02916 -0.87818,-0.02133 -1.50109,0.03067 -1.17756,0.09962 -2.29552,0.326484 -3.95831,0.745959 -1.52554,0.390736 -3.05245,0.859256 -4.86894,1.462699 -1.20007,0.399264 -2.41545,0.823939 -3.70173,1.287856 -0.52305,0.188646 -1.04091,0.37767 -1.55043,0.564904 -3.71058,1.363744 -7.01903,2.646494 -9.49069,3.520953 v 0 c -1.30313,0.461084 -2.37709,0.811842 -3.14243,1.008043 v 0 c -0.39026,0.100047 -0.70292,0.160618 -0.92757,0.176436 v 0 c -0.11324,0.008 -0.20444,0.0046 -0.27228,-0.01078 v 0 c 0,0 0,0 0,0 -0.034,-0.0077 -0.0622,-0.01844 -0.0844,-0.03227 v 0 c 0,0 0,0 0,0 -0.0111,-0.0069 -0.0207,-0.01463 -0.0288,-0.02311 -0.004,-0.0042 -0.008,-0.0087 -0.011,-0.01334 -0.003,-0.0047 -0.006,-0.0097 -0.009,-0.01483 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path4998-5"
d="m 120.74638,56.093617 c -0.20562,-0.29451 0.82385,-1.410843 2.6583,-2.982487 0,0 0,0 0,0 1.71493,-1.487187 4.10376,-3.376116 6.81324,-5.439813 0.27419,-0.208838 0.55124,-0.419139 0.8311,-0.631017 1.01341,-0.767239 2.06974,-1.559598 2.99785,-2.253291 1.28003,-0.956988 2.45917,-1.833304 3.49104,-2.608395 1.08902,-0.820549 1.99438,-1.505167 2.68751,-2.053627 0.37218,-0.295803 0.67246,-0.534425 0.91018,-0.730021 0,0 0,0 0,0 0.34841,-0.305464 0.6378,-0.498197 0.74358,-0.471749 0.16038,0.04009 0.23366,0.400011 0.001,0.985325 0,-10e-7 0,0 0,0 -0.13137,0.344583 -0.33675,0.721379 -0.62985,1.155014 -0.55748,0.827526 -1.30167,1.690481 -2.31873,2.712267 -0.95358,0.959399 -2.04556,1.949765 -3.30573,3.005175 -0.93158,0.780345 -1.92556,1.570551 -2.97993,2.368793 -0.28322,0.21442 -0.56517,0.425166 -0.84525,0.632038 -2.76314,2.040916 -5.36125,3.71937 -7.33425,4.840739 0,0 0,10e-7 0,10e-7 -2.11165,1.183524 -3.51455,1.765585 -3.7202,1.471048 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5000-8"
d="m 119.62878,56.703217 c 0.2693,-0.0936 1.08944,1.462402 2.26985,4.201523 0,0 0,1e-6 0,1e-6 1.0105,2.747842 2.07054,6.705728 2.45773,11.521844 0.23428,2.925856 0.20217,6.113789 -0.24553,9.434785 -0.30279,2.246101 -0.77292,4.383286 -1.38107,6.395867 0,0 0,3e-6 0,3e-6 -1.65539,5.458879 -4.25599,9.649814 -6.41365,12.38145 -2.16058,2.73535 -3.81915,3.98797 -4.02102,3.80896 -0.25602,-0.22704 0.96356,-1.85665 2.67623,-4.7364 1.71746,-2.887816 3.88834,-7.007875 5.29646,-12.164493 0,0 0,-2e-6 0,-2e-6 0.52281,-1.906454 0.93688,-3.919651 1.22155,-6.038227 0.42062,-3.130279 0.51225,-6.143793 0.40405,-8.934388 -0.17586,-4.584332 -0.86745,-8.410048 -1.45301,-11.206352 0,0 0,-10e-7 0,-10e-7 -0.75994,-2.843333 -1.08076,-4.571019 -0.81159,-4.66457 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5002-2"
d="m 112.26962,105.48504 c 0.004,4e-5 0.008,9.2e-4 0.0125,0.003 0.004,0.002 0.008,0.004 0.0121,0.008 0,0 0,0 0,0 0.008,0.007 0.0159,0.017 0.0236,0.0304 0,0 0,0 0,0 v 0 c 0.0154,0.0268 0.0301,0.0664 0.0437,0.11847 v 0 0 c 0.027,0.10329 0.0494,0.25367 0.0637,0.44964 v 0 c 0.0279,0.38181 0.0249,0.92764 -0.0438,1.61097 v 0 c -0.12704,1.2694 -0.48617,3.06434 -1.3871,4.947 v 0 c -0.4305,0.89913 -0.98846,1.81466 -1.69949,2.67543 -0.16979,0.20541 -0.34802,0.40697 -0.53463,0.60385 -0.64013,0.67534 -1.33714,1.2516 -2.06286,1.72741 -1.2231,0.80036 -2.48807,1.29328 -3.62103,1.58211 -2.85185,0.72584 -4.707298,0.28587 -4.708162,0.1905 -0.0017,-0.19112 1.874822,-0.2148 4.447062,-1.07983 1.03371,-0.34722 2.17675,-0.85707 3.2651,-1.61061 0.64745,-0.44732 1.27283,-0.97819 1.8545,-1.5919 0.16962,-0.17897 0.33237,-0.36165 0.4882,-0.54736 0.65345,-0.77817 1.18586,-1.6096 1.61788,-2.42831 v 0 c 0.90349,-1.71146 1.38154,-3.39002 1.67171,-4.58176 v 0 c 0.15603,-0.64221 0.26095,-1.16208 0.34393,-1.52489 v 0 c 0.0424,-0.18531 0.0797,-0.33166 0.11349,-0.42916 v 0 0 c 0.0172,-0.0497 0.034,-0.0879 0.0503,-0.1134 v 0 c 0,0 0,0 0,0 0.008,-0.0129 0.0164,-0.0227 0.0245,-0.0292 0,0 0,0 0,0 0.004,-0.003 0.008,-0.006 0.0122,-0.007 0.004,-0.002 0.008,-0.003 0.0125,-0.002 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5004-6"
d="m 98.041468,119.28759 c 0.03621,0.1032 -0.997952,0.57339 -2.796793,1.29237 -1.705181,0.53162 -4.231231,1.04717 -7.17191,0.82596 -1.428834,-0.10925 -2.942727,-0.39851 -4.460436,-0.93275 -0.673159,-0.23724 -1.341773,-0.52119 -2.000407,-0.8523 -0.933235,-0.46916 -1.80161,-1.01046 -2.598829,-1.60044 -1.823282,-1.35043 -3.260035,-2.9307 -4.356259,-4.41271 -2.81747,-3.80896 -3.555316,-6.84934 -3.513966,-6.86773 0.164266,-0.0731 1.351233,2.80868 4.193206,6.34421 1.11529,1.3874 2.529835,2.86919 4.269934,4.1258 0.760726,0.54983 1.584086,1.05683 2.464189,1.49949 0.62123,0.31244 1.250024,0.5824 1.881919,0.81027 1.424337,0.51427 2.851062,0.81185 4.204189,0.95116 2.769573,0.28891 5.218421,-0.0806 6.915692,-0.45226 1.832942,-0.5555 2.933273,-0.83422 2.969471,-0.73107 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5006-0"
d="m 72.209668,112.22639 c -0.278415,0.12733 -1.466781,-2.26347 -4.405235,-5.39066 -1.313886,-1.39982 -2.812083,-2.75132 -4.776469,-4.34174 -1.544513,-1.24884 -3.285752,-2.556908 -5.107406,-4.045303 -1.62193,-1.32305 -3.346798,-2.842261 -4.920507,-4.597899 -1.506128,-1.682069 -2.875325,-3.614548 -3.956158,-5.780246 -0.03571,-0.07156 -0.07105,-0.143254 -0.106015,-0.215087 -1.28919,-2.662331 -2.044586,-5.443925 -2.433455,-8.112893 -0.570038,-3.916161 -0.430251,-7.68382 -0.08862,-10.860259 0.463903,-4.333218 1.343938,-8.061907 2.022045,-10.426281 0.702104,-2.448047 1.276843,-3.78222 1.486085,-3.731458 0.439035,0.106512 -0.895277,5.745955 -1.335826,14.330615 -0.156409,3.07872 -0.160883,6.683336 0.448002,10.290619 0.414007,2.454199 1.124088,4.98181 2.281374,7.353105 0.03108,0.06406 0.06251,0.12803 0.09427,0.191904 0.960656,1.931794 2.186553,3.687688 3.534208,5.246506 1.409252,1.631888 3.015575,3.115287 4.543596,4.456199 1.723354,1.509763 3.416535,2.907808 4.927768,4.281768 1.91132,1.7354 3.406485,3.31698 4.627397,4.91091 2.806407,3.66699 3.354064,6.3537 3.164947,6.4402 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5008-6"
d="m 49.857374,55.003431 c -0.0058,0.0017 -0.01195,0.0025 -0.01834,0.0023 -0.0065,-9.26e-4 -0.01343,-0.003 -0.0207,-0.0064 0,0 0,0 0,0 -0.01449,-0.0068 -0.03043,-0.01868 -0.04778,-0.03554 0,0 -10e-7,0 -10e-7,0 v 0 c -0.03453,-0.03357 -0.0746,-0.08688 -0.120023,-0.159539 v 0 c -0.08986,-0.143756 -0.200148,-0.362447 -0.32919,-0.653558 v 0 C 49.069684,53.582977 48.749375,52.746358 48.37565,51.6594 v 0 c -0.689762,-2.006162 -1.58372,-4.928385 -2.490712,-8.48943 v 0 c -0.779594,-3.059811 -1.62608,-6.800163 -2.256745,-10.828263 v 0 C 43.358706,30.620729 43.122006,28.797031 42.969582,26.91657 v 0 c -0.130015,-1.595675 -0.202824,-3.274774 -0.1389,-4.990581 v 0 c 0.04747,-1.36672 0.189495,-2.814827 0.564792,-4.267956 v 0 c 0.15256,-0.590187 0.357194,-1.194205 0.63763,-1.791667 v 0 c 0.24047,-0.516743 0.55704,-1.032879 0.968434,-1.514478 0.374724,-0.437628 0.83813,-0.823388 1.382133,-1.121894 0,0 6e-6,-2e-6 6e-6,-2e-6 0.554245,-0.295592 1.14908,-0.474713 1.749905,-0.539145 0.09736,-0.01 0.194199,-0.0175 0.290467,-0.02271 0.584846,-0.03166 1.144587,0.02259 1.664203,0.134296 0.760984,0.160589 1.465207,0.413292 2.110287,0.707853 1.860718,0.84936 3.473047,2.011201 4.898674,3.172922 2.273088,1.839802 4.302522,3.859106 6.103291,5.777768 2.870783,3.056007 5.414847,6.151393 7.48788,8.800603 0,0 2e-6,3e-6 2e-6,3e-6 5.73866,7.332555 8.798238,12.368396 8.531684,12.566832 -0.374743,0.278975 -4.012682,-4.329316 -10.076072,-11.291787 -10e-7,-1e-6 -10e-7,-1e-6 -3e-6,-2e-6 -2.175285,-2.497527 -4.832036,-5.489206 -7.697589,-8.384882 -1.812003,-1.829493 -3.805936,-3.742843 -5.966455,-5.44295 -1.376374,-1.075459 -2.816786,-2.111935 -4.361906,-2.791397 -0.527432,-0.231754 -1.04982,-0.423278 -1.562371,-0.52452 -0.346596,-0.06639 -0.679759,-0.104318 -0.983303,-0.08604 -0.04998,0.003 -0.09912,0.0075 -0.147352,0.01371 -0.28685,0.03395 -0.560373,0.111724 -0.786413,0.236859 0,0 -3e-6,0 -3e-6,0 -0.229104,0.118353 -0.446861,0.305078 -0.643487,0.525474 -0.223409,0.249505 -0.412784,0.566362 -0.584828,0.915718 v 0 c -0.198318,0.40771 -0.351393,0.859279 -0.481584,1.332805 v 0 c -0.324025,1.177771 -0.454534,2.443596 -0.52477,3.709637 v 0 c -0.08336,1.578412 -0.04166,3.164459 0.04788,4.701571 v 0 c 0.106044,1.807414 0.28874,3.584178 0.497958,5.273199 v 0 c 0.487144,3.931793 1.161641,7.703827 1.739492,10.753495 0.681486,3.595224 1.298606,6.524888 1.705908,8.616725 v 0 c 0.21787,1.11891 0.377857,2.003075 0.461358,2.612451 v 0 c 0.043,0.313817 0.06617,0.557534 0.0674,0.726078 v 0 c 6.62e-4,0.08537 -0.0044,0.151729 -0.01523,0.198481 v 0 c 0,0 0,0 0,0 -0.0054,0.02352 -0.0124,0.04211 -0.02085,0.05568 0,0 0,1e-6 0,1e-6 -0.0042,0.0068 -0.0089,0.01236 -0.01387,0.01663 -0.0052,0.0037 -0.01078,0.0063 -0.01661,0.0081 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
id="path5010-6"
d="m 76.240832,36.655265 c -0.01583,-0.544631 4.813562,-1.152415 11.749779,-1.555686 2.396645,0.03992 5.008121,0.218258 7.762356,0.589753 1.612575,0.217506 3.163809,0.486352 4.645483,0.795383 0,0 1e-5,0 1e-5,0 4.2622,0.892146 7.74943,2.08406 10.23746,3.169327 2.45478,1.070766 3.79339,1.969286 3.6812,2.245691 -0.12132,0.298879 -1.67089,-0.06594 -4.20916,-0.687732 -2.65875,-0.651306 -5.96028,-1.462443 -10.194996,-2.203378 0,0 -2e-6,-2e-6 -2e-6,-2e-6 -1.435862,-0.252145 -2.925834,-0.48658 -4.477884,-0.697666 -2.655421,-0.36115 -5.143774,-0.606564 -7.46465,-0.782278 -6.867943,-0.0018 -11.71378,-0.329118 -11.729596,-0.873412 z"
style="display:inline;fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:connector-curvature="0" />
<path
style="fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 94.10447,112.96722 c 0.0036,-0.006 0.0076,-0.0122 0.01214,-0.0178 0.0044,-0.005 0.0092,-0.0107 0.01442,-0.0156 0.01044,-0.01 0.02262,-0.0187 0.03643,-0.0266 0,0 0,0 0,0 v 0 c 0.0274,-0.0156 0.06157,-0.0275 0.101887,-0.0355 v 0 c 0.07988,-0.016 0.185667,-0.0181 0.313832,-0.008 v 0 c 0.250163,0.0192 0.598334,0.0839 1.0149,0.17159 v 0 c 0.812484,0.17065 1.899728,0.42997 3.165949,0.59738 0.676372,0.088 1.401702,0.15022 2.148492,0.15484 0.6466,0.004 1.25525,-0.0355 1.83405,-0.11539 0,0 0,0 0,0 1.32577,-0.17686 2.42335,-0.56992 3.24047,-0.87699 0.80894,-0.30399 1.33015,-0.51259 1.47783,-0.33569 0.13417,0.16073 -0.12412,0.69741 -0.86003,1.34289 -0.73192,0.64198 -1.92947,1.36559 -3.52366,1.71756 0,0 0,0 0,0 -0.68632,0.14919 -1.41649,0.22804 -2.17802,0.2253 -0.88284,-0.003 -1.718001,-0.11561 -2.475391,-0.29264 -1.411553,-0.32747 -2.536707,-0.85789 -3.281224,-1.33858 v 0 c -0.387048,-0.24965 -0.672212,-0.48615 -0.849553,-0.68522 v 0 c -0.09,-0.10104 -0.151774,-0.19151 -0.1844,-0.26932 v 0 c -0.01642,-0.0392 -0.02549,-0.0747 -0.02695,-0.1068 v 0 c 0,0 0,0 0,0 -6.62e-4,-0.016 5.29e-4,-0.0311 0.0035,-0.0452 0.0015,-0.007 0.0036,-0.0139 0.006,-0.0204 0.0026,-0.007 0.0056,-0.0133 0.0092,-0.0195 z"
id="path5045-4"
inkscape:connector-curvature="0" />
<path
style="fill:#ffffff;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 97.220701,116.52375 c -0.08463,-0.3431 0.78561,-0.85317 1.942508,-1.13854 1.156901,-0.28537 2.164521,-0.23852 2.249151,0.10458 0.0846,0.3431 -0.78561,0.85316 -1.94251,1.13854 -1.156897,0.28537 -2.164517,0.23852 -2.249149,-0.10458 z"
id="path5049-6"
inkscape:connector-curvature="0" />
<path
style="display:inline;fill:#ffffff;fill-opacity:0.58823529;stroke:none;stroke-width:0.42333335;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 98.967983,47.853918 a 2.4999998,2.4999998 0 0 0 -2.499591,2.494941 l -0.004,-0.01188 -5.635827,2.082043 a 3.4999999,3.4999999 0 0 0 -2.868577,-1.501714 3.4999999,3.4999999 0 0 0 -3.500049,3.500046 3.4999999,3.4999999 0 0 0 3.500049,3.500043 3.4999999,3.4999999 0 0 0 3.499517,-3.500043 3.4999999,3.4999999 0 0 0 -0.0284,-0.408247 L 96.73104,52.05109 86.791086,65.345884 a 2.9999998,2.9999998 0 0 0 -1.137399,-0.225309 2.9999998,2.9999998 0 0 0 -2.999827,2.999817 2.9999998,2.9999998 0 0 0 2.999827,3.000332 2.9999998,2.9999998 0 0 0 2.999809,-3.000332 2.9999998,2.9999998 0 0 0 -0.574119,-1.759067 l 0.0481,0.03617 10.185932,-13.623975 -0.01961,-0.01447 a 2.4999998,2.4999998 0 0 0 0.67437,0.09508 2.4999998,2.4999998 0 0 0 0.625808,-0.08113 l -0.0269,0.0181 8.743653,12.907737 a 2.9999998,2.9999998 0 0 0 -0.44598,0.702803 l -3.1812,-0.455788 -10e-4,0.0083 a 2.4999998,2.4999998 0 0 0 -2.43758,-1.959057 2.4999998,2.4999998 0 0 0 -2.500102,2.500106 2.4999998,2.4999998 0 0 0 2.500102,2.500109 2.4999998,2.4999998 0 0 0 2.22312,-1.362707 l 3.15795,0.452683 a 2.9999998,2.9999998 0 0 0 0.0501,0.256318 l -9.010815,4.952151 0.0284,0.05116 a 3.4999999,3.4999999 0 0 0 -2.62723,-1.193724 3.4999999,3.4999999 0 0 0 -3.500037,3.500045 3.4999999,3.4999999 0 0 0 3.500037,3.500046 3.4999999,3.4999999 0 0 0 3.50004,-3.500046 3.4999999,3.4999999 0 0 0 -0.138488,-0.968936 l 0.008,0.01394 9.010813,-4.952151 a 2.9999998,2.9999998 0 0 0 2.14457,0.902272 2.9999998,2.9999998 0 0 0 2.99983,-2.999817 2.9999998,2.9999998 0 0 0 -2.31717,-2.918169 l -0.31419,-7.600089 a 3.4999999,3.4999999 0 0 0 2.56469,-3.372403 3.4999999,3.4999999 0 0 0 -3.50004,-3.500046 3.4999999,3.4999999 0 0 0 -3.50004,3.500046 3.4999999,3.4999999 0 0 0 2.836,3.434932 l 0.31006,7.484298 -8.69452,-12.835906 a 2.4999998,2.4999998 0 0 0 0.49248,-1.48518 2.4999998,2.4999998 0 0 0 -2.500106,-2.500106 z"
id="circle4819-5"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 18 KiB

187
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,14 +18,35 @@ body{
font-family: sans-serif;
height: 100%;
}
#app-links{
#content{
width: 80%;
min-height: 100%;
margin: auto;
margin-top: 80px;
background-color: white;
padding-right: 40px;
padding-left: 40px;
}
/*----------------------+
| Links to the services |
+----------------------*/
.cards{
display: flex;
justify-content: space-around;
justify-content: space-between;
flex-direction: row;
margin-top: 30px;
margin-bottom: 30px;
}
#app-links a{
.card{
width: 30%;
}
.card a{
display: block;
background-color: #0e610e;
padding: 15px;
border-radius: 10px;
@ -27,79 +54,102 @@ body{
font-weight: bold;
text-decoration: none;
transition: 0.5s;
width: 20%;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#app-links a:hover{
.card 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;
transform: scale(1.05);
}
#app-img img{
width: 20%;
.card img{
display: block;
width: 100%;
height: auto;
}
/*-----+
| Text |
+-----*/
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;
background-color: white;
padding-right: 40px;
padding-left: 40px;
}
#content:first-child{
margin-top: 0;
}
#content:last-child{
margin-bottom: 0;
h1, h2, h3{
padding-top: 10px;
padding-bottom: 10px;
color: #080a4d;
}
p{
padding: 10px;
text-align: justify;
}
h2, h3{
padding-top: 10px;
padding-bottom: 10px;
color: #080a4d;
/*-------+
| Header |
+-------*/
header img{
height: auto;
width: 60px;
vertical-align: middle;
display: inline-block;
}
#link-wb #link{
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;
vertical-align: middle;
width: calc(40% - 40px);
text-align: center;
width: 50%;
}
#link-wb form{
header ul:last-child{
width: calc(50% - 60px);
text-align: right;
}
header li{
display: inline-block;
vertical-align: middle;
width: calc(40% - 40px);
text-align: center;
transition: 0.5s;
padding: 10px;
border-radius: 10px;
font-weight: bold;
}
#link-wb #or{
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: 20%;
width: 40%;
text-align: center;
}
#link a{
background-color: #0e610e;
padding: 15px;
border-radius: 10px;
@ -107,17 +157,31 @@ h2, h3{
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;
}
#link a:hover{
#wb-interface a:hover{
background-color: #1b8c1b;
transform: scale(1.1);
}
#link-wb input{
transform: scale(1.05);
}
/*------+
| Forms |
-------*/
input{
display: inline-block;
width: 80%;
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;
}

BIN
picasoft_logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

263
whiteboard.html

@ -7,15 +7,23 @@
<meta charset="utf8" />
</head>
<body>
<header>
<img src="logo_picasoft_white.svg" alt="Logo de Picasoft" /><!--
--><ul>
<a href="https://md.pad.test.picasoft.net/"><li>CodiMD</li></a>
<a href="https://week.pad.picasoft.net/"><li>EtherPad</li></a>
<a href="whiteboard.html"><li>WhiteBoard</li></a>
</ul><!--
--><ul>
<a href="https://picasoft.net/co/cgu.html"><li>CGU</li></a>
<a href="mailto:picasoft@assos.utc.fr"><li>Contact</li></a>
</ul>
</header>
<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">
<h1>WhiteBoard</h1>
<div id="wb-interface">
<a href="https://wb.pad.test.picasoft.net/?randomid=true">Nouveau tableau rapide</a><!--
--><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 />
@ -25,6 +33,245 @@
<input type="submit" />
</form>
</div>
<h2>Quelques raccourcis usuels</h2>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Result</th>
<th style="text-align: left;">Windows and Linux</th>
<th style="text-align: left;">macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">Clear the whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + Z</td>
<td style="text-align: left;">Command + Shift + Z</td>
</tr>
<tr class="even">
<td style="text-align: left;">Undo your last step</td>
<td style="text-align: left;">Ctrl + Z</td>
<td style="text-align: left;">Command + Z</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Redo your last undo</td>
<td style="text-align: left;">Ctrl + Y</td>
<td style="text-align: left;">Command + Y</td>
</tr>
<tr class="even">
<td style="text-align: left;">Increase thickness</td>
<td style="text-align: left;">Ctrl + Up Arrow</td>
<td style="text-align: left;">Command + Up Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Decrease thickness</td>
<td style="text-align: left;">Ctrl + Down Arrow</td>
<td style="text-align: left;">Command + Down Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set a color</td>
<td style="text-align: left;">Ctrl + Shift + 1,2,3,4,5</td>
<td style="text-align: left;">Command + Shift + 1,2,3,4,5</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Toggle between main clolors</td>
<td style="text-align: left;">Ctrl + Shift + R</td>
<td style="text-align: left;">Command + Shift + R</td>
</tr>
</tbody>
</table>
<h2>Tous les raccourcis</h2>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">Result</th>
<th style="text-align: left;">Windows and Linux</th>
<th style="text-align: left;">macOS</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">Clear the whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + Z</td>
<td style="text-align: left;">Command + Shift + Z</td>
</tr>
<tr class="even">
<td style="text-align: left;">Undo your last step</td>
<td style="text-align: left;">Ctrl + Z</td>
<td style="text-align: left;">Command + Z</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Redo your last undo</td>
<td style="text-align: left;">Ctrl + Y</td>
<td style="text-align: left;">Command + Y</td>
</tr>
<tr class="even">
<td style="text-align: left;">Select an area</td>
<td style="text-align: left;">Ctrl + X</td>
<td style="text-align: left;">Command + X</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Take the mouse</td>
<td style="text-align: left;">Ctrl + M</td>
<td style="text-align: left;">Command + M</td>
</tr>
<tr class="even">
<td style="text-align: left;">Take the pen</td>
<td style="text-align: left;">Ctrl + P</td>
<td style="text-align: left;">Command + P</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Draw a line</td>
<td style="text-align: left;">Ctrl + L</td>
<td style="text-align: left;">Command + L</td>
</tr>
<tr class="even">
<td style="text-align: left;">Draw a rectangle</td>
<td style="text-align: left;">Ctrl + R</td>
<td style="text-align: left;">Command + R</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Draw a circle</td>
<td style="text-align: left;">Ctrl + C</td>
<td style="text-align: left;">Command + C</td>
</tr>
<tr class="even">
<td style="text-align: left;">Toggle between line, rect, circ</td>
<td style="text-align: left;">Ctrl + Shift + F</td>
<td style="text-align: left;">Command + Shift + F</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Toggle between pen and eraser</td>
<td style="text-align: left;">Ctrl + Shift + X</td>
<td style="text-align: left;">Command + Shift + X</td>
</tr>
<tr class="even">
<td style="text-align: left;">Toggle between main clolors</td>
<td style="text-align: left;">Ctrl + Shift + R</td>
<td style="text-align: left;">Command + Shift + R</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Write text</td>
<td style="text-align: left;">Ctrl + A</td>
<td style="text-align: left;">Command + A</td>
</tr>
<tr class="even">
<td style="text-align: left;">Take the eraser</td>
<td style="text-align: left;">Ctrl + E</td>
<td style="text-align: left;">Command + E</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Increase thickness</td>
<td style="text-align: left;">Ctrl + Up Arrow</td>
<td style="text-align: left;">Command + Up Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Decrease thickness</td>
<td style="text-align: left;">Ctrl + Down Arrow</td>
<td style="text-align: left;">Command + Down Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Colorpicker</td>
<td style="text-align: left;">Ctrl + Shift + C</td>
<td style="text-align: left;">Command + Shift + C</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set black color</td>
<td style="text-align: left;">Ctrl + Shift + 1</td>
<td style="text-align: left;">Command + Shift + 1</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Set blue color</td>
<td style="text-align: left;">Ctrl + Shift + 2</td>
<td style="text-align: left;">Command + Shift + 2</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set green color</td>
<td style="text-align: left;">Ctrl + Shift + 3</td>
<td style="text-align: left;">Command + Shift + 3</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Set yellow color</td>
<td style="text-align: left;">Ctrl + Shift + 4</td>
<td style="text-align: left;">Command + Shift + 4</td>
</tr>
<tr class="even">
<td style="text-align: left;">Set red color</td>
<td style="text-align: left;">Ctrl + Shift + 5</td>
<td style="text-align: left;">Command + Shift + 5</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Save whiteboard as image</td>
<td style="text-align: left;">Ctrl + S</td>
<td style="text-align: left;">Command + S</td>
</tr>
<tr class="even">
<td style="text-align: left;">Save whiteboard as JSON</td>
<td style="text-align: left;">Ctrl + Shift + K</td>
<td style="text-align: left;">Command + Shift + K</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Save whiteboard to WebDav</td>
<td style="text-align: left;">Ctrl + Shift + I (i)</td>
<td style="text-align: left;">Command + Shift + I (i)</td>
</tr>
<tr class="even">
<td style="text-align: left;">Load saved JSON to whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + J</td>
<td style="text-align: left;">Command + Shift + J</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Share whiteboard</td>
<td style="text-align: left;">Ctrl + Shift + S</td>
<td style="text-align: left;">Command + Shift + S</td>
</tr>
<tr class="even">
<td style="text-align: left;">Hide or show toolbar</td>
<td style="text-align: left;">Tab</td>
<td style="text-align: left;">Tab</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Move selected object up</td>
<td style="text-align: left;">Up Arrow</td>
<td style="text-align: left;">Up Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Move selected object down</td>
<td style="text-align: left;">Down Arrow</td>
<td style="text-align: left;">Down Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Move selected object left</td>
<td style="text-align: left;">Left Arrow</td>
<td style="text-align: left;">Left Arrow</td>
</tr>
<tr class="even">
<td style="text-align: left;">Move selected object right</td>
<td style="text-align: left;">Right Arrow</td>
<td style="text-align: left;">Right Arrow</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Drop object</td>
<td style="text-align: left;">Ctrl + Enter</td>
<td style="text-align: left;">Command + Enter</td>
</tr>
<tr class="even">
<td style="text-align: left;">Add Image to backgroud</td>
<td style="text-align: left;">Shift + Enter</td>
<td style="text-align: left;">Shift + Enter</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Cancel all actions</td>
<td style="text-align: left;">Escape</td>
<td style="text-align: left;">Escape</td>
</tr>
<tr class="even">
<td style="text-align: left;">Delete selected object</td>
<td style="text-align: left;">Delete</td>
<td style="text-align: left;">Delete</td>
</tr>
</tbody>
</table>
<script>
// Create Trianglify pattern - feel free to use whatever settings here
// **NOTE: Must export as svg with namespace included ".svg({ includeNamespace: true })"