<style rel="stylesheet" type="text/javascript">
<!--
  #code_generator, #generator_result {
      width: 600px;
      margin: 30px auto;
      padding: 20px;
      border: 1px solid #fff;
      -moz-border-radius: 12px;
  }
  .label_gen {
      display: inline-block;
      width: 100px;
      vertical-align: top;
  }
  #generator_result { text-align: center; display: none; }
       
-->
</style>

<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){

      $("#generate").click(function(){

        var imgone = $("#imgone").val();
       var prenom = $("#prenom").val();
       var prenomd = $("#prenomd").val();
       var nom = $("#nom").val(); //
       var citationchanson = $("#citationchanson").val();
       var age = $("#age").val();
       var datenaissance = $("#datenaissance").val();
       var origines = $("#origines").val();
       var statut = $("#statut").val();
       var orientations = $("#orientations").val();
       var occup = $("#occup").val();
       var avatar = $("#avatar").val();
       var credits = $("#credits").val();
       var premiere = $("#premiere").val();
       var deuxieme = $("#deuxieme").val();
       var troisieme = $("#troisieme").val();
       var quatrieme = $("#quatrieme").val();
       var cinquieme = $("#cinquieme").val();
       var inscriptionapp = $("#inscriptionapp").val();
       var futurscolocs = $("#futurscolocs").val();
       var pseudop = $("#pseudop").val();
       var inscriptionalone = $("#inscriptionalone").val();
       var ageirl = $("#ageirl").val();
       var decouverte = $("#decouverte").val();
       var villedep = $("#villedep").val();
       var invscen = $("#invscen").val();
       var dctc = $("#dctc").val();
       var ennd = $("#ennd").val();
       var tesla = $("#tesla").val();
             
          var the_code = '<div class="backprese"><img src="' + imgone + '"  class="imgprese"><center><a class="forumlink" style="margin:auto;">' + prenom + '' + prenomd + '' + nom + '</a> <br><aze>' + citationchanson + '</aze><div class="backdescription"><aze>Âge</aze> ; ' + age + ' ? <aze>Date et lieu de naissance</aze> ; ' datenaissance + ' ? <aze>Origines</aze> ; ' + origines + ' ? <aze>Statut social</aze> ; ' + statut + ' ? <aze>Orientation sexuelle</aze> ; ' + orientations + ' ? <aze>Occupation</aze> ; ' + occup + ' ? <aze>Avatar</aze> ; ' + avatar + ' ? <aze>Crédits</aze> ; ' + credits + '</div><br><br><div class="titreqeel1"><div style="text-align:left;">what about you.</div></div><div class="cadrpres1">?' + premiere + ' <br><br>?' + deuxieme + ' <br><br>?' + troisieme + ' <br><br>?' + quatrieme + ' <br><br>?' + cinquieme + ' <br><br><aze><b>? Pourquoi avez-vous choisi de vous inscrire sur le site appartager.com ?</b></aze> ' + inscriptionapp + '<br><br><aze><b>? Comment voyez-vous vos futurs colocataires ? </b></aze> ' + futurscolocs + '<br><br><aze><b>? Est-ce que vous vous êtes inscrit seul(e) ou accompagné(e) de quelqu un ?</b></aze> ' + inscriptionalone + '</div><br><br><div class="titreqeel1" style="margin-bottom:-5px;"><div style="text-align:left;">behind the screen.</div></div><div class="backdescription"><aze>Prénom/pseudo </aze> ; ' + pseudop + ' ? <aze>Âge </aze> ; ' + ageirl + ' ? <aze>Pays/région/département</aze> ; ' + villedep + ' ? <aze>Comment as-tu découvert le forum </aze> ; ' + decouverte + ' <aze>Avis, remarques, suggestions </aze> ; ' + avisapp + ' ? <aze>Fréquence de connexion </aze> ; ' + tesla + ' ? <aze>Inventé/scénario</aze> : ' + invscen + ' ? <aze>Premier compte/double compte</aze> ; ' + dctc + ' ? <aze>Un dernier mot</aze> ; ' + ennd + '</div></center></div>
      
             
        $("#generator_result").fadeIn(400, function(){ //on fait apparaitre le résultat
            $(this).find("textarea").text(the_code).select(); //on affiche le contenu et on le sélectionne dans la foulée
        });
        return false; //on annule le comportement par défaut du bouton de validation
      });

  });
