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