Added CSS/Grid (#22)

Co-authored-by: TPD94 <>
Co-authored-by: FoxRefire <155989196+FoxRefire@users.noreply.github.com>
This commit is contained in:
TPD94
2024-06-11 15:54:15 -04:00
committed by GitHub
parent 823d328543
commit 48bfb4772c
5 changed files with 153 additions and 29 deletions

View File

@@ -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>

View File

@@ -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);
}

View File

@@ -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);
}

View File

@@ -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
View 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;
}