Praneet.github.io

QR GENERATOR

URL SHORTNER

this has both Light mode(BETA) and dark mode

<title>QR_CODE_GENERATOR</title> <script src="https://cdn.tailwindcss.com"></script>

Apps

QR Generator Url Shortener

QRGEN

Convert your any text or link in QR Code with our QR GEN.

Start Today

QR Generator

Generate your QR Code with our QR Generator

Text OR Url

                            <button
                                    type="submit"
                                    onclick="generateQR()"
                                    class="my-5 w-full flex justify-center bg-blue-500 text-gray-100 p-4 rounded-full tracking-wide font-semibold focus:outline-none focus:shadow-outline hover:bg-blue-600 shadow-lg cursor-pointer transition ease-in duration-300"
                            >
                                Generate QR Code
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-4 my-3 h-full w-1/2 app-card flex justify-center gap-4">
                    <div class="flex items-center w-full flex-col gap-4">
                        <h3 class="img-content font-bold">QR Code</h3>
                        <img
                                src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=QR+Code+Generator"
                                alt=""
                                width="150"
                                height="150"
                                class="object-contain shadow-md bg-white mt-4"
                                id="qrImage"
                        />
                        <h2 class="text-2xl text-white" id="qrText2"></h2>
                    </div>

                    <div class="flex w-full gap-2">
                        <button
                                id="pngdownload"
                                class="flex items-center justify-center w-1/2 h-12 bg-sky-500 text-white font-bold rounded-l-lg"
                        >
                            DOWNLOAD
                        </button>
                        <button
                                id="sharebutton"
                                class="flex items-center justify-center w-1/2 h-12 bg-yellow-500 text-white font-bold rounded-r-lg"
                        >
                            SHARE
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="overlay-app"></div>

function generateQR() {
    if (qrText.value.length > 0) {
        qrImage.src =
            "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
            qrText.value;
        qrText2.innerHTML = qrText.value;
    } else {
        qrText.classList.add("error");
        setTimeout(() => {
            qrText.classList.remove("error");
        }, 1000);
    }
}

pngdownload.onclick = function () {
    axios
    ({
        url: qrImage.src,
        method: "GET",
        responseType: "blob",
    })
        .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement("a");
            link.href = url;
            link.setAttribute("download", "QR Code.png");
            document.body.appendChild(link);
            link.click();
        });
};
sharebutton.onclick = function () {
    if(navigator.share){
        navigator.share({
            title: 'QR Code',
            text: 'QR Code',
            url: qrImage.src,
        })
            .then(() => console.log('Successful share'))
            .catch((error) => console.log('Error sharing', error));
    }
};

</script>

/{ margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body{ background: #262a2f; } .container { width: 400px; padding: 25px 35px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 10px; } .container p { font-weight: 600; font-size: 15px; margin-bottom: 8px; } .container input { width: 100%; height: 50px; border: 1px solid #494; outline: 0; padding: 10px; margin: 10px 0 20px; border-radius: 5px; } .container button { width: 100%; height: 50px; background: #494; color: #fff; border: 0; outline: 0; border-radius: 5px; box-shadow: 0 10px 10px rgba(0,0,0,0.1); cursor: pointer; margin: 20px 0; font-weight:500; } #imgBox{ width: 200px; border-radius: 5px; max-height: 0; overflow: hidden; transition: max-height 1s; } #imgBox img{ width: 100%; padding: 10px; } #imgBox.show-img{ max-height: 300px; margin: 10px auto; border: 1px solid #d1d1d1; } .error{ animation: shake 0.1s linear 10; } @keyframes shake { 0%{ transform: translateX(0); } 25%{ transform: translateX(-2px); } 50%{ transform: translateX(0); } 75%{ transform: translateX(2px); } 100%{ transform: translateX(0); } } */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

{ outline: none; box-sizing: border-box; }

:root { --theme-bg-color: rgba(16 18 27 / 40%); --border-color: rgba(113 119 144 / 25%); --theme-color: #f9fafb; --inactive-color: rgb(113 119 144 / 78%); --body-font: "Poppins", sans-serif; --hover-menu-bg: rgba(12 15 25 / 30%); --content-title-color: #999ba5; --content-bg: rgb(146 151 179 / 13%); --button-inactive: rgb(249 250 251 / 55%); --dropdown-bg: #21242d; --dropdown-hover: rgb(42 46 60); --popup-bg: rgb(22 25 37); --search-bg: #14162b; --overlay-bg: rgba(36, 39, 59, 0.3); --scrollbar-bg: rgb(1 2 3 / 40%); }

.light-mode { --theme-bg-color: rgb(255 255 255 / 31%); --theme-color: #3c3a3a; --inactive-color: #333333; --button-inactive: #3c3a3a; --search-bg: rgb(255 255 255 / 31%); --dropdown-bg: #f7f7f7; --overlay-bg: rgb(255 255 255 / 30%); --dropdown-hover: rgb(236 236 236); --border-color: rgb(255 255 255 / 35%); --popup-bg: rgb(255 255 255); --hover-menu-bg: rgba(255 255 255 / 35%); --scrollbar-bg: rgb(255 253 253 / 57%); --content-title-color: --theme-color; }

html { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body { font-family: sans-serif; background-image: url(https://wallpapershome.com/images/wallpapers/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 2em; width: 100%; height: 100vh; } @media screen and (max-width: 480px) { body { padding: 0.8em; } }

.video-bg { position: fixed; right: 0; top: 0; width: 100%; height: 100%; } .video-bg video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

img { max-width: 100%; }

.dark-light { position: fixed; bottom: 50px; right: 30px; background-color:var(--dropdown-bg); box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.2); padding: 8px; border-radius: 50%; z-index: 3; cursor: pointer; } .dark-light svg { width: 24px; flex-shrink: 0; fill: #ffce45; stroke: #ffce45; transition: 0.5s; }

.light-mode .dark-light svg { fill: transparent; stroke: var(--theme-color); } .light-mode .profile-img { border: 2px solid var(--theme-bg-color); } .light-mode .content-section ul { background-color: var(--theme-bg-color); } .light-mode .pop-up__title { border-color: var(--theme-color); } .light-mode .dropdown.is-active ul { background-color: rgba(255, 255, 255, 0.94); }

body.light-mode:before, body.light-mode .video-bg:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%); -webkit-backdrop-filter: saturate(3); backdrop-filter: saturate(3); }

.app { background-color: var(--theme-bg-color); max-width: 1250px; max-height: 860px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; position: relative; width: 100%; border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 15px; font-weight: 500; }

.header { display: flex; align-items: center; flex-shrink: 0; height: 58px; width: 100%; border-bottom: 1px solid var(--border-color); padding: 0 30px; white-space: nowrap; } @media screen and (max-width: 480px) { .header { padding: 0 16px; } } .header-menu { display: flex; align-items: center; } .header-menu a { padding: 20px 30px; text-decoration: none; color: var(--inactive-color); border-bottom: 2px solid transparent; transition: 0.3s; } @media screen and (max-width: 610px) { .header-menu a:not(.main-header-link) { display: none; } } .header-menu a.is-active, .header-menu a:hover { color: var(--theme-color); border-bottom: 2px solid var(--theme-color); }

.notify { position: relative; } .notify:before { content: ""; position: absolute; background-color: #3a6df0; width: 6px; height: 6px; border-radius: 50%; right: 20px; top: 16px; } @media screen and (max-width: 1055px) { .notify { display: none; } }

.menu-circle { width: 15px; height: 15px; background-color: #f96057; border-radius: 50%; box-shadow: 24px 0 0 0 #f8ce52, 48px 0 0 0 #5fcf65; margin-right: 195px; flex-shrink: 0; } @media screen and (max-width: 945px) { .menu-circle { display: none; } }

.search-bar { height: 40px; display: flex; width: 100%; max-width: 400px; padding-left: 16px; border-radius: 4px; } .search-bar input { width: 100%; height: 100%; border: none; background-color: var(--search-bg); border-radius: 4px; font-family: var(--body-font); font-size: 15px; font-weight: 500; padding: 0 20px 0 40px; box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e"); background-size: 14px; background-repeat: no-repeat; background-position: 16px 48%; color: var(--theme-color); } .search-bar input::-moz-placeholder { font-family: var(--body-font); color: var(--inactive-color); font-size: 15px; font-weight: 500; } .search-bar input:-ms-input-placeholder { font-family: var(--body-font); color: var(--inactive-color); font-size: 15px; font-weight: 500; } .search-bar input::placeholder { font-family: var(--body-font); color: var(--inactive-color); font-size: 15px; font-weight: 500; }

.header-profile { display: flex; align-items: center; padding: 0 16px 0 40px; margin-left: auto; flex-shrink: 0; } .header-profile svg { width: 22px; color: #f9fafb; flex-shrink: 0; }

.notification { position: relative; } .notification-number { position: absolute; background-color: #3a6df0; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; color: #fff; right: -6px; top: -6px; } .notification + svg { margin-left: 22px; } @media screen and (max-width: 945px) { .notification + svg { display: none; } }

.profile-img { width: 32px; height: 32px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; border: 2px solid var(--theme-color); margin-left: 22px; }

.wide .header-menu, .wide .header-profile { display: none; } .wide .search-bar { max-width: 600px; margin: auto; transition: 0.4s; box-shadow: 0 0 0 1px var(--border-color); padding-left: 0; } .wide .menu-circle { margin-right: 0; }

.wrapper { display: flex; flex-grow: 1; overflow: hidden; }

.left-side { flex-basis: 240px; border-right: 1px solid var(--border-color); padding: 26px; overflow: auto; flex-shrink: 0; } @media screen and (max-width: 945px) { .left-side { display: none; } }

.side-wrapper + .side-wrapper { margin-top: 20px; }

.side-title { color: var(--inactive-color); margin-bottom: 14px; }

.side-menu { display: flex; flex-direction: column; white-space: nowrap; } .side-menu a { text-decoration: none; color: var(--theme-color); display: flex; align-items: center; font-weight: 400; padding: 10px; font-size: 14px; border-radius: 6px; transition: 0.3s; } .side-menu a:hover { background-color: var(--hover-menu-bg); } .side-menu svg { width: 16px; margin-right: 8px; }

.updates { position: relative; top: 0; right: 0; margin-left: auto; width: 18px; height: 18px; font-size: 11px; }

.main-header { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); height: 58px; flex-shrink: 0; } .main-header .header-menu { margin-left: 150px; } @media screen and (max-width: 1055px) { .main-header .header-menu { margin: auto; } } .main-header .header-menu a { padding: 20px 24px; }

.main-container { display: flex; flex-direction: column; flex-grow: 1; }

.menu-link-main { text-decoration: none; color: var(--theme-color); padding: 0 30px; } @media screen and (max-width: 1055px) { .menu-link-main { display: none; } }

.content-wrapper { display: flex; flex-direction: column; color: var(--theme-color); padding: 20px 40px; height: 100%; overflow: auto; background-color: var(--theme-bg-color); } @media screen and (max-width: 510px) { .content-wrapper { padding: 20px; } } .content-wrapper-header { display: flex; align-items: center; width: 100%; justify-content: space-between; background-image: url("https://www.transparenttextures.com/patterns/cubes.png"), linear-gradient(to right top, #cf4af3, #e73bd7, #f631bc, #fd31a2, #ff3a8b, #ff4b78, #ff5e68, #ff705c, #ff8c51, #ffaa49, #ffc848, #ffe652); border-radius: 14px; padding: 20px 40px; } @media screen and (max-width: 415px) { .content-wrapper-header { padding: 20px; } } .content-wrapper.overlay { pointer-events: none; transition: 0.3s; background-color: var(--overlay-bg); }

.overlay-app { width: 100%; height: 100%; position: fixed; left: 0; top: 0; pointer-events: all; background-color: rgba(36, 39, 59, 0.8); opacity: 0; visibility: hidden; transition: 0.3s; } .overlay-app.is-active { visibility: visible; opacity: 1; }

.img-content { font-weight: 500; font-size: 17px; display: flex; align-items: center; margin: 0; } .img-content svg { width: 28px; margin-right: 14px; }

.content-text { font-weight: 400; font-size: 14px; margin-top: 16px; line-height: 1.7em; color: #ebecec; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.content-wrapper-context { max-width: 350px; }

.content-button { background-color: #3a6df0; border: none; padding: 8px 26px; color: #fff; border-radius: 20px; margin-top: 16px; cursor: pointer; transition: 0.3s; white-space: nowrap; }

.content-wrapper-img { width: 186px; -o-object-fit: cover; object-fit: cover; margin-top: -25px; -o-object-position: center; object-position: center; } @media screen and (max-width: 570px) { .content-wrapper-img { width: 110px; } }

.content-section { margin-top: 30px; display: flex; flex-direction: column; } .content-section-title { color: var(--content-title-color); margin-bottom: 14px; } .content-section ul { display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-around; background-color: var(--content-bg); padding-left: 0; margin: 0; border-radius: 14px; border: 1px solid var(--theme-bg-color); cursor: pointer; } .content-section ul li { list-style: none; padding: 10px 18px; display: flex; align-items: center; font-size: 16px; width: 100%; height: 100%; white-space: nowrap; transition: 0.3s; } .content-section ul li:hover { background-color: var(--theme-bg-color); } .content-section ul li:hover:first-child { border-radius: 13px 13px 0 0; } .content-section ul li:hover:last-child { border-radius: 0 0 13px 13px; } .content-section ul li + li { border-top: 1px solid var(--border-color); } .content-section ul svg { width: 28px; border-radius: 6px; margin-right: 16px; flex-shrink: 0; }

.products { display: flex; align-items: center; width: 150px; } @media screen and (max-width: 480px) { .products { width: 120px; } }

.status { margin-left: auto; width: 140px; font-size: 15px; position: relative; } @media screen and (max-width: 700px) { .status { display: none; } } .status-circle { width: 6px; height: 6px; background-color: #396df0; position: absolute; border-radius: 50%; top: 4px; left: -20px; } .status-circle.green { background-color: #3bf083; } .status-button { font-size: 15px; margin-top: 0; padding: 6px 24px; } @media screen and (max-width: 390px) { .status-button { padding: 6px 14px; } } .status-button.open { background: none; color: var(--button-inactive); border: 1px solid var(--button-inactive); } .status-button:not(.open):hover { color: #fff; border-color: #fff; }

.content-button:not(.open):hover { background: #1e59f1; }

.menu { width: 5px; height: 5px; background-color: var(--button-inactive); border-radius: 50%; box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive); margin: 0 12px; }

@media screen and (max-width: 415px) { .adobe-product .menu { display: none; } } .dropdown { position: relative; height: 53px; width: 40px; top: -24px; display: flex; left: -5px; background: transparent; border: none; cursor: pointer; } .dropdown ul { position: absolute; background: var(--dropdown-bg); height: 110px; width: 120px; right: 0; top: 20px; pointer-events: none; opacity: 0; transform: translatey(10px); transition: all 0.4s ease; } .dropdown ul li a { text-decoration: none; color: var(--theme-color); font-size: 12px; }

.dropdown.is-active ul { opacity: 1; pointer-events: all; transform: translatey(25px); } .dropdown.is-active ul li:hover { background-color: var(--dropdown-hover); }

.button-wrapper { display: flex; align-items: center; justify-content: flex-end; width: 187px; margin-left: auto; } @media screen and (max-width: 480px) { .button-wrapper { width: auto; } }

.pop-up { position: absolute; padding: 30px 40px; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-y: auto; box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4); transition: all 0.3s; z-index: 10; background-color: var(--popup-bg); width: 500px; visibility: hidden; opacity: 0; border-radius: 6px; display: flex; flex-direction: column; white-space: normal; } @media screen and (max-width: 570px) { .pop-up { width: 100%; } } .pop-up.visible { visibility: visible; opacity: 1; } .pop-up__title { padding-bottom: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .pop-up__subtitle { white-space: normal; margin: 20px 0; font-size: 14px; font-weight: 400; line-height: 1.8em; } .pop-up__subtitle a { color: var(--theme-color); }

.content-button-wrapper .content-button.status-button.open.close { width: auto; }

.content-section .close { margin-right: 0; width: 24px; }

.checkbox-wrapper { display: flex; align-items: center; font-size: 14px; font-weight: 400; } .checkbox-wrapper + .checkbox-wrapper { margin: 20px 0 40px; }

.checkbox { display: none; }

.checkbox + label { display: flex; align-items: center; } .checkbox + label:before { content: ""; margin-right: 10px; width: 15px; height: 15px; border: 1px solid var(--theme-color); border-radius: 4px; cursor: pointer; flex-shrink: 0; }

.checkbox:checked + label:before { background-color: #3a6df0; border-color: #3a6df0; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e"); background-position: 50%; background-size: 12px; background-repeat: no-repeat; }

.content-button-wrapper { margin-top: auto; margin-left: auto; } .content-button-wrapper .open { margin-right: 8px; }

.apps-card { display: flex; align-items: center; flex-wrap: wrap; width: calc(100% + 20px); }

.app-card { display: flex; flex-direction: column; width: 100%; font-size: 16px; background-color: var(--content-bg); border-radius: 14px; border: 1px solid var(--theme-bg-color); padding: 20px; cursor: pointer; transition: 0.3s ease; } .app-card:hover { transform: scale(1.02); background-color: var(--theme-bg-color); } .app-card svg { width: 28px; border-radius: 6px; margin-right: 12px; flex-shrink: 0; } .app-card + .app-card { margin-left: 20px; } .app-card span { display: flex; align-items: center; } .app-card__subtext { font-size: 14px; font-weight: 400; line-height: 1.6em; margin-top: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; } .app-card-buttons { display: flex; align-items: center; margin-left: auto; margin-top: 16px; } @media screen and (max-width: 1110px) { .app-card { width: calc(50% - 20px); } .app-card:last-child { margin-top: 20px; margin-left: 0px; } } @media screen and (max-width: 565px) { .app-card { width: calc(100% - 20px); margin-top: 20px; } .app-card + .app-card { margin-left: 0; } }

::-webkit-scrollbar { width: 6px; border-radius: 10px; }

::-webkit-scrollbar-thumb { background: var(--scrollbar-bg); border-radius: 10px; }

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
Licence		Licence
Licence.md		Licence.md
QR.css		QR.css
QR.html		QR.html
README.md		README.md
learn.md		learn.md
qr.js		qr.js
url.css		url.css
url.html		url.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Licenses found

Repository files navigation

Praneet.github.io

QRGEN

QR Generator

About

Licenses found

Releases

Packages

Languages

License

Licenses found

PraneetBose/urlgen.github.io

Folders and files

Latest commit

History

Repository files navigation

Praneet.github.io

QRGEN

QR Generator

About

Topics

Resources

License

Licenses found

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages