OSM2IPFS/earth/scan/index.html

209 lines
6.4 KiB
HTML
Raw Permalink Normal View History

2023-12-15 18:31:06 +01:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" type="image/x-icon" href="/ipfs/QmUuSv5rZjatksqSzg16UdJQYfEoCWQozNhiM35FKuE7r8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/ipfs/QmQLQ5WdCEc7mpKw5rhUujUU1URKweei4Bb4esyVNd9Atx/G1PalPay_fichiers/jquery-3.6.3.min.js"></script>
<script src="/ipfs/QmQLQ5WdCEc7mpKw5rhUujUU1URKweei4Bb4esyVNd9Atx/G1PalPay_fichiers/instascan.min.js"></script>
<title>ẐenCard scanner</title>
<style>
html,* { font-family: 'Inter'; box-sizing: border-box; }
body { background-color: #fafafa; line-height:1.6;}
.lead { font-size: 1.5rem; font-weight: 300;background: linear-gradient(to right, #000000 0%, #000000 50%,#999999 100%);
-webkit-background-clip: text;
-webkit-text-fill-color:transparent; }
.container { margin: 10px auto; max-width: 960px; }
2023-12-18 19:07:21 +01:00
.reset{ top:50px; left:50px; position: absolute; padding: 1.1rem; border:0; border-radius:35px; background-color:#4F46E5; color:#fff;cursor:pointer; text-decoration:none;}
2023-12-15 18:31:06 +01:00
.reset:hover{color: #fff}#carbonads{display:block;overflow:hidden;max-width:728px;position:relative;font-size:18px;box-sizing:content-box}
#terminal {
background-color: #746;
2023-12-18 19:07:21 +01:00
padding: 10px;
border-radius: 10px;
2023-12-15 18:31:06 +01:00
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
2023-12-18 19:07:21 +01:00
width: fit-content;
2023-12-15 18:31:06 +01:00
}
2023-12-18 19:07:21 +01:00
.flex-container {
display: flex;
justify-content: space-between; /* Adjust as needed */
align-items: center;
}
2023-12-15 18:31:06 +01:00
#video-container {
width: 100%;
max-width: 180px;
max-height: 180px;
2023-12-18 19:07:21 +01:00
margin: auto 20px;
2023-12-15 18:31:06 +01:00
border: 2px solid #ccc;
2023-12-18 19:07:21 +01:00
border-radius: 15px;
2023-12-15 18:31:06 +01:00
overflow: hidden;
}
#preview {
width: 100%;
height: auto;
transform: scaleX(-1);
}
#password {
margin-top: 20px;
font-size: 18px;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
2023-12-18 19:07:21 +01:00
#astroid {
2023-12-15 18:31:06 +01:00
margin-top: 20px;
font-size: 18px;
}
#received {
margin-top: 20px;
font-size: 8px;
}
2023-12-18 19:07:21 +01:00
#zenpub {
2023-12-15 18:31:06 +01:00
margin-top: 20px;
font-size: 18px;
}
#message {
margin-top: 20px;
font-size: 18px;
}
</style>
2023-12-18 19:07:21 +01:00
<link rel="stylesheet" href="pinMeBB.css">
<script src="pinMeBB.js"></script>
2023-12-15 18:31:06 +01:00
<script>
2023-12-18 19:07:21 +01:00
var pinPadVisible = true;
var ASTROID = "";
var CODE = "";
var MONTANT = "";
var ASTROID = "";
2023-12-15 18:31:06 +01:00
$(document).ready(function () {
2023-12-18 19:07:21 +01:00
createPinPad(0);
2023-12-15 18:31:06 +01:00
});
2023-12-18 19:07:21 +01:00
function createPinPad(sec=0) {
const pinform = pinMeBB("pinpad", { limit: 4, minChar: 4, show: sec });
pinform.addEventListener("onEnter", (e) => {
// When Enter is pressed
var pin = e.detail.password();
CODE = pin;
alert("Enter Pressed!\nCODE: " + pin);
});
pinform.addEventListener("onMaxChar", (e) => {
// When max length is reached
var pin = e.detail.password();
alert("MAXED Char Reached!\nCODE: " + pin);
});
pinform.addEventListener("onEmpty", (e) => {
// When some pin is still missing
alert("CODE Can't be Empty!");
});
}
function togglePinPad() {
if (pinPadVisible) {
// If pin pad is visible, remove it
removePinPad();
} else {
// If pin pad is not visible, create it
createPinPad(1);
}
// Toggle the visibility status
pinPadVisible = !pinPadVisible;
}
function removePinPad() {
// Remove the existing pin pad
$("#pinpad").empty();
}
function RESET() {
// RESET ALL
console.log('RESET');
removePinPad();
}
2023-12-15 18:31:06 +01:00
</script>
</head>
<body>
<div class="container">
2023-12-18 19:07:21 +01:00
<button onclick="togglePinPad()">PAD</button>
2023-12-15 18:31:06 +01:00
2023-12-18 19:07:21 +01:00
<div id="terminal" class="flex-container">
2023-12-15 18:31:06 +01:00
<div id="video-container">
<video id="preview" style="transform: scaleX(-1);width: 180px;height: 180px;" autoplay="autoplay" class="active"></video>
</div>
2023-12-18 19:07:21 +01:00
<div id="pinpad">Scan ZenCard AstroID to activate Terminal</div>
2023-12-15 18:31:06 +01:00
</div>
2023-12-18 19:07:21 +01:00
<p>
<a class="reset" onclick="RESET()">RESET</a>
</p>
2023-12-15 18:31:06 +01:00
<p class="lead">
2023-12-18 19:07:21 +01:00
Scan ZenCard AstroID to activate Terminal.
2023-12-15 18:31:06 +01:00
</p>
<div id="password">PASS</div>
<div id="received">CONTENT</div>
2023-12-18 19:07:21 +01:00
<div id="astroid">ASTROID</div>
<div id="zenpub">ZENCARD</div>
2023-12-15 18:31:06 +01:00
</div>
<script>
////////////////////// ACTIVATE WEBCAM QRCODE SCANNER
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
document.getElementById("received").innerText = content;
if (content.startsWith('~~~~~')) {
2023-12-18 19:07:21 +01:00
// STORE ASTROID
2023-12-15 18:31:06 +01:00
document.getElementById('received').innerText = "";
2023-12-18 19:07:21 +01:00
document.getElementById("astroid").innerText = content;
ASTROID = content;
2023-12-15 18:31:06 +01:00
2023-12-18 19:07:21 +01:00
// "PLEASE ENTER PASS" for 2 seconds
2023-12-15 18:31:06 +01:00
document.getElementById('password').innerText = "PLEASE ENTER PASS";
setTimeout(() => {
document.getElementById('password').innerText = "";
}, 2000);
2023-12-18 19:07:21 +01:00
document.getElementById('pinpad').style.visibility = 'visible'
2023-12-15 18:31:06 +01:00
}
if (content.endsWith(':ZEN')) {
document.getElementById('received').innerText = "";
document.getElementById("zenpub").innerText = content;
2023-12-18 19:07:21 +01:00
ZENPUB = content;
} else {
alert("??? : " + content);
2023-12-15 18:31:06 +01:00
}
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</body>
</html>