visuals in place

This commit is contained in:
counterweight 2025-02-20 14:53:09 +01:00
parent 56c31cb4b5
commit 39032dcd7b
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
11 changed files with 443 additions and 78 deletions

View file

@ -9,69 +9,100 @@
</head>
<body>
<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>
<hr />
<form onsubmit="return false">
<label
>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"
/></label>
<div id="contacts">
<p>Añade métodos de contacto para poder hablar con otros miembros.</p>
<div class="badges">
<div class="badge" data-type="whatsapp">
📱 Teléfono <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="whatsapp">
📱 WhatsApp <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="telegram">
📩 Telegram <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="email">
📧 Email <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="nostr">
📧 Nostr <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="signal">
📧 Signal <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="matrix">
📧 Matrix <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="xmpp">
📧 XMPP <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<div class="badge" data-type="simplex">
📧 Simplex <input /><button class="contact-detail-add-button">
Añadir
</button>
</div>
<main>
<div class="over-background">
<div class="create-profile-card-section">
<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 id="created-contact-details-section">
<p>Contactos añadidos</p>
<div id="created-contact-details-list"></div>
<div class="over-background">
<div class="create-profile-card-section">
<h2>Perfil</h2>
<label
>Pseudónimo (Nym):
<input
type="text"
name="nym"
id="nym-input"
placeholder="ShadowySuperCoder"
/></label>
</div>
</div>
<button id="submit-details-button" type="submit">Crear tu perfil</button>
</form>
<div class="over-background">
<div class="create-profile-card-section">
<h2>Datos de contacto</h2>
<div id="contacts">
<p>
Añade métodos de contacto para poder hablar con otros miembros.
Debes añadir al menos uno. Siempre puedes editarlos más adelante.
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
height="5em"
fill="#e1c300"
viewBox="0 0 512 512"
>
<path
d="M 0.9961089494163424 63.750972762645915 Q 1.9922178988326849 36.856031128404666 19.92217898832685 18.926070038910506 L 19.92217898832685 18.926070038910506 L 19.92217898832685 18.926070038910506 Q 37.85214007782101 0.9961089494163424 64.74708171206225 0 L 447.25291828793775 0 L 447.25291828793775 0 Q 474.147859922179 0.9961089494163424 492.07782101167317 18.926070038910506 Q 510.0077821011673 36.856031128404666 511.00389105058366 63.750972762645915 L 511.00389105058366 350.63035019455253 L 511.00389105058366 350.63035019455253 Q 510.0077821011673 377.5252918287938 492.07782101167317 395.45525291828795 Q 474.147859922179 413.3852140077821 447.25291828793775 414.38132295719845 L 308.79377431906613 414.38132295719845 L 308.79377431906613 414.38132295719845 L 186.27237354085602 507.0194552529183 L 186.27237354085602 507.0194552529183 Q 178.30350194552528 512 169.3385214007782 508.01556420233464 Q 160.37354085603113 504.0311284046693 160.37354085603113 494.07003891050584 L 160.37354085603113 414.38132295719845 L 160.37354085603113 414.38132295719845 L 64.74708171206225 414.38132295719845 L 64.74708171206225 414.38132295719845 Q 37.85214007782101 413.3852140077821 19.92217898832685 395.45525291828795 Q 1.9922178988326849 377.5252918287938 0.9961089494163424 350.63035019455253 L 0.9961089494163424 63.750972762645915 L 0.9961089494163424 63.750972762645915 Z M 256 79.6887159533074 Q 234.08560311284046 81.68093385214007 232.09338521400778 103.59533073929961 L 232.09338521400778 215.15953307392996 L 232.09338521400778 215.15953307392996 Q 234.08560311284046 237.0739299610895 256 239.06614785992218 Q 277.9143968871595 237.0739299610895 279.9066147859922 215.15953307392996 L 279.9066147859922 103.59533073929961 L 279.9066147859922 103.59533073929961 Q 277.9143968871595 81.68093385214007 256 79.6887159533074 L 256 79.6887159533074 Z M 287.87548638132296 302.8171206225681 Q 287.87548638132296 288.8715953307393 278.91050583657585 279.9066147859922 L 278.91050583657585 279.9066147859922 L 278.91050583657585 279.9066147859922 Q 269.9455252918288 270.94163424124514 256 270.94163424124514 Q 242.0544747081712 270.94163424124514 233.08949416342412 279.9066147859922 Q 224.12451361867704 288.8715953307393 224.12451361867704 302.8171206225681 Q 224.12451361867704 316.7626459143969 233.08949416342412 325.72762645914395 Q 242.0544747081712 334.69260700389106 256 334.69260700389106 Q 269.9455252918288 334.69260700389106 278.91050583657585 325.72762645914395 Q 287.87548638132296 316.7626459143969 287.87548638132296 302.8171206225681 L 287.87548638132296 302.8171206225681 Z"
/>
</svg>
<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. La seca no puede verlos.
</p>
<p>Solo los miembros con los que tú decidas podrán verlos.</p>
</div>
<div class="badges">
<div class="badge" data-type="phone">
<img src="/img/phone.svg" />
<p>Teléfono</p>
<input placeholder="666777888" />
</div>
<div class="badge" data-type="whatsapp">
<img src="/img/square-whatsapp.svg" />
<p>Whatsapp</p>
<input placeholder="666777888" />
</div>
<div class="badge" data-type="telegram">
<img src="/img/telegram.svg" />
<p>Telegram</p>
<input placeholder="666777888" />
</div>
<div class="badge" data-type="email">
<img src="/img/envelope.svg" />
<p>Email</p>
<input placeholder="666777888" />
</div>
<div class="badge" data-type="nostr">
<img src="/img/lasecagold_ostrich.svg" />
<p>Nostr</p>
<input placeholder="666777888" />
</div>
<div class="badge" data-type="signal">
<img src="/img/signal-messenger.svg" />
<p>Signal</p>
<input placeholder="666777888" />
</div>
</div>
</div>
<button
id="submit-details-button"
type="submit"
class="button-primary button-large"
>
Crear perfil
</button>
</div>
</div>
</main>
</body>
</html>

View file

@ -10,7 +10,7 @@
<body>
<main>
<div class="invite-card">
<div class="invite-card over-background">
<div class="invite-card-content">
<h1>¡Has sido invitado a la seca!</h1>
<figure>
@ -18,7 +18,7 @@
</figure>
<p>Usa tu extensión de Nostr para darte de alta:</p>
<form onsubmit="acceptInvite();return false">
<button id="nostr-signup-button" type="submit">
<button id="nostr-signup-button" type="submit" class="button-large">
<figure>
<img
src="/img/white_ostrich.svg"
@ -31,7 +31,7 @@
</form>
<div
id="rejected-nostr-nudges"
class="invite-card-popup"
class="card-secondary"
style="display: none"
>
<p>
@ -41,7 +41,7 @@
</div>
<div
id="no-extension-nudges"
class="invite-card-popup"
class="card-secondary"
style="display: none"
>
<p>
@ -85,7 +85,7 @@
</div>
<div
id="sign-up-success"
class="invite-card-popup"
class="card-secondary"
style="display: none"
>
<p>¡Bien! Hemos dado de alta tu clave de Nostr.</p>