Skip to content

Commit

Permalink
Redesign codes page #211
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed May 15, 2022
1 parent 71f3e59 commit 22fdce3
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 97 deletions.
1 change: 1 addition & 0 deletions .tailwindrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ module.exports = {
screens: {
lg: "1400px",
md: "200px",
"3xl": "2000px",
},

stroke: (theme) => ({
Expand Down
0 app/application/src/css/index.css → app/codes/index.css
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions app/application/index.html → app/codes/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline'" />
<meta charset="UTF-8" />
<!-- js -->
<script defer src="./src/js/index.js"></script>
<script defer src="./index.js"></script>
<!-- css -->
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="../.././styles/global.css" />
<link rel="stylesheet" href="../../styles/tailwind.css" />
<link rel="stylesheet" href="./src/css/index.css" />
</head>
<body>
<!-- build number -->
Expand Down
68 changes: 41 additions & 27 deletions app/application/src/js/index.js → app/codes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,23 +211,24 @@ const generateCodeElements = (data) => {

if (codes_description === false) {
element.innerHTML = `
<div id="codes${i}" class="lg:w-2/3 md:w-11/12 bg-gray-800 mt-10 mb-10 rounded-2xl mx-auto flex flex-col">
<div class="flex flex-row justify-center items-center">
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="mt-4">${lang.text.name}</h3>
<h2 id="name${i}" tabindex="0" class="text-2xl font-normal mt-3">${lang.text.name}</h2>
<div id="codes${i}" class="lg:w-2/3 md:w-11/12 3xl:w-2/4 bg-gray-800 mt-10 mb-10 rounded-2xl mx-auto flex flex-col">
<div class="flex flex-row pt-8 justify-center items-center p-10">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="text-3xl font-normal mt-3">${lang.text.name}</h3>
</div>
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="relative -top-1 mt-4">${lang.text.code}</h3>
<p id="code${i}" tabindex="0" class="input w-[126px] text-xl relative -top-[6px] select-all" id="code${i}">${lang.text.code}</p>
<div class="flex flex-1 justify-center">
<p id="code${i}" tabindex="0" class="bg-gray-700 px-5 py-3 rounded-2xl text-2xl relative -top-[6px] select-all" id="code${i}">${lang.text.code}</p>
</div>
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="mt-4">${lang.text.time}</h3>
<h2 id="time${i}" class="text-center text-2xl font-normal mt-3">${lang.text.time}</h2>
<div class="flex flex-1 justify-end">
<h3 id="time${i}" tabindex="0" class="text-3xl font-normal mt-3">${lang.text.time}</h3>
</div>
</div>
<div class="flex flex-col justify-center items-center">
<button onclick="copyCode(${i})" id="copy${i}" class="buttoni w-[194px] relative top-1 mb-8">
<div class="flex flex-col justify-center items-center -mt-5">
<div class="progress">
<div id="progress${i}" class="progressFill"></div>
</div>
<div class="flex flex-col justify-center items-center pt-10">
<button onclick="copyCode(${i})" id="copy${i}" class="buttoni w-[170px] mb-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Expand All @@ -238,24 +239,27 @@ const generateCodeElements = (data) => {
`
} else {
element.innerHTML = `
<div id="codes${i}" class="lg:w-2/3 md:w-11/12 bg-gray-800 mt-10 mb-10 pb-4 rounded-2xl mx-auto flex flex-col h-[310px]">
<div class="flex flex-row justify-center items-center">
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="mt-4">${lang.text.name}</h3>
<h2 id="name${i}" tabindex="0" class="text-2xl font-normal mt-3">${lang.text.name}</h2>
<div id="codes${i}" class="lg:w-2/3 md:w-11/12 3xl:w-2/4 bg-gray-800 mt-10 mb-10 rounded-2xl mx-auto flex flex-col">
<div class="flex flex-row pt-8 justify-center items-center">
<div class="flex flex-1 justify-start">
<h3 id="name${i}" tabindex="0" class="text-3xl font-normal mt-3">${lang.text.name}</h3>
</div>
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="relative -top-1 mt-4">${lang.text.code}</h3>
<p id="code${i}" tabindex="0" class="input w-[126px] text-xl relative -top-[6px] select-all" id="code${i}">${lang.text.code}</p>
<div class="flex flex-1 justify-center">
<p id="code${i}" tabindex="0" class="bg-gray-700 px-5 py-3 rounded-2xl text-2xl relative -top-[6px] select-all" id="code${i}">${lang.text.code}</p>
</div>
<div class="flex flex-col flex-1 justify-center items-center">
<h3 class="mt-4">${lang.text.time}</h3>
<h2 id="time${i}" class="text-center text-2xl font-normal mt-3">${lang.text.time}</h2>
<div class="flex flex-1 justify-end">
<h3 id="time${i}" tabindex="0" class="text-3xl font-normal mt-3">${lang.text.time}</h3>
</div>
</div>
<div class="flex flex-col justify-center items-center">
<p tabindex="0" class="text-2xl bg-gray-700 px-3 py-1.5 rounded-2xl select-all mb-[10px] mt-1" id="description${i}">Description</p>
<button onclick="copyCode(${i})" id="copy${i}" class="buttoni w-[194px] relative top-1">
<div class="flex justify-center pb-10">
<p tabindex="0" class="text-2xl bg-gray-700 px-5 py-3 rounded-2xl select-all mb-[10px] mt-1" id="description${i}">Description</p>
</div>
<div class="flex flex-col justify-center items-center -mt-5">
<div class="progress">
<div id="progress${i}" class="progressFill"></div>
</div>
<div class="flex flex-col justify-center items-center pt-10">
<button onclick="copyCode(${i})" id="copy${i}" class="buttoni w-[170px] mb-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
Expand Down Expand Up @@ -284,6 +288,7 @@ const generateCodeElements = (data) => {
const code = document.querySelector(`#code${i}`)
const time = document.querySelector(`#time${i}`)
const description = document.querySelector(`#description${i}`)
const progress = document.querySelector(`#progress${i}`)

// add to query
query.push(`${issuers[i].toLowerCase().trim()} ${names[i].toLowerCase().trim()}`)
Expand All @@ -304,6 +309,10 @@ const generateCodeElements = (data) => {
// remaining time
const remaining_time = 30 - Math.floor((new Date(Date.now()).getTime() / 1000.0) % 30)

// progress bar
const value = remaining_time * (100 / 30)
progress.style.width = `${value}%`

// set content
name.textContent = issuers[i]
code.textContent = token
Expand Down Expand Up @@ -346,6 +355,7 @@ const refreshCodes = (secrets) => {
for (let i = 0; i < secrets.length; i++) {
const code = document.querySelector(`#code${i}`)
const time = document.querySelector(`#time${i}`)
const progress = document.querySelector(`#progress${i}`)

// generate token
const token = speakeasy.totp({
Expand All @@ -356,6 +366,10 @@ const refreshCodes = (secrets) => {
// generate time
const remaining = 30 - Math.floor((new Date(Date.now()).getTime() / 1000.0) % 30)

// progress bar
const value = remaining * (100 / 30)
progress.style.width = `${value}%`

// set content
code.textContent = token
time.textContent = remaining.toString()
Expand Down
Loading

0 comments on commit 22fdce3

Please sign in to comment.