visual stuff

src/public/css/offers.css

@@ -7,6 +7,10 @@
   #close-offer-controls-x {
     width: 25px;
   }
+
+  #premium-selector-area {
+    width: 60px;
+  }
 }
 
 @media (min-width: 769px) {
@@ -18,14 +22,18 @@
   #close-offer-controls-x {
     width: 50px;
   }
-}
 
+  #premium-selector-area {
+    width: 100px;
+  }
+  
+}
 
 #create-offer-controls > * {
   text-align: center;
   margin-left: 15%;
   margin-right: 15%;
-  width: 70%
+  width: 70%;
 }
 
 #close-offer-controls-area {
@@ -33,6 +41,46 @@
   justify-content: end;
 }
 
+#premium-area > * {
+  display: block;
+}
+
+#premium-content-area {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#premium-content-area > * {
+  display: inline-block;
+  margin: 0 auto;
+}
+
+#premium-selector-area > * {
+  display: inline-block;
+}
+
+#premium-selector-area {
+  width:23%;
+  margin-left: 0;
+  margin-right: 5%;
+}
+
+#premium-value {
+  border: 1px solid gray;
+  width: 100%;
+}
+
+.premium-button {
+  width: 45%;
+}
+
+#premium-price-display-area {
+  margin-left: 0;
+  margin-right: 0;
+  width: 70%;
+}
+
 .money-amount-input-area {
   padding: 0;
   width: 10em;

src/views/offers.ejs

@@ -12,11 +12,18 @@
     <%- include("partials/appCommonHeader") %>
 
     <div class="over-background" id="offers-root">
-      <button id="button-start-create-offer" class="button-primary button-medium font-medium" style="display: block;">
+      <button
+        id="button-start-create-offer"
+        class="button-primary button-medium font-medium"
+        style="display: block"
+      >
         Crear nueva oferta
       </button>
 
-      <div id="create-offer-controls" style="display: none; border: 1px solid purple">
+      <div
+        id="create-offer-controls"
+        style="display: none; border: 1px solid purple"
+      >
         <div id="close-offer-controls-area">
           <img
             id="close-offer-controls-x"
@@ -37,10 +44,23 @@
           </button>
         </div>
         <div id="premium-area">
-          <p>Premium</p>
+          <h3>Premium</h3>
+          <div id="premium-content-area">
+            <div id="premium-selector-area">
               <div id="premium-value">0%</div>
-          <button id="button-increase-premium">+</button
+              <button class="premium-button" id="button-increase-premium">
-          ><button id="button-decrease-premium">-</button>
+                +</button
+              ><button class="premium-button" id="button-decrease-premium">
+                -
+              </button>
+            </div>
+            <div id="premium-price-display-area">
+              <p>
+                Tu precio: <span id="offer-price">90 000</span>€/BTC
+                <span>(Precio mercado: <span>83 000</span>€/BTC)</span>
+              </p>
+            </div>
+          </div>
         </div>
         <div id="amount-area">
           <p>¿Cuánto?</p>
@@ -56,7 +76,6 @@
             </div>
           </div>
           <div id="btc-amount" class="money-amount-input-area">
-            
             <input
               id="input-btc-amount"
               type="text"
@@ -71,23 +90,55 @@
         <div id="bitcoin-methods-area">
           <p>¿Cómo se mueve el Bitcoin?</p>
           <label for="onchain">Onchain</label
-          ><input type="checkbox" name="onchain" id="onchain-checkbox" checked/>
+          ><input
+            type="checkbox"
+            name="onchain"
+            id="onchain-checkbox"
+            checked
+          />
           <label for="lightning">Lightning</label
-          ><input type="checkbox" name="lightning" id="lightning-checkbox" checked/>
+          ><input
-          <p id="at-least-one-checkbox" style="display: none">Tienes que seleccionar al menos una opción.</p>
+            type="checkbox"
+            name="lightning"
+            id="lightning-checkbox"
+            checked
+          />
+          <p id="at-least-one-checkbox" style="display: none">
+            Tienes que seleccionar al menos una opción.
+          </p>
         </div>
         <div id="trust-area">
           <p>¿Quién puede ver la oferta?</p>
           <label for="my-trusted">Mis confiados</label
-          ><input type="checkbox" name="my-trusted" id="my-trusted-checkbox" checked disabled/>
+          ><input
+            type="checkbox"
+            name="my-trusted"
+            id="my-trusted-checkbox"
+            checked
+            disabled
+          />
           <label for="my-trusted-trusted">Los confiados de mis confiados</label
-          ><input type="checkbox" name="my-trusted-trusted" id="my-trusted-trusted-checkbox" checked/>
+          ><input
+            type="checkbox"
+            name="my-trusted-trusted"
+            id="my-trusted-trusted-checkbox"
+            checked
+          />
           <label for="all-members">Todos los miembros</label
-            ><input type="checkbox" name="all-members" id="all-members-checkbox"/>
+          ><input
+            type="checkbox"
+            name="all-members"
+            id="all-members-checkbox"
+          />
         </div>
         <div id="other-area">
-          <label for="large-bills">Se pueden usar billetes grandes (100€, 200€, 500€)</label
+          <label for="large-bills"
-            ><input type="checkbox" name="large-bills" id="large-bills-checkbox"/>
+            >Se pueden usar billetes grandes (100€, 200€, 500€)</label
+          ><input
+            type="checkbox"
+            name="large-bills"
+            id="large-bills-checkbox"
+          />
         </div>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta

src/views/partials/appCommonHeader.ejs

@@ -1,7 +1,24 @@
 <div class="over-background">
   <h1>la seca</h1>
-  <button id="navbutton-home" class="button-primary font-medium button-medium">Home</button>
+  <button id="navbutton-home" class="button-primary font-medium button-medium">
-  <button id="navbutton-offers" class="button-primary font-medium button-medium">Ofertas</button>
+    Home
-  <button id="navbutton-network" class="button-primary font-medium button-medium">Red</button>
+  </button>
-  <button id="navbutton-profile" class="button-primary font-medium button-medium">Mi perfil</button>
+  <button
+    id="navbutton-offers"
+    class="button-primary font-medium button-medium"
+  >
+    Ofertas
+  </button>
+  <button
+    id="navbutton-network"
+    class="button-primary font-medium button-medium"
+  >
+    Red
+  </button>
+  <button
+    id="navbutton-profile"
+    class="button-primary font-medium button-medium"
+  >
+    Mi perfil
+  </button>
 </div>