confirmation popup

src/public/css/seca.css

@@ -14,9 +14,14 @@
 
   .button-medium {
     height: 3em;
-    padding: 1em;
+    padding: 0.5em 1em;
     border-radius: 10px;
   }
+
+  .top-notification-good {
+    top: 25px;
+    
+  }
 }
 
 @media (min-width: 769px) {
@@ -33,8 +38,41 @@
     padding: 1em;
     border-radius: 10px;
   }
+
+  .top-notification-good {
+    top: 50px;
+  }
 }
 
+.top-notification-good {
+  border-radius: 10px;
+  background-color: rgb(9, 165, 9);
+  color: white;
+  font-weight: 800;
+  opacity: 0.8;
+  position: fixed;
+  padding: 20px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  left: 50%;
+    transform: translateX(-50%);
+}
+.top-notification-good > * {
+  margin: 0 20px;
+}
+.top-notification-good > *:first-child {
+  margin-left: 0;
+}
+.top-notification-good > *:last-child {
+  margin-right: 0;
+}
+
+.top-notification-good img {
+  height: 50px;
+}
+
+
 .badges {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

src/public/img/circle-check-green.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- circle-check icon by Free Icons (https://free-icons.github.io/free-icons/) -->
+
+<svg
+   height="1em"
+   fill="currentColor"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="circle-check.svg"
+   inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.6855469"
+     inkscape:cx="255.70336"
+     inkscape:cy="256"
+     inkscape:window-width="1978"
+     inkscape:window-height="1088"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M 256 512 Q 326 511 384 478 L 384 478 L 384 478 Q 442 444 478 384 Q 512 323 512 256 Q 512 189 478 128 Q 442 68 384 34 Q 326 1 256 0 Q 186 1 128 34 Q 70 68 34 128 Q 0 189 0 256 Q 0 323 34 384 Q 70 444 128 478 Q 186 511 256 512 L 256 512 Z M 369 209 L 241 337 L 369 209 L 241 337 Q 224 351 207 337 L 143 273 L 143 273 Q 129 256 143 239 Q 160 225 177 239 L 224 286 L 224 286 L 335 175 L 335 175 Q 352 161 369 175 Q 383 192 369 209 L 369 209 Z"
+     id="path1"
+     style="fill:#008000" />
+</svg>

src/public/img/circle-check-white.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- circle-check icon by Free Icons (https://free-icons.github.io/free-icons/) -->
+
+<svg
+   height="1em"
+   fill="currentColor"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="circle-check-white.svg"
+   inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.6855469"
+     inkscape:cx="255.70336"
+     inkscape:cy="256"
+     inkscape:window-width="1978"
+     inkscape:window-height="1088"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M 256 512 Q 326 511 384 478 L 384 478 L 384 478 Q 442 444 478 384 Q 512 323 512 256 Q 512 189 478 128 Q 442 68 384 34 Q 326 1 256 0 Q 186 1 128 34 Q 70 68 34 128 Q 0 189 0 256 Q 0 323 34 384 Q 70 444 128 478 Q 186 511 256 512 L 256 512 Z M 369 209 L 241 337 L 369 209 L 241 337 Q 224 351 207 337 L 143 273 L 143 273 Q 129 256 143 239 Q 160 225 177 239 L 224 286 L 224 286 L 335 175 L 335 175 Q 352 161 369 175 Q 383 192 369 209 L 369 209 Z"
+     id="path1"
+     style="fill:#ffffff" />
+</svg>

src/views/offers.ejs

@@ -178,6 +178,12 @@
           </button>
         </div>
       </div>
+      <div id="offer-created-confirmation" class="top-notification-good">
+        <img
+            src="/img/circle-check-white.svg"
+          />
+        <p>¡Oferta creada! Puedes verla en tus ofertas.</p>
+      </div>
     </div>
 
     <%- include("partials/appCommonScripts") %>