From 63a42456132d40b34b572c07af2061eb5c410fe3 Mon Sep 17 00:00:00 2001 From: Noman Rafiq Date: Tue, 20 Aug 2024 13:58:31 +0500 Subject: [PATCH 1/3] copy username/password bug fixed where after copy the text size is changed on some devices --- script.js | 268 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 138 insertions(+), 130 deletions(-) diff --git a/script.js b/script.js index 41b1aa5..125fbe4 100644 --- a/script.js +++ b/script.js @@ -1,152 +1,160 @@ async function loadList() { - let result = await fetch( - "https://raw.githubusercontent.com/many-passwords/many-passwords/main/passwords.csv" - ) - .then((res) => res.text()) - .catch(() => "error"); - - const loader = document.getElementById("loader"); - const output = document.getElementById("output"); - const buttonsWrapper = document.querySelector(".buttons-wrapper"); // get button container div - const pwdCount = document.getElementById("password-count"); // password count button - - if (result !== "error") { - loader.remove(); - buttonsWrapper.style.display = "flex"; - - var lines = result.split("\n"); - pwdCount.innerHTML = `Passwords Count: ${lines.length - 2}`; // Count passwords - let split = (x) => lines[line].split(",")[x]; - let add = () => document.createElement("p"); - let addButton = () => document.createElement("button"); - let addDiv = () => document.createElement("div"); - - for (var line = 1; line < lines.length; line++) { - const li = document.createElement("div"); - const vendor = add(); - const model = add(); - const version = add(); - const access = add(); - const username = add(); - const password = add(); - const privileges = add(); - const notes = add(); - const copyUsername = addButton(); - const copyPassword = addButton(); - const buttonContainer = addDiv(); - - if (split(0) === "") return; - - vendor.innerHTML = split(0); - model.innerHTML = "Model: " + split(1); - version.innerHTML = "Version: " + split(2); - access.innerHTML = "Access Type: " + split(3); - username.innerHTML = "Username: " + split(4); - password.innerHTML = "Password: " + split(5); - privileges.innerHTML = "Privileges: " + split(6); - notes.innerHTML = `
${split(7)}`; - copyUsername.innerHTML = "USERNAME"; - copyUsername.setAttribute("onClick","copyToClipBoard('"+split(4)+"',this,\"USERNAME\")"); - copyUsername.setAttribute("class","copy-button"); - copyPassword.innerHTML = "PASSWORD"; - copyPassword.setAttribute("onClick","copyToClipBoard('"+split(5)+"',this,\"PASSWORD\")"); - copyPassword.setAttribute("class","copy-button"); - buttonContainer.setAttribute("class","button-container"); - - li.setAttribute("class", "model-info"); - li.appendChild(vendor); - li.appendChild(model); - li.appendChild(version); - li.appendChild(access); - li.appendChild(username); - li.appendChild(password); - li.appendChild(privileges); - li.appendChild(notes); - buttonContainer.appendChild(copyUsername); - buttonContainer.appendChild(copyPassword); - li.appendChild(buttonContainer) - output.appendChild(li); - } - } else { - setTimeout(() => { - let confirm = window.confirm( - "An error occurred, do you want to reload the page?" - ); - if (confirm) window.location.reload(); - else { + let result = await fetch( + 'https://raw.githubusercontent.com/many-passwords/many-passwords/main/passwords.csv' + ) + .then((res) => res.text()) + .catch(() => 'error'); + + const loader = document.getElementById('loader'); + const output = document.getElementById('output'); + const buttonsWrapper = document.querySelector('.buttons-wrapper'); // get button container div + const pwdCount = document.getElementById('password-count'); // password count button + + if (result !== 'error') { loader.remove(); - output.textContent = "Failed! Please update the page and try again."; - output.classList.add("failed"); - } - }, 5000); - } + buttonsWrapper.style.display = 'flex'; + + var lines = result.split('\n'); + pwdCount.innerHTML = `Passwords Count: ${lines.length - 2}`; // Count passwords + let split = (x) => lines[line].split(',')[x]; + let add = () => document.createElement('p'); + let addButton = () => document.createElement('button'); + let addDiv = () => document.createElement('div'); + + for (var line = 1; line < lines.length; line++) { + const li = document.createElement('div'); + const vendor = add(); + const model = add(); + const version = add(); + const access = add(); + const username = add(); + const password = add(); + const privileges = add(); + const notes = add(); + const copyUsername = addButton(); + const copyPassword = addButton(); + const buttonContainer = addDiv(); + + if (split(0) === '') return; + + vendor.innerHTML = split(0); + model.innerHTML = 'Model: ' + split(1); + version.innerHTML = 'Version: ' + split(2); + access.innerHTML = 'Access Type: ' + split(3); + username.innerHTML = 'Username: ' + split(4); + password.innerHTML = 'Password: ' + split(5); + privileges.innerHTML = 'Privileges: ' + split(6); + notes.innerHTML = `
${split(7)}`; + copyUsername.innerHTML = + 'USERNAME'; + copyUsername.setAttribute( + 'onClick', + "copyToClipBoard('" + split(4) + '\',this,"USERNAME")' + ); + copyUsername.setAttribute('class', 'copy-button'); + copyPassword.innerHTML = + 'PASSWORD'; + copyPassword.setAttribute( + 'onClick', + "copyToClipBoard('" + split(5) + '\',this,"PASSWORD")' + ); + copyPassword.setAttribute('class', 'copy-button'); + buttonContainer.setAttribute('class', 'button-container'); + + li.setAttribute('class', 'model-info'); + li.appendChild(vendor); + li.appendChild(model); + li.appendChild(version); + li.appendChild(access); + li.appendChild(username); + li.appendChild(password); + li.appendChild(privileges); + li.appendChild(notes); + buttonContainer.appendChild(copyUsername); + buttonContainer.appendChild(copyPassword); + li.appendChild(buttonContainer); + output.appendChild(li); + } + } else { + setTimeout(() => { + let confirm = window.confirm( + 'An error occurred, do you want to reload the page?' + ); + if (confirm) window.location.reload(); + else { + loader.remove(); + output.textContent = + 'Failed! Please update the page and try again.'; + output.classList.add('failed'); + } + }, 5000); + } } async function loadEntryCount() { - let result = await fetch( - "https://raw.githubusercontent.com/many-passwords/many-passwords/main/passwords.csv" - ) - .then((res) => res.text()) - .catch(() => "error"); - - if (result !== "error") { - var lines = result.split("\n"); - const output = document.getElementById("count-output"); - output.innerHTML = lines.length - 2; // -2 because there are two dummy entries - } + let result = await fetch( + 'https://raw.githubusercontent.com/many-passwords/many-passwords/main/passwords.csv' + ) + .then((res) => res.text()) + .catch(() => 'error'); + + if (result !== 'error') { + var lines = result.split('\n'); + const output = document.getElementById('count-output'); + output.innerHTML = lines.length - 2; // -2 because there are two dummy entries + } } function search_entries() { - let base_element = document.getElementsByClassName("search"); - let input = base_element[0].getElementsByTagName("input")[0].value; - input = input.trim().toLowerCase(); // Using trim() for removing any surrounding whitespaces, and toLowerCase() for converting its case to lowercase so as to perform a case-insensitive search - - let data = document.getElementById("output").childNodes; - let result_count = 0; - - for (i = 0; i < data.length; i++) { - if (!data[i].innerHTML.toLowerCase().includes(input)) { - data[i].style.display = "none"; - } else { - data[i].style.display = "inline"; - result_count++; + let base_element = document.getElementsByClassName('search'); + let input = base_element[0].getElementsByTagName('input')[0].value; + input = input.trim().toLowerCase(); // Using trim() for removing any surrounding whitespaces, and toLowerCase() for converting its case to lowercase so as to perform a case-insensitive search + + let data = document.getElementById('output').childNodes; + let result_count = 0; + + for (i = 0; i < data.length; i++) { + if (!data[i].innerHTML.toLowerCase().includes(input)) { + data[i].style.display = 'none'; + } else { + data[i].style.display = 'inline'; + result_count++; + } } - } - $('#no-output').css('display', (result_count>0)?'none':'block'); // setting display css property for 'no results found ...'
block based on result_count using jQuery, Shorthand for: if (result_count==0) $('#no-output').css('display', 'block'); else $('#no-output').css('display', 'none'); + $('#no-output').css('display', result_count > 0 ? 'none' : 'block'); // setting display css property for 'no results found ...'
block based on result_count using jQuery, Shorthand for: if (result_count==0) $('#no-output').css('display', 'block'); else $('#no-output').css('display', 'none'); } $(window).scroll(function (event) { - var scrollButton = $("#scroll_button"); - var scroll = $(window).scrollTop(); - if (scroll < 300) { - scrollButton.fadeOut(); - } else { - scrollButton.fadeIn(); - } + var scrollButton = $('#scroll_button'); + var scroll = $(window).scrollTop(); + if (scroll < 300) { + scrollButton.fadeOut(); + } else { + scrollButton.fadeIn(); + } }); // Navbar Responsive JavaScipt function myFunction() { - var x = document.getElementById("navbar"); - if (x.className === "topnav") { - x.className += " responsive"; - } else { - x.className = "topnav"; - } + var x = document.getElementById('navbar'); + if (x.className === 'topnav') { + x.className += ' responsive'; + } else { + x.className = 'topnav'; + } } -function copyToClipBoard(value,button,usernameorpassword){ - - if(value==''){ - value=''; - } - navigator.clipboard.writeText(value); - button.innerText = 'COPIED!'; +function copyToClipBoard(value, button, usernameorpassword) { + if (value == '') { + value = ''; + } + navigator.clipboard.writeText(value); + button.innerText = 'COPIED!'; - setTimeout(()=>{ - button.innerHTML = "

"+usernameorpassword+"

"; - },3000); + setTimeout(() => { + button.innerHTML = `${usernameorpassword}`; + }, 3000); - console.log(value); + console.log(value); } From 10c3c0f40057abad59d55fd57f0ef0ed283d8b65 Mon Sep 17 00:00:00 2001 From: Noman Rafiq Date: Tue, 20 Aug 2024 14:00:41 +0500 Subject: [PATCH 2/3] changed the colors to a little bit brighter to avoid dark look --- css/colors.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/colors.css b/css/colors.css index 3dc1e3c..ca9ad66 100644 --- a/css/colors.css +++ b/css/colors.css @@ -1,7 +1,7 @@ :root { - --title-color: #7289da; - --background-color: #2A2C2B; - --foreground-color: #374140; - --text-color: #BDC3C7; - --comment-color: #91bad6; + --title-color: #0eb1d2; + --background-color: #2a2c2b; + --foreground-color: #374140; + --text-color: #ece6d8; + --comment-color: #ffcdc2; } From ea133e882213a9daf51040a07fdfa81749ff675f Mon Sep 17 00:00:00 2001 From: Noman Rafiq Date: Tue, 20 Aug 2024 14:02:15 +0500 Subject: [PATCH 3/3] changed the info box width and fixed min height, font size changed, copy button sized changed, hr margins changed, removed box shadows as it wasnt needed, device name margins updated --- css/style.css | 643 +++++++++++++++++++++++++------------------------- 1 file changed, 327 insertions(+), 316 deletions(-) diff --git a/css/style.css b/css/style.css index 2eec627..8671fb7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,157 +1,162 @@ * { - box-sizing: content-box; - margin: 0; - padding: 0; - scroll-behavior: smooth; - color: var(--text-color); + box-sizing: border-box; + margin: 0; + padding: 0; + scroll-behavior: smooth; + color: var(--text-color); } html { - height: 100%; - overflow-x: hidden; + height: 100%; + overflow-x: hidden; } body { - margin: 0; - font-family: "Montserrat", sans-serif; - background: var(--background-color); - background-repeat: no-repeat; - background-attachment: fixed; + margin: 0; + font-family: 'Montserrat', sans-serif; + background: var(--background-color); + background-repeat: no-repeat; + background-attachment: fixed; } -h1, h2 { - font-family: 'Permanent Marker', cursive; - color: var(--title-color); - font-size: max(2.25rem, 6vw); - margin: 30px 0; - text-align: center; +h1, +h2 { + font-family: 'Permanent Marker', cursive; + color: var(--title-color); + font-size: max(2.25rem, 6vw); + margin: 30px 0; + text-align: center; } #logo { - max-width: 80%; - margin: 15px; + max-width: 80%; + margin: 15px; } -input:focus~label, input:valid~label { - color: var(--text-color); - top: -0.8em; - left: 0.5em; - font-weight: lighter; - font-size: small; - -webkit-transition: all 0.225s ease; - transition: all 0.225s ease; +input:focus ~ label, +input:valid ~ label { + color: var(--text-color); + top: -0.8em; + left: 0.5em; + font-weight: lighter; + font-size: small; + -webkit-transition: all 0.225s ease; + transition: all 0.225s ease; } -textarea:focus~label { - display: none; +textarea:focus ~ label { + display: none; } .styled-input { - width: 293px; - margin: 1rem 0; - position: relative; - border-radius: 4px; + width: 293px; + margin: 1rem 0; + position: relative; + border-radius: 4px; } .styled-input label { - color: var(--text-color); - padding: 1.3rem 30px 1rem 30px; - position: absolute; - top: 10px; - left: 0; - -webkit-transition: all 0.25s ease; - transition: all 0.25s ease; - pointer-events: none; + color: var(--text-color); + padding: 1.3rem 30px 1rem 30px; + position: absolute; + top: 10px; + left: 0; + -webkit-transition: all 0.25s ease; + transition: all 0.25s ease; + pointer-events: none; } .styled-input.wide { - width: 100%; - max-width: 100%; + width: 100%; + max-width: 100%; } -.formInput, textarea { - border: 0; - width: 100%; - height: 5em; - background-color: #3b3b3b; - color: var(--text-color); - border-radius: 4px; - text-indent: 2em; +.formInput, +textarea { + border: 0; + width: 100%; + height: 5em; + background-color: #3b3b3b; + color: var(--text-color); + border-radius: 4px; + text-indent: 2em; } textarea { - padding-top: 4rem; + padding-top: 4rem; } input:focus { - outline: 0; - text-indent: 2em; + outline: 0; + text-indent: 2em; } textarea:focus { - text-indent: 2em; + text-indent: 2em; } -input:focus~span, textarea:focus~span { - width: 100%; - -webkit-transition: all 0.075s ease; - transition: all 0.075s ease; +input:focus ~ span, +textarea:focus ~ span { + width: 100%; + -webkit-transition: all 0.075s ease; + transition: all 0.075s ease; } textarea { - width: 100%; - min-height: 10em; + width: 100%; + min-height: 10em; } input { - color: black; + color: black; } .submit-btn { - float: right; - padding: 1em 2em; - border-radius: 20px; - border: none; - display: inline-block; - background-color: var(--title-color); - color: black; - font-size: 18px; - cursor: pointer; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), 0 2px 10px 0 rgba(0, 0, 0, 0.07); - -webkit-transition: all 300ms ease; - transition: all 300ms ease; - box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px; + float: right; + padding: 1em 2em; + border-radius: 20px; + border: none; + display: inline-block; + background-color: var(--title-color); + color: black; + font-size: 18px; + cursor: pointer; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06), + 0 2px 10px 0 rgba(0, 0, 0, 0.07); + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px; } .submit-btn:hover { - transform: translateY(1px); - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10), 0 1px 1px 0 rgba(0, 0, 0, 0.09); + transform: translateY(1px); + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.09); } -input[type=checkbox] { - width: 5%; - height: 1.3em; - float: left; +input[type='checkbox'] { + width: 5%; + height: 1.3em; + float: left; } -input[type=checkbox]+label { - color: #ccc; - font-style: italic; +input[type='checkbox'] + label { + color: #ccc; + font-style: italic; } -input[type=checkbox]:checked+label { - color: #f00; - font-style: normal; +input[type='checkbox']:checked + label { + color: #f00; + font-style: normal; } .input-container { - text-align: center; + text-align: center; } @media (min-width: 320px) and (max-width: 480px) { - .formInput { - width: 95%; - } + .formInput { + width: 95%; + } } /* @@ -159,54 +164,54 @@ input[type=checkbox]:checked+label { */ #loader { - display: flex; - justify-content: center; - margin: 15px; + display: flex; + justify-content: center; + margin: 15px; } .circle { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 10px; - animation-name: loading; - animation-duration: 0.6s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - animation-direction: alternate; + width: 30px; + height: 30px; + border-radius: 50%; + margin-right: 10px; + animation-name: loading; + animation-duration: 0.6s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + animation-direction: alternate; } .circle:first-child { - background-color: #a10702; - animation-delay: 0s; + background-color: #a10702; + animation-delay: 0s; } .circle:nth-child(2) { - background-color: #f44708; - animation-delay: 0.2s; + background-color: #f44708; + animation-delay: 0.2s; } .circle:nth-child(3) { - background-color: #faa613; - animation-delay: 0.4s; - margin-right: 0px; + background-color: #faa613; + animation-delay: 0.4s; + margin-right: 0px; } @keyframes loading { - from { - transform: translateY(30px); - } - to { - transform: translateY(0px); - } + from { + transform: translateY(30px); + } + to { + transform: translateY(0px); + } } .failed { - text-align: center; - font-size: 25px; - font-weight: bold; - color: indianred; - margin: 15px; + text-align: center; + font-size: 25px; + font-weight: bold; + color: indianred; + margin: 15px; } /* @@ -214,68 +219,66 @@ input[type=checkbox]:checked+label { */ #navbar { - overflow: hidden; - position: fixed; - width: 100%; - top: 0; + overflow: hidden; + position: fixed; + width: 100%; + top: 0; } .topnav { - overflow: hidden; - background-color: var(--foreground-color); - padding: 10px; - list-style-type: none; - text-align: center; - z-index: 10; + overflow: hidden; + background-color: var(--foreground-color); + padding: 10px; + list-style-type: none; + text-align: center; + z-index: 10; } .topnav a { - float: left; - display: block; - text-align: center; - text-decoration: none; - color: inherit; - padding: 20px; - margin: 2px 2px; - border-radius: 5px; - transition: all .3s ease; + float: left; + display: block; + text-align: center; + text-decoration: none; + color: inherit; + padding: 20px; + margin: 2px 2px; + border-radius: 5px; + transition: all 0.3s ease; } .topnav a.search { - - float: right; + float: right; } -input{ - border-radius: 20px; +input { + border-radius: 20px; } - .topnav a:hover { - background: var(--comment-color); - color: var(--background-color); + background: var(--comment-color); + color: var(--background-color); } .topnav a:hover.search { - background: none; - color: none; + background: none; + color: none; } .topnav .icon { - display: none; + display: none; } .topnav a.search { - padding: 0; + padding: 0; } .topnav input { - border-radius: 5px; - padding: 20px; - margin-right: 20px; - border-radius: 26px; - border: none; - box-shadow: rgba(0, 0, 0, 0) 0px 7px 29px 0px; + border-radius: 5px; + padding: 20px; + margin-right: 20px; + border-radius: 26px; + border: none; + box-shadow: rgba(0, 0, 0, 0) 0px 7px 29px 0px; } /* @@ -283,150 +286,158 @@ input{ */ .container { - justify-content: center; - max-width: 70%; - margin: auto; - margin-top: 100px; + justify-content: center; + max-width: 70%; + margin: auto; + margin-top: 100px; } #output { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - width: 100%; - justify-content: center; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + width: 100%; + justify-content: center; } #no-output { - text-align: center; - color: var(--text-color); - background: inherit; - font-size: small; + text-align: center; + color: var(--text-color); + background: inherit; + font-size: small; } #count-output { - background-color: #484e4e; - border-radius: 3px; - padding: 2px 4px; + background-color: #484e4e; + border-radius: 3px; + padding: 2px 4px; } .model-info { - box-shadow: 1px 1px 5px 0 var(--shadow-color); - padding: 20px; - margin: 15px; - background-color: var(--foreground-color); - border-radius: 22px; - font-size: 13px; - overflow-wrap: break-word; - box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px; - transition: all .3s ease; - z-index: 0; + box-shadow: 1px 1px 5px 0 var(--shadow-color); + padding: 20px; + margin: 15px; + background-color: var(--foreground-color); + border-radius: 22px; + font-size: 13px; + min-height: 300px; + overflow-wrap: break-word; + transition: all 0.3s ease; + z-index: 0; } -.model-info:hover{ - transform: scale(1.1); - +.model-info:hover { + transform: scale(1.05); } .model-info p { - padding: 2px; + padding: 2px; + font-size: 1.1rem; + margin-bottom: 3px; } .model-info button { - color: var(--text-color); + color: var(--text-color); + width: 50%; + padding: 10px; + font-size: 0.75rem; } .model-info p:nth-child(1) { - font-size: 25px; - color: var(--title-color); - font-weight: bold; + font-size: 1.9rem; + color: var(--title-color); + font-weight: bold; + text-decoration: underline; + margin-bottom: 15px; } .model-info p:nth-child(8) { - color: var(--comment-color); + color: var(--comment-color); } .model-info hr { - margin: 5px 0; - border: 1px solid var(--comment-color); + margin: 5px 0; + border: 1px solid var(--comment-color); + margin: 15px 0; } /* ** Floating Button */ -button{ - color: black; - background-color: white; +button { + color: black; + background-color: white; } .float-button { - position: fixed; - width: 60px; - height: 60px; - bottom: 40px; - right: 30px; - background-color: var(--text-color); - border-radius: 50px; - text-align: center; - display: none; + position: fixed; + width: 60px; + height: 60px; + bottom: 40px; + right: 30px; + background-color: var(--text-color); + border-radius: 50px; + text-align: center; + display: none; } .float-img { - display: inline-block; - height: 100%; - vertical-align: middle; + display: inline-block; + height: 100%; + vertical-align: middle; } -.about, .navigation, .contributors { - padding: 25px; - border-radius: 20px; - font-size: 20px; - background: var(--foreground-color); +.about, +.navigation, +.contributors { + padding: 25px; + border-radius: 20px; + font-size: 20px; + background: var(--foreground-color); } -button.copy-button:hover{ - background-color: #051855; - width: 76px ; - height: 10px; +button.copy-button:hover { + background-color: #051855; + width: 50%; + transform: translateY(-2px); } -button.copy-button{ - transition: width 1s, height 4s, background-color 0.5s; +button.copy-button { + transition: width 1s, height 4s, background-color 0.5s; } -.button-container{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 5px; - +.button-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 5px; } -.copy-button{ - font-weight: 900; - margin-top: 5px; - margin-right: 5px; - .fa{ - margin-right: 5px; - } - padding: 7px; - width: 75px; - font-size: 10px; - border-radius: 50px; - background-color: #0B2EEA; - color: white; - border: 0px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - i{ +.copy-button { + font-weight: 900; + margin-top: 5px; margin-right: 5px; - } + .fa { + margin-right: 5px; + } + padding: 7px; + width: 75px; + font-size: 10px; + border-radius: 50px; + background-color: #0b2eea; + color: white; + border: 0px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + i { + margin-right: 5px; + } } .contributors li { - padding: 12px 0; + padding: 12px 0; } /* @@ -434,81 +445,81 @@ button.copy-button{ */ @media screen and (max-width: 735px) { - .topnav a:not(.search){ - display: none; - } - .topnav a.icon { - position: fixed; - top: 10px; - right: 10px; - display: block; - } - .topnav a.search { - float: left; - } - .topnav input { - border-radius: 2px; - margin-right: 0; - } - - input{ - border-radius: 20px; - } - - .container { - max-width: 80%; - } - - .button-container{ - display: flex; - flex-direction: column; - } - - .copy-button{ - width: 80%; - } - - .topnav.responsive { - position: fixed; - } - .topnav.responsive .icon { - position: fixed; - right: 10px; - top: 10px; - } - .topnav.responsive a { - float: none; - display: block; - text-align: left; - } - .topnav.responsive a.search { - padding: 0; - } - .topnav.responsive input { - border-radius: 5px; - padding: 20px 70px 20px 20px; - margin-left: 10px; - } + .topnav a:not(.search) { + display: none; + } + .topnav a.icon { + position: fixed; + top: 10px; + right: 10px; + display: block; + } + .topnav a.search { + float: left; + } + .topnav input { + border-radius: 2px; + margin-right: 0; + } + + input { + border-radius: 20px; + } + + .container { + max-width: 80%; + } + + .button-container { + display: flex; + flex-direction: column; + } + + .copy-button { + width: 80%; + } + + .topnav.responsive { + position: fixed; + } + .topnav.responsive .icon { + position: fixed; + right: 10px; + top: 10px; + } + .topnav.responsive a { + float: none; + display: block; + text-align: left; + } + .topnav.responsive a.search { + padding: 0; + } + .topnav.responsive input { + border-radius: 5px; + padding: 20px 70px 20px 20px; + margin-left: 10px; + } } .buttons-wrapper { - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 2rem; - margin: 1rem 0; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2rem; + margin: 1rem 0; } .buttons-wrapper .submit-btn { - float: none; - text-decoration: none; - text-align: center; + float: none; + text-decoration: none; + text-align: center; } @media screen and (min-width: 1200px) { - .buttons-wrapper { - flex-direction: row; - } + .buttons-wrapper { + flex-direction: row; + } }