+ Some sick animations
+ JQuery
This commit is contained in:
3625
src/assets/animate.css
vendored
Normal file
3625
src/assets/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2
src/assets/jquery-3.4.1.min.js
vendored
Normal file
2
src/assets/jquery-3.4.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -32,7 +32,7 @@ p, span {
|
||||
transition: .1s ease-in-out;
|
||||
padding: 10px;
|
||||
color: #BDC3C7;
|
||||
z-index: 5;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#content {
|
||||
@@ -42,6 +42,9 @@ p, span {
|
||||
text-align: cover;
|
||||
object-fit: fill;
|
||||
}
|
||||
#content div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.fill {
|
||||
width: 100%;
|
||||
|
||||
132
src/index.html
132
src/index.html
@@ -4,11 +4,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Hello World!</title>
|
||||
|
||||
<script type="text/javascript" src="assets/instascan.min.js"></script>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Oxygen:700&display=swap" rel="stylesheet">
|
||||
<link href="assets/fontawesome-5.11.2/css/all.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="assets/instascan.min.js"></script>
|
||||
<link href="assets/animate.css" rel="stylesheet">
|
||||
<link href="global.css" rel="stylesheet">
|
||||
<link href="start.css" rel="stylesheet">
|
||||
<link href="scanner.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
@@ -18,44 +21,113 @@
|
||||
<i id="close" class="fas fa-times" onclick="remote.BrowserWindow.getFocusedWindow().close()"></i>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!--<h1>Welcome to OffPass</h1>
|
||||
<p>In this short tutorial you'll learn how to use this software.</p>
|
||||
<a href="#">Let's start</a>-->
|
||||
<div id="master_prompt">
|
||||
<h1>Welcome to OffPass</h1>
|
||||
<p>Please enter your master password for decryption</p>
|
||||
<input id="master" placeholder="Master password..." type="password" autofocus>
|
||||
</div>
|
||||
<div id="wait">
|
||||
<h1>Wait for camera...</h1>
|
||||
</div>
|
||||
<div id="scanned" class="animated">
|
||||
<h1>Password: <span id="password"></span></h1>
|
||||
</div>
|
||||
<div id="error">
|
||||
<i class="fas fa-exclamation-circle"></i><p>Decryption faild. Maybe wrong password?</p>
|
||||
</div>
|
||||
<video id="preview"></video>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.$ = window.jQuery = require('../src/assets/jquery-3.4.1.min.js');
|
||||
|
||||
const { remote } = require('electron');
|
||||
const pgp = require('openpgp');
|
||||
let master_password = "";
|
||||
|
||||
navigator.mediaDevices.getUserMedia({video: true});
|
||||
const preview = document.getElementById('preview');
|
||||
|
||||
let scanner = new Instascan.Scanner({ video: preview, mirror: false });
|
||||
|
||||
scanner.addListener('scan', async (content) => {
|
||||
content = "-----BEGIN PGP MESSAGE-----\n\n" + content + "\n-----END PGP MESSAGE-----";
|
||||
console.log(content)
|
||||
pgp.decrypt({
|
||||
message: await pgp.message.readArmored(content),
|
||||
passwords: [ '123' ],
|
||||
format: 'string'
|
||||
}).then((plaintext) => {
|
||||
console.log(plaintext.data);
|
||||
});
|
||||
});
|
||||
Instascan.Camera.getCameras().then(function (cameras) {
|
||||
if (cameras.length > 0) {
|
||||
scanner.start(cameras[0]);
|
||||
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
|
||||
preview.srcObject = stream;
|
||||
})
|
||||
} else {
|
||||
console.error('No cameras found.');
|
||||
// Slide
|
||||
$('#master').keypress(async (e) => {
|
||||
if (e.which == 13) {
|
||||
master_password = $('#master').val();
|
||||
$('#master_prompt').animate({
|
||||
left: '-150%'
|
||||
}, 600, () => {
|
||||
$(this).css('left', '150%');
|
||||
});
|
||||
$('#wait').animate({
|
||||
left: '0'
|
||||
}, 300);
|
||||
const done = await startWatching();
|
||||
$('#preview').animate({
|
||||
left: '0'
|
||||
}, 600);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
console.error(e);
|
||||
});
|
||||
|
||||
function showError(message) {
|
||||
const error = $('#error');
|
||||
error.css('bottom', '50px');
|
||||
error.removeClass("bounceOutDown")
|
||||
error.addClass("animated bounceInUp");
|
||||
$('#error p').text(message);
|
||||
error.css("left", Math.max(0, (($(window).width() - error.outerWidth()) / 2) +
|
||||
$(window).scrollLeft()) + "px");
|
||||
|
||||
setTimeout(() => {
|
||||
error.removeClass("bounceInUp");
|
||||
error.addClass("bounceOutDown")
|
||||
error.css('bottom', '-500px;')
|
||||
}, 5000);
|
||||
|
||||
}
|
||||
|
||||
async function startWatching() {
|
||||
return new Promise((resolve, reject) => {
|
||||
Instascan.Camera.getCameras().then(function (cameras) {
|
||||
if (cameras.length > 0) {
|
||||
scanner.start(cameras[0]);
|
||||
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
|
||||
preview.srcObject = stream;
|
||||
resolve(true);
|
||||
})
|
||||
} else {
|
||||
resolve(false);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
showError("No camera found.");
|
||||
$('#wait').animate({
|
||||
left: '150%'
|
||||
}, 200);
|
||||
$('#master_prompt').animate({
|
||||
left: '0'
|
||||
}, 100);
|
||||
});
|
||||
|
||||
navigator.mediaDevices.getUserMedia({video: true});
|
||||
const preview = document.getElementById('preview');
|
||||
|
||||
let scanner = new Instascan.Scanner({ video: preview, mirror: false });
|
||||
|
||||
scanner.addListener('scan', async (content) => {
|
||||
content = "-----BEGIN PGP MESSAGE-----\n\n" + content + "\n-----END PGP MESSAGE-----";
|
||||
console.log(content)
|
||||
pgp.decrypt({
|
||||
message: await pgp.message.readArmored(content),
|
||||
passwords: [ master_password ],
|
||||
format: 'string'
|
||||
}).then((plaintext) => {
|
||||
const scanned = $('#scanned');
|
||||
scanned.css('top', '80%');
|
||||
scanned.css('z-index', '2');
|
||||
scanned.addClass("fadeInUp");
|
||||
$('#password').text(plaintext.data)
|
||||
console.log(plaintext.data);
|
||||
}).catch((err) => {
|
||||
if (err) showError("Wrong master password");
|
||||
})
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,8 +2,76 @@
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 150%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#wait {
|
||||
position: absolute;
|
||||
left: 150%;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
z-index: -2;
|
||||
margin-top: 20%;
|
||||
}
|
||||
#wait h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#scanned {
|
||||
position: absolute;
|
||||
bottom: -500px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -5;
|
||||
opacity: 0;
|
||||
padding-left: 20px;
|
||||
backdrop-filter: blur(20px);
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
#password {
|
||||
font-family: 'Consolas';
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
#error {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: -350px;
|
||||
width: auto;
|
||||
height: 55px;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
backdrop-filter: blur(30px);
|
||||
background-color: rgba(100, 0, 0, 0.6);
|
||||
border-radius: 15px;
|
||||
}
|
||||
#error i {
|
||||
font-size: 20pt;
|
||||
padding: 14px;
|
||||
color: rgb(255, 139, 139);
|
||||
}
|
||||
#error p {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.show {
|
||||
animation: showpass 1s;
|
||||
opacity: 1 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@keyframes showpass {
|
||||
from {
|
||||
opacity: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
to {
|
||||
opacity: 1 !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
25
src/start.css
Normal file
25
src/start.css
Normal file
@@ -0,0 +1,25 @@
|
||||
#master_prompt {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-top: calc(10% + 50px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
#master_prompt input {
|
||||
margin-top: 50px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid white;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
#master_prompt input::placeholder {
|
||||
color: rgb(207, 207, 207);
|
||||
}
|
||||
#master_prompt input:focus {
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
Reference in New Issue
Block a user