Files
StatelessUsb/stateless.html
T

411 lines
9.4 KiB
HTML
Raw Normal View History

2023-02-24 22:00:41 -07:00
<!DOCTYPE html>
2023-03-01 16:50:13 -07:00
<?xml version="1.0" encoding="utf-8"?>
2023-02-24 22:00:41 -07:00
<body>
2023-03-01 16:50:13 -07:00
<div class="menu">
<input type="file" id="fileInput" style="display:none;" accept=".json"><br>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg id="uploadbtn" onclick="getEl('fileInput').click()" width="8vh" height="8vh" viewBox="10 10 15 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="nonzero" d="M20 12l6 5.656-1.5 1.414-3.44-3.242V28h-2.12V15.828L15.5 19.07 14 17.656z"/></svg>
2023-02-27 19:41:26 -07:00
<select id="dropDown" style="display:none;" onchange="setInput(conf.length-1 - this.selectedIndex)"></select>
2023-03-01 16:50:13 -07:00
<input type="input" id="site" placeholder="Site">
2023-02-24 22:00:41 -07:00
<input type="input" id="username" placeholder="Username / Email">
<br>
2023-03-01 16:50:13 -07:00
2023-02-24 22:00:41 -07:00
<input type="checkbox" id="incLowercase" checked="checked">
<input type="checkbox" id="incUppercase" checked="checked">
<input type="checkbox" id="incNumber" checked="checked">
<input type="checkbox" id="incSymbol" checked="checked">
2023-03-01 16:50:13 -07:00
<div class="lengthWrapper">
<input type="button" class="numMinus" onclick="inc(getEl('length'))" />
<input type="input" class="numInput" id="length" placeholder="Length" value="16"/>
<input type="button" class="numPlus" onclick="dec(getEl('length'))" />
</div>
<div class="countWrapper">
<input type="button" class="numMinus" onclick="inc(getEl('counter'))" />
<input type="input" class="numInput" id="counter" placeholder="Counter" value="1"/>
<input type="button" class="numPlus" onclick="dec(getEl('counter'))"/>
</div>
2023-02-24 22:00:41 -07:00
<input type="password" id="password" placeholder="Master Password">
<input type="button" id="generate" value="Generate" onclick="genPassword()">
<input type="button" id="save" value="Save" onclick="saveConf()">
2023-03-01 16:50:13 -07:00
</div>
2023-02-24 22:00:41 -07:00
<style>
2023-03-01 16:50:13 -07:00
body {
background-color: #505050;
margin:0;
}
.menu {
background-color: #202020;
border: 10px;
width: 66vw;
margin-left: 17vw;
height: 100vh;
position: relative;
border-radius: 0;
color: #ffffff;
border-color: #202020;
border-width: 10px;
}
@media only screen and ((orientation: portrait) or (max-width: 600px)) {
.menu {
width: 100vw;
margin-left: 0;
}
}
#site {
left: 5px;
}
#username {
right: 5px;
}
#dropDown {
position: absolute;
right: 5px;
top: 0;
background-color: #181818;
color: #ffffff;
}
#site, #username {
height: 8vh;
font-size: 3vh;
width: calc(50% - 20px);
padding-left: 5px;
padding-right: 5px;
position: absolute;
border: 0;
outline: 0;
top: 10vh;
}
.menu input[type=input]:focus {
outline:none!important;
}
.menu input::placeholder {
color: #ffffff;
}
.menu input {
border-radius: 0;
color: #ffffff;
border-color: #181818;
border: 0;
outline: 0;
}
input[type="checkbox"], input[type="input"], input[type="password"], #generate, #save {
background-color: #181818;
}
#save, #generate {
position: absolute;
bottom: 5px;
height: 10vh;
font-size: 3vh;
}
#save {
left: 5px;
width: calc(50% - 10px);
}
#generate {
right: 5px;
width: calc(50% - 10px);
}
.menu input:focus {
outline:none!important;
}
.lengthWrapper, .countWrapper {
position: absolute;
top: calc(38vh + 18px);
width: calc(50% - 10px);
height: 10vh;
}
.numInput {
position: absolute;
left: 10vh;
right: 10vh;
height: calc(100% - 10px);
width: calc(100% - 20vh);
padding: 5px;
font-size: 3vh;
}
.numPlus {
background-color: #505050;
content:"test";
position: absolute;
left: 0;
top: 0;
width: 10vh;
height: 10vh;
z-index: 2;
cursor: pointer;
font-size: 2px;
padding: 0;
}
.numMinus {
background-color: #505050;
position: absolute;
right: 0;
top: 0;
width: 10vh;
height: 10vh;
z-index: 2;
cursor: pointer;
font-size: 3vh;
}
.lengthWrapper {
left: 5px;
}
.countWrapper {
right: 5px;
}
#uploadbtn {
color: #ffffff;
position: absolute;
cursor:pointer;
right: 5px;
top: 5px;
}
input[type="checkbox"] {
position: absolute;
-webkit-appearance: initial;
appearance: initial;
font-family: system-ui, sans-serif;
font-size: 5vh;
font-weight: bold;
line-height: 1.1;
grid-template-columns: 1em auto;
gap: 0.5em;
border-radius:0;
width: calc(50% - 10px);
height: 10vh;
}
input[type="checkbox"]:after {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#incLowercase {top: calc(18vh + 5px); left: 0px;}
#incUppercase {top: calc(18vh + 5px); right: 0px;}
#incNumber {top: calc(28vh + 10px); left: 0px;}
#incSymbol {top: calc(28vh + 10px); right: 0px;}
#incLowercase:after {content: " abc ";}
#incLowercase:checked:after {content: "[abc]";}
#incUppercase:after {content: " ABC ";}
#incUppercase:checked:after {content: "[ABC]";}
#incNumber:after {content: " 123 ";}
#incNumber:checked:after {content: "[123]";}
#incSymbol:after {content: " @#* ";}
#incSymbol:checked:after {content: "[@#*]";}
input[type="checkbox"]:checked {
background-color: #505050;
}
input[type=text]:focus {
border: 0;
background-color: #303030;
}
#password {
position: absolute;
left: 5px;
width: calc(100% - 20px);
height: 10vh;
bottom: calc(10vh + 10px);
font-size: 3vh;
padding-left: 5px;
padding-right: 5px;
}
2023-02-24 22:00:41 -07:00
p {
display: inline;
}
</style>
<script>
2023-03-01 16:50:13 -07:00
let conf = []
2023-02-24 22:00:41 -07:00
const charLowercase = "qwertyuioppasdfghjklzxcvbnm"
const charUppercase = "QWERTYUIOPASDFGHJKLZXCVBNM"
const charNum = "1234567890"
const charSymbol = "\`~!@#$%^&*()_+[]\\{}|;\':\",./<>?"
const fullCharset = charLowercase + charUppercase + charNum + charSymbol
function getConf(e) {
var file = e.target.files[0]
if (!file) {
return
}
let reader = new FileReader();
reader.onload = function(e) {
conf = JSON.parse(e.target.result)
const dropDown = getEl("dropDown")
dropDown.style.display = ""
for(let i = 0; i <= conf.length-1; i++){
let option = document.createElement('option');
option.text = conf[i].site;
dropDown.add(option, 0);
}
dropDown.selectedIndex = -1
}
reader.readAsText(file)
}
document.getElementById('fileInput').addEventListener('change', getConf);
function setInput(int){
getEl("site").value = conf[int].site
getEl("username").value = conf[int].user
getEl("length").value = conf[int].length
getEl("incLowercase").checked = conf[int].lower
getEl("incUppercase").checked = conf[int].upper
getEl("incNumber").checked = conf[int].number
getEl("incSymbol").checked = conf[int].symbol
}
function genPassword(){
const site = getEl("site").value
const user = getEl("username").value
const pass = getEl("password").value
const length = getEl("length").value
if(!site | !user | !pass | !length){
alert("Invalid Input")
return
}
const seed = toInt(site) + toInt(user) + toInt(pass)
const isLow = getEl("incLowercase").checked
const isUp = getEl("incUppercase").checked
const isNum = getEl("incNumber").checked
const isSym = getEl("incSymbol").checked
result = RandStr(length, seed, isLow, isUp, isNum, isSym)
copyToClipboard(result)
alert("Copied to clipboard")
}
function toInt(Str){
let result = ''
for(let i = 0; i <= Str.length-1; i++){
result += fullCharset.indexOf(Str[i]).toString()
}
return parseInt(result)
}
function RandStr(length, seed, lower, upper, num, symb) {
let charset = ''
if(lower) charset += charLowercase
if(upper) charset += charUppercase
if(num) charset += charNum
if(symb) charset += charSymbol
let result = ''
for(let i = 0; i < length; i++) {
result += charset[Rand(seed, i, charset.length)]
}
return result
}
function Rand(state1, state2, limit){
var mod1=4294967087
var mul1=65539
var mod2=4294965887
var mul2=65537
if(typeof state1!="number"){
state1=+new Date()
}
if(typeof state2!="number"){
state2=state1
}
state1=state1%(mod1-1)+1
state2=state2%(mod2-1)+1
state1=(state1*mul1)%mod1
state2=(state2*mul2)%mod2
if(state1<limit && state2<limit && state1<mod1%limit && state2<mod2%limit){
return random(limit)
}
return (state1+state2)%limit
}
function copyToClipboard(str){
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str);
return Promise.reject('The Clipboard API is not available.');
};
function saveConf() {
conf.push({
"site": getEl("site").value,
"user": getEl("username").value,
"length": getEl("length").value,
"lower": getEl("incLowercase").checked,
"upper": getEl("incUppercase").checked,
"number": getEl("incNumber").checked,
"symbol": getEl("incSymbol").checked
})
const link = document.createElement("a");
const content = JSON.stringify(conf);
const file = new Blob([content], { type: 'text/plain' });
link.href = URL.createObjectURL(file);
link.download = "data.json";
link.click();
URL.revokeObjectURL(link.href);
}
function getEl(str){
return document.getElementById(str)
}
2023-03-01 16:50:13 -07:00
function inc(el){
el.value = parseInt(el.value) + 1
}
function dec(el){
el.value = parseInt(el.value) - 1
}
2023-02-24 22:00:41 -07:00
</script>
</body>