Browse Source

Dépot : Modif1

master
VANDEPOELE Enzo 2 years ago
parent
commit
7ece4b51b7
  1. 219
      MachineASous.css
  2. 141
      MachineASous.html
  3. BIN
      MachineASous.jpg
  4. BIN
      RushOfLands.jpg
  5. 390
      nouveau 2.css
  6. 85
      nouveau 2.html
  7. 204
      projet.css
  8. 151
      projet.html
  9. BIN
      voiture.png

219
MachineASous.css

@ -8,20 +8,74 @@ body
background-attachment: fixed;
}
header {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.75) -10%,rgba(0,0,0,0) 100%);
text-align: center;
padding: 0.5rem 0 5rem;
font-size: 1.25rem;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-flex;
}
.textTab {
font-family: 'firamonobold', cursive;
position: relative;
color: #fff;
font-size: 2rem;
padding-left: 150px;
}
.Home {
position: relative;
padding: 1rem 0 0.5rem;
margin: 0 1.5rem;
color: white;
text-decoration: none;
text-transform: uppercase;
}
.Home::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%) scaleX(0);
transform-origin: 50% 50%;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
transition: transform 250ms;
}
.Home:hover::after {
transform: translateX(-50%) scaleX(1);
}
th, td {
border-radius: 20px;
border-color: rgb(65, 63, 66);
}
.Menu
{
margin-top: -2%;
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);
}
.presentation
{
left: 500%;
border: 1px solid black;
}
th, td {
border: 1px solid black;
margin-top: 4%;
margin-left: 5%;
}
.text
@ -32,8 +86,9 @@ th, td {
font-size: 1.2em;
}
.insta
.reseaux
{
margin: 0 1.5rem;
width: 50px;
height: auto;
}
@ -44,30 +99,138 @@ th, td {
height: auto;
}
.rouleau1
{
width: 500px;
height: auto;
font-size: 2em;
margin-left: 41%;
margin-top: 2%;
color: gold;
.content {
min-height: 100vh;
max-width: 28rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.Nbr
{
text-align: center;
padding-bottom: 5%;
.cardBox {
float: left;
font-size: 1.2em;
margin: 0 0 0 0.5%;
perspective: 800px;
transition: all 0.4s ease 0s;
width: 100%;
}
.banque
{
text-align: center;
padding-bottom: 5%;
.cardBox:hover .card {
transform: rotateY(180deg);
}
.sous
{
.card {
background: url(EV.jpg);
background-size: 100% 100%;
cursor: pointer;
height: 300px;
transform-style: preserve-3d;
transition: transform 0.5s ease 0s;
width: 100%;
border-radius: 10%;
}
.card p {
margin-bottom: 1.8em;
}
.card .front,
.card .back {
backface-visibility: hidden;
box-sizing: border-box;
color: white;
display: block;
font-size: 1.2em;
height: 100%;
padding: 0.8em 0.7em;
position: absolute;
text-align: center;
padding-bottom: 5%;
width: 100%;
border-radius: 10%;
}
.card .front strong {
background: #fff;
border-radius: 100%;
color: #222;
font-size: 1.5em;
line-height: 30px;
padding: 0 7px 4px 6px;
}
.card .back {
transform: rotateY( 180deg);
}
.card .back a {
padding: 0.3em 0.5em;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 1px;
font-size: 0.9em;
transition: all 0.2s ease 0s;
}
.card .back a:hover {
background: #fff;
color: #333;
text-shadow: 0 0 1px #333;
}
.cardBox:nth-child(1) .card .back {
background: #607d8b;
}
.cardBox:nth-child(2) .card .back {
background: #1c87c9;
}
.cardBox:nth-child(3) .card .back {
background: #ff6347;
}
.cardBox:nth-child(4) .card .back {
background: #8ebf42;
}
.cardBox:nth-child(2) .card {
-webkit-animation: giro 1.5s 1;
animation: giro 1.5s 1;
}
.cardBox:nth-child(3) .card {
-webkit-animation: giro 2s 1;
animation: giro 2s 1;
}
.cardBox:nth-child(4) .card {
-webkit-animation: giro 2.5s 1;
animation: giro 2.5s 1;
}
@-webkit-keyframes giro {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
@keyframes giro {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
@media screen and (max-width: 767px) {
.cardBox {
margin-left: 2.8%;
margin-top: 3%;
width: 46%;
}
.card {
height: 285px;
}
.cardBox:last-child {
margin-bottom: 3%;
}
}
@media screen and (max-width: 480px) {
.cardBox {
width: 94.5%;
}
.card {
height: 260px;
}
}

141
MachineASous.html

@ -1,84 +1,89 @@
<!DOCTYPE html>
<html lang="fr">
<script>
banque = 1000;
sous = 100;
function nbAlea() {
nbr1 = Math.floor(Math.random() * 10);
nbr2 = Math.floor(Math.random() * 10);
nbr3 = Math.floor(Math.random() * 10);
document.getElementById("PlaceNbr1").innerHTML = nbr1;
document.getElementById("PlaceNbr2").innerHTML = nbr2;
document.getElementById("PlaceNbr3").innerHTML = nbr3;
gain()
}
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 src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script id="rendered-js" >
jQuery(document).ready(function ($) {
$('a.scroll-link').click(function (e) {
e.preventDefault();
$id = $(this).attr('href');
$('body,html').animate({
scrollTop: $($id).offset().top - 20 },
750);
});
});
</script>
<head>
<title> Unicron03 </title>
<link href="MachineASous.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="EV.jpg" />
</head>
<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">
<tr>
<td> <a href="https://www.instagram.com/unicron_e"> <img class="insta" src="logo_instagram.png" title="Logo_Instagram"> </a> </td>
<td rowspan="3"> <img class="logo" src="EV.jpg" title="Logo_profil"> </td>
</tr
<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" class="logo">
<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>
<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>
<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>
</table>
</table>
<div id="content" class="content">
<h2>Content</h2>
</div>
</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>

BIN
MachineASous.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

BIN
RushOfLands.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

390
nouveau 2.css

@ -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;
}

85
nouveau 2.html

@ -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>

204
projet.css

@ -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;
}

151
projet.html

@ -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>

BIN
voiture.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Loading…
Cancel
Save