Skip to content

P
Projet ISIS
Commit e1c5b18a authored by Okthane's avatar Okthane
Browse files
Options

Merge branch 'master' of http://gvipers.imt-nord-europe.fr/pierre.marque/projet-isis into master

parents f0ca6cd6 d52392c5
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 62 deletions
index.php
View file @ e1c5b18a
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
...@@ -20,15 +20,33 @@ ...@@ -20,15 +20,33 @@
<!-- API TenserFlow --> <!-- API TenserFlow -->
</head> </head>
<body> <body>
<div class="site-header-main">
<div id="logo-header"></div>
<div class="site-branding">Titre de la page</div> <div class="mb-5">
<div id="couleurs-droite"></div> <div class="container">
<div class="d-none d-sm-none d-md-none d-lg-block">
<div id="header-large"class="row d-flex justify-content-between">
<!-- Bandeau -->
<div id="logo-header" class="logo-l col-md-1"></div>
<div class="site-branding col-md-4 align-self-center">Compléments Inscription</div>
<div id="couleurs-droite" class=" col-md-1"></div>
</div>
</div>
<div class="row d-flex justify-content-between d-lg-none d-xl-none d-xxl-none text-center">
<div class="col-md-12 header-small">Compléments Inscription<br>IMT Nord Europe</div>
</div>
</div>
</div> </div>
<div class="container">
<div class ="div-ID div-photo" >
<img name ="im-ID" id="img-ID" src="" height="150em"/> <div class="container grayarea">
<div id=conditions> <div class ="row d-flex justify-content-center div-ID div-photo" >
<div class="col-md-3 my-auto d-flex justify-content-center" >
<img name ="im-ID" id="img-ID" src="" height="150em"/>
</div>
<div id=conditions class="col-md-3 my-5 d-flex justify-content-center">
<ul> <ul>
<li id="li-oneface">Un seul visage<span></span></li> <li id="li-oneface">Un seul visage<span></span></li>
<li id="li-format">Format correct<span></span></li> <li id="li-format">Format correct<span></span></li>
...@@ -36,38 +54,28 @@ ...@@ -36,38 +54,28 @@
<li id="li-poids">Poids<span></span></li> <li id="li-poids">Poids<span></span></li>
</ul> </ul>
</div> </div>
<img name ="im_ID2" id="img-ID2" src="" height="150em"/> <div class="col-md-3 my-auto d-flex justify-content-center">
<div id="div-filename"></div> <img name ="im_ID2" id="img-ID2" src="" height="150em"/>
</div>
<div id="div-filename"></div>
</div> </div>
</div>
<div class ="row d-flex justify-content-center" >
<div class="div-form">
<form id ="form" action="" method="" enctype="multipart/form-data">
<!-- <label for="fileUpload">Fichier:</label> -->
<div class="div-btn-form">
<input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" >
<!-- <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button> -->
</div>
<div class="div-btn-form">
<input id="btnSubmit" type="submit" name="submit" value="Vérifier" class="btn-form">
</div>
</form>
<script>
<div class="div-form"> const inpFile = document.getElementById("fileUpload");
<form id ="form" action="" method="" enctype="multipart/form-data"> const previewImage = document.getElementById("img-ID");
<!-- <label for="fileUpload">Fichier:</label> -->
<div class="div-btn-form">
<input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" >
<!-- <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button> -->
</div>
<div class="div-btn-form">
<input id="btnSubmit" type="submit" name="submit" value="Vérifier" class="btn-form">
</div>
</form>
<script>
const inpFile = document.getElementById("fileUpload");
const previewImage = document.getElementById("img-ID");
const file = inpFile.files[0];
console.log("ok");
if (file){
const reader = new FileReader();
console.log("ok");
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
reader.readAsDataURL(file);
// findFaces("img-ID");
}
inpFile.addEventListener("change", function (){
const file = inpFile.files[0]; const file = inpFile.files[0];
console.log("ok"); console.log("ok");
if (file){ if (file){
...@@ -79,18 +87,30 @@ ...@@ -79,18 +87,30 @@
reader.readAsDataURL(file); reader.readAsDataURL(file);
// findFaces("img-ID"); // findFaces("img-ID");
} }
inpFile.addEventListener("change", function (){
const file = inpFile.files[0];
console.log("ok");
if (file){
const reader = new FileReader();
console.log("ok");
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
reader.readAsDataURL(file);
// findFaces("img-ID");
}
}); });
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script>
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script>
</div>
</div>
</div> </div>
<div id="div"> <div id="div">
<p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> <p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
<p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p> <p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p>
......
style.css
View file @ e1c5b18a
...@@ -12,26 +12,16 @@ html,body{ ...@@ -12,26 +12,16 @@ html,body{
} }
.container{
margin-bottom: 20px;
display: flex;
justify-content: center;
border-radius: 13px;
}
.div-btn-form{ .div-btn-form{
align-self: auto; align-self: auto;
text-align: center; text-align: center;
margin: 5px; margin: 5px;
} }
.grayarea {
max-width: 700px !important;/*Set your own width %; */
}
.div-photo { .div-photo {
height: 200px;
width: 700px;
margin-top: 35px;
padding-top: 50px;
display: flex;
justify-content: space-evenly;
background-color: whitesmoke; background-color: whitesmoke;
border: solid ; border: solid ;
border-color: #00b8de; border-color: #00b8de;
...@@ -53,6 +43,19 @@ html,body{ ...@@ -53,6 +43,19 @@ html,body{
line-height: 1.25; line-height: 1.25;
font-weight: 700; font-weight: 700;
color: white; color: white;
text-align: center;
}
#header-large{
background-color: #00b8de !important;
border: white;
}
.header-small{
color: #00B8DE;
font-weight: bold;
font-size: 200%;
} }
#logo-header{ #logo-header{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment