OffPass/offpass-desktop
Archived
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

+ Some sick animations

Browse Source 
+ JQuery
This commit is contained in:
Nicolas Klier
2019-10-25 20:44:35 +02:00
parent 48c40a5d93
commit 0fa86ee35c
6 changed files with 3827 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3625
src/assets/animate.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/assets/jquery-3.4.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
src/global.css
View File

@@ -32,7 +32,7 @@ p, span {
transition: .1s ease-in-out; transition: .1s ease-in-out;
padding: 10px; padding: 10px;
color: #BDC3C7; color: #BDC3C7;
z-index: 5; z-index: 99999;
} }
#content { #content {
@@ -42,6 +42,9 @@ p, span {
text-align: cover; text-align: cover;
object-fit: fill; object-fit: fill;
} }
#content div {
position: absolute;
}
.fill { .fill {
width: 100%; width: 100%;

132
src/index.html
View File

@@ -4,11 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hello World!</title> <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=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen:700&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"> <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="global.css" rel="stylesheet">
<link href="start.css" rel="stylesheet">
<link href="scanner.css" rel="stylesheet"> <link href="scanner.css" rel="stylesheet">
</head> </head>
<body> <body>
@@ -18,44 +21,113 @@
<i id="close" class="fas fa-times" onclick="remote.BrowserWindow.getFocusedWindow().close()"></i> <i id="close" class="fas fa-times" onclick="remote.BrowserWindow.getFocusedWindow().close()"></i>
</div> </div>
<div id="content"> <div id="content">
<!--<h1>Welcome to OffPass</h1> <div id="master_prompt">
<p>In this short tutorial you'll learn how to use this software.</p> <h1>Welcome to OffPass</h1>
<a href="#">Let's start</a>--> <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> <video id="preview"></video>
</div> </div>
<script> <script>
window.$ = window.jQuery = require('../src/assets/jquery-3.4.1.min.js');
const { remote } = require('electron'); const { remote } = require('electron');
const pgp = require('openpgp'); const pgp = require('openpgp');
let master_password = "";
navigator.mediaDevices.getUserMedia({video: true}); // Slide
const preview = document.getElementById('preview'); $('#master').keypress(async (e) => {
if (e.which == 13) {
let scanner = new Instascan.Scanner({ video: preview, mirror: false }); master_password = $('#master').val();
$('#master_prompt').animate({
scanner.addListener('scan', async (content) => { left: '-150%'
content = "-----BEGIN PGP MESSAGE-----\n\n" + content + "\n-----END PGP MESSAGE-----"; }, 600, () => {
console.log(content) $(this).css('left', '150%');
pgp.decrypt({ });
message: await pgp.message.readArmored(content), $('#wait').animate({
passwords: [ '123' ], left: '0'
format: 'string' }, 300);
}).then((plaintext) => { const done = await startWatching();
console.log(plaintext.data); $('#preview').animate({
}); left: '0'
}); }, 600);
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.');
} }
}).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> </script>
</body> </body>
</html> </html>

70
src/scanner.css
View File

@@ -2,8 +2,76 @@
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: 0; top: 0;
left: 0; left: 150%;
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: cover; 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
View 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;
}