Changed style

This commit is contained in:
Bertrand Cournaud 2012-06-15 00:00:21 +02:00
parent b403eff562
commit 55a9e556ba
2 changed files with 142 additions and 118 deletions

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<link rel="Stylesheet" href="style.css" /> <link rel="Stylesheet" href="style.css" />
<title>Every Questions (BETA)</title> <title>Every AskWeb (BETA)</title>
<script language="javascript"> <script language="javascript">
var nbAnswer = 1; var nbAnswer = 1;
@ -13,9 +13,10 @@
var element = document.createElement("input"); var element = document.createElement("input");
element.setAttribute("type", "text"); element.setAttribute("type", "text");
element.setAttribute("id", "answer");
element.setAttribute("name", "answer" + nbAnswer); element.setAttribute("name", "answer" + nbAnswer);
nbAnswer++; nbAnswer++;
element.setAttribute("placeholder", "Enter the new answer"); element.setAttribute("placeholder", "Nouvelle réponse");
var foo = document.getElementById("answerList"); var foo = document.getElementById("answerList");
foo.appendChild(element); foo.appendChild(element);
@ -30,44 +31,55 @@
<a href="http://www.h2g2.com" target="_blank"> <a href="http://www.h2g2.com" target="_blank">
<img src="marvin-robot_normal.png" alt="" id="banner"/> <img src="marvin-robot_normal.png" alt="" id="banner"/>
</a> </a>
<h1>Nemubot Questions (BETA)</h1> <h1>Nemubot AskWeb (BETA)</h1>
</div> </div>
</header> </header>
<section id="introduction"> <section id="introduction">
<article id="bonjour"> <article id="bonjour">
<h2>Bonjour,</h2> <h2>Bonjour</h2>
Bienvenue sur le site de questions de Nemubot. Vous pouvez ici Bienvenue sur le site de questions de Nemubot. Vous pouvez ici
ajouter de nouvelles questions à Nemubot. Ces questions seront ajouter de nouvelles questions à Nemubot. Ces questions seront
posées sur le chan irc. posées sur le chan irc.
</article> </article>
<article id="fonctionnement"> <article id="explications">
<h2>Fonctionnement</h2> <h2>Nemubot AskWeb en 3 étapes</h2>
<p> <p>
Les questions que vous ajoutez vont être soumise à vérification par une <h3>Nouvelle question</h3>
personne tirée au sort parmis la liste des participants du chan. Commencez par entrer votre question ainsi que la ou les réponses
</p> associées. À noter que :
<p> <ul>
L'un des principes de ces questions est qu'elle aient un rapport <li>Il est conseillé d'indiquer plusieurs fois vos réponses
avec les cours dispensés au 2eme semestres et sur lesquelles nous avec des variations telles que : "une chaussure"
auront des partiels. Merci de poser des questions qui vont dans et "chaussure"</li>
ce sens. <li>Les questions possédant seulement 2 réponses possibles
n'ont pas beaucoup d'intêret</li>
</ul>
</p> </p>
<p> <p>
Un email va être envoyé à cette personne avec votre question et <h3>Confirmer votre question</h3>
la/les réponse(s) que vous avez proposé. Cette personne pourra alors Une fois la question ajoutée, un email vous a été envoyé pour que
valider votre question et celle ci pourra alors apparaitre sur le chan. vous confirmiez qu'il s'agit bien de vous. Cliquez sur le lien
Si elle est refusée, elle sera détruite de la base de données. pour confirmer.
</p> </p>
<p>
<h3>Validation</h3>
Une fois confirmée, un email est envoyé à un autre membre du groupe
pour qu'il valide la question. S'il juge votre question fausse
ou éronée elle n'apparaitra jamais dans les qcm sur le chan.
</p>
</article> </article>
</section> </section>
<form id="formulaire" method="post" action="questions.php"> <section id="hello">
<h2>Nouvelle question</h2> <h2>Nouvelle question</h2>
<form id="formulaire" method="post" action="questions.php">
<section id="Form"> <section id="Form">
<aside id="info"> <aside id="info">
@ -77,10 +89,7 @@
<p> <p>
Le champ "De quelle matière s'agit-il ?" n'est là qu'a titre Le champ "De quelle matière s'agit-il ?" n'est là qu'a titre
indicatif. Il va permettre à la personne qui valide votre question indicatif. Il va permettre à la personne qui valide votre question
d'aller vérifier par lui même la véracité de votre réponse.<br/> d'aller vérifier par lui même la véracité de votre réponse.
Indiquez la matière sur laquelle porte la question lui permettra
d'aller plus vite.<br/>
</p> </p>
</aside> </aside>
@ -124,12 +133,21 @@
</select> </select>
</article> </article>
<aside id="info">
<img src="left_triangle2.gif" id="arrow2" alt=""/>
<h3>La question</h3>
<p>
La question sera afficher sur 1 ligne. Donc pas la peine de
faire de retour à la ligne.
<p>
</aside>
<article> <article>
<p id="questionPart"> <p id="questionPart">
<label id="q" for="question"> <label id="q" for="question">
Quelle est votre question ? </label><br/> Quelle est votre question ? </label><br/>
<textarea id="question" name="question" <textarea id="question" name="question"
rows="10" cols="50" rows="3" cols="70"
placeholder="Entrez votre question ici"></textarea> placeholder="Entrez votre question ici"></textarea>
</p> </p>
<p id="answerList"> <p id="answerList">
@ -142,7 +160,7 @@
onclick="add()"/> onclick="add()"/>
</p> </p>
<p> <p>
<label for="email">Merci d indiquer votre email</label><br/> <label for="email">Merci d'indiquer votre email</label><br/>
<input id="email" name="email" type="text" /> <input id="email" name="email" type="text" />
</p> </p>
<p> <p>
@ -152,11 +170,13 @@
</section> </section>
</form> </form>
</section>
<footer> <footer>
<h4>Details</h4> <h3>Liens utiles</h3>
Ça fait moche un site sans pied de page.<br/> <ul>
En voilà donc un. <li><a href="http://mastercorp.epita.eu" target="_blank">
Le site Mastercorp</a></li>
</ul>
</footer> </footer>
</body> </body>

View File

@ -1,17 +1,18 @@
body body
{ {
text-align: center; text-align: center;
width: 60%; width: 75%;
margin: auto; margin: auto;
background-color: #545455; background-color: #CCCCCC;
} }
header header
{ {
border-radius: 10px; border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin: 10px; margin: 10px;
padding: 8px; padding: 8px;
background-color: black; background-color: #333333;
color: orange; color: orange;
} }
@ -21,50 +22,38 @@ header
float: right; float: right;
} }
#introduction #introduction, #hello
{ {
text-align: justify; text-align: justify;
border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#introduction article #introduction article, #hello
{ {
display: block;
width: 42%;
background-color: white; background-color: white;
border: solid; box-shadow: 0px 5px 5px black;
border-radius: 3px; border-radius: 3px;
border-radius: 0px; border-radius: 0px;
padding: 10px; padding: 10px;
margin: 10px;
} }
article h2, form h2 article h2, #hello h2
{ {
background-color: black; background-color: #333333;
color: orange; color: orange;
margin-left: -10px; margin-left: -10px;
margin-right: -10px; margin-right: -10px;
} }
#bonjour
{
float: left;
margin-left: 2%;
vertical-align: top;
}
#fonctionnement #fonctionnement
{ {
float: right; float: right;
margin-right: 2%;
margin-bottom: 10px; margin-bottom: 10px;
} }
form #hello
{ {
border: solid;
border-radius: 5px;
clear: both; clear: both;
margin-top: 10px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 20px;
@ -88,10 +77,11 @@ aside
{ {
float: right; float: right;
width: 30%; width: 30%;
border-radius: 10px;
box-shadow: 0px 5px 10px black; box-shadow: 0px 5px 10px black;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: black; background-color: #222222;
color: orange; color: orange;
} }
@ -102,8 +92,22 @@ aside
margin-top: 80px; margin-top: 80px;
} }
#arrow2
{
position: absolute;
margin-left: -40px;
margin-top: 45px;
}
footer footer
{ {
border-top: solid; border-top: solid;
text-align: justify; text-align: justify;
padding-bottom: 50px;
}
footer a
{
color: black;
} }