format stuff
This commit is contained in:
parent
12bc0d2b84
commit
b8d694cc48
4 changed files with 141 additions and 136 deletions
|
|
@ -1,31 +1,33 @@
|
|||
@media (max-width: 768px) {
|
||||
.over-background > *:first-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {.over-background > *:first-child {
|
||||
margin-bottom: 5px;
|
||||
.over-background > *:last-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.over-background > * {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.over-background > *:last-child {
|
||||
margin-top: 5px;
|
||||
@media (min-width: 769px) {
|
||||
.over-background > *:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.over-background > *:last-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.over-background > * {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.over-background > * {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
}}
|
||||
|
||||
|
||||
@media (min-width: 769px) {.over-background > *:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.over-background > *:last-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.over-background > * {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}}
|
||||
|
||||
.badges {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
|
@ -59,4 +61,4 @@
|
|||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
#invite-card-content {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,6 @@ h1 {
|
|||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.button-group button {
|
||||
border: 0;
|
||||
padding: 1em;
|
||||
|
|
@ -158,8 +157,6 @@ h1 {
|
|||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.text-warning {
|
||||
color: red;
|
||||
font-weight: 800;
|
||||
|
|
|
|||
|
|
@ -11,117 +11,123 @@
|
|||
<body>
|
||||
<main>
|
||||
<div class="over-background">
|
||||
<div class="shadowed-round-area">
|
||||
<div class="create-profile-card-section center">
|
||||
<h1>Crea tu perfil</h1>
|
||||
<p>Tu clave de Nostr ya es parte de la seca.</p>
|
||||
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadowed-round-area">
|
||||
<div class="create-profile-card-section center">
|
||||
<label
|
||||
>Pseudónimo (Nym):
|
||||
<input
|
||||
type="text"
|
||||
name="nym"
|
||||
id="nym-input"
|
||||
placeholder="ShadowySuperCoder"
|
||||
/></label>
|
||||
<p
|
||||
id="nym-input-validation-warning"
|
||||
class="text-warning"
|
||||
style="display: none"
|
||||
>
|
||||
Debe tener al menos 3 caracteres.
|
||||
</p>
|
||||
</div>
|
||||
<div class="create-profile-card-section center">
|
||||
<h2>Métodos de contacto</h2>
|
||||
<div id="contacts">
|
||||
<div class="card-secondary">
|
||||
<p>
|
||||
Tus métodos de contacto son necesarios para hablar con otros
|
||||
miembros y poder comerciar.
|
||||
</p>
|
||||
<p>
|
||||
Tus métodos de contacto se guardan encriptados con tu clave de
|
||||
nostr. laseca nunca puede verlos. Solo los miembros con los que
|
||||
tú decidas podrán verlos.
|
||||
</p>
|
||||
<p>Debes añadir al menos un método de contacto para completar tu perfil.</p>
|
||||
</div>
|
||||
|
||||
<div class="badges">
|
||||
<div class="badge">
|
||||
<img src="/img/phone.svg" />
|
||||
<p>Teléfono</p>
|
||||
<input
|
||||
id="phone-input"
|
||||
data-type="phone"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/square-whatsapp.svg" />
|
||||
<p>Whatsapp</p>
|
||||
<input
|
||||
id="whatsapp-input"
|
||||
data-type="whatsapp"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/telegram.svg" />
|
||||
<p>Telegram</p>
|
||||
<input
|
||||
id="telegram-input"
|
||||
data-type="telegram"
|
||||
placeholder="666777888 o @TuTag"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/envelope.svg" />
|
||||
<p>Email</p>
|
||||
<input
|
||||
id="email-input"
|
||||
data-type="email"
|
||||
placeholder="tu@correo.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/lasecagold_ostrich.svg" />
|
||||
<p>Nostr</p>
|
||||
<input id="nostr-input" data-type="nostr" placeholder="Npub" />
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/signal-messenger.svg" />
|
||||
<p>Signal</p>
|
||||
<input
|
||||
id="signal-input"
|
||||
data-type="signal"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadowed-round-area">
|
||||
<div class="create-profile-card-section center">
|
||||
<h1>Crea tu perfil</h1>
|
||||
<p>Tu clave de Nostr ya es parte de la seca.</p>
|
||||
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadowed-round-area">
|
||||
<div class="create-profile-card-section center">
|
||||
<label
|
||||
>Pseudónimo (Nym):
|
||||
<input
|
||||
type="text"
|
||||
name="nym"
|
||||
id="nym-input"
|
||||
placeholder="ShadowySuperCoder"
|
||||
/></label>
|
||||
<p
|
||||
id="nym-input-validation-warning"
|
||||
class="text-warning"
|
||||
style="display: none"
|
||||
>
|
||||
Debe tener al menos 3 caracteres.
|
||||
</p>
|
||||
</div>
|
||||
<div class="create-profile-card-section center">
|
||||
<h2>Métodos de contacto</h2>
|
||||
<div id="contacts">
|
||||
<div class="card-secondary">
|
||||
<p>
|
||||
Tus métodos de contacto son necesarios para hablar con otros
|
||||
miembros y poder comerciar.
|
||||
</p>
|
||||
<p>
|
||||
Tus métodos de contacto se guardan encriptados con tu clave de
|
||||
nostr. laseca nunca puede verlos. Solo los miembros con los
|
||||
que tú decidas podrán verlos.
|
||||
</p>
|
||||
<p>
|
||||
Debes añadir al menos un método de contacto para completar tu
|
||||
perfil.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="badges">
|
||||
<div class="badge">
|
||||
<img src="/img/phone.svg" />
|
||||
<p>Teléfono</p>
|
||||
<input
|
||||
id="phone-input"
|
||||
data-type="phone"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/square-whatsapp.svg" />
|
||||
<p>Whatsapp</p>
|
||||
<input
|
||||
id="whatsapp-input"
|
||||
data-type="whatsapp"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/telegram.svg" />
|
||||
<p>Telegram</p>
|
||||
<input
|
||||
id="telegram-input"
|
||||
data-type="telegram"
|
||||
placeholder="666777888 o @TuTag"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/envelope.svg" />
|
||||
<p>Email</p>
|
||||
<input
|
||||
id="email-input"
|
||||
data-type="email"
|
||||
placeholder="tu@correo.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/lasecagold_ostrich.svg" />
|
||||
<p>Nostr</p>
|
||||
<input
|
||||
id="nostr-input"
|
||||
data-type="nostr"
|
||||
placeholder="Npub"
|
||||
/>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<img src="/img/signal-messenger.svg" />
|
||||
<p>Signal</p>
|
||||
<input
|
||||
id="signal-input"
|
||||
data-type="signal"
|
||||
placeholder="666777888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
id="submit-profile-button"
|
||||
type="submit"
|
||||
class="button-primary button-large"
|
||||
>
|
||||
Crear perfil
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
id="submit-profile-button"
|
||||
type="submit"
|
||||
class="button-primary button-large"
|
||||
>
|
||||
Crear perfil
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="create-profile-success" class="top-notification-good">
|
||||
<img src="/img/circle-check-white.svg" />
|
||||
<p>
|
||||
¡Bien! Tu perfil está completo. Te estamos llevando a la aplicación...
|
||||
</p>
|
||||
</div>
|
||||
<div id="create-profile-success" class="top-notification-good">
|
||||
<img src="/img/circle-check-white.svg" />
|
||||
<p>
|
||||
¡Bien! Tu perfil está completo. Te estamos llevando a la aplicación...
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<script src="/javascript/createProfile.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue