diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 80b9fdf..26f9cde 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -1,78 +1,272 @@
-
- -
+
+
+
+ -
-

Welcome, Java Hipster! (Data Survey)

+
+ + + + + + -

This is your homepage

- -
-
- You are logged in as user "{{ account.login }}". -
- -
- If you want to - sign in, you can try the default accounts:
- Administrator (login="admin" and password="admin")
- User (login="user" and - password="user"). -
- -
- You don't have an account yet?  - Register a new account + + + +
+ +
+
+
+
+
+
+

¡Le damos la bienvenida a DataSurvey!

+
+ Somos su mejor aliado para la recolección de información, a través de nuestra plataforma. +
+
+
+ + + +
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+

El Mejor diseño

+

Tenemos el mejor diseño para que pueda disfrutar visualmente de la plataforma.

+
+
+
+

Fácil uso

+

Contamos con una plataforma muy sencilla de usar.

+
+
+
+

Diverso contenido

+

Podrá encontrar y crear encuestas de diferentes categorías.

+
+
+
+
+ + + + +
+
+
+
+

Encuestas

+
+
+
+
+
{{ encuesta.nombre }}
+
+ {{ encuesta.categoria?.nombre | lowercase }} +
+
+ {{ encuesta.descripcion | titlecase }} +
+
+
+
+ Fecha Publicada    {{ + encuesta.fechaPublicacion | formatShortDatetime | titlecase + }} +
+
+ Fecha de Finalización     {{ encuesta.fechaFinalizar | formatShortDatetime | titlecase }} +
+
+

Calificacion

+ + +
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+

Preguntas frecuentes

+
-

If you have any question on JHipster:

+ +
+ +
+ + - + +
+
DataSurvey utiliza PayPal como método de pago para la compra de plantillas.
+
+
+ -

- If you like JHipster, don't forget to give us a star on - GitHub! -

+ +
+ + + + +
+
+ Uno de los objetivos de DataSurvey es que se puedan compartir las encuestas con todos los usuarios, sin necesidad de tener una + cuenta en la plataforma. +
+
+
+ + + +
+ + + + +
+
+ La plataforma tiene dos tipos de encuestas: públicas y privadas. Las públicas pueden ser compartidas con todo tipo de usuario, + sin ninguna excepción, mientras que las encuestas privadas, necesitan de una clave para poder ser completadas. +
+
+
+ +
+ +
diff --git a/src/main/webapp/app/home/home.component.scss b/src/main/webapp/app/home/home.component.scss index c731f12..d56f7c7 100644 --- a/src/main/webapp/app/home/home.component.scss +++ b/src/main/webapp/app/home/home.component.scss @@ -10,6 +10,201 @@ Main page styles background-size: contain; } +.bg-img-cover { + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.overlay { + position: relative; +} +.overlay:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #000; + opacity: 0.5; +} + +.overlay-10:before { + opacity: 0.1; +} + +.overlay-20:before { + opacity: 0.2; +} + +.overlay-30:before { + opacity: 0.3; +} + +.overlay-40:before { + opacity: 0.4; +} + +.overlay-50:before { + opacity: 0.5; +} + +.overlay-60:before { + opacity: 0.6; +} + +.overlay-70:before { + opacity: 0.7; +} + +.overlay-80:before { + opacity: 0.8; +} + +.overlay-90:before { + opacity: 0.9; +} + +.fixed-top, +.page-header-ui.navbar-fixed .navbar { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.text-white-75, +.page-header-ui-dark .page-header-ui-text a { + color: rgba(255, 255, 255, 0.75) !important; +} +.page-header-ui { + position: relative; + padding-top: 8rem; + padding-bottom: 8rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-title { + font-size: 2.5rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-text { + font-size: 1.15rem; +} +.page-header-ui .page-header-ui-content .page-header-ui-text.small { + font-size: 0.9rem; +} + +.page-header-ui-dark { + color: #fff; + background-color: #212832; +} + +.svg-border-rounded svg { + position: absolute; + bottom: 0; + left: 0; + height: 1rem; + width: 100%; +} +@media (min-width: 576px) { + .svg-border-rounded svg { + height: 1.5rem; + } +} +@media (min-width: 768px) { + .svg-border-rounded svg { + height: 2rem; + } +} +@media (min-width: 992px) { + .svg-border-rounded svg { + height: 2.5rem; + } +} +@media (min-width: 1200px) { + .svg-border-rounded svg { + height: 3rem; + } +} + +/** + Cards +**/ +.lift { + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); + transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.lift:hover { + transform: translateY(-0.3333333333rem); + box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25); +} +.lift:active { + transform: none; + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); +} + +.lift-sm { + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} +.lift-sm:hover { + transform: translateY(-0.1666666667rem); + box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25); +} +.lift-sm:active { + transform: none; + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} + +/*.card.lift { + text-decoration: none; + color: inherit; +} + +.card-flag { + position: absolute; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + line-height: 1; +} + +.card-flag-dark { + background-color: rgba(33, 40, 50, 0.7); + color: #fff; +} + +.card-flag-light { + background-color: rgba(255, 255, 255, 0.7); + color: #69707a; +} + +.card-flag-lg { + font-size: 0.9rem; + padding: 0.5rem 0.65rem; +} + +.card-flag-top-right { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + top: 0.5rem; + right: 0; +} + +.card-flag-top-left { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + top: 0.5rem; + left: 0; +}*/ + +.border-cyan { + border-color: #00cfd5 !important; +} + +.py-10 { + padding-top: 6rem !important; + padding-bottom: 6rem !important; +} + /* wait autoprefixer update to allow simple generation of high pixel density media query */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), @@ -21,3 +216,199 @@ Main page styles background-size: contain; } } + +.icon-stack { + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 100%; + height: 2.5rem; + width: 2.5rem; + font-size: 1rem; + background-color: #f2f6fc; + flex-shrink: 0; +} +.icon-stack svg { + height: 1rem; + width: 1rem; +} + +.icon-stack-sm { + height: 2rem; + width: 2rem; +} + +.icon-stack-lg { + height: 4rem; + width: 4rem; + font-size: 1.5rem; +} +.icon-stack-lg svg { + height: 1.5rem; + width: 1.5rem; +} + +.icon-stack-xl { + height: 5rem; + width: 5rem; + font-size: 1.75rem; +} +.icon-stack-xl svg { + height: 1.75rem; + width: 1.75rem; +} + +.container-encuestas { + background-image: url('../../content/img_datasurvey/background encuestas landing.png'); + max-height: 1536px; + overflow-y: auto; +} +.bg-gradient-primary-to-secondary { + background-color: #1c44b2 !important; + background-image: linear-gradient(135deg, #1c44b2 0%, #00b88d 100%) !important; +} + +/*.card .entity-icon--star { + color: #ffcc47; + margin-right: 0.2rem; +} + +.card .card-title { + font-size: 2em; +} + +.card .tag { + font-size: 0.8rem; + color: #f8f8f8; + margin-top: 0.5rem; + padding: 0.2rem 1.5rem; + background-color: #2962ff94; + border-radius: 15px; +} + +.card .subtitle { + color: rgba(0, 0, 0, 0.54); + font-size: 0.9rem; +} + +.card .btn-card { + padding: 11px 10px !important; +}*/ + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: 1rem 1.25rem; + font-size: 1rem; + color: #69707a; + text-align: left; + background-color: #fff; + border: 0; + border-radius: 0; + overflow-anchor: none; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, + border-radius 0.15s ease; +} +@media (prefers-reduced-motion: reduce) { + .accordion-button { + transition: none; + } +} +.accordion-button:not(.collapsed) { + color: #0057da; + background-color: #e6effe; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125); +} +.accordion-button:not(.collapsed)::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230057da'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); +} +.accordion-button::after { + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + margin-left: auto; + content: ''; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2369707a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-size: 1.25rem; + transition: transform 0.2s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .accordion-button::after { + transition: none; + } +} +.accordion-button:hover { + z-index: 2; +} +.accordion-button:focus { + z-index: 3; + border-color: transparent; + outline: 0; + box-shadow: 0 0 0 0.25rem #00b88d3a; +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.125); +} +.accordion-item:first-of-type { + border-top-left-radius: 0.35rem; + border-top-right-radius: 0.35rem; +} +.accordion-item:first-of-type .accordion-button { + border-top-left-radius: calc(0.35rem - 1px); + border-top-right-radius: calc(0.35rem - 1px); +} +.accordion-item:not(:first-of-type) { + border-top: 0; +} +.accordion-item:last-of-type { + border-bottom-right-radius: 0.35rem; + border-bottom-left-radius: 0.35rem; +} +.accordion-item:last-of-type .accordion-button.collapsed { + border-bottom-right-radius: calc(0.35rem - 1px); + border-bottom-left-radius: calc(0.35rem - 1px); +} +.accordion-item:last-of-type .accordion-collapse { + border-bottom-right-radius: 0.35rem; + border-bottom-left-radius: 0.35rem; +} + +.accordion-body { + padding: 1rem 1.25rem; +} + +.accordion-flush .accordion-collapse { + border-width: 0; +} +.accordion-flush .accordion-item { + border-right: 0; + border-left: 0; + border-radius: 0; +} +.accordion-flush .accordion-item:first-child { + border-top: 0; +} +.accordion-flush .accordion-item:last-child { + border-bottom: 0; +} +.accordion-flush .accordion-item .accordion-button { + border-radius: 0; +} + +.card-header { + padding: 0; +} + +.card-header .collapsed { + background-color: #e6effe; +} diff --git a/src/main/webapp/app/home/home.component.tempSpec.ts b/src/main/webapp/app/home/home.component.tmpSpec.ts similarity index 100% rename from src/main/webapp/app/home/home.component.tempSpec.ts rename to src/main/webapp/app/home/home.component.tmpSpec.ts diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index 9010227..84a01a9 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -1,11 +1,26 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; +import { HttpResponse } from '@angular/common/http'; import { Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { IEncuesta } from 'app/entities/encuesta/encuesta.model'; +import { EncuestaService } from 'app/entities/encuesta/service/encuesta.service'; +import { FormBuilder } from '@angular/forms'; +import { ActivatedRoute } from '@angular/router'; + +import { ICategoria } from 'app/entities/categoria/categoria.model'; +import { CategoriaService } from 'app/entities/categoria/service/categoria.service'; +import { IUsuarioExtra, UsuarioExtra } from 'app/entities/usuario-extra/usuario-extra.model'; +import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-extra.service'; import { AccountService } from 'app/core/auth/account.service'; import { Account } from 'app/core/auth/account.model'; +import { faPollH, faCalendarAlt, faStar } from '@fortawesome/free-solid-svg-icons'; + +import * as $ from 'jquery'; + @Component({ selector: 'jhi-home', templateUrl: './home.component.html', @@ -13,16 +28,48 @@ import { Account } from 'app/core/auth/account.model'; }) export class HomeComponent implements OnInit, OnDestroy { account: Account | null = null; - private readonly destroy$ = new Subject(); - constructor(private accountService: AccountService, private router: Router) {} + usuarioExtra: UsuarioExtra | null = null; + encuestas?: IEncuesta[]; + encuestasMostradas: IEncuesta[] = new Array(3); + isLoading = false; + + faStar = faStar; + faCalendarAlt = faCalendarAlt; + faPollH = faPollH; + + notAccount: boolean = true; + + public searchEncuestaPublica: string; + + constructor( + protected encuestaService: EncuestaService, + protected modalService: NgbModal, + protected categoriaService: CategoriaService, + protected usuarioExtraService: UsuarioExtraService, + protected activatedRoute: ActivatedRoute, + protected fb: FormBuilder, + protected accountService: AccountService, + protected router: Router + ) { + this.searchEncuestaPublica = ''; + } ngOnInit(): void { + this.searchEncuestaPublica = ''; this.accountService .getAuthenticationState() .pipe(takeUntil(this.destroy$)) - .subscribe(account => (this.account = account)); + .subscribe(account => { + if (account !== null) { + this.account = account; + this.notAccount = false; + } else { + this.notAccount = true; + } + }); + this.loadAll(); } login(): void { @@ -33,4 +80,44 @@ export class HomeComponent implements OnInit, OnDestroy { this.destroy$.next(); this.destroy$.complete(); } + + ngAfterViewInit(): void {} + + trackId(index: number, item: IEncuesta): number { + return item.id!; + } + + loadAll(): void { + this.isLoading = true; + + this.encuestaService.query().subscribe( + (res: HttpResponse) => { + this.isLoading = false; + const tmpEncuestas = res.body ?? []; + this.encuestas = tmpEncuestas.filter(e => e.estado === 'ACTIVE' && e.acceso === 'PUBLIC'); + this.encuestasMostradas = this.encuestas.reverse().slice(0, 3); + }, + () => { + this.isLoading = false; + } + ); + } + + openSurvey(event: any): void { + const surveyId = event.target.getAttribute('data-id'); + this.router.navigate(['/encuesta', surveyId, 'edit']); + } + + selectSurvey(event: any): void { + document.querySelectorAll('.ds-list--entity').forEach(e => { + e.classList.remove('active'); + }); + if (event.target.classList.contains('ds-list--entity')) { + event.target.classList.add('active'); + } + } + + counter(i: number) { + return new Array(i); + } } diff --git a/src/main/webapp/app/home/home.module.ts b/src/main/webapp/app/home/home.module.ts index 758f5c4..18179b9 100644 --- a/src/main/webapp/app/home/home.module.ts +++ b/src/main/webapp/app/home/home.module.ts @@ -4,9 +4,10 @@ import { RouterModule } from '@angular/router'; import { SharedModule } from 'app/shared/shared.module'; import { HOME_ROUTE } from './home.route'; import { HomeComponent } from './home.component'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ - imports: [SharedModule, RouterModule.forChild([HOME_ROUTE])], + imports: [SharedModule, RouterModule.forChild([HOME_ROUTE]), FontAwesomeModule], declarations: [HomeComponent], }) export class HomeModule {} diff --git a/src/main/webapp/app/layouts/footer/footer.component.html b/src/main/webapp/app/layouts/footer/footer.component.html index 30aca31..f5fbd22 100644 --- a/src/main/webapp/app/layouts/footer/footer.component.html +++ b/src/main/webapp/app/layouts/footer/footer.component.html @@ -1,3 +1,8 @@ -
-

This is your footer

+
+
+

+ Copyright © Derechos reservados - Desarrollado por + Quantum +

+
diff --git a/src/main/webapp/app/layouts/footer/footer.component.scss b/src/main/webapp/app/layouts/footer/footer.component.scss new file mode 100644 index 0000000..369226a --- /dev/null +++ b/src/main/webapp/app/layouts/footer/footer.component.scss @@ -0,0 +1,7 @@ +.footer { + background: #192e4d; + color: white; + padding: 12px 0; + font-size: 0.8em; + text-align: center; +} diff --git a/src/main/webapp/app/layouts/footer/footer.component.ts b/src/main/webapp/app/layouts/footer/footer.component.ts index 7c640ec..6ed7057 100644 --- a/src/main/webapp/app/layouts/footer/footer.component.ts +++ b/src/main/webapp/app/layouts/footer/footer.component.ts @@ -3,5 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'jhi-footer', templateUrl: './footer.component.html', + styleUrls: ['./footer.component.scss'], }) export class FooterComponent {} diff --git a/src/main/webapp/app/layouts/main/main.component.html b/src/main/webapp/app/layouts/main/main.component.html index cd18230..c9c044f 100644 --- a/src/main/webapp/app/layouts/main/main.component.html +++ b/src/main/webapp/app/layouts/main/main.component.html @@ -19,3 +19,4 @@
+ diff --git a/src/main/webapp/content/css/loading-2.css b/src/main/webapp/content/css/loading-2.css new file mode 100644 index 0000000..01f9598 --- /dev/null +++ b/src/main/webapp/content/css/loading-2.css @@ -0,0 +1,57 @@ +.app-loading .container { + margin: auto auto; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.app-loading .tittle { + margin-bottom: 40px; + color: #44b9ff; + letter-spacing: 4px; + text-transform: uppercase; +} +.app-loading .square-container { + list-style-type: none; + display: flex; + position: relative; +} +.app-loading .square { + margin: 4px; + width: 30px; + height: 30px; + border-radius: 7px; + animation: rotating 2s ease infinite; +} +.app-loading .square1 { + background: #192e4d; + animation-delay: 0.2s; +} +.app-loading .square2 { + background: #018adf; + animation-delay: 0.4s; +} +.app-loading .square3 { + background: #20a9fe; + animation-delay: 0.6s; +} +.app-loading .square4 { + background: #00e0ac; + animation-delay: 0.8s; +} +.app-loading .square5 { + background: #70ffde; + animation-delay: 1s; +} +@keyframes rotating { + 0% { + transform: rotate(0) scale(1); + } + 50% { + transform: rotate(90deg) scale(0.6); + } + 100% { + transform: rotate(90deg) scale(1); + } +} diff --git a/src/main/webapp/content/css/loading-boxes.css b/src/main/webapp/content/css/loading-boxes.css new file mode 100644 index 0000000..4c4bd36 --- /dev/null +++ b/src/main/webapp/content/css/loading-boxes.css @@ -0,0 +1,199 @@ +.loader { + height: 100%; + width: 100%; +} +.loader .l_main { + position: absolute; + top: 20%; + left: 50%; + width: 172px; + height: 128px; + margin: 0; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +@media (max-width: 550px) { + .loader { + -webkit-transform: scale(0.75); + transform: scale(0.75); + } +} +@media (max-width: 440px) { + .loader { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} +.l_square { + position: relative; +} +.l_square:nth-child(1) { + margin-left: 0px; +} +.l_square:nth-child(2) { + margin-left: 44px; +} +.l_square:nth-child(3) { + margin-left: 88px; +} +.l_square:nth-child(4) { + margin-left: 132px; +} +.l_square span { + position: absolute; + top: 0px; + left: 20px; + height: 36px; + width: 36px; + border-radius: 2px; + background-color: #1c44b2; +} +.l_square span:nth-child(1) { + top: 0px; +} +.l_square span:nth-child(2) { + top: 44px; +} +.l_square span:nth-child(3) { + top: 88px; +} +.l_square:nth-child(1) span { + -webkit-animation: animsquare1 2s infinite ease-in; + animation: animsquare1 2s infinite ease-in; +} +.l_square:nth-child(2) span { + -webkit-animation: animsquare2 2s infinite ease-in; + animation: animsquare2 2s infinite ease-in; +} +.l_square:nth-child(3) span { + -webkit-animation: animsquare3 2s infinite ease-in; + animation: animsquare3 2s infinite ease-in; +} +.l_square:nth-child(4) span { + -webkit-animation: animsquare4 2s infinite ease-in; + animation: animsquare4 2s infinite ease-in; +} +.l_square span:nth-child(1) { + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.l_square span:nth-child(2) { + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; +} +.l_square span:nth-child(3) { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} +@-webkit-keyframes animsquare1 { + 0%, + 5%, + 95%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 30%, + 70% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@keyframes animsquare1 { + 0%, + 5%, + 95%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 30%, + 70% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@-webkit-keyframes animsquare2 { + 0%, + 10%, + 90%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 35%, + 65% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@keyframes animsquare2 { + 0%, + 10%, + 90%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 35%, + 65% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@-webkit-keyframes animsquare3 { + 0%, + 15%, + 85%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 40%, + 60% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@keyframes animsquare3 { + 0%, + 15%, + 85%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 40%, + 60% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@-webkit-keyframes animsquare4 { + 0%, + 20%, + 80%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 45%, + 55% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} +@keyframes animsquare4 { + 0%, + 20%, + 80%, + 100% { + -webkit-transform: translate(0px, 0px) rotate(0deg); + transform: translate(0px, 0px) rotate(0deg); + } + 45%, + 55% { + -webkit-transform: translate(-40px, 0px) rotate(-90deg); + transform: translate(-40px, 0px) rotate(-90deg); + } +} diff --git a/src/main/webapp/content/css/loading.css b/src/main/webapp/content/css/loading.css index b2c6626..b2f5d31 100644 --- a/src/main/webapp/content/css/loading.css +++ b/src/main/webapp/content/css/loading.css @@ -102,7 +102,7 @@ font-weight: normal; } -.app-loading .lds-pacman { +/*.app-loading .lds-pacman { position: relative; margin: auto; width: 200px !important; @@ -149,4 +149,4 @@ .app-loading .lds-pacman > div:nth-child(1) div:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s; -} +}*/ diff --git a/src/main/webapp/content/img_datasurvey/background encuestas landing.png b/src/main/webapp/content/img_datasurvey/background encuestas landing.png new file mode 100644 index 0000000..e4e1f3d Binary files /dev/null and b/src/main/webapp/content/img_datasurvey/background encuestas landing.png differ diff --git a/src/main/webapp/content/img_datasurvey/banner1.webp b/src/main/webapp/content/img_datasurvey/banner1.webp new file mode 100644 index 0000000..bc6de52 Binary files /dev/null and b/src/main/webapp/content/img_datasurvey/banner1.webp differ diff --git a/src/main/webapp/content/img_datasurvey/banner2.png b/src/main/webapp/content/img_datasurvey/banner2.png new file mode 100644 index 0000000..1e64ef1 Binary files /dev/null and b/src/main/webapp/content/img_datasurvey/banner2.png differ diff --git a/src/main/webapp/content/img_datasurvey/banner2.webp b/src/main/webapp/content/img_datasurvey/banner2.webp new file mode 100644 index 0000000..e4be6b4 Binary files /dev/null and b/src/main/webapp/content/img_datasurvey/banner2.webp differ diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss index 7bd5f80..058a1c3 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss @@ -131,3 +131,116 @@ background-color: #e8f0fe !important; } } + +/** + Cards +**/ +.lift { + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); + transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +.lift:hover { + transform: translateY(-0.3333333333rem); + box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25); +} +.lift:active { + transform: none; + box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); +} + +.lift-sm { + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} +.lift-sm:hover { + transform: translateY(-0.1666666667rem); + box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25); +} +.lift-sm:active { + transform: none; + box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); +} + +.card-encuesta { + border-radius: 12px; + background-color: #ffffff; + margin-bottom: 20px; + position: relative; + border: 0 none; +} + +.card-encuesta.lift { + text-decoration: none; + color: inherit; +} + +.card-flag { + position: absolute; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + line-height: 1; +} + +.card-flag-dark { + background-color: rgba(33, 40, 50, 0.7); + color: #fff; +} + +.card-flag-light { + background-color: rgba(255, 255, 255, 0.7); + color: #69707a; +} + +.card-flag-lg { + font-size: 0.9rem; + padding: 0.5rem 0.65rem; +} + +.card-flag-top-right { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + top: 0.5rem; + right: 0; +} + +.card-flag-top-left { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + top: 0.5rem; + left: 0; +} + +.card-encuesta .entity-icon--star { + color: #ffcc47; + margin-right: 0.2rem; +} + +.card-encuesta .card-title { + font-size: 2em; +} + +.card-encuesta .tag { + font-size: 0.8rem; + color: #f8f8f8; + margin-top: 0.5rem; + padding: 0.2rem 1.5rem; + background-color: #2962ff94; + border-radius: 15px; +} + +.card-encuesta .subtitle { + color: rgba(0, 0, 0, 0.54); + font-size: 0.9rem; +} + +.card-encuesta .btn-card { + padding: 11px 10px !important; +} + +.border-cyan { + border-color: #00cfd5 !important; +} + +.py-10 { + padding-top: 6rem !important; + padding-bottom: 6rem !important; +} diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 1d945f6..3ba47db 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -12,6 +12,8 @@ + + @@ -23,16 +25,23 @@
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+ +
+

Cargando

+
+
 
+
 
+
 
+
 
+