Skip to content

Instantly share code, notes, and snippets.

@jy95

jy95/gist:f62978f7d09430dc2619

Created April 11, 2015 17:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jy95/f62978f7d09430dc2619 to your computer and use it in GitHub Desktop.
Save jy95/f62978f7d09430dc2619 to your computer and use it in GitHub Desktop.
Download ZIP
source code
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Dino-Build</title>
<link rel="stylesheet" type="text/css" media="all"
href="views/css/page.css" />
<link rel='stylesheet' href='http://s.codepen.io/assets/reset/reset.css'>
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
</head>
<!----------------------------------------- HEADER ----------------------------------------->
<div id="header">
<div id="bar_nav" class="max">
<div id="logo"></div>
</div>
<div id="boutons_haut">
<div class="block">
<a class="nav-boutons" id="sur_bouton" href="#nav"> <span
style="font-size: 16px; text-align: center"></span>
</a>
</div>
</div>
<nav id="nav" role="navigation">
<div class="block">
<ul class="nav">
<li id="nav-1" class="nav-menu"><a class="nav-menu-a"
onclick="to=2;" href="index.php">ACCUEIL</a></li>
<li id="nav-3" class="nav-menu"><a class="nav-menu-a"
onclick="to=3;" href="index.php?action=helper">PLAN D'UP</a></li>
<li id="nav-8" class="nav-menu"><a class="nav-menu-a"
onclick="to=8;" href="index.php?action=contact">CONTACTS</a></li>
<li id="nav-9" class="nav-menu"><a class="nav-menu-a"
onclick="to=9;" href="index.php?action=info">A PROPOS</a></li>
</ul>
</div>
</nav>
</div>
<!----------------------------------------- TITRES ----------------------------------------->
<div id="titres_principaux">
<div id="specs">
<div id="titres" class="max">
<div id="logo_moi">
</div>
<div id="titres_hauts">
<h1 class="specs"></h1>
<img src="views/images/back.png" alt="Dino-Build" />
</div>
</div>
</div>
</div><p>Bienvenue à l'outil de gestion des ups</p>
<p>Sélectionner la race de votre dino et l'élément du up</p>
<form action="index.php?action=helper" method="post">
<br> <select name="race">
<option value="winks"
selected>Winks
</option>
<option value="siran"
>Siran
</option>
<option value="kabuki"
>Kabuki
</option>
<option value="wanman"
>Wanman
</option>
<option value="moueffe"
>Moueffe
</option>
<option value="castivore"
>Castivore
</option>
<option value="feross"
>Feross
</option>
<option value="nuagoz"
>Nuagoz
</option>
<option value="planaille"
>Planaille
</option>
<option value="pteroz"
>Pteroz
</option>
</select> <select name="choix">
<option value="feu"
selected>Feu
</option>
<option value="eau"
>Eau
</option>
<option value="bois"
>Bois
</option>
<option value="air"
>Air
</option>
<option value="foudre"
>Foudre</option>
</select><input type="submit" value="Valider">
</form>
<form action="index.php?action=helper" method="post">
<h3>Voici toutes les compétences disponibles en feu</h3>
<h2>Sélectionner vos compétences acquises</h2>
<p>
<input type="checkbox" name="competences[]" value="57" id="57" />
<label for="57">Force</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="58" id="58" />
<label for="58">Griffes Enflammées</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="59" id="59" />
<label for="59">Colère</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="60" id="60" />
<label for="60">Arts Martiaux</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="61" id="61" />
<label for="61">Charge</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="62" id="62" />
<label for="62">Chasseur goupignon</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="63" id="63" />
<label for="63">Souffle Ardent</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="64" id="64" />
<label for="64">Furie</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="65" id="65" />
<label for="65">Sang Chaud</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="66" id="66" />
<label for="66">Waïkikidô</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="67" id="67" />
<label for="67">Vigilance </label>
</p>
<p>
<input type="checkbox" name="competences[]" value="68" id="68" />
<label for="68">Paume Chalumeau</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="69" id="69" />
<label for="69">Kamikaze</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="70" id="70" />
<label for="70">Chasseur de Géant</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="71" id="71" />
<label for="71">Coulée de Lave</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="72" id="72" />
<label for="72">Boule de Feu</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="73" id="73" />
<label for="73"> Combustion</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="74" id="74" />
<label for="74">Aura Incandescante</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="75" id="75" />
<label for="75">Vengeance</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="76" id="76" />
<label for="76">Sieste</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="77" id="77" />
<label for="77">Coeur Ardent</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="78" id="78" />
<label for="78">Chef de guerre</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="79" id="79" />
<label for="79">Bélier</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="80" id="80" />
<label for="80">Chasseur de Dragon</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="81" id="81" />
<label for="81">Torche</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="82" id="82" />
<label for="82">Météores</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="83" id="83" />
<label for="83">Self-Contrôle</label>
</p>
<p>
<input type="checkbox" name="competences[]" value="84" id="84" />
<label for="84">Brave</label>
</p>
<fieldset>
<br> <input type="submit" name="mieux"
value="Obtenir les compétences disponibles"> <br>
</fieldset>
</form>
<!------------------------------------- PIED PAGE ------------------------------------->
<div id="footer" class="bas">
<div id="pied_page" class="max">
<div class="column column-3 column-3-1">
<li id="bas_de_page" class="titre_bas_page_gauche">
<h3>Remerciements : <br></h3>
<ul>
<li>
<h4>&copy; 2015 Jkratos95 | Codeur de l'application <br> </h4>
</li>
<li>
<h4>&copy; 2015 PEPITO | Graphismes <br> </h4>
</li>
<li>
<h4>toutes les images sont la propriété exclusive de &copy;MotionTwin </h4>
</li>
</ul>
</li>
</div>
</div>
</div>
<script type='text/javascript'
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {enableSelectBoxes();});
function enableSelectBoxes(){
$('div.selectBox').each(function(){
$(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
$(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));
$(this).children('span.selected,span.selectArrow').click(function(){
if($(this).parent().children('div.selectOptions').css('display') == 'none') {
$(this).parent().children('div.selectOptions').css('display','block');
}
else {
$(this).parent().children('div.selectOptions').css('display','none');
}
});
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
});
});
}
</script>
<script
src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script
src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
<script type='text/javascript'
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script
src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script
src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script>
$('#select_box').click(function () {
if ($(this).hasClass('inactive')) {
$(this).children('#list').slideDown('normal');
$(this).addClass('active').removeClass('inactive');
} else if ($(this).hasClass('active')) {
$(this).children('#list').slideUp('fast');
$(this).addClass('inactive').removeClass('active');
}
});
$('#select_box #list div').click(function (e) {
e.stopPropagation();
if ($(this).parents('#select_box').hasClass('active')) {
var val = $(this).html();
$(this).parent('#list').siblings('#default_text').empty().text(val);
$(this).parents('#select_box').removeClass('active').addClass('inactive');
$(this).parent('#list').slideUp('fast');
} else {
return;
}
});
//@ sourceURL=pen.js
</script>
<script
src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
<script src='http://s.codepen.io/assets/libs/prefixfree.min.js'></script>
<script src='http://s.codepen.io/assets/libs/modernizr.js'></script>
<script
src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script
src='http://codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment