refactored and restyled
This commit is contained in:
parent
c6e48af792
commit
dff090a9d4
GPG key ID:
883EDBAA726BD96C
3 changed files with 96 additions and 68 deletions
62
src/public/css/createProfile.css
Normal file
62
src/public/css/createProfile.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}}
|
||||||
|
|
||||||
|
|
||||||
|
@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);
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
border: 2px solid #e1c300;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 2%;
|
||||||
|
margin: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge input {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-profile-card-section > * {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-profile-card-section .badge img {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
@ -43,6 +43,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #bdd5ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #e1c300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money-input {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-is-valid {
|
||||||
|
border: 1px solid green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-is-invalid {
|
||||||
|
border: 2px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
.max-size-zero {
|
.max-size-zero {
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
|
|
@ -81,42 +105,6 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badges {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
grid-template-rows: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
border: 2px solid #e1c300;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 2%;
|
|
||||||
margin: 2%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #bdd5ea;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #e1c300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.money-input {
|
|
||||||
text-align: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-is-valid {
|
|
||||||
border: 1px solid green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-is-invalid {
|
|
||||||
border: 2px solid red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group button {
|
.button-group button {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -160,6 +148,7 @@ h1 {
|
||||||
.shadowed-round-area {
|
.shadowed-round-area {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 0 13px #ccc;
|
box-shadow: 0 0 13px #ccc;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
#login-card > * {
|
#login-card > * {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -169,17 +158,7 @@ h1 {
|
||||||
margin-bottom: 1vh;
|
margin-bottom: 1vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-profile-card-section > * {
|
|
||||||
text-align: center;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
display: block;
|
|
||||||
max-width: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-profile-card-section .badge img {
|
|
||||||
width: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-warning {
|
.text-warning {
|
||||||
color: red;
|
color: red;
|
||||||
|
|
|
||||||
|
|
@ -4,21 +4,22 @@
|
||||||
<title>Crear perfil</title>
|
<title>Crear perfil</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" />
|
||||||
<link rel="stylesheet" href="/css/seca.css" />
|
<%- include("partials/commonStyles") %>
|
||||||
|
<link rel="stylesheet" href="/css/createProfile.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div class="over-background">
|
<div class="over-background">
|
||||||
|
<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="over-background">
|
<div class="shadowed-round-area">
|
||||||
<div class="create-profile-card-section center">
|
<div class="create-profile-card-section center">
|
||||||
<h2>Perfil</h2>
|
|
||||||
<label
|
<label
|
||||||
>Pseudónimo (Nym):
|
>Pseudónimo (Nym):
|
||||||
<input
|
<input
|
||||||
|
|
@ -35,25 +36,9 @@
|
||||||
Debe tener al menos 3 caracteres.
|
Debe tener al menos 3 caracteres.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="over-background">
|
|
||||||
<div class="create-profile-card-section center">
|
<div class="create-profile-card-section center">
|
||||||
<h2>Datos de contacto</h2>
|
<h2>Métodos de contacto</h2>
|
||||||
<div id="contacts">
|
<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">
|
<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
|
||||||
|
|
@ -61,9 +46,10 @@
|
||||||
</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. La seca no puede verlos.
|
nostr. laseca nunca puede verlos. Solo los miembros con los que
|
||||||
|
tú decidas podrán verlos.
|
||||||
</p>
|
</p>
|
||||||
<p>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>
|
||||||
|
|
||||||
<div class="badges">
|
<div class="badges">
|
||||||
|
|
@ -128,6 +114,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
<script src="/javascript/createProfile.js"></script>
|
<script src="/javascript/createProfile.js"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue