sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

Captcha design

Browse source
This commit is contained in:
olcxja 2026-04-29 00:16:00 +02:00
commit cf8116b218
2 changed files with 98 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

115
login/index.html
View file

@ -15,36 +15,58 @@
justify-content: center;
align-items: center;
background-color: var(--main-bg-color);
display: flex;
display: flex;
height: 100dvh;
margin: 0;
}
.auth-card {
background-color: rgba(255, 255, 255, 0.015);
background-color: rgba(255, 255, 255, 0.015);
border: var(--border-width) solid var(--light-border-color);
border-radius: 1.2rem;
width: 100%;
max-width: 24rem;
overflow: hidden;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
overflow: hidden;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}
.auth-container {
display: flex;
width: 200%;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
width: 300%;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.auth-box {
width: 50%;
width: 33.333%;
display: flex;
flex-direction: column;
padding: 2.5rem 2rem;
padding: 2.5rem 2rem;
}
.show-register {
transform: translateX(-50%);
transform: translateX(-33.333%);
}
.show-captcha {
transform: translateX(-66.666%);
}
.captcha-img {
width: 100%;
background-color: #222;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
border: var(--border-width) solid var(--light-border-color);
border-radius: 1.2rem;
overflow: hidden;
}
.captcha-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.auth-header {
@ -92,7 +114,7 @@
width: 100%;
margin: 0 !important;
}
.submit-button {
margin: 1.5rem 0 0 0 !important;
@ -104,9 +126,11 @@
border: none;
font-size: 1.05rem;
}
button:hover {
background-color: rgba(255, 255, 255, 0.5);
}
.footer-links {
text-align: center;
margin-top: 2rem;
@ -146,7 +170,7 @@
<div class="auth-box" id="login-box">
<div class="auth-header">
<h1>Larpix</h1>
<p>Sign in to your secure instance.</p>
<p>Sign in to your larpix instance.</p>
</div>
<form id="form-login">
@ -180,7 +204,7 @@
<div class="auth-box" id="register-box">
<div class="auth-header">
<h1>Join Larpix</h1>
<p>Start your encrypted journey today.</p>
<p>Create new larpix account.</p>
</div>
<form id="form-register">
@ -216,29 +240,80 @@
</div>
</div>
<div class="auth-box" id="captcha-box">
<div class="auth-header">
<h1>Verify</h1>
<p>Prove you are a human.</p>
</div>
<div class="captcha-img">
<img src="https://miro.medium.com/0*obnHri9w__4Cmhbj.jpg" alt="Captcha" id="captcha-image-src">
</div>
<form id="form-captcha">
<div class="input-group">
<label for="captcha-input">Enter Code</label>
<input type="text" id="captcha-input" placeholder="Type what you see" autocomplete="off">
</div>
<button type="submit" class="submit-button">
Verify
</button>
</form>
<div class="footer-links">
<span class="footer-link-toggle" id="back-to-reg">
<strong>Back to registration</strong>
</span>
</div>
</div>
</div>
</div>
<script src="../main.js"></script>
<script>
document.getElementById("reg-host").value = window.location.hostname;
document.getElementById("login-host").value = window.location.hostname;
const container = document.getElementById('auth-container');
const toRegister = document.getElementById('to-register');
const toLogin = document.getElementById('to-login');
const backToReg = document.getElementById('back-to-reg');
const formLogin = document.getElementById('form-login');
const formRegister = document.getElementById('form-register');
const formCaptcha = document.getElementById('form-captcha');
toRegister.addEventListener('click', () => {
container.classList.add('show-register');
container.className = 'auth-container show-register';
});
toLogin.addEventListener('click', () => {
container.classList.remove('show-register');
container.className = 'auth-container';
});
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
console.log("Form submitted. Implement auth logic using main.js functions.");
});
backToReg.addEventListener('click', () => {
container.className = 'auth-container show-register';
});
formLogin.addEventListener('submit', (e) => {
e.preventDefault();
console.log("Login");
});
formRegister.addEventListener('submit', (e) => {
e.preventDefault();
container.className = 'auth-container show-captcha';
});
formCaptcha.addEventListener('submit', (e) => {
e.preventDefault();
const captchaValue = document.getElementById('captcha-input').value;
if(captchaValue) {
alert("Verify " + captchaValue);
}
});
</script>
</body>

3
main.js
View file

@ -1,3 +1,6 @@
var url = `${window.location.protocol}//${window.location.hostname}`;
var params = new URLSearchParams(window.location.search);
const collapseDmsBtn = document.getElementById("collapse-dms");
const sidebarHome = document.getElementById("sidebar-home");