pretty modal hell yeah
This commit is contained in:
parent
0f889f6361
commit
98faeb2f1b
GPG key ID:
883EDBAA726BD96C
4 changed files with 221 additions and 180 deletions
|
|
@ -25,164 +25,165 @@
|
|||
Crear nueva oferta
|
||||
</button>
|
||||
</div>
|
||||
<div class="over-background" id="create-offer-root">
|
||||
<div id="create-offer-controls">
|
||||
<div id="close-offer-controls-area">
|
||||
<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="buy-or-sell-area" class="create-offer-step">
|
||||
<div id="button-group-buy-or-sell" class="button-group">
|
||||
<div id="create-offer-modal-root" class="full-screen-modal-background">
|
||||
<div class="full-screen-modal" id="create-offer-root">
|
||||
<div id="create-offer-controls">
|
||||
<h2>Añade los detalles de tu oferta</h2>
|
||||
<div id="buy-or-sell-area" class="create-offer-step">
|
||||
<div id="button-group-buy-or-sell" class="button-group">
|
||||
<button
|
||||
data-value="buy-bitcoin"
|
||||
id="button-buy-bitcoin"
|
||||
class="selected"
|
||||
>
|
||||
Quiero comprar Bitcoin</button
|
||||
><button data-value="sell-bitcoin" id="button-sell-bitcoin">
|
||||
Quiero vender Bitcoin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="premium-area" class="create-offer-step">
|
||||
<h3>Premium</h3>
|
||||
<div id="premium-content-area">
|
||||
<div id="premium-selector-area">
|
||||
<div id="premium-value">0%</div>
|
||||
<div id="premium-buttons-container">
|
||||
<button class="premium-button" id="button-increase-premium">
|
||||
+</button
|
||||
><button class="premium-button" id="button-decrease-premium">
|
||||
-
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="premium-price-display-area">
|
||||
<p id="offer-price-paragraph">
|
||||
Tu precio: <span id="offer-price">90 000</span>€/BTC
|
||||
</p>
|
||||
<p id="market-price-paragraph">
|
||||
(Precio mercado: <span>83 000</span>€/BTC)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="amount-area" class="create-offer-step">
|
||||
<h3>¿Cuánto?</h3>
|
||||
<div id="amount-area-content">
|
||||
<div id="eur-amount" class="money-amount-input-area">
|
||||
<input
|
||||
id="input-eur-amount"
|
||||
type="text"
|
||||
class="money-input input-money-amount"
|
||||
value="100"
|
||||
required
|
||||
/>
|
||||
<div id="eur-symbol" class="curr-symbol">
|
||||
<span id="eur-character" class="curr-character">€</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btc-amount" class="money-amount-input-area">
|
||||
<input
|
||||
id="input-btc-amount"
|
||||
type="text"
|
||||
class="money-input input-money-amount"
|
||||
disabled
|
||||
/>
|
||||
<div id="sats-symbol" class="curr-symbol">
|
||||
<span id="sats-character" class="curr-character">SAT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="place-and-time-area" class="create-offer-step">
|
||||
<h3>¿Dónde y cuándo?</h3>
|
||||
<div id="place-and-time-boxes">
|
||||
<textarea
|
||||
id="place-input"
|
||||
class="place-and-time-box"
|
||||
autocomplete="on"
|
||||
maxlength="140"
|
||||
placeholder='¿Dónde? Ej."Eixample", "La Maquinista", "Cualquier lugar en BCN", "Meetup BBO"'
|
||||
></textarea>
|
||||
<textarea
|
||||
id="time-input"
|
||||
class="place-and-time-box"
|
||||
autocomplete="on"
|
||||
maxlength="140"
|
||||
placeholder='¿Cuándo? Ej."Cualquier hora", "19:00-21:00", "Finde"'
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bitcoin-methods-area" class="create-offer-step">
|
||||
<h3>¿Cómo se mueve el Bitcoin?</h3>
|
||||
<div id="onchain-checkbox-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="onchain"
|
||||
id="onchain-checkbox"
|
||||
checked
|
||||
/><label for="onchain">Onchain</label>
|
||||
</div>
|
||||
<div id="lightning-checkbox-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lightning"
|
||||
id="lightning-checkbox"
|
||||
checked
|
||||
/><label for="lightning">Lightning</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="trust-area" class="create-offer-step">
|
||||
<h3>¿Quién puede ver la oferta?</h3>
|
||||
<div id="my-trusted-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="my-trusted"
|
||||
id="my-trusted-checkbox"
|
||||
checked
|
||||
disabled
|
||||
/><label for="my-trusted">Mis confiados</label>
|
||||
</div>
|
||||
<div id="my-trusted-trusted-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="my-trusted-trusted"
|
||||
id="my-trusted-trusted-checkbox"
|
||||
checked
|
||||
/><label for="my-trusted-trusted"
|
||||
>Los confiados de mis confiados</label
|
||||
>
|
||||
</div>
|
||||
<div id="all-members-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="all-members"
|
||||
id="all-members-checkbox"
|
||||
/><label for="all-members">Todos los miembros</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="other-area" class="create-offer-step">
|
||||
<h3>Extras</h3>
|
||||
<div id="large-bills-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="large-bills"
|
||||
id="large-bills-checkbox"
|
||||
/><label for="large-bills"
|
||||
>Se pueden usar billetes grandes (100€, 200€, 500€)</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="submit-button-area">
|
||||
<button
|
||||
data-value="buy-bitcoin"
|
||||
id="button-buy-bitcoin"
|
||||
class="selected"
|
||||
id="button-submit-offer"
|
||||
class="button-primary button-large"
|
||||
>
|
||||
Quiero comprar Bitcoin</button
|
||||
><button data-value="sell-bitcoin" id="button-sell-bitcoin">
|
||||
Quiero vender Bitcoin
|
||||
Publicar oferta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="premium-area" class="create-offer-step">
|
||||
<h3>Premium</h3>
|
||||
<div id="premium-content-area">
|
||||
<div id="premium-selector-area">
|
||||
<div id="premium-value">0%</div>
|
||||
<div id="premium-buttons-container">
|
||||
<button class="premium-button" id="button-increase-premium">
|
||||
+</button
|
||||
><button class="premium-button" id="button-decrease-premium">
|
||||
-
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="premium-price-display-area">
|
||||
<p id="offer-price-paragraph">
|
||||
Tu precio: <span id="offer-price">90 000</span>€/BTC
|
||||
</p>
|
||||
<p id="market-price-paragraph">
|
||||
(Precio mercado: <span>83 000</span>€/BTC)
|
||||
</p>
|
||||
</div>
|
||||
<div id="close-offer-controls-area">
|
||||
<button id="close-offer" class="button-secondary button-medium">Volver</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="amount-area" class="create-offer-step">
|
||||
<h3>¿Cuánto?</h3>
|
||||
<div id="amount-area-content">
|
||||
<div id="eur-amount" class="money-amount-input-area">
|
||||
<input
|
||||
id="input-eur-amount"
|
||||
type="text"
|
||||
class="money-input input-money-amount"
|
||||
value="100"
|
||||
required
|
||||
/>
|
||||
<div id="eur-symbol" class="curr-symbol">
|
||||
<span id="eur-character" class="curr-character">€</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btc-amount" class="money-amount-input-area">
|
||||
<input
|
||||
id="input-btc-amount"
|
||||
type="text"
|
||||
class="money-input input-money-amount"
|
||||
disabled
|
||||
/>
|
||||
<div id="sats-symbol" class="curr-symbol">
|
||||
<span id="sats-character" class="curr-character">SAT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="place-and-time-area" class="create-offer-step">
|
||||
<h3>¿Dónde y cuándo?</h3>
|
||||
<div id="place-and-time-boxes">
|
||||
<textarea
|
||||
id="place-input"
|
||||
class="place-and-time-box"
|
||||
autocomplete="on"
|
||||
maxlength="140"
|
||||
placeholder='¿Dónde? Ej."Eixample", "La Maquinista", "Cualquier lugar en BCN", "Meetup BBO"'
|
||||
></textarea>
|
||||
<textarea
|
||||
id="time-input"
|
||||
class="place-and-time-box"
|
||||
autocomplete="on"
|
||||
maxlength="140"
|
||||
placeholder='¿Cuándo? Ej."Cualquier hora", "19:00-21:00", "Finde"'
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bitcoin-methods-area" class="create-offer-step">
|
||||
<h3>¿Cómo se mueve el Bitcoin?</h3>
|
||||
<div id="onchain-checkbox-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="onchain"
|
||||
id="onchain-checkbox"
|
||||
checked
|
||||
/><label for="onchain">Onchain</label>
|
||||
</div>
|
||||
<div id="lightning-checkbox-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lightning"
|
||||
id="lightning-checkbox"
|
||||
checked
|
||||
/><label for="lightning">Lightning</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="trust-area" class="create-offer-step">
|
||||
<h3>¿Quién puede ver la oferta?</h3>
|
||||
<div id="my-trusted-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="my-trusted"
|
||||
id="my-trusted-checkbox"
|
||||
checked
|
||||
disabled
|
||||
/><label for="my-trusted">Mis confiados</label>
|
||||
</div>
|
||||
<div id="my-trusted-trusted-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="my-trusted-trusted"
|
||||
id="my-trusted-trusted-checkbox"
|
||||
checked
|
||||
/><label for="my-trusted-trusted"
|
||||
>Los confiados de mis confiados</label
|
||||
>
|
||||
</div>
|
||||
<div id="all-members-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="all-members"
|
||||
id="all-members-checkbox"
|
||||
/><label for="all-members">Todos los miembros</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="other-area" class="create-offer-step">
|
||||
<h3>Extras</h3>
|
||||
<div id="large-bills-area" class="checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="large-bills"
|
||||
id="large-bills-checkbox"
|
||||
/><label for="large-bills"
|
||||
>Se pueden usar billetes grandes (100€, 200€, 500€)</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="submit-button-area">
|
||||
<button id="button-submit-offer" class="button-primary button-large">
|
||||
Publicar oferta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="over-background" id="view-my-offers-root">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue