funky-framadate-front/src/app/core/components/home/home.component.html

<section>
	<div class="landing-box">
		<div class="landing container content">
			<div class="columns presentation">
				<div class="column">
					<h1 class="title is-1 has-text-primary marged-v">
						{{ 'config.landing_title' | translate }}
					</h1>
					<p class="subtitle marged-v">
						{{ 'config.landing_subtitle' | translate: { AppTitle: AppTitle } }}
					</p>
					<div class="columns">
						<div class="column">
							<button class="is-fullwidth is-primary" routerLink="administration">
								{{ 'config.letsgo' | translate }}
							</button>
						</div>
						<div class="column">
							<button
								id="open_popup_button"
								class="is-fullwidth is-secondary is-outlined"
								(click)="openModalFindPoll()"
							>
								{{ 'config.discover' | translate }}
							</button>
						</div>
					</div>
				</div>
				<div class="column">
					<img
						class="app-logo logo"
						*ngIf="environment.appLanding"
						src="{{ environment.appLanding }}"
						alt="{{ environment.appTitle }}"
					/>
				</div>
			</div>
			<fieldset
				class="well debug has-background-info-light padded is-rounded"
				*ngIf="environment.show_graphic_chart"
			>
				<section class="buttons-demo">
					<h1 class="title is-1">Boutons de démo - Titre h1</h1>
					<h2 class="title is-2">Titre h2</h2>
					<h3 class="title is-3">Titre h3</h3>
					<h4 class="title is-4">Titre h4</h4>
					<h5 class="title is-5">Titre h5</h5>
					<h6 class="title is-6">Titre h6</h6>
					<button class="is-primary is-disabled">bouton primaire inactif</button>
					<button class="is-primary">bouton primaire</button>
					<button class="is-primary is-thin">bouton primaire fin</button>
					<button class="is-final">bouton succès</button>
					<button class="is-secondary is-disabled">bouton secondaire inactif</button>
					<button class="is-secondary">bouton secondaire</button>
					<button class="is-secondary is-thin">bouton secondaire fin</button>
					<button class="is-action">bouton action</button>
					<button class="is-action is-thin">bouton action fin</button>
				</section>
				<section>
					Autres boutons:
					<button id="close_dialog_more" class="is-closing-popup">
						bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
					</button>
					<app-language-selector></app-language-selector>

					<div class="delete-date">
						<button class="has-background-trash has-background-icon-left is-filtered-icon-primary">
							{{ 'dates.remove' | translate }} N
						</button>
					</div>
					<div class="add-time-choice">
						<button
							class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
						>
							{{ 'hours.add' | translate }}
						</button>
					</div>
				</section>
			</fieldset>
		</div>
	</div>

	<!--	dialog search-->

	<form (ngSubmit)="searchMyPolls()">
		<p-dialog
			[modal]="true"
			[(visible)]="display_poll_search_dialog"
			[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
			[style]="{ width: '486px' }"
			[draggable]="false"
			[showHeader]="false"
			[resizable]="true"
		>
			<div class="home-content">
				<div class="top">
					<button
						id="close_dialog"
						class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup"
						(click)="focusOnCancelButton()"
					>
						{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
					</button>
				</div>
				<div class="">
					<section class="search">
						<div class="">
							<div class="search-others column">
								<h2 class="title is-2">
									{{ 'home.search_title' | translate }}
								</h2>
								<div class="search-description">
									{{ 'home.search_subtitle' | translate }}
								</div>
								<label for="search_email">
									{{ 'home.search_label' | translate }}
								</label>
								<input
									type="email"
									pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}"
									class="is-full input"
									name="search_email"
									id="search_email"
									[ngClass]="{
										'has-background-success': email_sent,
										'ng-invalid has-background-warning':
											storageService.vote_stack.owner.email.length &&
											nonexistent_email === storageService.vote_stack.owner.email
									}"
									[(ngModel)]="storageService.vote_stack.owner.email"
								/>
								<div class="email_sent has-background-success padded" *ngIf="email_sent">
									<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
									votre dossier de spam.
								</div>
								<div
									class="email_error has-background-warning padded"
									*ngIf="email_sent && nonexistent_email === storageService.vote_stack.owner.email"
								>
									<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
			<ng-template pTemplate="footer" class="has-text-right">
				<button
					class="button is-secondary"
					(click)="focusOnCancelButton()"
					id="cancel_popup_button"
					aria-haspopup="dialog"
				>
					{{ 'nav.leave' | translate }}
				</button>
				<button
					type="submit"
					role="button"
					class="button is-primary button-submit"
					(click)="searchMyPolls()"
					[disabled]="
						!storageService.vote_stack.owner.email.length &&
						storageService.vote_stack.owner.email.indexOf('@') !== -1
					"
					routerLink="user/polls"
				>
					<i class="fa fa-search"></i>
					{{ 'home.search_button' | translate }}
				</button>
			</ng-template>
		</p-dialog>
	</form>
</section>

<div class="demos">
	<div class="poll-list">
		<ul>
			<li *ngFor="let p of storageService.userPolls">
				<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
					{{ p.title }}
					<i class="fa fa-arrow-right pull-right"></i>
				</a>
			</li>
		</ul>
	</div>

	<section class="demo-capabilities">
		<div
			*ngIf="environment.showDemoWarning"
			class="demo demo-warning well has-background-warning-light padded marged"
		>
			<h3 class="title is-3">
				Ce que l'on peut faire sur cette démo:
			</h3>
			<ul>
				<li>
					☑️ Créer un nouveau sondage
				</li>
				<li>
					☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote) et un
					commentaire.
				</li>
				<li>
					☑️
					<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs"
						>lire la documentation</a
					>
				</li>
			</ul>
			<h3 class="title is-3">
				Ce qu'on ne peut pas encore faire:
			</h3>
			<ul>
				<li>
					🚴‍️ mettre à jour son vote à un sondage
				</li>
				<li>
					🚴‍ modifier un de ses sondages existants par un lien d'administration
				</li>
				<li>
					🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails du backend
					sur demande (mesure anti spam).
				</li>
			</ul>
		</div>
	</section>
</div>