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 { .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;
} }

View file

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

View file

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

View file

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