From 716dc726b5ea3901d120d3ad2971fe4f07952483 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Mon, 24 Feb 2025 16:46:26 +0100
Subject: [PATCH] visual stuff

---
 src/public/css/offers.css              | 52 +++++++++++++-
 src/public/css/seca.css                |  2 +-
 src/views/offers.ejs                   | 95 ++++++++++++++++++++------
 src/views/partials/appCommonHeader.ejs | 25 +++++--
 4 files changed, 145 insertions(+), 29 deletions(-)

diff --git a/src/public/css/offers.css b/src/public/css/offers.css
index 56f29d9..20c57b8 100644
--- a/src/public/css/offers.css
+++ b/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;
diff --git a/src/public/css/seca.css b/src/public/css/seca.css
index 5cd14da..8214815 100644
--- a/src/public/css/seca.css
+++ b/src/public/css/seca.css
@@ -31,7 +31,7 @@
   .button-medium {
     height: 3em;
     padding: 1em;
-    border-radius: 10px; 
+    border-radius: 10px;
   }
 }
 
diff --git a/src/views/offers.ejs b/src/views/offers.ejs
index 68f26e2..5ea9830 100644
--- a/src/views/offers.ejs
+++ b/src/views/offers.ejs
@@ -12,18 +12,25 @@
     <%- 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"
-          src="/img/circle-xmark.svg"
-          class="clickable"
-        />
-      </div>
+          <img
+            id="close-offer-controls-x"
+            src="/img/circle-xmark.svg"
+            class="clickable"
+          />
+        </div>
         <h2>Añade los detalles de tu oferta</h2>
         <div id="button-group-buy-or-sell" class="button-group">
           <button
@@ -37,10 +44,23 @@
           </button>
         </div>
         <div id="premium-area">
-          <p>Premium</p>
-          <div id="premium-value">0%</div>
-          <button id="button-increase-premium">+</button
-          ><button id="button-decrease-premium">-</button>
+          <h3>Premium</h3>
+          <div id="premium-content-area">
+            <div id="premium-selector-area">
+              <div id="premium-value">0%</div>
+              <button class="premium-button" id="button-increase-premium">
+                +</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/>
-          <p id="at-least-one-checkbox" style="display: none">Tienes que seleccionar al menos una opción.</p>
+          ><input
+            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
-            ><input type="checkbox" name="large-bills" id="large-bills-checkbox"/>
+          <label for="large-bills"
+            >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
diff --git a/src/views/partials/appCommonHeader.ejs b/src/views/partials/appCommonHeader.ejs
index 512515e..c41181b 100644
--- a/src/views/partials/appCommonHeader.ejs
+++ b/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-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>
+  <button id="navbutton-home" class="button-primary font-medium button-medium">
+    Home
+  </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>