Skip to content

Instantly share code, notes, and snippets.

@s-a-ng

s-a-ng/discord-login-page.markdown

Created January 28, 2023 18:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save s-a-ng/ffb52987bc069c0df80a6d1f63e69f4e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save s-a-ng/ffb52987bc069c0df80a6d1f63e69f4e to your computer and use it in GitHub Desktop.
Download ZIP
Discord Login page
Raw
discord-login-page.markdown

Discord Login page

A work in progress discord Login page. Planning to make it responsive and add extra features

A Pen by Yeshaya on CodePen.

License.

Raw
index.html
<canvas id="svgBlob"></canvas>
<div class="position">
<form class="container">
<div class="centering-wrapper">
<div class="section1 text-center">
<div class="primary-header">Welcome back!</div>
<div class="secondary-header">We're so excited to see you again!</div>
<div class="input-position">
<div class="form-group">
<h5 class="input-placeholder" id="email-txt">Email<span class="error-message" id="email-error"></span></h5>
<input type="email" required="true" name="logemail" class="form-style" id="logemail" autocomplete="off" style="margin-bottom: 20px;">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group">
<h5 class="input-placeholder" id="pword-txt">Password<span class="error-message" id="password-error"></span></h5>
<input type="password" required="true" name="logpass" class="form-style" id="logpass" autocomplete="on">
<i class="input-icon uil uil-lock-alt"></i>
</div>
</div>
<div class="password-container"><a href="#" class="link">Forgot your password?</a></div>
<div class="btn-position">
<a href="#" class="btn">login</a>
</div>
</div>
<div class="horizontalSeparator"></div>
<div class="qr-login">
<div class="qr-container">
<img class="logo" src="https://cdn.discordapp.com/attachments/742854174324031528/771346778356318248/ChallengerCarl_2.png"/>
<canvas id="qr-code"></canvas>
</div>
<div class="qr-pheader">Log in with QR Code</div>
<div class="qr-sheader">Scan this with the <strong>scanner app </strong>to log in instantly.</div>
</div>
</div>
</form>
</div>
Raw
script.js
const email = document.getElementById("logemail");
const password = document.getElementById("logpass");
const login = document.querySelector(".btn");
const ptxt = document.getElementById("pword-txt");
const etxt = document.getElementById("email-txt");
const Eerror = document.getElementById("email-error");
const perror = document.getElementById("password-error");
const input = document.querySelector(".form-style");
const container = document.querySelector(".container");
const esearch = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
const psearch = /[a-z]{8,32}/g;
login.addEventListener('click', (e) => {
if(!password.value.match(psearch)){
password.focus();
e.preventDefault();
password.style.borderColor = "#ec4846";
ptxt.style.color = "#ec4846";
perror.innerText = " - Password should be between 8 and 32 characters";
}
else if(email.value === "" || !email.value.match(esearch)){
email.focus();
e.preventDefault();
email.style.borderColor = "#ec4846";
etxt.style.color = "#ec4846";
Eerror.innerText = " - This is not a valid email address";
}else{
email.value = "";
password.value = "";
container.style.animation = "jump .3s linear";
container.addEventListener('animationend', () => {
container.style.display = "none";
canvas.style.transform = "translate(0vw)";
// setTimeout(() => {
user.login = true;
//}, 1000)
})
}
setTimeout(() => {
ptxt.style.color = "#919296";
etxt.style.color = "#919296";
perror.innerText = "";
Eerror.innerText = "";
email.style.borderColor = "";
password.style.borderColor = "";
}, 2500)
});
const canvas = document.getElementById('svgBlob');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let numParticles = 20;
let particles = [];
const colors = ["#1d1e22", "#7d8087", "#5f6988"];
const mouse = {
x: null
}
let user= {
login: false
}
class Particle {
constructor(){
this.x = Math.random() * canvas.width;
this.y = canvas.height + (Math.random() * 200);
this.radius = (Math.random() * 2) + 2;
this.speedX = (Math.random() * 2);
this.moveRight = this.x + this.speedX;
this.moveLeft = this.x - this.speedX;
this.speedY = Math.random() * 0.5;
this.color = colors[Math.floor(Math.random() * 3)];
}
draw(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
update(){
this.draw();
if(!user.login){
this.y -= this.speedY;
}else {
this.y -= 10;
}
if(this.y <= canvas.height){
if(mouse.x > canvas.width/2){
this.x = this.moveRight;
}else {
this.x = this.moveLeft;
}
}
}
}
function setup(){
for (let i = 0; i < numParticles; i++){
particles.push(new Particle());
}
}
window.addEventListener('mousemove', (e) => {
mouse.x = e.x;
})
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((particle, index) => {
particle.update();
if(particle.y + particle.radius < 0){
setTimeout(() => {
particles.splice(index, 1);
},0)
if(!user.login){
particles.push(new Particle());
}
}
})
}
setup();
animate();
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
var qr;
(function() {
qr = new QRious({
element: document.getElementById('qr-code'),
size: 170,
value: 'Paste a link or text over here to create a QR Code for it'
});
})();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
Raw
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
background-image: url("https://wallpaperaccess.com/full/3053366.png");
background-size: cover;
background-repeat: no-repeat;
font-family: 'Whitney', sans-serif;
text-rendering: optimizeLegibility;
user-select: none;
}
::-webkit-scrollbar{
display: none;
}
#svgBlob{
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
background: transparent;
transition: 1s;
}
.position{
position: absolute;
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
}
.container{
width: 784px;
max-width: 90vw;
padding: 32px;
background-color: #2a2b38;
background: #363940;
border-radius: 6px;
left: 0;
top: 0;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
flex-grow: 1;
display: grid;
place-items: center;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
}
.centering-wrapper{
width: 100%;
text-align: center;
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
flex: 1 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: flex;
}
.section1{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.primary-header{
color: #fff;
font-size: 24px;
line-height: 30px;
font-weight: 600;
margin-bottom: 8px;
}
.secondary-header{
color: #a2a3a7;
font-size: 16px;
line-height: 20px;
}
.input-position{
margin-top: 20px;
}
.form-group{
width: 100%;
text-align: left;
}
.input-placeholder{
color: #919296;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-transform: uppercase;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
cursor: default;
}
.error-message{
color: #ec4846;
font-style: italic;
text-transform: none;
font-size: 12px;
font-weight: 100;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
transition: all 0.2s linear;
}
.form-style {
position: relative;
padding: 10px;
height: 40px;
width: 414px;
max-width: 80vw;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #c4c3ca;
background-color: #323338;
border: 1px solid #282a2e;
border-radius: 3px;
outline: none;
-webkit-transition: all 200ms linear;
transition: border-color .2s ease-in-out;
}
.form-style:hover{
border-color: #000;
}
.form-style:focus,
.form-style:active {
border-color: #7289d9;
}
.form-style:active .input-placeholder{
color: #7289d9;
}
.btn-position{
width: 100%;
display: grid;
place-items: center;
}
.btn{
text-decoration: none;
border-radius: 4px;
height: 44px;
width: 100%;
margin-bottom: 10px;
font-size: 13px;
font-weight: 500;
text-transform: capitalize;
transition: all 200ms linear;
letter-spacing: 1px;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
border: none;
outline: none;
background-color: #7289d9;
color: white;
cursor: pointer;
}
.btn:hover{
background-color: #677bc4;
box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.password-container {
display: block;
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
margin-top: 4px;
width: 100%;
height: auto;
padding: 2px 90% 2px 0px;
position: relative;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
box-sizing: border-box;
background: none;
border: none;
border-radius: 3px;
font-size: 14px;
font-weight: 500;
line-height: 16px;
}
.link{
color: #7289da;;
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 1.7;
margin: 0 auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.link:hover{
text-decoration: underline;
}
.horizontalSeparator{
margin: 0 2.5vw;
border: 1px solid #363940;
}
.qr-login{
width: 240px;
height: 344px;
overflow: hidden;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
vertical-align: baseline;
}
.qr-container{
display: flex;
width: 176px;
height: 176px;
border-radius: 2px;
background: #fff;
position: relative;
margin: 30px 0px 32px 0px;
justify-content:center;
align-items: center;
}
.logo{
width: 48px;
height: 48px;
position: absolute;
background-blend-mode: overlay;
}
.qr-code{
position: absolute;
}
.qr-pheader{
font-weight: 600;
margin-bottom: 8px;
color: #fff;
font-size: 24px;
line-height: 30px;
}
.qr-sheader{
font-size: 16px;
line-height: 20px;
color: #a2a3a7;
}
@media only screen and (max-width: 768px){
body{
background-position: 0px 0px;
}
svgBlob{
top: 50;
left: 0;
transform: translate(0, -50%);
}
.qr-login{
display: none;
}
.horizontalSeparator{
display: none;
}
.container{
padding: 20px;
}
}
@keyframes jump{
0%{
transform: translateY(0px);
opacity: 1;
}
50%{
transform: translateY(10px);
}
75%{
opacity: 0.5;
}
100%{
transform: translateY(-70px);
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment