Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

Recomendado

16 December 2024

Um código por smartfunction263

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>QR Code Generator | Code Traversal</title>
</head>
<body>
    <div class="box">
        <div class="qr-header">
            <h1>Generate QR Code</h1>
            <input type="text" placeholder="Type your text or URL" id="qr-text">
            <div>
            <label for="sizes">Select Size:</label>
            <select id="sizes">
                <option value="100">100x100</option>
                <option value="200">200x200</option>
                <option value="300">300x300</option>
                <option value="400">400x400</option>
                <option value="500">500x500</option>
                <option value="600">600x600</option>
                <option value="700">700x700</option>
                <option value="800">800x800</option>
                <option value="900">900x900</option>
                <option value="1000">1000x1000</option>
            </select>
        </div>
        </div>
        <div class="qr-body"></div>
        <div class="qr-footer">
            <a href="" id="generateBtn">Generate</a>
            <a href="" id="downloadBtn" download="QR_Code.png">Download</a>
        </div>
    </div>

CSS

:root{
    --bcg-color: #1a1a1a;
    --primary-color: #00b894;
    --border-radius: 12px;
    --secondary-color: #ffffff;
    --border-color: #2ecc71;
    --animation-duration: 0.5s;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bcg-color);
}

.box{
    background-color: var(--primary-color);
    padding: 30px;
    width: 400px;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qr-header h1{
    font-size: 26px;
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.qr-header input, select{
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    font-size: 18px;
    outline: none;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.qr-header input:focus, select:focus{
    border-color: var(--primary-color);
}

.qr-header label{
    color: var(--secondary-color);
    font-size: 20px;
}

.qr-header div{
    display: flex;
    justify-content: space-between;
}

.qr-footer{
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.qr-footer a{
    background-color: var(--secondary-color);
    text-decoration: none;
    font-size: 20px;
    padding: 14px 36px;
    margin-inline: 2px;
    color: var(--primary-color);
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.qr-footer a:hover{
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.qr-body{
    display: grid;
    place-items: center;
    padding:20px;
}

.qr-body img{
    max-width: 100%;
    max-height: 100%;
    margin-block: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color 0.3s ease;
}

.qr-body img:hover{
    border-color: var(--primary-color);
}

@media screen and (max-width:520px){
    .box{
        width: 80%;
    }
    .qr-footer a{
        padding: 12px;
        font-size: 16px;
    }
}

JS

const qrText = document.getElementById('qr-text');
const sizes = document.getElementById('sizes');
const generateBtn = document.getElementById('generateBtn');
const downloadBtn = document.getElementById('downloadBtn');
const qrContainer = document.querySelector('.qr-body');

let size = sizes.value;
generateBtn.addEventListener('click',(e)=>{
    e.preventDefault();
    isEmptyInput();
});

sizes.addEventListener('change',(e)=>{
    size = e.target.value;
    isEmptyInput();
});

downloadBtn.addEventListener('click', ()=>{
    let img = document.querySelector('.qr-body img');

if(img !== null){
        let imgAtrr = img.getAttribute('src');
        downloadBtn.setAttribute("href", imgAtrr);
    }
    else{
        downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`);
    }
});

Recomendado

Um código por smartfunction263

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS