diff --git a/code/index.css b/code/index.css
index 28fda22..a83aff3 100644
--- a/code/index.css
+++ b/code/index.css
@@ -1,25 +1,35 @@
+
+.all-container {
+ display : flex;
+ justify-content: space-between;
+ /*
+ align-items: baseline;
+ width : min-content;
+ flex-direction: row;
+ flex-wrap: wrap;*/
+
+}
+
.flex-container {
/* We first create a flex layout context */
- display: flex;
-
+ display : flex;
+ align-items: baseline;
+ width : min-content;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
- flex-flow: row wrap;
- /* Then we define how is distributed the remaining space */
- justify-content: space-around;
- padding: 0;
- margin: 0;
- list-style: none;
+ /* Then we define how is distributed the remaining space */
+
+ flex-direction: column;
}
+ /*
.flex-item {
- background: tomato;
padding: 5px;
width: 200px;
height: 150px;
@@ -29,4 +39,31 @@
font-weight: bold;
font-size: 3em;
text-align: center;
+ }*/
+
+ .vitraux {
+ /* We first create a flex layout context */
+ display : flex;
+ align-items: baseline;
+ width : min-content;
+ /* Then we define the flow direction
+ and if we allow the items to wrap
+ * Remember this is the same as:
+ * flex-direction: row;
+ * flex-wrap: wrap;
+ */
+
+
+ /* Then we define how is distributed the remaining space */
+
+ flex-direction: column;
+ }
+
+ .vitrail {
+ margin: 3px;
+ padding: 6px;
+ background-image: url(ress/fond_fin.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
}
\ No newline at end of file
diff --git a/code/index.html b/code/index.html
index f3556dc..6260eab 100644
--- a/code/index.html
+++ b/code/index.html
@@ -1,432 +1,495 @@
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+ On The Dot
+
+
+
+
+
+ Résultat
+
+ Objectif
+
+
+
+
+
+
+
+
+
+
+
+ canvas1.addEventListener("mousedown",function(e){
+ mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+ })
+
+ canvas1.addEventListener("mouseup",function(e){
+ rotationManager(e);
+ })
+
+ canvas2.addEventListener("mousedown",function(e){
+ mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+ })
+
+ canvas2.addEventListener("mouseup",function(e){
+ rotationManager(e);
+ })
+
+ canvas3.addEventListener("mousedown",function(e){
+ mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+ })
+
+ canvas3.addEventListener("mouseup",function(e){
+ rotationManager(e);
+ })
+
+ canvas4.addEventListener("mousedown",function(e){
+ mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+ })
+
+ canvas4.addEventListener("mouseup",function(e){
+ rotationManager(e);
+ })
+
+ canvasR.addEventListener("mousedown",function(e){
+ mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
+ })
+
+ canvasR.addEventListener("mouseup",function(e){
+ rotationManager(e);
+ })
+
+
+
+ tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
+ tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
+ tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
+ tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[1,1,"purple"]);
+
+ /*
+ tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+ tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+ tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+ tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
+ */
+
+ toutDessiner(tab1,canvas1,ctx1);
+ toutDessiner(tab2,canvas2,ctx2);
+ toutDessiner(tab3,canvas3,ctx3);
+ toutDessiner(tab4,canvas4,ctx4);
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code/ress/fond.png b/code/ress/fond.png
new file mode 100644
index 0000000..d66000e
Binary files /dev/null and b/code/ress/fond.png differ
diff --git a/code/ress/fond_fin.png b/code/ress/fond_fin.png
new file mode 100644
index 0000000..f5168c6
Binary files /dev/null and b/code/ress/fond_fin.png differ
diff --git a/code/ress/fond_tr.png b/code/ress/fond_tr.png
new file mode 100644
index 0000000..1ce3824
Binary files /dev/null and b/code/ress/fond_tr.png differ
diff --git a/code/ress/green.png b/code/ress/green.png
new file mode 100644
index 0000000..8ccb3ed
Binary files /dev/null and b/code/ress/green.png differ
diff --git a/code/ress/material_08.png b/code/ress/material_08.png
new file mode 100644
index 0000000..f6a660b
Binary files /dev/null and b/code/ress/material_08.png differ
diff --git a/code/ress/material_10.png b/code/ress/material_10.png
new file mode 100644
index 0000000..338c677
Binary files /dev/null and b/code/ress/material_10.png differ
diff --git a/code/ress/purple.png b/code/ress/purple.png
new file mode 100644
index 0000000..1c1adf6
Binary files /dev/null and b/code/ress/purple.png differ
diff --git a/code/ress/red.png b/code/ress/red.png
new file mode 100644
index 0000000..e45e788
Binary files /dev/null and b/code/ress/red.png differ
diff --git a/code/ress/wi.png b/code/ress/wi.png
new file mode 100644
index 0000000..6ba0967
Binary files /dev/null and b/code/ress/wi.png differ
diff --git a/code/ress/yellow.png b/code/ress/yellow.png
new file mode 100644
index 0000000..dddfe0f
Binary files /dev/null and b/code/ress/yellow.png differ