9 changed files with 1094 additions and 96 deletions
@ -1,84 +1,89 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html lang="fr"> |
<html lang="fr"> |
||||
<script> |
|
||||
banque = 1000; |
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> |
||||
sous = 100; |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> |
||||
function nbAlea() { |
<script id="rendered-js" > |
||||
nbr1 = Math.floor(Math.random() * 10); |
jQuery(document).ready(function ($) { |
||||
nbr2 = Math.floor(Math.random() * 10); |
|
||||
nbr3 = Math.floor(Math.random() * 10); |
$('a.scroll-link').click(function (e) { |
||||
document.getElementById("PlaceNbr1").innerHTML = nbr1; |
e.preventDefault(); |
||||
document.getElementById("PlaceNbr2").innerHTML = nbr2; |
$id = $(this).attr('href'); |
||||
document.getElementById("PlaceNbr3").innerHTML = nbr3; |
$('body,html').animate({ |
||||
gain() |
scrollTop: $($id).offset().top - 20 }, |
||||
} |
750); |
||||
|
}); |
||||
function gain() { |
|
||||
if (banque < 500) { |
}); |
||||
checkRefresh(); |
|
||||
} else if (nbr1 == 9 && nbr2 == 9 && nbr3 == 9) { |
|
||||
result = "Bingo !"; |
|
||||
sous = sous + banque; |
|
||||
banque = 0; |
|
||||
console.log("Bingo"); |
|
||||
} else if (nbr1 == nbr2 && nbr2 == nbr3) { |
|
||||
result = "Mini Bingo !"; |
|
||||
sous = sous + 6*Number(document.getElementById("searchbar").value); |
|
||||
banque = banque - 6*Number(document.getElementById("searchbar").value); |
|
||||
console.log("Mini Bingo"); |
|
||||
} else if (nbr1 == nbr2) { |
|
||||
result = "Gagné !"; |
|
||||
sous = sous + 3*Number(document.getElementById("searchbar").value); |
|
||||
banque = banque - 3*Number(document.getElementById("searchbar").value); |
|
||||
console.log("Gagné"); |
|
||||
} else if (nbr1 == nbr3) { |
|
||||
result = "Gagné !"; |
|
||||
sous = sous + 3*Number(document.getElementById("searchbar").value); |
|
||||
banque = banque - 3*Number(document.getElementById("searchbar").value); |
|
||||
console.log("Gagné"); |
|
||||
} else if (nbr2 == nbr3) { |
|
||||
result = "Gagné !"; |
|
||||
sous = sous + 3*Number(document.getElementById("searchbar").value); |
|
||||
banque = banque - 3*Number(document.getElementById("searchbar").value); |
|
||||
console.log("Gagné"); |
|
||||
} else { |
|
||||
result = "Perdu !"; |
|
||||
sous = sous - Number(document.getElementById("searchbar").value); |
|
||||
banque = banque + Number(document.getElementById("searchbar").value); |
|
||||
console.log("Perdu"); |
|
||||
} |
|
||||
document.getElementById("Gain").innerHTML = result; |
|
||||
document.getElementById("Banque").innerHTML = banque; |
|
||||
document.getElementById("Sous").innerHTML = sous; |
|
||||
} |
|
||||
|
|
||||
function checkRefresh() { |
|
||||
console.log("ARRET!"); |
|
||||
window.location.reload(); |
|
||||
} |
|
||||
|
|
||||
function regles() { |
|
||||
document.location.href="règle.html"; |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<head> |
<head> |
||||
<title> Unicron03 </title> |
<title> Unicron03 </title> |
||||
<link href="MachineASous.css" rel="stylesheet"> |
<link href="MachineASous.css" rel="stylesheet"> |
||||
<link rel="icon" type="image/x-icon" href="EV.jpg" /> |
<link rel="icon" type="image/x-icon" href="EV.jpg" /> |
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
<h1 class="Menu"> Présentation </h1> |
<div id="haut" class="container"> |
||||
|
<header> |
||||
|
<nav> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<a class="Home" href="#" onclick="window.location.href = 'projet.html';">Project</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="Home" href="#" onclick="window.location.href = 'nouveau 2.html';">Skills</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="Home" href="#">Contact</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
</header> |
||||
|
</div> |
||||
|
|
||||
|
<h1 id="presentation" class="Menu"> <u> Présentation </u> </h1> |
||||
|
|
||||
<table class="presentation"> |
<table class="presentation"> |
||||
<tr> |
<tr> |
||||
<td> <a href="https://www.instagram.com/unicron_e"> <img class="insta" src="logo_instagram.png" title="Logo_Instagram"> </a> </td> |
<td style="border-style:groove"> <a href="https://www.instagram.com/unicron_e"> <img class="reseaux" src="logo_instagram.png" title="Logo_Instagram"> </a> </td> |
||||
<td rowspan="3"> <img class="logo" src="EV.jpg" title="Logo_profil"> </td> |
<td rowspan="3" class="logo"> |
||||
</tr |
<div class="boxesContainer"> |
||||
|
<div class="cardBox"> |
||||
|
<div class="card"> |
||||
|
<div class="back"> |
||||
|
<h3> <u> Date de développement : </u> </h3> |
||||
|
<li> Novembre 2022 - </li> |
||||
|
<li> Janvier 2023 </li> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td rowspan="3"> |
||||
|
<h1 class="textTab" align="left"> |
||||
|
Salut, je suis Enzo. |
||||
|
<br> |
||||
|
Je suis un lycéen qui aime, |
||||
|
<br> |
||||
|
programmer, |
||||
|
<br> |
||||
|
et créer pleins de choses ! |
||||
|
</h1> |
||||
|
</td> |
||||
|
</tr> |
||||
<tr> |
<tr> |
||||
<td> <a href="mailto:enzo.vandepoele2@gmail.com"> <img class="insta" src="logo_mail.png" title="Logo_Mail"> </a> </td> |
<td style="border-style:groove"> <a href="mailto:enzo.vandepoele2@gmail.com"> <img class="reseaux" src="logo_mail.png" title="Logo_Mail"> </a> </td> |
||||
</tr> |
</tr> |
||||
<tr> |
<tr> |
||||
<td> <a href="https://github.com/Unicron03"> <img class="insta" src="logo_github.png" title="Logo_Github"> </a> </td> |
<td style="border-style:groove"> <a href="https://github.com/Unicron03"> <img class="reseaux" src="logo_github.png" title="Logo_Github"> </a> </td> |
||||
</tr> |
</tr> |
||||
</table> |
</table> |
||||
|
<div id="content" class="content"> |
||||
|
<h2>Content</h2> |
||||
|
</div> |
||||
|
|
||||
</body> |
</body> |
||||
</html> |
</html> |
||||
|
|
||||
|
<td style="border-style:groove"> <a class="scroll-link" href="#haut"> <img class="insta" src="logo_instagram.png" title="Logo_Instagram"> </a> </td> |
||||
|
After Width: | Height: | Size: 317 KiB |
|
After Width: | Height: | Size: 61 KiB |
@ -0,0 +1,390 @@ |
|||||
|
body { |
||||
|
margin: 0; |
||||
|
font-size: 1.1em; |
||||
|
background: url(background.jpg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-attachment: fixed; |
||||
|
} |
||||
|
|
||||
|
.Menu |
||||
|
{ |
||||
|
margin-top: 0%; |
||||
|
font-family: 'Lobster Two', cursive; |
||||
|
font-size: 3rem; |
||||
|
text-shadow: 0px 1px 0px rgba(0, 0, 0, 1); |
||||
|
text-align: center; |
||||
|
color: rgb(110, 204, 175); |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
font-family: 'Lobster Two', cursive; |
||||
|
font-size: 1.3rem; |
||||
|
margin-left: 2%; |
||||
|
position: relative; |
||||
|
display: inline-flex; |
||||
|
text-decoration: none; |
||||
|
color: #fff; |
||||
|
background-color: #76abe9; |
||||
|
padding-left: 2rem; |
||||
|
overflow: hidden; |
||||
|
z-index: 1; |
||||
|
align-items: center; |
||||
|
box-shadow: 0px 3px 4px -4px rgba(0, 0, 0, 0.75); |
||||
|
} |
||||
|
.button::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
transform: scaleX(0); |
||||
|
transform-origin: 0 50%; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #4A90E2; |
||||
|
z-index: -1; |
||||
|
transition: transform 750ms; |
||||
|
} |
||||
|
.button span { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-left: 2rem; |
||||
|
padding: 1rem; |
||||
|
overflow: hidden; |
||||
|
background-color: #4A90E2; |
||||
|
} |
||||
|
.button svg { |
||||
|
max-width: 20px; |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
max-height: 18px; |
||||
|
fill: white; |
||||
|
} |
||||
|
.button:hover::before { |
||||
|
transform: scaleX(1); |
||||
|
} |
||||
|
.button:hover svg { |
||||
|
-webkit-animation: moveArrow 750ms; |
||||
|
animation: moveArrow 750ms; |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes moveArrow { |
||||
|
0% { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
49% { |
||||
|
transform: translateX(50px); |
||||
|
} |
||||
|
50% { |
||||
|
transform: translateX(-50px); |
||||
|
} |
||||
|
100% { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes moveArrow { |
||||
|
0% { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
49% { |
||||
|
transform: translateX(50px); |
||||
|
} |
||||
|
50% { |
||||
|
transform: translateX(-50px); |
||||
|
} |
||||
|
100% { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#SkillBox { |
||||
|
font-size: 20px; |
||||
|
font-family: 'Indie Flower', cursive; |
||||
|
width: 95%; |
||||
|
height: auto; |
||||
|
margin: 40px auto; |
||||
|
background-color: #607d8b; |
||||
|
//border: 1px solid #cdcdcd; |
||||
|
padding: 10px; |
||||
|
border-radius:20px; |
||||
|
-o-border-radius:20px; |
||||
|
-webkit-border-radius:20px; |
||||
|
-ms-border-radius:20px; |
||||
|
-moz-border-radius:20px; |
||||
|
} |
||||
|
#SkillBox img { |
||||
|
width: 20%; |
||||
|
height: 10%; |
||||
|
margin: auto 35%; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.SkillBar { |
||||
|
width: 90%; |
||||
|
height: 50px; |
||||
|
position: relative; |
||||
|
background: rgba(17, 17, 17, .3); |
||||
|
margin: 20px auto; |
||||
|
} |
||||
|
#Skill-HTML { |
||||
|
width: 75%; |
||||
|
animation: Animate-HTML 4s; |
||||
|
-webkit-animation: Animate-HTML 4s; |
||||
|
-moz-animation: Animate-HTML 4s; |
||||
|
-o-animation: Animate-HTML 4s; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #ea8564; |
||||
|
} |
||||
|
@keyframes Animate-HTML { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 75%} |
||||
|
}@-webkit-keyframes Animate-HTML { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 75%} |
||||
|
}@-moz-keyframes Animate-HTML { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 75%} |
||||
|
}@-o-keyframes Animate-HTML { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 75%} |
||||
|
}#Skill-CSS { |
||||
|
animation: Animate-CSS 5s; |
||||
|
-webkit-animation: Animate-CSS 5s; |
||||
|
-moz-animation: Animate-CSS 5s; |
||||
|
-o-animation: Animate-CSS 5s; |
||||
|
width: 65%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #55a69f; |
||||
|
} |
||||
|
@keyframes Animate-CSS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 65%} |
||||
|
}@-webkit-keyframes Animate-CSS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 65%} |
||||
|
}@-moz-keyframes Animate-CSS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 65%} |
||||
|
}@-o-keyframes Animate-CSS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 65%} |
||||
|
}#Skill-Python { |
||||
|
animation: Animate-Python 5s; |
||||
|
-webkit-animation: Animate-Python 5s; |
||||
|
-moz-animation: Animate-Python 5s; |
||||
|
-o-animation: Animate-Python 5s; |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #99856d; |
||||
|
} |
||||
|
@keyframes Animate-Python { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 100%} |
||||
|
}@-webkit-keyframes Animate-Python { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 100%} |
||||
|
}@-moz-keyframes Animate-Python { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 100%} |
||||
|
}@-o-keyframes Animate-Phyton { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 100%} |
||||
|
}#Skill-JS { |
||||
|
animation: Animate-JS 4s; |
||||
|
-webkit-animation: Animate-JS 4s; |
||||
|
-moz-animation: Animate-JS 4s; |
||||
|
-o-animation: Animate-JS 4s; |
||||
|
width: 25%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #c44e45; |
||||
|
} |
||||
|
@keyframes Animate-JS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 25%} |
||||
|
}@-webkit-keyframes Animate-JS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 25%} |
||||
|
}@-moz-keyframes Animate-JS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 25%} |
||||
|
}@-o-keyframes Animate-JS { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 25%} |
||||
|
}#Skill-Lua { |
||||
|
animation: Animate-Lua 4s; |
||||
|
-webkit-animation: Animate-Lua 4s; |
||||
|
-moz-animation: Animate-Lua 4s; |
||||
|
-o-animation: Animate-Lua 4s; |
||||
|
width: 90%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #5aa669; |
||||
|
} |
||||
|
@keyframes Animate-Lua { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 90%} |
||||
|
}@-webkit-keyframes Animate-Lua { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 90%} |
||||
|
}@-moz-keyframes Animate-Lua { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 90%} |
||||
|
}@-o-keyframes Animate-Lua { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 90%} |
||||
|
}#Skill-PHP { |
||||
|
animation: Animate-PHP 4s; |
||||
|
-webkit-animation: Animate-PHP 4s; |
||||
|
-moz-animation: Animate-PHP 4s; |
||||
|
-o-animation: Animate-PHP 4s; |
||||
|
width: 50%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #5A69A6; |
||||
|
} |
||||
|
@keyframes Animate-PHP { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 50%} |
||||
|
}@-webkit-keyframes Animate-PHP { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 50%} |
||||
|
}@-moz-keyframes Animate-PHP { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 50%} |
||||
|
}@-o-keyframes Animate-PHP { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 50%} |
||||
|
}#Skill-SQL { |
||||
|
animation: Animate-SQL 4s; |
||||
|
-webkit-animation: Animate-SQL 4s; |
||||
|
-moz-animation: Animate-SQL 4s; |
||||
|
-o-animation: Animate-SQL 4s; |
||||
|
width: 85%; |
||||
|
height: 50px; |
||||
|
position: absolute; |
||||
|
background-color: #23b1db; |
||||
|
} |
||||
|
@keyframes Animate-SQL { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 85%} |
||||
|
}@-webkit-keyframes Animate-SQL { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 85%} |
||||
|
}@-moz-keyframes Animate-SQL { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 85%} |
||||
|
}@-o-keyframes Animate-SQL { |
||||
|
from { |
||||
|
width: 10px; |
||||
|
} |
||||
|
to { |
||||
|
width: 85%} |
||||
|
}.Skill-Area { |
||||
|
z-index: 1; |
||||
|
float: left; |
||||
|
//position: absolute; |
||||
|
margin-top: 15px; |
||||
|
margin-left: 15px; |
||||
|
text-shadow: none; |
||||
|
color: #fff; |
||||
|
//font-family: Lato-Regular, sans-serif; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.PercentText { |
||||
|
z-index: 3; |
||||
|
position: relative; |
||||
|
padding-right: 15px; |
||||
|
margin-top: 15px; |
||||
|
float: right; |
||||
|
text-shadow: none; |
||||
|
color: #fff; |
||||
|
//font-family: Lato-Regular, sans-serif; |
||||
|
font-size: 18px; |
||||
|
} |
||||
@ -0,0 +1,85 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="fr"> |
||||
|
<head> |
||||
|
<title> Unicron03 </title> |
||||
|
<link href="nouveau 2.css" rel="stylesheet"> |
||||
|
<link rel="icon" type="image/x-icon" href="EV.jpg" /> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<a href="#" onclick="window.location.href = 'MachineASous.html';" class="button"> |
||||
|
Back |
||||
|
<span> |
||||
|
<svg> |
||||
|
<use xlink:href="#arrow" href="#arrow"></use> |
||||
|
</svg> |
||||
|
</span> |
||||
|
</a> |
||||
|
|
||||
|
<center> |
||||
|
<div id="SkillBox"> |
||||
|
<center><p class="Menu"><u>My Skills</u></p></center> |
||||
|
|
||||
|
<svg style="display: none;"> |
||||
|
<defs> |
||||
|
<symbol id="arrow" viewBox="0 0 100 100"> |
||||
|
<path d="M12.5 45.83h64.58v8.33H12.5z"/> |
||||
|
<path d="M59.17 77.92l-5.84-5.84L75.43 50l-22.1-22.08 5.84-5.84L87.07 50z"/> |
||||
|
</symbol> |
||||
|
</defs> |
||||
|
</svg> |
||||
|
|
||||
|
<img src="https://2.bp.blogspot.com/--aPlnH6X1YA/UEf7yeJ3gGI/AAAAAAAATgw/TgMK9IVzipk/s1600/Skills%2B-%2BPawan%2BMall.png" alt="Skill" /> |
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-HTML"> |
||||
|
<span class="Skill-Area ">HTML</span> |
||||
|
<span class="PercentText ">75%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-CSS"> |
||||
|
<span class="Skill-Area ">CSS</span> |
||||
|
<span class="PercentText ">65%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-Python"> |
||||
|
<span class="Skill-Area ">Python</span> |
||||
|
<span class="PercentText ">100%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-JS"> |
||||
|
<span class="Skill-Area ">Javascript</span> |
||||
|
<span class="PercentText ">25%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-Lua"> |
||||
|
<span class="Skill-Area ">Lua</span> |
||||
|
<span class="PercentText ">90%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-PHP"> |
||||
|
<span class="Skill-Area ">PHP </span> |
||||
|
<span class="PercentText ">50%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="SkillBar"> |
||||
|
<div id="Skill-SQL"> |
||||
|
<span class="Skill-Area ">SQL </span> |
||||
|
<span class="PercentText ">85%</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</center> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,204 @@ |
|||||
|
@-webkit-keyframes up-in { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
bottom: 0%; |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
bottom: 50%; |
||||
|
} |
||||
|
} |
||||
|
@keyframes up-in { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
bottom: 0%; |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
bottom: 50%; |
||||
|
} |
||||
|
} |
||||
|
.fill { |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center center; |
||||
|
background-size: cover; |
||||
|
background-attachment: fixed; |
||||
|
} |
||||
|
body, |
||||
|
html { |
||||
|
height: 100%; |
||||
|
min-width: 100%; |
||||
|
min-height: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
font-family: 'Lobster Two', cursive; |
||||
|
} |
||||
|
.flex-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.container { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-around; |
||||
|
width: 100%; |
||||
|
min-height: 100%; |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
background-color: white; |
||||
|
position: relative; |
||||
|
} |
||||
|
.container.no-scroll { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.page { |
||||
|
width: 100%; |
||||
|
padding: 10px; |
||||
|
background: url(background.jpg); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-attachment: fixed; |
||||
|
} |
||||
|
@media (max-width: 600px) { |
||||
|
.page { |
||||
|
width: 90%; |
||||
|
} |
||||
|
} |
||||
|
.grid { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.grid .grid-item { |
||||
|
width: 33%; |
||||
|
position: relative; |
||||
|
} |
||||
|
.grid .grid-item:after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
margin-top: 100%; |
||||
|
} |
||||
|
@media (max-width: 600px) { |
||||
|
.grid .grid-item { |
||||
|
width: 50%; |
||||
|
} |
||||
|
} |
||||
|
.box { |
||||
|
position: absolute; |
||||
|
top: 10px; |
||||
|
bottom: 10px; |
||||
|
left: 10px; |
||||
|
right: 10px; |
||||
|
background-color: white; |
||||
|
background-size: cover; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center top; |
||||
|
overflow: hidden; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.box img { |
||||
|
width: 100%; |
||||
|
transition: transform 0.6s ease; |
||||
|
} |
||||
|
.box.selected { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
.box.on-top { |
||||
|
cursor: default; |
||||
|
transition: all 0.4s ease; |
||||
|
box-shadow: 2px 2px 19px -2px rgba(0, 0, 0, 0.44); |
||||
|
} |
||||
|
.box.image-out img { |
||||
|
transform: translateY(-100%); |
||||
|
} |
||||
|
.content { |
||||
|
position: absolute; |
||||
|
padding: 20px 40px; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.5s ease; |
||||
|
} |
||||
|
.show .content { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
@media (max-width: 600px) { |
||||
|
.content { |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
} |
||||
|
.scroller { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.scroller h1 { |
||||
|
color: white; |
||||
|
width: 100%; |
||||
|
margin-bottom: 30px; |
||||
|
position: absolute; |
||||
|
bottom: 50%; |
||||
|
text-align: center; |
||||
|
-webkit-animation: up-in 1s ease; |
||||
|
animation: up-in 1s ease; |
||||
|
} |
||||
|
.top-up.ng-hide-add, |
||||
|
.top-up.ng-hide-remove { |
||||
|
transition: 0s ease top; |
||||
|
} |
||||
|
.top-up.ng-hide-add-active, |
||||
|
.top-up.ng-hide-remove-active { |
||||
|
transition: 0.6s ease top; |
||||
|
} |
||||
|
.top-up.ng-hide-add { |
||||
|
top: 0; |
||||
|
} |
||||
|
.top-up.ng-hide-add.ng-hide-add-active { |
||||
|
top: 100%; |
||||
|
} |
||||
|
.top-up.ng-hide-remove { |
||||
|
top: 100%; |
||||
|
} |
||||
|
.top-up.ng-hide-remove.ng-hide-remove-active { |
||||
|
top: 0; |
||||
|
} |
||||
|
.fullscreen-background { |
||||
|
overflow-y: auto; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
background-color: #333; |
||||
|
transition: top 0.5s ease; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center center; |
||||
|
background-size: cover; |
||||
|
background-attachment: fixed; |
||||
|
} |
||||
|
.fullscreen-background.show { |
||||
|
top: 0; |
||||
|
} |
||||
|
.close-button { |
||||
|
position: fixed; |
||||
|
top: 20px; |
||||
|
right: 20px; |
||||
|
color: white; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.close-button i { |
||||
|
font-size: 35px; |
||||
|
} |
||||
|
.close-button:hover { |
||||
|
color: #ddd; |
||||
|
} |
||||
@ -0,0 +1,151 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="fr" > |
||||
|
|
||||
|
<head> |
||||
|
<title> Unicron03 </title> |
||||
|
<link href="projet.css" rel="stylesheet"> |
||||
|
<link rel="icon" type="image/x-icon" href="EV.jpg" /> |
||||
|
</head> |
||||
|
|
||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script> |
||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js'></script> |
||||
|
<script src='https://codepen.io/ste-vg/pen/zBVaZw.js'></script> |
||||
|
<script id="rendered-js" > |
||||
|
var app = angular.module('app', ['ngAnimate']); |
||||
|
|
||||
|
app.controller('mainCtrl', function ($scope) { |
||||
|
$scope.boxes = [{ |
||||
|
name: 'RushOfLands', |
||||
|
image: 'RushOfLands.jpg' },{ |
||||
|
|
||||
|
name: 'Volta', |
||||
|
image: 'voiture.png' },{ |
||||
|
|
||||
|
name: 'MachineASous', |
||||
|
image: 'MachineASous.jpg' }]; |
||||
|
|
||||
|
|
||||
|
$scope.selected = []; |
||||
|
$scope.selectBox = function (item, position) { |
||||
|
$scope.selected = [{ |
||||
|
item: item, |
||||
|
position: position }]; |
||||
|
|
||||
|
$scope.$apply(); |
||||
|
}; |
||||
|
$scope.clearSelection = function () { |
||||
|
$scope.selected = []; |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
app.directive('box', function () { |
||||
|
return { |
||||
|
restrict: 'E', |
||||
|
scope: {}, |
||||
|
bindToController: { |
||||
|
onSelect: "=", |
||||
|
item: "=" }, |
||||
|
|
||||
|
controllerAs: 'box', |
||||
|
controller: function () { |
||||
|
var box = this; |
||||
|
|
||||
|
box.goFullscreen = function (e) { |
||||
|
box.onSelect(box.item, e.target.getBoundingClientRect()); |
||||
|
}; |
||||
|
}, |
||||
|
link: function (scope, element) { |
||||
|
element.bind('click', scope.box.goFullscreen); |
||||
|
element.css({ |
||||
|
'background-image': 'url(' + scope.box.item.image + ')' }); |
||||
|
|
||||
|
} }; |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
app.directive('bigBox', function ($timeout) { |
||||
|
return { |
||||
|
restrict: 'AE', |
||||
|
scope: {}, |
||||
|
bindToController: { |
||||
|
position: "=", |
||||
|
selected: "=", |
||||
|
onSelect: "=" }, |
||||
|
|
||||
|
controllerAs: 'box', |
||||
|
controller: function () { |
||||
|
var box = this; |
||||
|
}, |
||||
|
link: function (scope, element) { |
||||
|
var css = {}; |
||||
|
for (var key in scope.box.position) { |
||||
|
css[key] = scope.box.position[key] + 'px'; |
||||
|
} |
||||
|
|
||||
|
element.css(css); |
||||
|
|
||||
|
$timeout(function () { |
||||
|
element.css({ |
||||
|
top: '50%', |
||||
|
left: '10%' }); |
||||
|
|
||||
|
element.addClass('image-out'); |
||||
|
}, 200); |
||||
|
|
||||
|
$timeout(function () { |
||||
|
element.css({ |
||||
|
width: '80%', |
||||
|
height: '100%' }); |
||||
|
|
||||
|
}, 500); |
||||
|
|
||||
|
$timeout(function () { |
||||
|
element.addClass('show'); |
||||
|
}, 800); |
||||
|
} }; |
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<body> |
||||
|
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl"> |
||||
|
<div class="page"> |
||||
|
<div class="grid"> |
||||
|
<div class="grid-item" ng-repeat="item in boxes"> |
||||
|
<box class="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}"></box> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div> |
||||
|
<div class="scroller" ng-show="selected.length"> |
||||
|
<a class="close-button" ng-click="clearSelection()"> |
||||
|
<i class="material-icons" style="font-family: 'Lobster Two', cursive; padding-right: 20px">Back</i> |
||||
|
</a> |
||||
|
<h1>{{selected[0].item.name}}</h1> |
||||
|
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item"> |
||||
|
<img ng-src="{{item.item.image}}" alt="" /> |
||||
|
<div class="content"> |
||||
|
<h2>Voiture autonome</h2> |
||||
|
<p>La voiture est composé d'une pyboard, de divers capteurs, de leds, d'un servo pour la direction et deux moteurs avec réducteur.</p> |
||||
|
<p>Elle se déplace de façon autonome en évitant les obstacles et en s'adaptant au milieu dans lequel elle évolue.</p> |
||||
|
<p> |
||||
|
Elle intégère aussi plusieurs contraintes : |
||||
|
<br> |
||||
|
• Si un obstacle est détecté la voiture ralenti de plus en plus jusqu’à l’arrêt complet; |
||||
|
<br> |
||||
|
• Si la voiture détecte une montée, elle accélére, si elle détecte une descente elle ralenti (avec allumage de deux leds différentes sur la carte pyboard); |
||||
|
<br> |
||||
|
• Si la voiture est dans le noir, une led s'allume; |
||||
|
<br> |
||||
|
• Si on appuie sur le bouton USR de la carte, le programme se mets en pause jusqu’à que le bouton soit rappuyer; |
||||
|
<br> |
||||
|
• Si la voiture est bloqué par un certain obstacle qu'elle ne détecte pas, elle repart automatiquement. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
|
|
||||
|
After Width: | Height: | Size: 2.6 MiB |
Loading…
Reference in new issue