Added CSS/Grid (#22)
Co-authored-by: TPD94 <> Co-authored-by: FoxRefire <155989196+FoxRefire@users.noreply.github.com>
This commit is contained in:
12
popup.html
12
popup.html
@@ -2,16 +2,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Widevine L3 Guessor 2024</title>
|
||||
<style>
|
||||
.hidden{display:none}
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="pyodide/pyodide.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body id="bodyid">
|
||||
<div id="toggleHistory">
|
||||
<button id="historyButton">Show History</button><br><br>
|
||||
</div>
|
||||
@@ -46,7 +40,7 @@
|
||||
<option value="thePlatform">thePlatform</option>
|
||||
<option value="VdoCipher">VdoCipher</option>
|
||||
<option value="Youku">Youku</option>
|
||||
</select><br>
|
||||
</select>
|
||||
|
||||
<input type="button" id="guess" value="Guess!"><br>
|
||||
|
||||
|
||||
24
popup.js
24
popup.js
@@ -73,20 +73,20 @@ async function autoSelect(){
|
||||
}
|
||||
}
|
||||
|
||||
if(psshs.length!=0){
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('noEME').style.display='none';
|
||||
document.getElementById('home').style.display='block';
|
||||
if (clearkey) {
|
||||
document.getElementById('noEME').style.display = 'none';
|
||||
document.getElementById('ckHome').style.display = 'grid';
|
||||
document.getElementById('ckResult').value = clearkey;
|
||||
document.getElementById('ckResult').addEventListener("click", copyResult);
|
||||
document.getElementById('toggleHistory').style.display = 'none'
|
||||
} else if (psshs.length != 0) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.getElementById('noEME').style.display = 'none';
|
||||
document.getElementById('home').style.display = 'grid';
|
||||
document.getElementById('guess').addEventListener("click", guess);
|
||||
document.getElementById('result').addEventListener("click", copyResult);
|
||||
drawList(psshs,'psshSearch','psshList','pssh');
|
||||
drawList(requests.map(r => r['url']),'requestSearch','requestList','license');
|
||||
drawList(psshs, 'psshSearch', 'psshList', 'pssh');
|
||||
drawList(requests.map(r => r['url']), 'requestSearch', 'requestList', 'license');
|
||||
autoSelect();
|
||||
});
|
||||
}
|
||||
if(clearkey) {
|
||||
document.getElementById('noEME').style.display='none';
|
||||
document.getElementById('ckHome').style.display='block';
|
||||
document.getElementById('ckResult').value=clearkey;
|
||||
document.getElementById('ckResult').addEventListener("click", copyResult);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
function selectPssh(){
|
||||
document.getElementById('home').style.display='none';
|
||||
document.getElementById('selectPssh').style.display='block';
|
||||
document.getElementById('selectPssh').style.display='grid';
|
||||
document.getElementById('psshList').style.display='grid';
|
||||
document.getElementById('toggleHistory').style.display='none';
|
||||
document.getElementById('bodyid').style.gridTemplateRows='auto 1fr auto';
|
||||
}
|
||||
|
||||
function selectRequest(){
|
||||
document.getElementById('home').style.display='none';
|
||||
document.getElementById('selectRequest').style.display='block';
|
||||
document.getElementById('selectRequest').style.display='grid';
|
||||
document.getElementById('requestList').style.display='grid';
|
||||
document.getElementById('toggleHistory').style.display='none';
|
||||
document.getElementById('bodyid').style.gridTemplateRows='auto 1fr auto';
|
||||
}
|
||||
|
||||
document.getElementById('psshButton').addEventListener("click", selectPssh);
|
||||
@@ -26,7 +32,8 @@ function drawList(arr,_searchBox,_list,_userInputs){
|
||||
document.getElementById(_userInputs+'Index').value=index;
|
||||
document.getElementById('selectPssh').style.display='none';
|
||||
document.getElementById('selectRequest').style.display='none';
|
||||
document.getElementById('home').style.display='block';
|
||||
document.getElementById('home').style.display='grid';
|
||||
document.getElementById('toggleHistory').style.display='grid';
|
||||
});
|
||||
list.appendChild(li);
|
||||
});
|
||||
@@ -44,7 +51,7 @@ function drawList(arr,_searchBox,_list,_userInputs){
|
||||
document.getElementById(_userInputs+'Index').value=index;
|
||||
document.getElementById('selectPssh').style.display='none';
|
||||
document.getElementById('selectRequest').style.display='none';
|
||||
document.getElementById('home').style.display='block';
|
||||
document.getElementById('home').style.display='grid';
|
||||
});
|
||||
list.appendChild(li);
|
||||
}
|
||||
|
||||
@@ -6,18 +6,27 @@ function showHistory(){
|
||||
}));
|
||||
document.getElementById('home').style.display='none';
|
||||
document.getElementById('noEME').style.display='none';
|
||||
document.getElementById('history').style.display='block';
|
||||
document.getElementById('history').style.display='grid';
|
||||
document.getElementById('toggleHistory').style.display='none';
|
||||
document.getElementById('selectPssh').style.display='none';
|
||||
document.getElementById('psshList').style.display='none';
|
||||
document.getElementById('selectRequest').style.display='none';
|
||||
document.getElementById('requestListList').style.display='none';
|
||||
|
||||
}
|
||||
|
||||
function backHistory(){
|
||||
document.getElementById('histDisp').innerHTML="";
|
||||
document.getElementById('history').style.display='none';
|
||||
document.getElementById('toggleHistory').style.display='block';
|
||||
document.getElementById('selectPssh').style.display='none';
|
||||
document.getElementById('psshList').style.display='none';
|
||||
document.getElementById('toggleHistory').style.display='grid';
|
||||
document.getElementById('selectRequest').style.display='none';
|
||||
document.getElementById('requestList').style.display='none';
|
||||
if(psshs.length != 0){
|
||||
document.getElementById('home').style.display='block';
|
||||
document.getElementById('home').style.display='grid';
|
||||
} else {
|
||||
document.getElementById('noEME').style.display='block';
|
||||
document.getElementById('noEME').style.display='grid';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
114
style.css
Normal file
114
style.css
Normal file
@@ -0,0 +1,114 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0; /* Reset default margin */
|
||||
padding: 0; /* Reset default padding */
|
||||
}
|
||||
|
||||
body {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background: linear-gradient(45deg, #0d364c, #062535, #02141e);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
#noEME {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#updateNotice {
|
||||
justify-self: center;
|
||||
align-self: end;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#updateNotice a{
|
||||
color: aqua;
|
||||
}
|
||||
|
||||
#wvForm {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#wvForm label {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#pssh {
|
||||
width: 80%;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#psshButton {
|
||||
width: 20%;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#license {
|
||||
width: 80%;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#licenseButton {
|
||||
width: 20%;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#scheme {
|
||||
width: 80%;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#toggleHistory {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#toggleHistory button {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#guess {
|
||||
width: 20%;
|
||||
justify-self: center;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
#result {
|
||||
width: 90%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: none;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#psshList, #requestList {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#ckHome h3, label {
|
||||
color: white;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#ckHome label {
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
#ckResult {
|
||||
width: 90%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: none;
|
||||
justify-self: center;
|
||||
}
|
||||
Reference in New Issue
Block a user