Add cookie message

Vahidpro · Aug 7, 2022 · 73cac1a · 73cac1a
1 parent a9cb261
commit 73cac1a
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 448 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-  <header>
+  <header class="header">
     <div class="wrapper">
       <nav>
 

diff --git a/main.js b/main.js
@@ -22,7 +22,19 @@ window.addEventListener("scroll", () => {
   }
 });
 
-var scroller = window.scrollY;
-console.log(scroller);
+const header = document.querySelector(".header");
 
-// Animate mobile nav
+const cookieMessage = document.createElement("div");
+cookieMessage.classList.add("cookie-message");
+
+cookieMessage.innerHTML = `ما از کوکی ها برای بهبود تجربه کاربری شما استفاده میکنیم
+
+<button class="btn light btn--close-cookie">فهمیدم!</button>`;
+
+header.append(cookieMessage);
+
+document
+  .querySelector(".btn--close-cookie")
+  .addEventListener("click", function () {
+    cookieMessage.remove();
+  });
diff --git a/packages/plans.css b/packages/plans.css
@@ -9,13 +9,8 @@ body {
   border-radius: 1.5rem;
   margin: 1rem;
   padding: 1rem 0rem 0rem 0rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 
 .highlighted {
@@ -69,25 +64,15 @@ body {
 .plans-container {
   margin: 1rem;
   text-align: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 article > h3 {
   font-size: 1.7rem;
 }
-
 article > div > button {
   width: 9em;
   height: 3em;
@@ -103,7 +88,6 @@ article > div > button {
   cursor: pointer;
   /* box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff; */
 }
-
 article > div > button::before {
   content: "";
   width: 0;
@@ -112,15 +96,12 @@ article > div > button::before {
   position: absolute;
   top: 0;
   left: 0;
-  background-image: -webkit-gradient(linear, left top, right top, from(#0fd850), to(#f9f047));
   background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
-  -webkit-transition: 0.5s ease;
   transition: 0.5s ease;
   display: block;
   z-index: -1;
   cursor: pointer;
 }
-
 article > div > button:hover::before {
   width: 9em;
 }
@@ -132,8 +113,7 @@ ul {
 .open {
   display: block !important;
   opacity: 1 !important;
-  -webkit-transform: translateY(0) !important;
-          transform: translateY(0) !important;
+  transform: translateY(0) !important;
 }
 
 .backdrop {
@@ -144,20 +124,15 @@ ul {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
-  -webkit-transition: opacity 0.3s linear;
   transition: opacity 0.3s linear;
 }
 
 .modal {
+  display: none;
   position: fixed;
-  /* display: none; */
   opacity: 0;
-  -webkit-transform: translateY(-3rem);
-          transform: translateY(-3rem);
-  -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
-  transition: opacity 0.5s ease-out, -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
+  transform: translateY(-3rem);
   transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
-  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), -webkit-transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
   z-index: 200;
   top: 20%;
   left: 30%;
@@ -168,12 +143,10 @@ ul {
   border-radius: 1.5rem;
   margin: 10%;
 }
-
 .modal button {
   border: none;
   margin: 2%;
 }
-
 .modal .modal-title {
   text-align: center;
   margin: 0 0 1rem 0;
@@ -194,30 +167,23 @@ ul {
   font-weight: 700;
   line-height: 1;
   min-width: 8.75rem;
-  -webkit-transition: background 200ms, -webkit-transform 200ms;
-  transition: background 200ms, -webkit-transform 200ms;
   transition: transform 200ms, background 200ms;
-  transition: transform 200ms, background 200ms, -webkit-transform 200ms;
 }
-
 .modal-action:hover, .modal-action:active {
-  -webkit-transform: translateY(-0.125rem);
-          transform: translateY(-0.125rem);
+  transform: translateY(-0.125rem);
 }
 
 .modal-action-yes {
   background: green;
   border-radius: 31.25rem;
 }
-
 .modal-action-yes:hover, .modal-action-yes:active {
   background: #18c443;
 }
 
 .modal-action-no {
   background: red;
 }
-
 .modal-action-no .modal-action-no:hover, .modal-action-no:active {
   background: #fc6060;
 }
@@ -227,28 +193,14 @@ ul {
   .plans-container {
     margin: 0.6rem;
     text-align: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
   .plan {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     width: 45%;
     vertical-align: middle;
   }
@@ -268,26 +220,18 @@ ul {
     font-size: 1.5rem;
   }
 }
-
 /* Desktop */
 @media (min-width: 48rem) {
   .plan {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     width: 30%;
     height: 35rem;
   }
   .highlighted {
-    -webkit-box-shadow: 0.125rem 0.125rem 0.1875rem 0.125rem rgba(65, 65, 65, 0.719);
-            box-shadow: 0.125rem 0.125rem 0.1875rem 0.125rem rgba(65, 65, 65, 0.719);
+    box-shadow: 0.125rem 0.125rem 0.1875rem 0.125rem rgba(65, 65, 65, 0.719);
     background: #11664d;
     text-align: center;
     width: 35%;
   }
-}
-/*# sourceMappingURL=plans.css.map */
+}/*# sourceMappingURL=plans.css.map */
diff --git a/packages/plans.css.map b/packages/plans.css.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     </head>
     <body>
-      <header>
+      <header class="header">
         <div class="wrapper">
           <nav>
@@ Expand Down @@