funky-framadate-front/src/app/pages/kind/kind.component.html

344 lines
7.4 KiB
HTML
Raw Normal View History

<h1 >page de démo</h1 >
<p >cette étape est en cours de développement. <br > S'inspirer de la page de Home pour réaliser d'autres pages
</p >
<a
[routerLink]="'/step/end'"
class="btn btn--primary"
i18n="@@confirm" >C'est parfait!</a >
<h1 >Atoms</h1 >
<section >
<article >
<h2 >Headings</h2 >
<h1 >Ceci est un h1</h1 >
<h2 >Ceci est un h2</h2 >
<h3 >Ceci est un h3</h3 >
</article >
<article >
<h2 >Links</h2 >
<div >
<a
[routerLink]="'/home'"
class="next" >
<span
class="text"
i18n >
2019-08-12 21:54:21 +02:00
C'est parti !
</span >
</a >
</div >
<div >
<a
[routerLink]="'/home'"
class="prev" >
<span
class="text"
i18n >
2019-08-12 21:54:21 +02:00
C'est parti !
</span >
</a >
</div >
</article >
2019-08-12 21:54:21 +02:00
<article >
<h2 >Buttons</h2 >
2019-08-12 21:54:21 +02:00
<button
type="submit"
class="btn btn--primary" >
2019-10-16 21:33:49 +02:00
primary - default
</button >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--primary btn--small" >
2019-10-16 21:33:49 +02:00
primary - small
</button >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<a
href="#"
class="btn btn--primary btn--outline" >
2019-10-16 21:33:49 +02:00
primary - outline - default
</a >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--primary btn--outline btn--small" >
2019-10-16 21:33:49 +02:00
primary - outline - small
</button >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<input
type="submit"
class="btn btn--alert"
value="alert - default" >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--alert btn--small" >
2019-10-16 21:33:49 +02:00
alert - small
</button >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--alert btn--outline" >
2019-10-16 21:33:49 +02:00
alert - outline - default
</button >
2019-10-16 21:33:49 +02:00
<br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--alert btn--outline btn--small" >
2019-10-16 21:33:49 +02:00
alert - outline - small
</button >
2019-10-16 21:33:49 +02:00
<br ><br >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--primary btn--full" >
2019-10-16 21:33:49 +02:00
primary - full
</button >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--primary btn--outline btn--full" >
2019-10-16 21:33:49 +02:00
primary - outline - full
</button >
2019-10-16 21:33:49 +02:00
<button
type="submit"
class="btn btn--alert btn--full" >
2019-10-16 21:33:49 +02:00
alert - full
</button >
<button
type="submit"
class="btn btn--alert btn--outline btn--full" >
alert - outline - full
</button >
</article >
<article >
<h2 >Forms element</h2 >
<h3 >Labels</h3 >
<label for="" >Un label pour les labelliser tous</label >
<h3 >Input name</h3 >
<input
type="name"
name=""
id="" ><br >
<input
type="name"
name=""
id=""
value="texte" >
<h3 >Input email</h3 >
<input
type="email"
name=""
id="" ><br >
<input
type="email"
name=""
id=""
value="adresse@email.com" >
<h3 >Input password</h3 >
<input
type="password"
name=""
id="" ><br >
<input
type="password"
name=""
id=""
value="password" >
<h3 >Input date</h3 >
<input
type="date"
name=""
id="" ><br >
<input
type="date"
name=""
id=""
value="1985-11-23" >
<h3 >Select</h3 >
<select
name=""
id="" >
<option value="" >
2019-08-12 21:54:21 +02:00
1
</option >
<option value="" >
2019-08-12 21:54:21 +02:00
2
</option >
<option value="" >
2019-08-12 21:54:21 +02:00
3
</option >
</select >
2019-08-12 21:54:21 +02:00
<h3 >Textarea</h3 >
<textarea
name=""
id=""
cols="30"
rows="10" ></textarea >
</article >
2019-08-12 21:54:21 +02:00
<article >
<h2 >Paragraphs</h2 >
2019-08-12 21:54:21 +02:00
<p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
2019-08-12 21:54:21 +02:00
Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
delectus beatae!</p >
</article >
2019-08-12 21:54:21 +02:00
<article >
<h2 >Lists</h2 >
2019-08-12 21:54:21 +02:00
<h3 >Unordered list</h3 >
<ul >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
</ul >
2019-08-12 21:54:21 +02:00
<h3 >Ordered list</h3 >
<ol >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
<li >
2019-08-12 21:54:21 +02:00
plop
</li >
</ol >
</article >
<article >
<h2 >Images</h2 >
<img
src="http://placekitten.com/200/300"
alt="" >
</article >
</section >
<section >
<h1 >Molecules</h1 >
<framadate-voting-choice ></framadate-voting-choice >
<article >
<h2 >Useful classes</h2 >
<h3 >Align right</h3 >
<div class="align-right" >
<a
[routerLink]="'/home'"
class="next" >
<span
class="text"
i18n >
2019-08-12 22:21:12 +02:00
C'est parti !
</span >
</a >
</div >
</article >
<article >
<h2 >Label + input name</h2 >
<label for="test-text" >Ceci est un label un peu long mais pas trop</label >
<input
type="name"
name="test-text"
id="test-text" >
</article >
<article >
<h2 >Label + select</h2 >
<label for="test-select" >Ceci est un label un peu long mais pas trop</label >
<select
name="test-select"
id="test-select" >
<option value="" >
2019-08-12 21:54:21 +02:00
1
</option >
<option value="" >
2019-08-12 21:54:21 +02:00
2
</option >
<option value="" >
2019-08-12 21:54:21 +02:00
3
</option >
</select >
</article >
<article >
<h2 >Input name with info</h2 >
<a href="https://sketch.cloud/s/00A80/a/MAl5q7" >like here</a >
</article >
<article >
<h2 >Commentaries</h2 >
</article >
</section >
<section >
<h1 >Components</h1 >
<article >
<h2 >Images list</h2 >
<a href="https://sketch.cloud/s/00A80/a/bQA9wj" >that</a >
</article >
<article >
<h2 >Calendar</h2 >
</article >
<article >
<h2 >Modale</h2 >
</article >
<article >
<h2 >Way to vote</h2 >
<a href="https://sketch.cloud/s/00A80/a/Ol0598" >that</a >
</article >
<article >
<h2 >Voted</h2 >
<a href="https://sketch.cloud/s/00A80/a/OlJZo2" >that</a >
</article >
<article >
<h2 >Graphics</h2 >
<a href="https://sketch.cloud/s/00A80/a/megprw" >that</a >
</article >
</section >