<!--
AUTOR: MANUEL MÍGUEZ LIMÉNS
FECHA: 26/12/2023
TÍTULO: GENERADOR DE CÓDIGO QR
-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Generador de QR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body { display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
background: #000000;
justify-content: center;
}
.wrapper { height: 265px;
max-width: 410px;
background: linear-gradient(#ffffff, #48b0dc);
border-radius: 7px;
padding: 20px 25px 0;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 3px solid white;
}
.wrapper.active { height: 530px;
}
header h1 { font-size: 21px;
font-weight: 900;
color: rgb(0, 81, 255);
}
.wrapper .form { margin: 20px 0 25px;
}
.form :where(input, button) { width: 100%;
height: 55px;
border: none;
outline: none;
border-radius: 5px;
transition: 0.1s ease;
}
.form input { font-size: 12px;
padding: 0 17px;
border: 1px solid #999;
}
.form input:focus { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
}
.form input::placeholder { color: #999;
}
.form button { color: #fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background: #3498db;
}
.form button:hover { color: #3498db;
background: #fff;
}
.qr-code { opacity: 0;
display: flex;
padding: 33px 0;
border-radius: 5px;
align-items: center;
pointer-events: none;
justify-content: center;
border: 1px solid #ccc;
}
.wrapper.active .qr-code { opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.qr-code img { width: 170px;
}
@media (max-width: 430px) { .wrapper { height: 255px;
padding: 16px 20px;
}
.wrapper.active { height: 510px;
}
.form :where(input, button) { height: 52px;
}
.qr-code img { width: 160px;
}
}
</style>
<body>
<div class="wrapper">
<header>
<h1>QR Code Generator</h1>
</header>
<div class="form">
<input type="text" spellcheck="false" placeholder="Enter text or url" />
<button>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code" />
</div>
</div>
<script>
const wrapper = document.querySelector(".wrapper"), qrInput = wrapper.querySelector(".form input"), generateBtn = wrapper.querySelector(".form button"), qrImg = wrapper.querySelector(".qr-code img"); let preValue;
generateBtn.addEventListener("click", () => { let qrValue = qrInput.value.trim();
if (!qrValue || preValue === qrValue) return;
preValue = qrValue;
generateBtn.innerText = "Generating QR Code...";
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`; qrImg.addEventListener("load", () => { wrapper.classList.add("active"); generateBtn.innerText = "Generate QR Code";
});
});
qrInput.addEventListener("keyup", () => { if (!qrInput.value.trim()) { wrapper.classList.remove("active"); preValue = "";
}
});
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 5 (0)
No hay comentarios