Page de présentation

9 年之前 · 7f804de688
--- a/home.png
+++ b/home.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,48 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Dactylotest : faites bouger vos doigts</title>

 <link rel="stylesheet" type="text/css" href="style.css" />

 </head>

 <body>

 <div class="bar" id="bar">
  <a href="http://tazzon.free.fr/dactylotest/"><img src="home.png" alt="home" style="padding-bottom:2px"/></a>
  <a href="./dactylotest/" title="Testez votre vitesse de frappe">Dactylotest</a>
  <a href="./tridactyl/" title="Perfectionnez votre frappe grâce aux trigrammes">Tridactyl</a>
  <a href="./bepodactyl/" title="Bien débutez avec la disposition de clavier BÉPO">Bépodactyl</a>
 </div>

 <div class="head">
 	<h1>— Dactylotest —</h1><br/>
 	Faites bouger vos doigts.
 </div>

 <div class="main">
  <div class="dactylotest">    
    <h2><a href="./dactylotest/">Dactylotest</a></h2>
      <p>Testez votre vitesse et votre précision sur plus d’une centaine de textes différents issus de différentes sources telles que Wikipédia ou Wikisource.</p>
      <p>Vous pourrez activer différentes options pour pratiquer un français sans concession grâce aux options typographiques (guillemets, majuscules accentuées…).</p>
      <p>Mesurez vous aux meilleurs grâce aux fantômes que d’autres utilisateurs ont enregistré et soumettez les votres pour apparaître dans la liste.</p>
  </div>   
  <div class="tridactyl">    
    <h2><a href="./tridactyl/">Tridactyl</a></h2>
      <p>Améliorez votre frappe en travaillant sur des trigrammes (succession de trois lettres).</p>
      <p>Grâce à cela, vous pourrez enchaîner les caractères plus facilement et ainsi obtenir une frappe plus constante et régulière.</p>
      <p>Plusieurs niveaux sont disponibles, choisissez celui qui vous convient le mieux.</p>
  </div>
  <div class="bepodactyl">    
    <h2><a href="./bepodactyl/">Bépodactyl</a></h2>
      <p>Apprenez à l’aide d'exercices simples à utiliser la disposition <a href="http://bepo.fr">BÉPO</a>. Cette disposition de clavier permet d’optimiser les déplacements des doigts et rend ainsi la frappe plus agréable. De plus, elle permet de pratiquer un français irréprochable en intégrant tous les caractères indispensables au français et bien plus encore.</p>
      <p>Si vous ne frapper pas encore au clavier en aveugle, cette disposition de clavier pourrait bien vous faire changer d’avis.</p>
  </div>    
 </div>


 </body>
 </html>
 					
--- a/style.css
+++ b/style.css
@@ -0,0 +1,200 @@
 .bar {
  background-color:black;
  /*z-index:150;*/
  width:99%;
  /*border:1px black dotted;*/
  padding:3px;
  margin:auto;
 }
 .bar a {
  margin:10px;
  text-decoration:none;
  color:#fafafa;
 }
 .bar a:visited {
  margin:10px;
  text-decoration:none;
  color:#fafafa;
 }
 a:hover {
  color:#bc86d7;
  text-decoration:underline;
 }
 .bar a:hover {
  color:#bc86d7;
  text-decoration:none; 
 }

 h2 a:hover {
  color:#bc86d7;
  text-decoration:none;
 }

 a, a:visited {
  color:black;
  text-decoration:none;
 }

 p a, a:visited {
  color:black;
  text-decoration:none;
  border-bottom:1px dashed black;
 }

 p a:hover {
  color:#bc86d7;
  text-decoration:none;
  border-bottom:1px dashed #bc86d7;
 }

 .head {
  text-align:center;
  margin-bottom:70px;
 }

 body {
  background-color:#fafafa;
  margin:0;
  padding:0;
  color: black;
  font-size: 14px;
  font-family:monospace;
 }
 h1 {
 	margin-bottom:-15px;
  font-size: 36px;
  font-family:monospace;
 	
 }
 h2 {
  text-align:left;
  padding-left:20px;
  font-size: 20px;
  font-family:monospace;

 }
 p {
  margin:0;
  margin-top:5px;
  /*margin-left:10px;*/
  padding:0px 0px 0px 0px;
  text-indent:20px;
  text-align:justify;
  
 }
 input[type=button] {
  border:1px black solid;
  background-color:#ebebeb;
  font-size: 12px; 
  color: black; 
  font-family: monospace;
  margin-bottom:3px;
  -moz-border-radius: 5px;
  border-radius:5px; 
 }
 .full_width {
  width:100%;
  text-align:center;
 }
 input[type=button]:hover {
  background-color:#fafafa;
 }
 input[type=text] {
  font-size: 14px; 
  color: black; 
  font-family: monospace; 
 }
 hr {
  border-top : dotted 1px black;
  border-bottom : none;
  border-left:none;
  border-right:none;
 }
 select {
  border:none;
  font-family:monospace;
  font-size:14px;
  background-color:#fafafa;
  width:100px;
 }
 img {
  vertical-align:middle;
 }
 .main {
  text-align:left;
  width:750px;
  margin:auto;
 }
 .text_nmbr {
  width:100%;
  border:none;
  text-align:center;
 }
 .err {
  visibility:hidden;
  color:red;
  font-weight:bold;
  font-size:18px;
  background-color:#ffbbbb;
 }
 .new_text {
  border:none;
  text-align:left;
  padding:5px;
  font-family:monospace;
  font-size:14px;
 }
 .options {
  border:none;
  text-align:left;
  width:300px;
  float:left;
  padding:0px 5px 5px 5px;

  font-family:monospace;
  font-size:14px;
 }
 .view_options {
  display:block;
 }
 .result {
  float:right;
  text-align:left;
  width:420px;
  padding:5px;
  font-family:monospace;
  font-size:14px;
 }
 .txt {
  border:1px black solid;
  width:748px;
  height:120px;
  font-family:monospace;
  font-size:14px;
  margin-bottom:5px;
 }
 .rd_txt {
  height:auto;
  text-align:left;
  width:748px;
  height:110px;
  font-family:monospace;
  font-size:14px;
  /*text-align:justify;*/
  /*background-color:white;*/
 }

 .d_replay {
  visibility:visible;
  float:right;
 }

 /*.dactylotest {
  border-left:#ffdd00 2px solid;
 }
 .tridactyl {
  border-left:#40e0d0 2px solid;
 }
 .bepodactyl {
  border-left:#7cfc00 2px solid;
 } */