Editeur 546 / Recherche document sur serveur police
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Site web</title>
<script src="data.js"></script>
<script src="public/js/vue.min.js"></script>
<script src="public/js/fullscreen.js"></script>
<link href="public/css/animate.css" rel="stylesheet"/>
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/font-awesome.min.css">
<link href="libs/seq.css" rel="stylesheet"/>
<style>
.screen {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.inline-24 {
display: inline-block;
width: 21.5%;
vertical-align: top;
}
.inline-30 {
display: inline-block;
width: 30%;
vertical-align: top;
}
.inline-70 {
display: inline-block;
width: 70%;
vertical-align: top;
}
.inline-76 {
display: inline-block;
width: 78.5%;
vertical-align: top;
}
.textinput1 {
border-radius: 3vw;
border: none;
outline: none;
color: black;
font-size: 1.2em;
padding: 5px;
padding-left: 10px;
}
.textinput2 {
border: none;
/* outline: none;*/
color: black;
font-size: 1.2em;
padding: 5px;
padding-left: 10px;
width: 80%;
}
.flabel {
font-size: 1.1em;
}
.formcontrol2 {
text-align: left;
color:white;
padding-left: 32%;
padding-right: 32%;
padding-top: 1vw;
font-size: 1.4em;
}
table.table {
font-size: 1.7em;
width: 96%; !important
margin-left: 2%;
margin-right: 2%;
}
tr th {
background: #0e559a;
padding-top: 20px;
padding-bottom: 20px;
color: white;
font-weight: bold;
}
td.dark { background: #EAEAEA; }
table input[type="checkbox"] {
}
</style>
</head>
<body>
<div id="app">
<div class="abstop fullw" style="background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(51,51,51,1) 42%, rgba(102,102,102,1) 100%); z-index: 10000; padding-top: 5px; padding-bottom: 5px;padding-right: 5px; text-align:right" @click.stop="screen = 'login1'; init()">
<i class="fa fa-circle" style="color: white"></i> <i class="fa fa-circle" style="color: grey"></i>
</div>
<transition>
<div v-if="screen == 'login1'" key="login1" class="screen" style="background: url('files/login1bg.png'); background-size: cover; background-position: center center;">
<div style="background: #174a91; position: absolute; top: 45%; left:35%; width: 30%; height: 30%;">
<img src="files/login1title.png" style="margin-left: 3%; margin-right: 3%; margin-top: 20px; width: 94%; border-bottom: 1px solid white">
<div style="color:white; padding-left: 15%; padding-right: 15%; padding-top: 8%" class="fullw">
<div class="inline-30 flabel">Utilisateur :</div><div class="inline-70"><input ref="login1" autocomplete="off" type="text" class="textinput1 fullw" autofocus v-model="formlogin" @keydown.stop="writefield($event, 'login')"
@keydown.enter.stop="$refs['password1'].focus()"></div>
</div>
<div style="color:white; padding-left: 15%; padding-right: 15%; padding-top: 3%" class="fullw">
<div class="inline-30 flabel">Mot de passe :</div><div class="inline-70"><input ref="password1" autocomplete="off" type="password" v-model="formpassword" @keydown.stop="writefield($event, 'password')"
@keydown.enter.stop="toscreen('search')" class="textinput1 fullw"></div>
</div>
<div v-if="!connecting" class="text-center">
<br>
<img src="files/loginbut.png" style="width: 20%;" @click.stop="toscreen('search')">
</div>
<div v-else>
<br>
<h4 style="color: white" class="text-center"><i class="fa fa-lg fa-spin fa-circle-o-notch fa-fw"></i> Connexion au serveur en cours...</h4>
</div>
</div>
</div>
<div v-else-if="screen == 'search'" key="search" class="screen">
<img src="files/searchtop.png" class="fullw" style="margin-top: 30px">
<div style="margin-left: 2%; margin-right: 2%; width: 96%; margin-top: 1vw; background: #3f3c3d; color: white; height: calc(100vh - 22.5vw); text-align: center">
<h3 class="text-left" style="padding: 1.3vw; padding-bottom: 0"><b>RECHERCHE</b></h3>
<div class="fullw formcontrol2"> <div class="inline-30 flabel">Archive :</div><div class="inline-70"><input type="text" style="width: 10%"></div> </div>
<div class="fullw formcontrol2">
<div class="inline-30 flabel">Nom :</div><div class="inline-70"><input type="text" autofocus v-model="formsearchname" @keydown.stop="writefield($event, 'searchname')"
@keydown.enter.stop="$refs['searchdate'].focus()" class="textinput2"></div>
</div>
<div class="fullw formcontrol2">
<div class="inline-30 flabel">Date :</div><div class="inline-70"><input type="text" ref="searchdate" v-model="formsearchdate" @keydown.stop="writefield($event, 'searchdate')"
@keydown.enter.stop="toscreen('login2', 1200, true)" class="textinput2"></div>
</div>
<div class="fullw formcontrol2"> <div class="inline-30 flabel">Affaire N° :</div><div class="inline-70"><input type="text" class="textinput2"></div> </div>
<div class="fullw formcontrol2"> <div class="inline-30 flabel">Pièce N° :</div><div class="inline-70"><input type="text" class="textinput2"></div> </div>
<div class="fullw formcontrol2"> <div class="inline-30 flabel">Emplacement :</div><div class="inline-70"><input type="text" class="textinput2"></div> </div>
<div class="fullw formcontrol2"> <div class="inline-30 flabel">Dossier :</div><div class="inline-70"><input type="text" class="textinput2"></div> </div>
<div class="fullw formcontrol2">
<div class="inline-30 flabel"></div><div class="inline-70" style="text-align: left; padding-left: 5%">
<img v-if="!connecting" src="files/searchbut.png" style="width: 75%; cursor: pointer" @click.stop="toscreen('login2', 1200, true)">
<h3 v-else-if="!warningtxt" style="color: white"><i class="fa fa-lg fa-spin fa-circle-o-notch fa-fw"></i> Recherche en cours....</h3>
<h3 v-else-if="warningtxt" class="text-danger"> <b>Authentification nécéssaire</b></h3>
</div>
</div>
</div>
</div>
<div v-else-if="screen == 'login2'" key="login2" class="screen" style="background: url('files/login2bg.png'); background-size: cover; background-position: center center;">
<div style=" position: absolute; bottom: 9%; left:35%; width: 30%; height: 30%;">
<div style="color:white; padding-left: 15%; padding-right: 15%; padding-top: 8%" class="fullw">
<div class="inline-30 flabel">Utilisateur :</div><div class="inline-70"><input ref="login1" type="text" class="textinput1 fullw" autofocus v-model="formlogin" @keydown.stop="writefield($event, 'login')"
@keydown.enter.stop="$refs['password1'].focus()"></div>
</div>
<div style="color:white; padding-left: 15%; padding-right: 15%; padding-top: 3%" class="fullw">
<div class="inline-30 flabel">Mot de passe :</div><div class="inline-70"><input ref="password1" type="password" v-model="formpassword" @keydown.stop="writefield($event, 'password')"
@keydown.enter.stop="toscreen('result')" class="textinput1 fullw"></div>
</div>
<br>
<div v-if="!connecting" class="text-center">
<br>
<img src="files/loginbut.png" style="width: 20%;" @click.stop="toscreen('result')">
</div>
<div v-else>
<br>
<h4 style="color: white" class="text-center"><i class="fa fa-lg fa-spin fa-circle-o-notch fa-fw"></i> Authentification en cours...</h4>
</div>
</div>
</div>
<div v-else-if="screen == 'result'" key="result" class="screen" style="background: #edeff1">
<br>
<img src="files/page4top.png" class="fullw">
<div style="background: white; border-radius: 1vw; margin-left: 2%; margin-right: 2%; width: 96%; padding: 1vw;">
<img src="files/page4top2.png" class="fullw">
<div class="inline-24">
<img src="files/page4left.png" class="fullw">
</div><div class="inline-76" >
<img src="files/page4right.png" class="fullw">
<div style="height: 45vh; overflow: auto;">
<table class="table table-hover table-striped table-bordered">
<tr><th><input type="checkbox"></th><th>Nom</th><th>Type</th><th>Enregistré par</th><th>Crée</th><th>Modif</th><th>Taille</th><th>Index</th></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo scène de crime 1</a></td><td>image</td><td>Neuville P.</td><td>08/10/95</td><td>08/10/95</td><td>4467 Ko</td><td>MJ356</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo scène de crime 2</a></td><td>image</td><td>Neuville P.</td><td>08/10/95</td><td>08/10/95</td><td>3241 Ko</td><td>MJ357</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo victime 1</a></td><td> image</td><td>Neuville P. </td><td>08/10/95</td><td> 08/10/95</td><td> 2261 Ko</td><td> MJ358</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo victime 2</a></td><td> image</td><td>Neuville P. </td><td>08/10/95</td><td> 08/10/95</td><td> 394 Ko</td><td> MJ359</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo victime 2bis </a></td><td>image</td><td> Neuville P.</td><td> 08/10/95</td><td> 08/10/95</td><td> 374 Ko</td><td> MJ360</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo blessures tête </a></td><td>image</td><td> Neuville P.</td><td> 08/10/95</td><td> 08/10/95</td><td> 374 Ko</td><td> MJ361</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo blessures abdomen </a></td><td>image</td><td> Neuville P.</td><td> 08/10/95</td><td> 08/10/95</td><td> 371 Ko</td><td> MJ362</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Photo blessures cou </a></td><td>image</td><td> Neuville P.</td><td> 08/10/95</td><td> 08/10/95</td><td> 373 Ko</td><td> MJ363</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Analyse ADN </a></td><td>doc</td><td> Neuville P.</td><td> 09/10/95</td><td> 09/10/95</td><td> 369 Ko</td><td> MJ364</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Compte rendu d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 09/10/95</td><td> 09/10/95</td><td> 394 Ko</td><td> MJ365</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Rapport d’autopsie </a></td><td>doc</td><td> Neuville P.</td><td> 09/10/95</td><td> 09/10/95</td><td> 212 Ko</td><td> MJ366</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Relevé d’empreinte </a></td><td>doc</td><td> Neuville P.</td><td> 09/10/95</td><td> 09/10/95</td><td> 1064 Ko</td><td> MJ367</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 1 : rapport d’intervention </a></td><td>doc</td><td> Neuville P.</td><td> 09/10/95</td><td> 09/10/95</td><td> 878 Ko</td><td> MJ368</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 1Bis </a></td><td>doc</td><td> Neuville P.</td><td> 10/10/95</td><td> 10/10/95</td><td> 4156 Ko</td><td> MJ369</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procés verbal 2 : rapport d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 15/10/95</td><td> 15/10/95</td><td> 4467 Ko</td><td> MJ370</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 3 : rapport d’autopsie </a></td><td>doc</td><td> Neuville P.</td><td> 15/10/95</td><td> 15/10/95</td><td> 1553 Ko</td><td> MJ371</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 4 : audition de Francis Jouve </a></td><td>doc</td><td> Neuville P.</td><td> 20/10/95</td><td> 20/10/95</td><td> 2512 Ko</td><td> MJ372</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 5 : audition de Mireille Jouve </a></td><td>doc</td><td> Neuville P.</td><td> 20/10/95</td><td> 20/10/95</td><td> 1096 Ko</td><td> MJ373</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Mandat d’arrêt Rémi Perec </a></td><td>doc</td><td> Neuville P.</td><td> 10/11/95</td><td> 10/11/95</td><td> 4980 Ko</td><td> MJ374</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 6 : déposition P </a></td><td>doc</td><td> Neuville P.</td><td> 10/11/95</td><td> 10/11/95</td><td> 1544 Ko</td><td> MJ375</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 7 : déposition </a></td><td>doc</td><td> Neuville P.</td><td> 05/12/95</td><td> 05/12/95</td><td> 830 Ko</td><td> MJ376</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 8 : audition Eric B. </a></td><td>doc</td><td> Neuville P.</td><td> 05/12/95</td><td> 05/12/95</td><td> 374 Ko</td><td> MJ377</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 9 : audition de Rémi Perec </a></td><td>doc</td><td> Neuville P.</td><td> 10/11/95</td><td> 10/11/95</td><td> 200 Ko</td><td> MJ378</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 10 : compte rendu d’audition </a></td><td>doc</td><td> Neuville P.</td><td> 10/01/96</td><td> 10/01/96</td><td> 166 Ko</td><td> MJ379</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 11 : rapport d’intervention </a></td><td>doc</td><td> Neuville P.</td><td> 10/01/96</td><td> 10/01/96</td><td> 376 Ko</td><td> MJ380</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 12 : audition Ines B. </a></td><td>doc</td><td> Neuville P.</td><td> 13/01/96</td><td> 13/01/96</td><td> 409 Ko</td><td> MJ381</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 13 : rapport d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 13/01/96</td><td> 13/01/96</td><td> 404 Ko</td><td> MJ382</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Proçès verbal 14 : audition Georges B. </a></td><td>doc</td><td> Neuville P.</td><td> 22/01/96</td><td> 22/01/96</td><td> 641 Ko</td><td> MJ383</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 15 : rapport d’intervention </a></td><td>doc</td><td> Neuville P.</td><td> 22/01/96</td><td> 22/01/96</td><td> 1224 Ko</td><td> MJ384</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Analyse d’empreinte </a></td><td>doc</td><td> Neuville P.</td><td> 06/03/96</td><td> 06/03/96</td><td> 4467 Ko</td><td> MJ385</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Compte rendu d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 06/03/96</td><td> 06/03/96</td><td> 314 Ko</td><td> MJ386</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 16 : déposition </a></td><td>doc</td><td> Neuville P.</td><td> 16/04/96</td><td> 16/04/96</td><td> 2261 Ko</td><td> MJ387</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 17 : audition de Mireille Jouve </a></td><td>doc</td><td> Neuville P.</td><td> 16/04/96</td><td> 16/04/96</td><td> 394 Ko</td><td> MJ388</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 18 : rapport d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 26/05/96</td><td> 26/05/96</td><td> 374 Ko</td><td> MJ389</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Analyse ADN </a></td><td>doc</td><td> Neuville P.</td><td> 26/05/96</td><td> 26/05/96</td><td> 374 Ko</td><td> MJ390</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Compte rendu d’enquête </a></td><td>doc</td><td> Neuville P.</td><td> 02/06/96</td><td> 02/06/96</td><td> 371 Ko</td><td> MJ391</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Rapport d’autopsie </a></td><td>doc</td><td> Neuville P.</td><td> 02/06/96</td><td> 02/06/96</td><td> 373 Ko</td><td> MJ392</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Relevé d’empreinte </a></td><td>doc</td><td> Neuville P.</td><td> 02/06/96</td><td> 02/06/96</td><td> 369 Ko</td><td> MJ393</td></tr>
<tr><td><input type="checkbox"></td><td class="dark"><a href="#">Procès verbal 19 : rapport d’intervention </a></td><td>doc</td><td> Neuville P.</td><td> 12/07/96</td><td> 12/07/96</td><td> 394 Ko</td><td> MJ394</td></tr>
</table>
<img style="display: none" src="files/page4righttab.png" class="fullw">
</div>
</div>
</div>
</div>
<transition>
</div>
</body>
<script type="text/javascript" src="files/seq.js"></script>
</html>
Aperçu
Glisser - Déposer les fichiers
{
"type": "object",
"title": "web site",
"properties": {
"mobile": { "title": "Pour Mobile", "type": "boolean", "format":"checkbox"},
"fade": { "title": "Fade", "type": "boolean", "format":"checkbox", "default": true},
"tabs": { "type": "array",
"title": "onglets",
"format": "table",
"items": {
"type": "string",
"title": "titre"
}
},
"title": { "title" : "Titre", "type": "string"},
"url": { "title" : "Url", "type": "string"},
"topimg": {"title": "Image du haut fixe", "type": "string", "enum": ["#files"],
"links": [
{
"href": "#ROOT/files/{{self}}",
"mediaType": "image/png"
}]
},
"imgs": { "type": "array",
"title": "imgs",
"format": "table",
"items": {
"type": "string",
"title": "img",
"enum": ["#files"],
"links": [
{
"href": "#ROOT/files/{{self}}",
"mediaType": "image/png"
}]
}
},
"urls": { "type": "array",
"title": "urls",
"format": "table",
"items": {
"type": "string",
"title": "url"
}
}
}
}
var cc_data = cc_data || {};
new Vue({
el: '#app',
data: {
screen: 'login1',
formlogin: "",
formsearchname: "",
formsearchdate: "",
formpassword: "",
login_str: "clement_neuville",
password_str: "fsqdofjqsmklf",
searchname_str: "Manon Jouve",
searchdate_str: "08/10/1995",
connecting: false,
warningtxt: false
},
created: function () {
},
methods: {
init: function () {
this.formlogin = '';
this.formsearchname = '';
this.formsearchdate = '';
this.formpassword = "";
},
writefield: function(e, key) {
e.preventDefault();
e.stopPropagation();
var that = this;
var i = this['form'+key].length;
console.log(i, this[key + '_str'][i]);
if (this[key + '_str'][i]) {
this['form'+key] += this[key + '_str'][i];
}
},
toscreen: function (name, time, warning) {
this.connecting = true;
var that = this;
setTimeout(function () {
that.connecting = false;
if (!warning) {
that.screen = name;
that.init();
that.warningtxt = false;
} else {
that.warningtxt = true;
that.toscreen(name, time);
}
}, time || 1200);
},
stopPropagation: function (e) {
e.stopPropagation();
}
}
})