style the login page

This commit is contained in:
counterweight 2025-02-21 16:41:22 +01:00
parent 2e37709677
commit 414d31a3cc
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
5 changed files with 59 additions and 40 deletions

View file

@ -31,6 +31,14 @@ h1 {
margin: 1%;
}
#login-card > * {
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 1vh;
}
.create-profile-card-section > * {
text-align: center;
margin-right: auto;
@ -101,25 +109,30 @@ h1 {
color: #e1c300;
}
#nostr-signup-button {
width: 20vw;
.button-nostr {
background: #a915ff;
border-radius: 1vw;
border: 0;
color: white;
padding: 1%;
cursor: pointer;
}
#nostr-signup-button:hover {
.button-nostr:hover {
background-color: #b941ff;
}
#nostr-signup-button:disabled {
.button-nostr:disabled {
background-color: #d8d8d8;
cursor: default;
border: 0;
}
#nostr-signup-button {
width: 20vw;
border: 0;
}
#nostr-signup-button p {
font-size: 1.5rem;
}

View file

@ -10,14 +10,14 @@
<body>
<main>
<div class="over-background">
<div class="create-profile-card-section">
<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="over-background">
<div class="create-profile-card-section">
<div class="create-profile-card-section center">
<h2>Perfil</h2>
<label
>Pseudónimo (Nym):
@ -37,7 +37,7 @@
</div>
</div>
<div class="over-background">
<div class="create-profile-card-section">
<div class="create-profile-card-section center">
<h2>Datos de contacto</h2>
<div id="contacts">
<p>

View file

@ -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" class="button-large">
<button id="nostr-signup-button" type="submit" class="button-large button-nostr">
<figure>
<img
src="/img/white_ostrich.svg"

View file

@ -4,15 +4,25 @@
<title>Hello World</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/javascript/index.js"></script>
<link rel="stylesheet" href="/css/seca.css">
</head>
<body>
<div id="login-card" class="over-background">
<h1>Bienvenido a la seca</h1>
<p>Usa Nostr para logearte</p>
<figure>
<img class="logo" src="/img/laseca_logo_white.png" width="25%" />
</figure>
<form onsubmit="login();return false">
<button id="login-button" type="submit">
Login con extensión de Nostr
<button id="login-button" type="submit" class="button-large button-nostr">
<figure>
<img
src="/img/white_ostrich.svg"
width="40%"
margin="-5% -5%"
/>
</figure>
<p>Login con Nostr</p>
</button>
</form>
<div id="sign-up-success" style="display: none">
@ -31,55 +41,51 @@
equivocado, puedes intentarlo de nuevo.
</p>
</div>
<div id="no-extension-nudges" style="display: none">
<div
id="no-extension-nudges"
class="card-secondary"
style="display: none"
>
<p>
¡Atención! No se ha encontrado una extensión de Nostr en tu navegador.
Puedes usar:
¡Atención! No se ha encontrado una extensión de Nostr en tu
navegador. Puedes usar:
</p>
<ul>
<li>
Firefox
<ul>
<li>
<p><strong>Firefox</strong></p>
<p>
<a
href="https://addons.mozilla.org/en-US/firefox/addon/alby/"
target="_blank"
rel="noopener noreferrer"
>Alby</a
>
</li>
<li>
</p>
<p>
<a
href="https://addons.mozilla.org/en-US/firefox/addon/nos2x-fox/"
target="_blank"
rel="noopener noreferrer"
>nos2x-fox</a
>
</li>
</ul>
</li>
<li>
Chrome
<ul>
<li>
</p>
<p><strong>Chrome</strong></p>
<p>
<a
href="https://chromewebstore.google.com/detail/alby-bitcoin-wallet-for-l/iokeahhehimjnekafflcihljlcjccdbe?pli=1"
target="_blank"
rel="noopener noreferrer"
>Alby</a
>
</li>
<li>
</p>
<p>
<a
href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp"
target="_blank"
rel="noopener noreferrer"
>nos2x</a
>
</li>
</ul>
</li>
</ul>
</p>
</div>
</div>
<script src="/javascript/login.js"></script>
</body>
</html>