Skip to content
This repository has been archived by the owner on Aug 24, 2024. It is now read-only.

Commit

Permalink
Merge pull request #63 from virto-network/feat/guest
Browse files Browse the repository at this point in the history 
Register as guest
  • Loading branch information
@b-avb
b-avb authored Apr 9, 2024
2 parents 28250bb + 9b85acf commit 9aa51a1
Show file tree
Hide file tree
Showing 18 changed files with 1,085 additions and 69 deletions.
94 changes: 68 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,14 @@
--secondary-green-200: #287F6E;
--secondary-green-300: #174E43;

/* Gradients */
--gradient-purple: linear-gradient(45deg, #8E70C6, #B09ADB);
--gradient-gray: linear-gradient(45deg, #E3E3E3, #EDEDED);
--gradient-yellow: linear-gradient(45deg, #FEC329, #F7DA72);
--gradient-blue: linear-gradient(45deg, #5CC1E1, #93F0FF);
--gradient-pink: linear-gradient(45deg, #E4B3C1, #ECBCCC);
--gradient-green: linear-gradient(45deg, #30D34D, #66FFA1);

}

:root {
Expand Down Expand Up @@ -220,42 +228,76 @@

<body>
<div id="main">
<div id="static-login-form" class="page">
<div id="static-login-form" class="page page--clamp">
<section class="login-form">
<div class="login-form__avatar">
<div class="login-form__avatar__content">
👋
</div>
</div>
<h2 class="login-form__title">
Completa tu información
</h2>
<p class="login-form__description">
Crea un mundo, construye tu futuro
</p>

<div class="login-form__form__head">
<section class="input__wrapper">
<div class="input-wrapper">
<input type="text" class="input" placeholder="@user:matrix.org">
<div class="communities">
<div class="community__blanck"></div>
<section class="community">
<div class="community__content community__content--purple">
<div class="community__icon">
🗳️
</div>
</div>
<span class="community__title community__title--skeleton">Democracia</span>
</section>

<section class="input__wrapper">
<div class="input-wrapper">
<input type="text" class="input" placeholder="Contrasena">
<section class="community">
<div class="community__content community__content--gray">
<div class="community__icon">
💡
</div>
</div>
<span class="community__title community__title--skeleton">Fundaciones</span>
</section>
<section class="community">
<div class="community__content community__content--yellow">
<div class="community__icon">
🪩
</div>
</div>
<span class="community__title community__title--skeleton">Eventos</span>
</section>
<section class="community community--center">
<div class="community__content community__content--green">
<div class="community__icon">
🎡
</div>
</div>
<span class="community__title community__title--skeleton">Web3</span>
</section>
<div class="community__blanck"></div>
<div class="community__blanck"></div>
<section class="community">
<div class="community__content community__content--pink">
<div class="community__icon">
🕹️
</div>
</div>
<span class="community__title community__title--skeleton">Gamers</span>
</section>
<section class="community">
<div class="community__content community__content--blue">
<div class="community__icon">
🏡
</div>
</div>
<span class="community__title community__title--skeleton">Finca raíz</span>
</section>
</div>

<div class="welcome__content">
<h2 class="login-form__title login-form__title--skeleton">
Te damos la bienvenida
</h2>
<p class="login-form__description login-form__description--skeleton">
Mira cómo puedes crear una comunidad y aprender más sobre Virto
</p>
</div>
<div class="login-form__cta--filled">
<button class="button button--primary">Desbloquear</button>
<button class="button button--primary button--skeleton">Probar gratis</button>
</div>

<div class="login-form__cta--action">
<small class="login-form__form__text">
¿Si no tienes una cuenta?<button
class="login-form__form__text login__form__text--color button button--tertiary">Registrate</button>
Si ya tienes una cuenta <button
class="login-form__form__text login__form__text--color button button--tertiary">Iniciar sesión</button>
</small>
</div>
</section>
Expand Down
198 changes: 192 additions & 6 deletions public/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,8 @@ ul {
.rooms-list {
padding: 0;
gap: 0;
height: fit-content;
min-height: 78px;
}

.list {
Expand Down Expand Up @@ -416,10 +418,26 @@ ul {
}
}

@keyframes fade-in-left {
0% {
opacity: 0;
transform: translate(0, 0);
}

100% {
opacity: 1;
transform: translate(0, 0);
}
}

.fade-in {
animation: fade-in 0.5s;
}

.fade-in-left {
animation: fade-in-left 0.2s;
}

@keyframes fade-in {
0% {
opacity: 0;
Expand Down Expand Up @@ -491,6 +509,10 @@ ul {
right: 10px;
}

.hover-menu--show {
display: block !important;
}

.hover-menu__option {
border: 1px solid transparent;
width: 100%;
Expand Down Expand Up @@ -837,6 +859,15 @@ ul {
}

.nav {
display: flex;
align-items: center;
width: 100%;
padding: 1rem 0;
background: var(--background);
justify-content: space-around;
}

.nav-wrapper {
color: var(--text-1);
display: flex;
gap: 0.5rem;
Expand Down Expand Up @@ -865,26 +896,37 @@ ul {
}

.helper {
width: fit-content;
height: fit-content;
width: 100%;
min-height: 100px;
min-width: 150px;
max-width: 390px;
color: var(--text-1);
border-radius: var(--size-1);
padding: var(--size-3);
transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
background: var(--background-button);
background: var(--background-modal);
text-align: left;
border: 1px solid transparent;
cursor: pointer;
display: flex;
flex-direction: column;
gap: var(--size-0)
}

.helper__title {
padding-top: var(--size-2);
font-size: 1.15em;
}

.helper__description {
padding-top: var(--size-0);
font-size: 1em;
}

.helper__subtitle {
padding-top: var(--size-2);
}

.helper__example {
font-size: 1em;
}

.loading__title {
Expand Down Expand Up @@ -1462,4 +1504,148 @@ ul {

.room-view-wrapper--skeleton {
width: 100%;
}
}

.room-view--wrap {
flex-direction: column;
align-items: center;
max-width: 200px;
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.05);
margin: 5px;
border-radius: 12px;
}

.room-list--wrap {
justify-content: center;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
max-width: 660px;
margin: auto;
}

.room-menu {
width: 200px;
background: var(--background);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
padding: 12px 6px;
position: absolute;
right: 0;
top: 64px;
border-radius: 8px;
}

.room-menu__item {
display: flex;
align-items: center;
gap: 0.25rem;
}

.room-menu__cta {
border: none;
color: var(--text-1);
border-radius: 0;
padding: 0 8px;
display: flex;
cursor: pointer;
align-items: center;
gap: 4px;
}

.preview-room {
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
align-items: center;
height: 100%;
}

.preview-room__title {
margin-top: 24px;
color: var(--text-1);
text-align: center;
}

.preview-room__content {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
width: 60%;
}

.chat-list__static {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}

.chat-list__content {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}

.guest {
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.15);
padding: 12px 24px;
position: absolute;
width: 100%;
bottom: 24px;
border-radius: 8px;
gap: 24px;
}

.guest__cta {
width: 160px;
}


@media only screen and (max-width: 576px) {
.page {
overflow: hidden;
}

.chat-list {
width: fit-content;
margin-right: 16px;
}

.chat-list__rooms {
width: 70vw;
border: 1px solid transparent;
background: var(--background-modal);
border-radius: 16px;
}

.chat-list__static {
width: calc(100vw - 32px);
margin: 0 16px;
}

.chat-list__active-room {
width: calc(100vw - 32px);
margin: 0 16px;
}

.header {
position: relative;
z-index: 10;
}

.chat-list-wrapper {
width: 100vw;
overflow-x: auto;
scroll-behavior: smooth;
}

.menu {
width: 100vw;
}
}
Loading

0 comments on commit 9aa51a1

Please sign in to comment.