front end version 2 de framadate, un gestionnaire de sondage
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

265 lines
5.0 KiB

<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="../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>
C'est parti !
</span>
</a>
</div>
<div>
<a routerLink="../../home" class="prev">
<span class="text" i18n>
C'est parti !
</span>
</a>
</div>
</article>
<article>
<h2>Buttons</h2>
<button type="submit" class="btn btn--primary">
primary - default
</button>
<br />
<button type="submit" class="btn btn--primary btn--small">
primary - small
</button>
<br />
<a href="/" class="btn btn--primary btn--outline">
primary - outline - default
</a>
<br />
<button type="submit" class="btn btn--primary btn--outline btn--small">
primary - outline - small
</button>
<br />
<input type="submit" class="btn btn--alert" value="alert - default" />
<br />
<button type="submit" class="btn btn--alert btn--small">
alert - small
</button>
<br />
<button type="submit" class="btn btn--alert btn--outline">
alert - outline - default
</button>
<br />
<button type="submit" class="btn btn--alert btn--outline btn--small">
alert - outline - small
</button>
<br /><br />
<button type="submit" class="btn btn--primary btn--full">
primary - full
</button>
<button type="submit" class="btn btn--primary btn--outline btn--full">
primary - outline - full
</button>
<button type="submit" class="btn btn--alert btn--full">
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 choice_label</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="">
1
</option>
<option value="">
2
</option>
<option value="">
3
</option>
</select>
<h3>Textarea</h3>
<textarea name="" id="" cols="30" rows="10"></textarea>
</article>
<article>
<h2>Paragraphs</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores.
Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi
delectus beatae!
</p>
</article>
<article>
<h2>Lists</h2>
<h3>Unordered list</h3>
<ul>
<li>
plop
</li>
<li>
plop
</li>
<li>
plop
</li>
</ul>
<h3>Ordered list</h3>
<ol>
<li>
plop
</li>
<li>
plop
</li>
<li>
plop
</li>
</ol>
</article>
<article>
<h2>Images</h2>
<img src="http://placekitten.com/200/300" alt="" />
</article>
</section>
<section>
<h1>Molecules</h1>
<app-voting-choice></app-voting-choice>
<article>
<h2>Useful classes</h2>
<h3>Align right</h3>
<div class="align-right">
<a routerLink="../../home" class="next">
<span class="text" i18n>
C'est parti !
</span>
</a>
</div>
</article>
<article>
<h2>Label + input choice_label</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="">
1
</option>
<option value="">
2
</option>
<option value="">
3
</option>
</select>
</article>
<article>
<h2>Input choice_label 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>