Skip to content
Snippets Groups Projects
Commit 61dc134d authored by Paco's avatar Paco
Browse files

[Whiteboard] Homepage update: flexbox, colors, Web 2.0

parent f48b88f3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
pica-whiteboard/default.css
+ 100
− 73
View file @ 61dc134d
/* INIT */
*{
margin: 0;
box-sizing: border-box;
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
}
:root {
--background: #303030;
--background-darker: #272727;
--background-lighter: #333333;
--background-header: #18684D;
--background-warning: #8C2424;
--color: #DDDDDD;
}
.flex-center-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-row-spacearound {
display: flex;
width: 100%;
justify-content: space-around;
}
.margin-small {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.margin-medium {
margin-top: 1em;
margin-bottom: 1em;
}
.margin-big {
margin-top: 4em;
margin-bottom: 4em;
}
/* SPECIFIC */
body{
background-color: #303030;
color: white;
background-color: var(--background);
color: var(--color);
font-size: 1.2em;
}
header{
background-color: #1B7A5A;
background-color: var(--background-header);
padding: 5px;
padding-top: 10px;
text-align: center;
}
.logo{
display: block;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
width: 8em;
}
header h1{
display: inline;
}
.warning{
background-color: #FFC0C0;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
padding: 10px;
color: #FF0000;
border-radius: 10px;
width: 40%;
border: solid red 1px;
text-align: center;
article{
width: 100%;
}
.createForm{
display: block;
margin: auto;
width: 40%;
text-align: center;
.logo{
width: 9em;
}
.main-center{
width: 85%;
max-width: 640px;
}
label{
display: block;
margin: 5px;
.warning{
padding: 15px;
background-color: var(--background-warning);
border-radius: 10px;
}
input[type="text"]{
margin: 5px;
border: none;
border-radius: 5px;
width: 100%;
height: 3em;
}
.create {
display: flex;
width: 100%
}
.child {
flex: 50%;
padding-right: 10px;
}
#randomName, input[type="submit"]{
.buttons * {
padding: 20px;
margin: 20px;
color: white;
background-color: #00AFEF;
width: 100%;
color: var(--color);
font-size: 1em;
background-color: #075C7B;
width: 11em;
max-width: 48%;
border: none;
border-radius: 10px;
transition: 0.5s;
transition: 0.2s;
font-weight: bold;
text-decoration: none;
}
input[type="submit"]:hover, .randomName:hover{
background-color: #00BFFF;
.buttons *:hover{
background-color: #077299;
}
h1{
padding: 20px;
text-align: center;
padding-left: 40px;
footer a {
color: #CCCCCC;
text-decoration: underline;
margin: 0 10px;
}
a{
color: #FFFFFF;
text-decoration: none;
#help{
display: none;
}
.helpLink a:hover{
background-color: #00BFFF;
#help:target{
display: flex;
align-items: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
p{
padding: 5px;
#help thead tr th {
padding-bottom: 10px;
}
#help{
display: none;
#help tr.odd {
background-color: var(--background-lighter);
}
#help:target{
display: block;
width: 70%;
margin: auto;
#help tr.even {
background-color: var(--background-darker);
}
#footer {
text-align: center;
#help td, #help th {
text-align: left;
padding: 5px 20px 5px 5px;
}
#footer a {
color: #C0C0C0;
text-decoration: underline;
margin: 0 10px;
#help td:nth-child(1), #help th:nth-child(1) {
font-weight: bold;
width: 28vw;
max-width: 280px;
}
#help td:nth-child(2), #help th:nth-child(2),
#help td:nth-child(3), #help th:nth-child(3) {
width: 28vw;
max-width: 220px;
}
pica-whiteboard/index.html
+ 174
− 166
View file @ 61dc134d
......@@ -3,280 +3,288 @@
<head>
<title>Whiteboard Picasoft</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<header>
<h1>Whiteboard de Picasoft</h1>
<link rel="stylesheet" type="text/css" href="default.css" />
</header>
<img class="logo" src="picasoft-logo-whiteboard.png" alt="Logo de Picasoft" />
<div class="warning">
<p>
Attention, le contenu des tableaux est réinitialisé chaque nuit (à minuit) ! <br/>Pensez à exporter votre tableau une fois votre séance terminée.
</p>
</div>
<article class="flex-center-column" >
<img
src="picasoft-logo-whiteboard.png"
alt="Logo de Picasoft"
class="logo margin-small"
/>
<h1>Créer un tableau</h1>
<div class="createForm">
<form action="https://board.picasoft.net/app/" method="GET">
<label for="name">Nom du tableau</label><br />
<input type="text" id="id" name="whiteboardid" /><br />
<label for="username"><i>Nom d'utilisateur (optionnel)</i></label><br />
<input type="text" id="username" name="username" /><br />
<div class="create">
<div class="child">
<input type="submit" />
</div class="child">
<div class="child" id="randomName">
<a href="https://board.picasoft.net/app/?randomid=true">Au hasard !</a>
</div>
</div>
</form>
</div>
<p id="footer">
<a href="#help">Montrer l'aide</a>
<a class="child" href="https://picasoft.net/co/cgu.html">CGU</a>
</p>
<p class="warning main-center margin-medium">
Attention, le contenu des tableaux est réinitialisé chaque nuit (à minuit) ! <br/>
Pensez à exporter votre tableau une fois votre séance terminée.
</p>
<h2 class="margin-small" >Créer un tableau</h2>
<form
class="flex-center-column main-center margin-small"
action="https://board.picasoft.net/app/" method="GET"
>
<label class="margin-small" for="name">Nom du tableau</label>
<input class="margin-small" type="text" id="id" name="whiteboardid" />
<label class="margin-small" for="username">Nom d'utilisateur <i>(optionnel)</i></label>
<input class="margin-small" type="text" id="username" name="username" />
<div id="help">
<div class="buttons flex-row-spacearound margin-medium">
<input type="submit" value="Lancer le board"/>
<a href="https://board.picasoft.net/app/?randomid=true">Au hasard !</a>
</div>
</form>
<footer class="main-center flex-row-spacearound margin-medium">
<a href="#help">Montrer l'aide</a>
<a class="child" href="https://picasoft.net/co/cgu.html">CGU</a>
</footer>
</article>
<div id="help" class="margin-big flex-center-column">
<h2>Quelques raccourcis usuels</h2>
<table>
<table class="margin-medium">
<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>
<th>Result</th>
<th>Windows and Linux</th>
<th>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>
<td>Clear the whiteboard</td>
<td>Ctrl + Shift + Z</td>
<td>Cmd + 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>
<td>Undo your last step</td>
<td>Ctrl + Z</td>
<td>Cmd + 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>
<td>Redo your last undo</td>
<td>Ctrl + Y</td>
<td>Cmd + 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>
<td>Increase thickness</td>
<td>Ctrl + Up Arrow</td>
<td>Cmd + 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>
<td>Decrease thickness</td>
<td>Ctrl + Down Arrow</td>
<td>Cmd + 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>
<td>Set a color</td>
<td>Ctrl + Shift + 1,2,3,4,5</td>
<td>Cmd + 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>
<td>Toggle between main colors</td>
<td>Ctrl + Shift + R</td>
<td>Cmd + Shift + R</td>
</tr>
</tbody>
</table>
<h2>Tous les raccourcis</h2>
<table>
<table class="margin-medium">
<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>
<th>Result</th>
<th>Windows and Linux</th>
<th>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>
<td>Clear the whiteboard</td>
<td>Ctrl + Shift + Z</td>
<td>Cmd + 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>
<td>Undo your last step</td>
<td>Ctrl + Z</td>
<td>Cmd + 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>
<td>Redo your last undo</td>
<td>Ctrl + Y</td>
<td>Cmd + 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>
<td>Select an area</td>
<td>Ctrl + X</td>
<td>Cmd + 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>
<td>Take the mouse</td>
<td>Ctrl + M</td>
<td>Cmd + 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>
<td>Take the pen</td>
<td>Ctrl + P</td>
<td>Cmd + 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>
<td>Draw a line</td>
<td>Ctrl + L</td>
<td>Cmd + 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>
<td>Draw a rectangle</td>
<td>Ctrl + R</td>
<td>Cmd + 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>
<td>Draw a circle</td>
<td>Ctrl + C</td>
<td>Cmd + 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>
<td>Toggle between line, rect, circ</td>
<td>Ctrl + Shift + F</td>
<td>Cmd + 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>
<td>Toggle between pen and eraser</td>
<td>Ctrl + Shift + X</td>
<td>Cmd + 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>
<td>Toggle between main clolors</td>
<td>Ctrl + Shift + R</td>
<td>Cmd + 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>
<td>Write text</td>
<td>Ctrl + A</td>
<td>Cmd + 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>
<td>Take the eraser</td>
<td>Ctrl + E</td>
<td>Cmd + 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>
<td>Increase thickness</td>
<td>Ctrl + Up Arrow</td>
<td>Cmd + 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>
<td>Decrease thickness</td>
<td>Ctrl + Down Arrow</td>
<td>Cmd + 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>
<td>Colorpicker</td>
<td>Ctrl + Shift + C</td>
<td>Cmd + 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>
<td>Set black color</td>
<td>Ctrl + Shift + 1</td>
<td>Cmd + 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>
<td>Set blue color</td>
<td>Ctrl + Shift + 2</td>
<td>Cmd + 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>
<td>Set green color</td>
<td>Ctrl + Shift + 3</td>
<td>Cmd + 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>
<td>Set yellow color</td>
<td>Ctrl + Shift + 4</td>
<td>Cmd + 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>
<td>Set red color</td>
<td>Ctrl + Shift + 5</td>
<td>Cmd + 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>
<td>Save whiteboard as image</td>
<td>Ctrl + S</td>
<td>Cmd + 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>
<td>Save whiteboard as JSON</td>
<td>Ctrl + Shift + K</td>
<td>Cmd + 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>
<td>Save whiteboard to WebDav</td>
<td>Ctrl + Shift + I (i)</td>
<td>Cmd + 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>
<td>Load saved JSON to whiteboard</td>
<td>Ctrl + Shift + J</td>
<td>Cmd + 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>
<td>Share whiteboard</td>
<td>Ctrl + Shift + S</td>
<td>Cmd + 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>
<td>Hide or show toolbar</td>
<td>Tab</td>
<td>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>
<td>Move selected object up</td>
<td>Up Arrow</td>
<td>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>
<td>Move selected object down</td>
<td>Down Arrow</td>
<td>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>
<td>Move selected object left</td>
<td>Left Arrow</td>
<td>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>
<td>Move selected object right</td>
<td>Right Arrow</td>
<td>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>
<td>Drop object</td>
<td>Ctrl + Enter</td>
<td>Cmd + 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>
<td>Add Image to backgroud</td>
<td>Shift + Enter</td>
<td>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>
<td>Cancel all actions</td>
<td>Escape</td>
<td>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>
<td>Delete selected object</td>
<td>Delete</td>
<td>Delete</td>
</tr>
</tbody>
</table>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment