Skip to content
Snippets Groups Projects
Commit 02c6f25f authored by Millicent Billette's avatar Millicent Billette
Browse files

amélioration de l'ergonomie des popup

parent 4c84e503
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
package-lock.json 0 → 100644
+ 76
− 0
View file @ 02c6f25f
{
"name": "gsper",
"version": "2.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/runtime": {
"version": "7.0.0-beta.46",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.46.tgz",
"integrity": "sha512-/3a3USMKk54BEHhDgY8rtxtaQOs4bp4aQwo6SDtdwmrXmgSgEusWuXNX5oIs/nwzmTD9o8wz2EyAjA+uHDMmJA==",
"requires": {
"core-js": "^2.5.3",
"regenerator-runtime": "^0.11.1"
}
},
"@noderize/runtime": {
"version": "0.3.16",
"resolved": "https://registry.npmjs.org/@noderize/runtime/-/runtime-0.3.16.tgz",
"integrity": "sha512-FMDN50uhufZQCVD1cp0vqwnZ2pHvoZDX9SRvvfdcZ4Zbnj+m5b6O515Z5ZwHW5Ubr+juPE8tT/RBNIvr2IriKw==",
"requires": {
"@babel/runtime": "^7.0.0-beta.40"
}
},
"@types/estree": {
"version": "0.0.38",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.38.tgz",
"integrity": "sha512-F/v7t1LwS4vnXuPooJQGBRKRGIoxWUTmA4VHfqjOccFsNDThD5bfUNpITive6s352O7o384wcpEaDV8rHCehDA==",
"dev": true
},
"@types/node": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.0.6.tgz",
"integrity": "sha512-2whhQUfDHRBiZ3L54Ulyl1X+fZWbWabxPYRDAsibgOAtE6adwusD15Xv0Bw/D7cPah35Z/wKTdW3iAKsevw1uw==",
"dev": true
},
"core-js": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.6.tgz",
"integrity": "sha512-lQUVfQi0aLix2xpyjrrJEvfuYCqPc/HwmTKsC/VNf8q0zsjX7SQZtp4+oRONN5Tsur9GDETPjj+Ub2iDiGZfSQ=="
},
"jasmine-core": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.1.0.tgz",
"integrity": "sha1-pHheE11d9lAk38kiSVPfWFvSdmw=",
"dev": true
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
},
"rollup": {
"version": "0.58.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-0.58.2.tgz",
"integrity": "sha512-RZVvCWm9BHOYloaE6LLiE/ibpjv1CmI8F8k0B0Cp+q1eezo3cswszJH1DN0djgzSlo0hjuuCmyeI+1XOYLl4wg==",
"dev": true,
"requires": {
"@types/estree": "0.0.38",
"@types/node": "*"
}
},
"scrypt-async-modern": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/scrypt-async-modern/-/scrypt-async-modern-3.0.6.tgz",
"integrity": "sha512-B72/EtP/pkk8GZrbcqh807ZJJRKfpn5C6NT8/WZ7rSbQL4ug+JNk3kin4tcnbXWqAAR/gDt0IOU8Hu2KyjkfXg==",
"requires": {
"@noderize/runtime": "^0.3.11"
}
},
"tweetnacl": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.0.tgz",
"integrity": "sha1-cT2LgY2kIGh0C/aDhtBHnmb8ins="
}
}
}
package.json
+ 2
− 2
View file @ 02c6f25f
{ {
"name": "gsper", "name": "gsper",
"version": "2.0.0", "version": "2.0.2",
"description": "Ǧ'Perdu l'accès à mon compte, Ǧ'spère le retrouver", "description": "Ǧ'Perdu l'accès à mon compte, Ǧ'spère le retrouver",
"main": "public/index.html", "main": "public/index.html",
"scripts": { "scripts": {
......
public/index.html
+ 12
− 2
View file @ 02c6f25f
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<button id="compute">Gsper !</button> <button id="compute">Gsper !</button>
</div> </div>
</header> </header>
<div id="resultat" class="pasEncore"> <div id="resultat" class="subPage">
<h2>Ǧ'trouvé ! ǦéLéClé !</h2> <h2>Ǧ'trouvé ! ǦéLéClé !</h2>
<div class="gift"> <div class="gift">
<a href="https://cesium.g1.1000i100.fr/#/app/wot/2sZF6j2PkxBDNAqUde7Dgo5x3crkerZpQ4rBqqJGn8QT/1000i100" target="_blank">Ǧ'spère vous avoir été utile.<br/> <a href="https://cesium.g1.1000i100.fr/#/app/wot/2sZF6j2PkxBDNAqUde7Dgo5x3crkerZpQ4rBqqJGn8QT/1000i100" target="_blank">Ǧ'spère vous avoir été utile.<br/>
...@@ -48,6 +48,16 @@ ...@@ -48,6 +48,16 @@
<div><span>Graine : </span><span id="resSeed"></span></div> <div><span>Graine : </span><span id="resSeed"></span></div>
</div> </div>
</div> </div>
<div id="fini" class="subPage">
<h2>Ǧ'spéré... ǦéTouTesté... ǦéPasTrouvé.</h2>
<br/>
<br/>
<p>
Ǧ'srais vous, Ǧéssérai des combinaisons plus avancées.<br/>
<br/>
<a href="https://git.duniter.org/tools/gsper#guide-dutilisation">⇉⇛⇒ Guide et documentation ⇐⇚⇇</a>
</p>
</div>
<div id="lists"> <div id="lists">
<fieldset class="salt"> <fieldset class="salt">
<legend title="dictionnaire">Liste d'identifiants secrets à tester :</legend> <legend title="dictionnaire">Liste d'identifiants secrets à tester :</legend>
......
public/main.js
+ 36
− 2
View file @ 02c6f25f
...@@ -23,7 +23,7 @@ function combiTested(event){ ...@@ -23,7 +23,7 @@ function combiTested(event){
document.getElementById("temps").innerHTML = `${Math.round((combi-tested)/combiPerSec)}s (${Math.round(combiPerSec)}/s)`; document.getElementById("temps").innerHTML = `${Math.round((combi-tested)/combiPerSec)}s (${Math.round(combiPerSec)}/s)`;
} }
if(event.data.match){ if(event.data.match){
document.getElementById("resultat").classList.remove("pasEncore"); document.getElementById("resultat").classList.add("active");
document.getElementById("resIdSec").innerText = event.data.idSec; document.getElementById("resIdSec").innerText = event.data.idSec;
document.getElementById("resPass").innerText = event.data.password; document.getElementById("resPass").innerText = event.data.password;
document.getElementById("resPublicKey").innerText = event.data.publicKey; document.getElementById("resPublicKey").innerText = event.data.publicKey;
...@@ -33,6 +33,7 @@ function combiTested(event){ ...@@ -33,6 +33,7 @@ function combiTested(event){
} }
if(tested === combi) { if(tested === combi) {
document.getElementById("percent").innerHTML = "Fini sans résultats"; document.getElementById("percent").innerHTML = "Fini sans résultats";
document.getElementById("fini").classList.add("active");
idleStateBtn(); idleStateBtn();
} }
} }
...@@ -113,3 +114,36 @@ function apply(data,funcList){ ...@@ -113,3 +114,36 @@ function apply(data,funcList){
} }
return oldData; return oldData;
} }
/* pop-in handling */
function bgCloseBuilder(side){
const bgClose = document.createElement("a");
bgClose.classList.add(`bg${side}`);
bgClose.classList.add("bgPopupClose");
bgClose.href = "#";
bgClose.title = "Fermer";
return bgClose;
}
document.querySelectorAll('.subPage').forEach( popup => {
const fermer = document.createElement("a");
fermer.classList.add("close");
fermer.href = "#";
fermer.title = "Fermer";
fermer.innerHTML = "X";
popup.appendChild(fermer);
popup.appendChild(bgCloseBuilder('Top'));
popup.appendChild(bgCloseBuilder('Left'));
popup.appendChild(bgCloseBuilder('Right'));
popup.appendChild(bgCloseBuilder('Bottom'));
} );
document.querySelectorAll('a[href^="#"]').forEach(
link => link.addEventListener('click',
e => {
document.querySelectorAll('.subPage').forEach( section => section.classList.remove("active") );
e.preventDefault();
return false;
}
)
);
\ No newline at end of file
public/style.css
+ 66
− 8
View file @ 02c6f25f
...@@ -39,7 +39,22 @@ h1{padding-left: 3em; margin-top: 10px;} ...@@ -39,7 +39,22 @@ h1{padding-left: 3em; margin-top: 10px;}
a {color: #666; text-decoration-style: dotted; text-decoration-color: #ccc;} a {color: #666; text-decoration-style: dotted; text-decoration-color: #ccc;}
a:hover {color: #666; text-decoration-style: solid; text-decoration-color: #ccc;} a:hover {color: #666; text-decoration-style: solid; text-decoration-color: #ccc;}
.gift{
float:right;
text-align: right;
}
.basic {margin-top: 10px;}
#advShow {margin-top: 10px;}
#advShow, #adv {opacity: 0.3;}
#resultat{ #resultat{
background-color: #efe;
}
#fini{
background-color: #fee;
}
.subPage {
position: fixed; position: fixed;
z-index: 2; z-index: 2;
top: 50%; top: 50%;
...@@ -48,14 +63,57 @@ a:hover {color: #666; text-decoration-style: solid; text-decoration-color: #ccc; ...@@ -48,14 +63,57 @@ a:hover {color: #666; text-decoration-style: solid; text-decoration-color: #ccc;
margin-left: -500px; margin-left: -500px;
height: 200px; height: 200px;
margin-top: -100px; margin-top: -100px;
background-color: #efe;
padding: 20px; padding: 20px;
border: 2px groove grey; border: 2px groove grey;
box-shadow: 0 0 50px 10px #000;
overflow: auto;
z-index: 3;
display:none;
} }
.gift{
float:right; .subPage.active {
text-align: right; display:block;
}
.subPage.active .close {
position: fixed;
top: 50%;
left: 50%;
padding: 6px 30px 2px;
margin-top:-100px;
margin-left:410px;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
display: block;
border: 0;
border-bottom: 1px solid transparent;
border-image: linear-gradient(to right, transparent 0%, #666 25%, #666 75%, transparent 100%) 100% 1;
}
.subPage.active .bgPopupClose {
position: fixed;
background-color: rgba(0,0,0,0.4);
}
.subPage.active .bgTop {
top: 0;
bottom: calc(50% + 100px);
left: 0;
right: 0;
}
.subPage.active .bgBottom {
top: calc(50% + 100px);
bottom: 0;
left: 0;
right: 0;
}
.subPage.active .bgLeft {
top: calc(50% - 100px);
bottom: calc(50% - 100px);
left: 0;
right: calc(50% + 500px);
}
.subPage.active .bgRight {
top: calc(50% - 100px);
bottom: calc(50% - 100px);
left: calc(50% + 500px);
right: 0;
} }
.basic {margin-top: 10px;}
#advShow {margin-top: 10px;}
#advShow, #adv {opacity: 0.3;}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment