276 lines
12 KiB
HTML
276 lines
12 KiB
HTML
<div class="row">
|
|
<div class="col">
|
|
<div class="container-fluid navbar navbar-marketing navbar-expand-lg bg-white navbar-light">
|
|
<div class="container px-5 py-4">
|
|
<a class="text-dark" routerLink="login"
|
|
><img src="./../../content/img_datasurvey/datasurvey-logo-text-black.svg" width="300" alt=""
|
|
/></a>
|
|
|
|
<div class="col-6" style="text-align: end">
|
|
<!--<a href="#">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Encuestas</button>
|
|
</a>-->
|
|
<a routerLink="login" [hidden]="!notAccount">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Iniciar Sesión</button>
|
|
</a>
|
|
|
|
<a routerLink="account/register" [hidden]="!notAccount">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Registrarse</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page Header-->
|
|
<div
|
|
class="page-header-ui page-header-ui-dark bg-img-cover overlay overlay-40"
|
|
style="background-image: url('../../content/img_datasurvey/banner2.png')"
|
|
>
|
|
<div class="page-header-ui-content py-5 position-relative">
|
|
<div class="container px-5">
|
|
<div class="row gx-5 justify-content-center">
|
|
<div class="col-xl-8 col-lg-10 text-center">
|
|
<div data-aos="fade-up">
|
|
<h1 class="page-header-ui-title">¡Le damos la bienvenida a DataSurvey!</h1>
|
|
<h5 class="page-header-ui-text">
|
|
Somos su mejor aliado para la recolección de información, a través de nuestra plataforma
|
|
</h5>
|
|
<div class="row" [hidden]="!notAccount">
|
|
<div class="col">
|
|
<a routerLink="pagina-principal">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Comenzar</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="row">
|
|
<div class="col">
|
|
<a routerLink="/login">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Iniciar Sesión</button>
|
|
</a>
|
|
<a routerLink="/account/register">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4">Registrarse</button>
|
|
</a>
|
|
</div>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="svg-border-rounded text-white">
|
|
<!-- Rounded SVG Border-->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.54 17.34" preserveAspectRatio="none" fill="currentColor">
|
|
<path d="M144.54,17.34H0V0H144.54ZM0,0S32.36,17.34,72.27,17.34,144.54,0,144.54,0"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white py-10" id="get-started">
|
|
<div class="container px-5">
|
|
<div class="row gx-5 text-center">
|
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
|
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><i class="fa fa-droplet"></i></div>
|
|
<h2>Diseño amigable</h2>
|
|
<hr />
|
|
<p class="mb-0">Contamos con una interfaz fácil de utilizar</p>
|
|
</div>
|
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
|
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><i class="fa fa-code"></i></div>
|
|
<h2>Fácil uso</h2>
|
|
<hr />
|
|
<p class="mb-0">Contamos con una plataforma muy sencilla de usar</p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><i class="fa fa-truck"></i></div>
|
|
<h2>Diverso contenido</h2>
|
|
<hr />
|
|
<p class="mb-0">Podrá encontrar y crear encuestas de diferentes categorías</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="svg-border-rounded text-light">
|
|
<!-- Rounded SVG Border-->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.54 17.34" preserveAspectRatio="none" fill="currentColor">
|
|
<path d="M144.54,17.34H0V0H144.54ZM0,0S32.36,17.34,72.27,17.34,144.54,0,144.54,0"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="bg-light py-10 container-encuestas">
|
|
<div class="container px-0">
|
|
<h1 class="text-center mb-4">Encuestas</h1>
|
|
<div class="row gx-5" *ngIf="encuestas && encuestas.length > 0">
|
|
<div class="col-xl-4 col-lg-4 col-md-6 mb-5" *ngFor="let encuesta of encuestasMostradas; trackBy: trackId">
|
|
<div class="card-encuesta lift h-100" [attr.data-id]="encuesta.id">
|
|
<!--(dblclick)="openSurvey($event)"
|
|
(click)="selectSurvey($event)"-->
|
|
|
|
<div class="card-body p-3">
|
|
<div class="card-title mb-0">{{ encuesta.nombre }}</div>
|
|
<div class="entity-body--row m-2">
|
|
<span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<div class="entity-body">
|
|
<div class="entity-body--row m-2">
|
|
<span class="mt-2"
|
|
>Fecha de inicio <fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> {{
|
|
encuesta.fechaPublicacion | formatShortDatetime | titlecase
|
|
}}</span
|
|
>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<span class="mt-2"
|
|
>Fecha de finalización <fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon
|
|
> {{ encuesta.fechaFinalizar | formatShortDatetime | titlecase }}</span
|
|
>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<p>Calificacion</p>
|
|
<fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon>
|
|
<fa-icon
|
|
*ngFor="let i of [].constructor(5 - encuesta.calificacion!)"
|
|
class="entity-icon--star--off"
|
|
[icon]="faStar"
|
|
></fa-icon>
|
|
</div>
|
|
<div class="entity-body--row m-2">
|
|
<button class="ds-btn btn-card" routerLink="pagina-principal" routerLinkActive="router-link-active">
|
|
<fa-icon [icon]="faPollH"></fa-icon> Ver más encuestas
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row">
|
|
<div class="col">
|
|
<a routerLink="#">
|
|
<button class="ds-btn ds-btn--primary fw-500 ms-lg-4 mb-4">Ver todas las encuestas</button>
|
|
</a>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container my-5">
|
|
<div class="text-center mb-4">
|
|
<h1>Preguntas frecuentes</h1>
|
|
</div>
|
|
|
|
<!--Accordion wrapper-->
|
|
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
|
|
<!-- Accordion card -->
|
|
<div class="card accordion-item">
|
|
<!-- Card header -->
|
|
<div class="card-header" role="tab" id="headingOne1">
|
|
<a
|
|
data-toggle="collapse"
|
|
data-parent="#accordionEx"
|
|
href="#collapseOne1"
|
|
aria-expanded="true"
|
|
aria-controls="collapseOne1"
|
|
class="accordion-header"
|
|
>
|
|
<h2 class="mb-0">
|
|
<button
|
|
class="accordion-button py-4 collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseOne1"
|
|
aria-expanded="true"
|
|
aria-controls="collapseOne"
|
|
>
|
|
¿Qué métodos de pago están disponibles en DataSurvey?
|
|
</button>
|
|
</h2>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Card body -->
|
|
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1" data-parent="#accordionEx">
|
|
<div class="card-body">DataSurvey utiliza PayPal como método de pago para la compra de plantillas</div>
|
|
</div>
|
|
</div>
|
|
<!-- Accordion card -->
|
|
|
|
<!-- Accordion card -->
|
|
<div class="card accordion-item">
|
|
<!-- Card header -->
|
|
<div class="card-header" role="tab" id="headingTwo2">
|
|
<a
|
|
data-toggle="collapse"
|
|
data-parent="#accordionEx"
|
|
href="#collapseTwo2"
|
|
aria-expanded="true"
|
|
aria-controls="collapseTwo2"
|
|
class="accordion-header"
|
|
>
|
|
<h2 class="mb-0">
|
|
<button
|
|
class="accordion-button py-4 collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseTwo2"
|
|
aria-expanded="true"
|
|
aria-controls="collapseTwo"
|
|
>
|
|
¿Debo iniciar sesión o registrarme para poder completar encuestas?
|
|
</button>
|
|
</h2>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Card body -->
|
|
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2" data-parent="#accordionEx">
|
|
<div class="card-body">
|
|
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
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Accordion card -->
|
|
|
|
<!-- Accordion card -->
|
|
<div class="card">
|
|
<!-- Card header -->
|
|
<!-- Card header -->
|
|
<div class="card-header" role="tab" id="headingThree3">
|
|
<a
|
|
data-toggle="collapse"
|
|
data-parent="#accordionEx"
|
|
href="#collapseThree3"
|
|
aria-expanded="true"
|
|
aria-controls="collapseThree3"
|
|
class="accordion-header"
|
|
>
|
|
<h2 class="mb-0">
|
|
<button
|
|
class="accordion-button py-4 collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseThree3"
|
|
aria-expanded="true"
|
|
aria-controls="collapseThree"
|
|
>
|
|
¿Cómo comparto una encuesta?
|
|
</button>
|
|
</h2>
|
|
</a>
|
|
</div>
|
|
<!-- Card body -->
|
|
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3" data-parent="#accordionEx">
|
|
<div class="card-body">
|
|
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 accesadas
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Accordion card -->
|
|
</div>
|
|
<!-- Accordion wrapper -->
|
|
</div>
|
|
</div>
|
|
</div>
|