Merge pull request elisacruzcas#8 from elisacruzcas/dev-simulateur

Dev simulateur
MelissaOlas · Oct 7, 2021 · eb80c99 · eb80c99
2 parents 717f873 + 719d160
commit eb80c99
Show file tree

Hide file tree

Showing 6 changed files with 353 additions and 125 deletions.
diff --git a/excuse-data.js b/excuse-data.js
@@ -0,0 +1,51 @@
+function getCharacters(){
+    return ['Tu Duy',
+'Linus Torvalds',
+'un homme en costume de Pikachu', 
+'le prof de data', 
+"Muad'Dib", 
+'un témoin de Jéhovah', 
+'Jacques Chirac', 
+'un chat noir', 
+"une bactérie de l'évier", 
+'Thomas', 
+'Paul-Emmanuel',
+'Brendan Eich',
+'Elon Musk',
+'Edouard Philippe',
+'un breton',
+]}
+
+function getVerbs() {
+    return ['a volé', 
+'a créé des actions en Bourse sur', 
+'a dansé avec', 
+'a testé un tour de magie avec', 
+'a défenestré', 
+"m'a échangé ses cartes Pokémon contre", 
+"voulait s'enfuir de la Wild avec", 
+'revendait des faux pass sanitaires contre', 
+"m'a fait passer la douane en cachant", 
+"m'a proposé de tourner un film sur", 
+'me poursuivait avec',
+'dessinait',
+'voulait exfiltrer',
+]}
+
+function getObjects() {
+    return ['mon dernier ticket de métro', 
+'mes chaussures', 
+'mes chaussettes', 
+'mon ordinateur portable', 
+'une tronçonneuse', 
+'mon appareil à raclette', 
+'un paquet de clopes', 
+'une chemise à carreaux', 
+'toutes les machines à café', 
+'les viennoiseries sur la table',
+'la banane pourrie au fond du frigo',
+'la dernière boite de post-its',
+"l'émulateur",
+]}
+
+export {getCharacters, getVerbs, getObjects}
diff --git a/pages-header.js b/pages-header.js
@@ -1,4 +1,3 @@
-//js Header
 function myFunction() {
     var x = document.getElementById("myTopnav");
     if (x.className === "topnav") {

diff --git a/shops.js b/shops.js
@@ -174,20 +174,4 @@ for (let i = 0; i < shops.length; i++) {
 
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+export {createCard}
diff --git a/surprise.css b/surprise.css
@@ -1,17 +1,12 @@
 @import './fonts.css';
-h1 {
-    text-align: center;
-    text-transform: uppercase;
-    font-family: var(--main-font-family);
-    color: var(--main-wcs-color);
-}
 
 h2 {
     text-align: center;
-    padding: 5px;
+    padding: 10px;
     background-color: var(--dark-gray);
     color: white;
     font-family: var(--main-font-family);
+    font-size: 22px;
 }
 
 form {
@@ -44,9 +39,9 @@ select {
     font-family: var(--main-font-family);   
 }
 
-button {
+.simulateur-buttons {
     background-color: var(--main-wcs-color);
-    border: 1px solid #404A53;
+    border: 1px solid var(--dark-gray);
     font-weight: 700;
     color: white;
     font-size: 20px;
@@ -55,17 +50,15 @@ button {
     font-family: var(--main-font-family);
 }
 
-button:hover {
+.simulateur-buttons:hover {
     box-shadow: 0 0.2em 0.2em 0;
     opacity: 1;
     font-weight: 900;
 }
 
-.excuses-bidons {
-    height: 13em;
-    text-align: center;
-    background-color: var(--light-gray);
-    font-family: var(--second-font-family);
+#search-close-button {
+    border-radius: 50%;
+    margin-bottom: 10px;
 }
 
 .form-element {
@@ -76,19 +69,238 @@ button:hover {
 }
 
 .search-results {
-    background-color: rgba(132, 145, 146, 50%);
-    display: block;
-}
-
-.results-elements {
-    height: 800px;
+    background-color: rgba(132, 145, 146, 75%);
+    display: none;
 }
 
 .close-button {
     border-radius: 100%;
     margin: 5px auto;
 }
 
+.excuses-bidons {
+    text-align: center;
+    background-color: rgba(132, 145, 146, 75%);
+    font-family: var(--second-font-family);
+    font-weight: 900;
+    margin-bottom: 50px;
+    color: white
+}
+
+#excuse_button {
+    margin-bottom: 10px;
+}
+
+.excuse {
+    font-size: 20px;
+}
+
+.excuse-space {
+    height: 10px;
+}
+
+/* BOXES SPECIFIC CSS */
+
+.material-icons {
+    font-family: 'Material Icons'; 
+    font-weight: normal;
+    font-style: normal;
+    font-size: 30px; 
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    border: 1px var(--main-wcs-color) solid;
+    border-radius: 50%;
+    outline: none;
+    background-color: var(--light-gray);
+    text-decoration: none;
+    color: var(--main-wcs-color);
+} 
+
+#logoFavoris {
+    font-size: 30px;
+    border: none;
+    background-color: var(--darker-gray);
+    float: right;
+}
+
+.title {
+    height: 3em;
+    padding-top: 1em;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: var(--main-font-family);
+    color: var(--main-wcs-color);
+    background-color: var(--darker-gray);
+}
+
+.cards {
+    display: flex;
+    margin-top: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+    height: auto;  
+    flex-direction: row;
+}
+
+.card {
+    width: 100%;
+    max-height: 35em;
+    margin-bottom: 4em;
+    background-color: var(--light-gray);
+}
+
+.card-header {
+    display: grid; 
+}
+
+.card-image {
+    width: auto;
+    max-height: 100%;
+}
+
+.image-enseigne {
+    max-width: 100%;
+    height: auto;  
+}
+
+.favButton {
+    position: absolute;
+    align-self: start;
+    justify-self: end;
+    border: none;
+    border-radius: none;
+    background-color: #11ffee00; /*transparent*/
+    margin: 5px;
+    color: red;
+}
+
+.trajet {
+    font-weight: bold;
+    font-size: x-large;
+    position: absolute;
+    align-self: end;
+    justify-self: end; 
+    background-color: var(--lighter-gray);
+    color: white; 
+    padding-left: 3px;
+}
+
+.card-body {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(5, 10fr);
+    gap: 10px;
+    grid-auto-rows: minmax(10px, auto);
+    padding: 1em;
+    height: 10em;
+}
+
+.nom-enseigne {
+    grid-column: 1 / 4;
+    grid-row: 1;
+    padding: 0%;
+    align-self: end;
+    color: white;
+}
+
+.style-enseigne {
+    align-self: baseline;
+    grid-column: 1 / 5;
+    grid-row: 2;
+    font-size: small;
+}
+
+.prix-enseigne {
+    grid-column: 5;
+    grid-row: 2;
+    justify-self: end;
+    font-size:large;
+}
+
+.avis-enseigne {
+    grid-column: 5;
+    grid-row: 1 / 3;
+    color: orange;
+    /* font-weight: bold; */
+    font-size: x-large;
+    direction: rtl;
+    padding: 0;
+}
+
+.maps-enseigne {
+    grid-column: 1;
+    grid-row: 4;
+
+}
+
+.card-body button {
+    grid-column: 5;
+    grid-row: 3;
+    height: 2.5em;
+    width: 3em;
+    justify-self: end;
+    position: absolute; 
+    border: none;
+    border-radius: 0%;
+}
+
+.descript-enseigne {
+    position: relative;
+    display: none;
+    grid-auto-rows: minmax(30px, auto);
+    grid-auto-columns: minmax(10px, auto);
+    font-size: smaller;
+    padding: 1em;
+    height: 15em;
+}
+
+.descript-text {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+
+.descript-site {
+    grid-column: 4;
+    grid-row: 1;
+}
+
+.descript-coord {
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.btn-close-card {
+    grid-column: 7;
+    grid-row: 3;
+    padding: 1em;
+    justify-self: end;
+    position: absolute; 
+    height: 2.5em;
+    width: 3em;
+    border: none;
+}
+
+@media screen and (min-width: 576px) { 
+    .card { 
+        width: 20em;
+        max-height: 40em;
+        margin: 3em;
+    } 
+    .card-header {
+        width: 20em;
+        max-height: 20em;
+    }
+    .image-enseigne {
+        object-fit: contain;
+    }    
+  } 
 
 /* CSS SPECIFIQUE AUX HEADER ET FOOTER */
Original file line number	Diff line number	Diff line change
Expand Up		@@ -174,20 +174,4 @@ for (let i = 0; i < shops.length; i++) {

		}


















		export {createCard}