visual stuff
This commit is contained in:
parent
bda4277d13
commit
716dc726b5
4 changed files with 145 additions and 29 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 id="button-decrease-premium">-</button>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue