From 48bfb4772cf9dffa75d074556e812aa9f8f8f601 Mon Sep 17 00:00:00 2001 From: TPD94 <39639333+TPD94@users.noreply.github.com> Date: Tue, 11 Jun 2024 15:54:15 -0400 Subject: [PATCH] Added CSS/Grid (#22) Co-authored-by: TPD94 <> Co-authored-by: FoxRefire <155989196+FoxRefire@users.noreply.github.com> --- popup.html | 12 ++--- popup.js | 24 ++++----- popup_drawList.js | 15 ++++-- popup_showHistory.js | 17 +++++-- style.css | 114 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 153 insertions(+), 29 deletions(-) create mode 100644 style.css diff --git a/popup.html b/popup.html index f86d37a..f4aa515 100644 --- a/popup.html +++ b/popup.html @@ -2,16 +2,10 @@ Widevine L3 Guessor 2024 - + - +


@@ -46,7 +40,7 @@ -
+
diff --git a/popup.js b/popup.js index b194f36..abf30d9 100644 --- a/popup.js +++ b/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); -} diff --git a/popup_drawList.js b/popup_drawList.js index 3a9dcbc..93df356 100644 --- a/popup_drawList.js +++ b/popup_drawList.js @@ -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); } diff --git a/popup_showHistory.js b/popup_showHistory.js index ba7f81e..ba565f8 100644 --- a/popup_showHistory.js +++ b/popup_showHistory.js @@ -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'; } } diff --git a/style.css b/style.css new file mode 100644 index 0000000..c880141 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file