counterweight/secajs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style the login page

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

25
src/public/css/seca.css
View file

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

0
src/public/javascript/index.js → src/public/javascript/login.js
View file

6
src/views/createProfile.ejs
View file

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

2
src/views/invite.ejs
View file

@ -18,7 +18,7 @@
</figure> </figure>
<p>Usa tu extensión de Nostr para darte de alta:</p> <p>Usa tu extensión de Nostr para darte de alta:</p>
<form onsubmit="acceptInvite();return false"> <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> <figure>
<img <img
src="/img/white_ostrich.svg" src="/img/white_ostrich.svg"

66
src/views/login.ejs
View file

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