//]]>
</script>

   <div style="background-color:#ffffff;margin-left:20px;margin-right:20px;padding:20px;">   
<form action="#" method="get" name="code_generator" id="code_generator">
   <br />
<span style="font-size:11px;"><b><justify>Bienvenue sur le générateur de présentation d'appartager.com. Veuillez remplir précisémment chaque champ puis cliquer sur Générer le code. Ensuite, copiez/coller le texte apparu en bas et vous pourrez le poster dans un nouveau sujet partie Présentations. Ce générateur à pour but de vous faciliter le maniement des codes. En cas de dysfonctionnement, merci d'en avertir le plus rapidement possible un administrateur qui se chargera de régler le problème.</justify></b></span><br /><br /><br />
   <center><div class="titreqeel1"><u>Inscription sur appartager.com, <br>
   viens découvrir les joies de la colocation !</u></div></center>
   <p><label for="imgone" class="label_gen"><span style="font-size:11px;">URL de l'Image/gif qui sera affichée tout en haut</span></label> <input type="text" name="imgone" id="imgone" value="http://"/></p>
  <p><label for="prenom" class="label_gen"><span style="font-size:11px;">Premier prénom</span></label> <input type="text" name="prenom" id="prenom"/></p>
  <p><label for="prenomd" class="label_gen"><span style="font-size:11px;">Second prénom</span></label> <input type="text" name="prenomd" id="prenomd"/></p>
  <p><label for="nom" class="label_gen"><span style="font-size:11px;">Nom de famille</span></label> <input type="text" name="nom" id="nom" /></p>
  <p><label for="citationchanson" class="label_gen"><span style="font-size:11px;">Un texte, une citation, une parole de chanson</span></label> <input type="text" name="citationchanson" id="citationchanson"/></p>
  <p><label for="age" class="label_gen"><span style="font-size:11px;">Age du personnage</span></label> <input type="text" name="age" id="age"/></p>
  <p><label for="datenaissance" class="label_gen"><span style="font-size:11px;">Date et lieu de naissance</span></label> <input type="text" name="datenaissance" id="datenaissance"/></p>
  <p><label for="origines" class="label_gen"><span style="font-size:11px;">Origines du personnage</span></label> <input type="text" name="origines" id="origines"/></p>
  <p><label for="statut" class="label_gen"><span style="font-size:11px;">Statut civil (célibataire, en couple, fiancé, marié, autre ?)</span></label> <input type="text" name="statut" id="statut"/></p>
  <p><label for="orientations" class="label_gen"><span style="font-size:11px;">Orientation sexuelle</span></label> <input type="text" name="orientations" id="orientations"/></p>
  <p><label for="occup" class="label_gen"><span style="font-size:11px;">Occupation / Métier</span></label> <input type="text" name="occup" id="occup"/></p>
  <p><label for="avatar" class="label_gen"><span style="font-size:11px;">Avatar du personnage</span></label> <input type="text" name="avatar" id="avatar"/></p>
  <p><label for="credits" class="label_gen"><span style="font-size:11px;">Crédits pour l'image du haut</span></label> <input type="text" name="credits" id="credits"/></p>
  <br>
  <span style="font-size:11px;"><b><justify>Dans cette partie, indiquer au moins cinq éléments sur votre personnage. Cela peut être : goûts, anecdotes, particularités, manies/tics etc... merci de détailler.</justify></b></span><br>
  <p><label for="premiere" class="label_gen"><span style="font-size:11px;">Premier</span></label> <textarea name="premiere" id="premiere" style="width:260px;" cols="30" rows="6"></textarea></p>
  <p><label for="deuxieme" class="label_gen"><span style="font-size:11px;">Deuxieme</span></label> <textarea name="deuxieme" id="deuxieme" style="width:260px;" cols="30" rows="6"></textarea></p>
  <p><label for="troisieme" class="label_gen"><span style="font-size:11px;">Troisieme</span></label> <textarea name="troisieme" id="troisieme" style="width:260px;" cols="30" rows="6"></textarea></p>
  <p><label for="quatrieme" class="label_gen"><span style="font-size:11px;">Quatrieme</span></label> <textarea name="quatrieme" id="quatrieme" style="width:260px;" cols="30" rows="6"></textarea></p>
  <p><label for="cinquieme" class="label_gen"><span style="font-size:11px;">Cinquieme</span></label> <textarea name="cinquieme" id="cinquieme" style="width:260px;" cols="30" rows="6"></textarea></p>
   <p><label for="inscriptionapp" class="label_gen"><span style="font-size:11px;">Pourquoi ton personnage s'est inscrit sur appartager.com ? minimum 50 mots</span></label> <br /><textarea name="inscriptionapp" id="inscriptionapp" style="width:260px;" cols="30" rows="6"></textarea></p>
   <p><label for="futurscolocs" class="label_gen"><span style="font-size:11px;">Comment ton personnage voit-il ses futurs colocataires ? minimum 50 mots (profil type de vos colocataires idéals ; sociable ou non, extraverti ou introverti...)</span></label> <br /><textarea name="futurscolocs" id="futurscolocs"style="width:260px;" cols="30" rows="6"></textarea></p>
   <p><label for="inscriptionalone" class="label_gen"><span style="font-size:11px;">T'es-tu inscrit(e) seul(e) ou accompagné de quelqu'un ? précisez avec qui si oui, pour nous permettre de vous mettre ensemble en colocation</span></label> <br /><textarea name="inscriptionalone" id="inscriptionalone" style="width:260px;" cols="30" rows="6"></textarea></p>
   <br><br>
   <div class="titreqeel1"><u>Te concernant, oui, toi derrière l'écran !</u></div>
   <p><label for="pseudop" class="label_gen"><span style="font-size:11px;">Ton pseudo ou prénom :</span></label> <input type="text" name="pseudop" id="pseudop"/></p>
   <p><label for="ageirl" class="label_gen"><span style="font-size:11px;">Ton age (facultatif)</span></label> <input type="text" name="ageirl" id="ageirl"/></p>
   <p><label for="villedep" class="label_gen"><span style="font-size:11px;">Où vis-tu ? Pays, Région, Ville...</span></label> <input type="text" name="villedep" id="villedep" /></p>
   <p><label for="decouverte" class="label_gen"><span style="font-size:11px;">Comment as-tu découvert le forum ?</span></label> <input type="text" name="decouverte" id="decouverte"/></p>
   <p><label for="invscen" class="label_gen"><span style="font-size:11px;">Es-tu un inventé ou un scénario ?</span></label> <input type="text" name="invscen" id="invscen"/></p>
   <p><label for="dctc" class="label_gen"><span style="font-size:11px;">Est-ce un double compte ?</span></label> <input type="text" name="dctc" id="dctc"/></p>
   <p><label for="tesla" class="label_gen"><span style="font-size:11px;">Fréquence de connexion</span></label> <input type="text" name="tesla" id="tesla"/></p>
   <p><label for="ennd" class="label_gen"><span style="font-size:11px;">Un dernier mot pour la fin ?</span></label> <input type="text" name="ennd" id="ennd"/></p>
   
   
  <p><button id="generate">Générer votre code de présentation</button></p>
  <input class="submit" type="reset" value="Effacer toute la fiche">

<div id="generator_result">
  <p><span style="font-size:11px;">Code à copier/coller dans un nouveau sujet :</span></p>
  <textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
</div></form><br /><br /></div>