format stuff

This commit is contained in:
counterweight 2025-02-28 13:05:44 +01:00
parent 12bc0d2b84
commit b8d694cc48
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
4 changed files with 141 additions and 136 deletions

View file

@ -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;
}
}

View file

@ -4,7 +4,7 @@
}
#invite-card-content {
width:100%;
width: 100%;
}
}

View file

@ -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;

View file

@ -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>