fin hackaton

assets/styles/front.scss

@@ -2,25 +2,166 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    #info-don{
-        flex: 30%;
+    flex-direction: column;
+    visibility: hidden;
+}
+
+#step{
+    color: #007BFF;
+    padding: 20px;
+    font-size: 32px;
+    font-weight: 800;
+}
+
+#indication, #label{
+    border-radius: 50px;
+    background-color: #007BFF;
+    color: white;
+    padding: 8px 20px;
+    font-weight: 800;
+    font-size: 32px;
+    margin: 30px 0;
+}
+#evolution{
+    display: flex;
+    width: 100%;
+    justify-content: start;
+    align-items: center;
+    visibility: hidden;
+    input[type=range]{
+        width: 80%;
+        margin-left: 20px;
     }
-    #info-donneur{
-        flex: 40%;
-    }
-    #info-psl{
-        flex: 30%;
+    #label{
+        width: auto;
     }
+}
+.displaySuccess{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 48px;
+    font-weight: 800;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: green;
+    color: white;
+    display: none;
+    z-index: 10000;
 
 }
 
-#error{
+#picturePoche, #pictureTube{
+    display: flex;
+    justify-content: start;
+    align-items: start;
     height: 300px;
-    width: 300px;
-    background-color: grey;
+    .sang{
+        width: auto;
+        height: 150px;
+    }
+    img{
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+}
+
+
+.error{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 300px;
+    width: 100%;
+    background-color: #F44336;
+    color: white;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    font-size: 48px;
+    font-weight: 800;
 }
 
 #saisie{
     position: absolute;
     left:-300px
-}
+}
+/*Badeau supérieur*/
+.page_header {
+    display: grid;
+    grid-template-columns: 25% 0.75% 30% 44%;
+    grid-template-rows: 25vh;
+    grid-template-areas: "barecode sparebar identity gift_spec";
+    background-color: rgba(5, 5, 59, 0.952);
+}
+.gift_cb {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 75% 25%;
+    grid-template-areas: 
+    "cb"
+    "number_cb";
+    grid-area: barecode;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    margin: 10px;
+    background-color: white;
+    }
+/*
+.separator {
+    grid-area: sparebar;
+    background-color: black;
+}*/
+
+li {
+    list-style: none;
+    font-size: large;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    margin: 10px;
+}
+
+.page_header .gift_cb .cb_cb {
+    grid-template-columns: cb;
+    /*background-color: black;*/
+}
+
+.cb_number {
+
+}
+
+.identity {
+    grid-area: identity;
+    background-color: white;
+    margin: 10px;
+}
+
+.gift_specificity {
+    grid-area: gift_spec;
+    background-color: white;
+    margin: 10px;
+}
+
+/* Bandeau intermédiaire étapes*/
+
+.step {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 15vh 10vh;
+    grid-template-areas: 
+    "step_number"
+    "step_message";
+    background-color: rgba(5, 5, 59, 0.952);
+}
+
+.step_state {
+    grid-area: step_number;
+    background-color: white;
+    margin-left: 10px;
+    margin-right: 10px;
+}