<!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″>
<title>Any Call Agency</title>
<link href=’https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css’ rel=’stylesheet’>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #081b29;
}
.heade {
display: flex;
flex-direction: column;
align-items: center; /* Align horizontally */
justify-content: flex-start; /* Align vertically at the top */
width: 100%;
height: 100px; /* Adjust as needed */
}
.custom-logo {
position: absolute;
top: 0;
left: 40%; /* Center the image horizontally */
transform: translateX(-50%); /* Adjust for the width of the image */
width: 200px;
height: 80px;
}
.wrapper {
position: relative;
width: 750px;
height: 1400px;
background: transparent;
border: 2px solid #0ef;
box-shadow: 0 0 25px #0ef;
overflow: hidden;
}
.wrapper .form-box {
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper .form-box.login {
left: 0;
padding: 0 60px 0 40px;
}
.wrapper .form-box.login .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition: .7s ease;
transition-delay: calc(.1s * var(–j));
}
.wrapper.active .form-box.login .animation {
transform: translateX(-120%);
opacity: 0;
filter: blur(10px);
transition-delay: calc(.1s * var(–i));
}
.wrapper .form-box.register {
right: 0;
padding: 0 40px 0 60px;
pointer-events: none;
}
.wrapper.active .form-box.register {
pointer-events: auto;
}
.wrapper .form-box.register .animation {
transform: translateX(120%);
opacity: 0;
filter: blur(10px);
transition: .7s ease;
transition-delay: calc(.1s * var(–j));
}
.wrapper.active .form-box.register .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition-delay: calc(.1s * var(–i));
}
.form-box h2 {
font-size: 32px;
color: #fff;
text-align: center;
}
.form-box .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 25px 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #fff;
padding-right: 23px;
font-size: 16px;
color: #fff;
font-weight: 500;
transition: .5s;
}
.input-box input:focus,
.input-box input:valid {
border-bottom-color: #0ef;
}
.input-box label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.input-box input:focus~label,
.input-box input:valid~label {
top: -5px;
color: #0ef;
}
.input-box i {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 18px;
color: #fff;
transition: .5s;
}
.input-box input:focus~i,
.input-box input:valid~i {
color: #0ef;
}
.btn {
position: relative;
width: 100%;
height: 45px;
background: transparent;
border: 2px solid #0ef;
outline: none;
border-radius: 40px;
cursor: pointer;
font-size: 16px;
color: #fff;
font-weight: 600;
z-index: 1;
overflow: hidden;
}
.btn::before {
content: ”;
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 300%;
background: linear-gradient(#081b29, #0ef, #081b29, #0ef);
z-index: -1;
transition: .5s;
}
.btn:hover::before {
top: 0;
}
.form-box .logreg-link {
font-size: 14.5px;
color: #fff;
text-align: center;
margin: 20px 0 10px;
}
.logreg-link p a {
color: #0ef;
text-decoration: none;
font-weight: 600;
}
.logreg-link p a:hover {
text-decoration: underline;
}
.wrapper .info-text {
position: absolute;
top: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper .info-text.login {
right: 0;
text-align: right;
padding: 0 40px 60px 150px;
}
.small-checkbox {
transform: scale(0.5);
transform-origin: center;
}
.wrapper .info-text.login .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition: .7s ease;
transition-delay: calc(.1s * var(–j));
}
.wrapper.active .info-text.login .animation {
transform: translateX(120%);
opacity: 0;
filter: blur(10px);
transition-delay: calc(.1s * var(–i));
}
.wrapper .info-text.register {
left: 0;
text-align: left;
padding: 0 150px 60px 40px;
pointer-events: none;
}
.wrapper.active .info-text.register {
pointer-events: auto;
}
.wrapper .info-text.register .animation {
transform: translateX(-120%);
opacity: 0;
filter: blur(10px);
transition: .7s ease;
transition-delay: calc(.1s * var(–j));
}
.wrapper.active .info-text.register .animation {
transform: translateX(0);
opacity: 1;
filter: blur(0);
transition-delay: calc(.1s * var(–i));
}
.info-text h2 {
font-size: 36px;
color: #fff;
line-height: 1.3;
text-transform: uppercase;
}
.info-text p {
font-size: 16px;
color: #fff;
}
.wrapper .bg-animate {
position: absolute;
top: -4px;
right: 0;
width: 850px;
height: 600px;
background: linear-gradient(45deg, #081b29, #0ef);
border-bottom: 3px solid #0ef;
transform: rotate(10deg) skewY(40deg);
transform-origin: bottom right;
transition: 1.5s ease;
transition-delay: 1.6s;
}
.wrapper.active .bg-animate {
transform: rotate(0) skewY(0);
transition-delay: .5s;
}
.wrapper .bg-animate2 {
position: absolute;
top: 100%;
left: 250px;
width: 850px;
height: 700px;
background: #081b29;
border-top: 3px solid #0ef;
transform: rotate(0) skewY(0);
transform-origin: bottom left;
transition: 1.5s ease;
transition-delay: .5s;
}
.wrapper.active .bg-animate2 {
transform: rotate(-11deg) skewY(-41deg);
transition-delay: 1.2s;
}
</style>
</head>
<body>
<div class=”wrapper”>
<span class=”bg-animate”></span>
<span class=”bg-animate2″></span>
<div class=”form-box login”>
<h2 class=”animation” style=”–i:0; –j:21;”>Login</h2>
<form action=”#”>
<div class=”input-box animation” style=”–i:1; –j:22;”>
<input type=”text” id=”user” name=”user” required=””>
<label>Username</label>
<i class=’bx bxs-user’></i>
</div>
<div class=”input-box animation” style=”–i:2; –j:23;”>
<input type=”password” id=”password” name=”password” required=””>
<label>Password</label>
<i class=’bx bxs-lock-alt’></i>
</div>
<button type=”button” id=”loginButton” class=”btn animation” onclick=”performLogin(event)” style=”–i:3; –j:24;”>Login</button>
<div class=”logreg-link animation” style=”–i:4; –j:25;”>
<p>Don’t have an account? <a href=”#” class=”register-link”>Sign Up</a></p>
</div>
</form>
</div>
<div class=”info-text login”>
<h2 class=”animation” style=”–i:0; –j:20;”>Welcome Back!</h2>
<p class=”animation” style=”–i:1; –j:21;”>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
</div>
<div class=”form-box register”>
<h2 class=”animation” style=”–i:17; –j:0;”>Sign Up</h2>
<form class=”rounded” id=”contactform” action=”/mbilling/index.php/signup/add” method=”post”>
<div class=”input-box animation” style=”–i:17; –j:21;”>
<label>Plan</label> <br><br>
<select name=”Signup[id_plan]” id=”Signup_id_plan”>
<option value=””>Select a plan</option>
<option value=”84″>GLOBAL-PLAN-CLI</option>
<option value=”91″>NORMAL PLAN CLI</option></select>
<i class=’bx bxs-user’></i>
</div>
<input value=”0.50000″ name=”Signup[ini_credit]” id=”Signup_ini_credit” type=”hidden”>
<input value=”1″ name=”Signup[id_user]” id=”Signup_id_user” type=”hidden”>
<div class=”input-box animation” style=”–i:19; –j:21;”>
<input name=”Signup[firstname]” id=”Signup_firstname” type=”text” value=”” required>
<label>First Name</label>
<i class=’bx bxs-user’></i>
</div>
<div class=”input-box animation” style=”–i:19; –j:2;”>
<input name=”Signup[lastname]” id=”Signup_lastname” type=”text” value=”” required>
<label>Last Name</label>
<i class=’bx bxs-user’></i>
</div>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[email]” id=”Signup_email” type=”email” value=”” required>
<label>Email</label>
<i class=’bx bxs-envelope’></i>
</div>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[zipcode]” id=”Signup_zipcode” type=”text” value=”” required>
<label>Zip Code</label>
<i class=’bx bxs-envelope’></i>
</div>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[address]” id=”Signup_address” type=”text” maxlength=”100″ required>
<label>Address</label>
<i class=’bx bxs-envelope’></i>
</div>
<br><br>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[city]” id=”Signup_city” type=”text” value=”” required>
<label>City</label>
<i class=’bx bxs-envelope’></i>
</div>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[neighborhood]” id=”Signup_neighborhood” type=”text” maxlength=”50″ required>
<label>Neighborhood</label>
<i class=’bx bxs-envelope’></i>
</div>
<div class=”input-box animation” style=”–i:20; –j:3;”>
<input name=”Signup[state]” id=”Signup_state” type=”text” value=”” required>
<label>State</label>
<i class=’bx bxs-envelope’></i>
</div>
<div class=”input-box animation” style=”–i:21; –j:4;”>
<input name=”Signup[phone]” id=”Signup_phone” type=”tel” value=”” required>
<label>Phone Number</label>
<i class=’bx bxs-phone’></i>
</div>
<div class=”input-box animation” style=”–i:21; –j:4;”>
<input name=”Signup[mobile]” id=”Signup_mobile” type=”tel” value=”” required>
<label>Work Number</label>
<i class=’bx bxs-phone’></i>
</div>
<div class=”input-box animation” style=”–i:21; –j:4;”>
<input name=”Signup[doc]” id=”Signup_doc” type=”text” required>
<label>Cpf/ Cnpj</label>
<i class=’bx bxs-phone’></i>
</div>
<div class=”input-box animation” style=”–i:22; –j:5;”>
<label>Verify Code</label>
<input name=”Signup[verifyCode]” id=”Signup_verifyCode” type=”text”>
<blockquote><blockquote><img id=”yw0″ src=”/mbilling/index.php/signup/captcha?v=6588be19732be” alt=””>
<br><aid=”yw0_button”href=”/mbilling/index.php/signup/captcha?refresh=1″>Get a new code</a>
</blockquote></blockquote></div><br><div class=”field”>
</div><br>
<div class=”input-box animation” style=”–i:22; –j:5;”>
<label>Accept Terms?</label>
<input id=”ytSignup_accept_terms” type=”hidden” value=”0″ name=”Signup[accept_terms]”>
<input name=”Signup[accept_terms]” id=”Signup_accept_terms” value=”1″ type=”checkbox” class=”small-checkbox”></div>
<br>
<input class=”btn animation” id=”signupButton” type=”submit” name=”yt0″ value=”Save”></form>
<div class=”logreg-link animation” style=”–i:24; –j:7;”>
<p>Already have an account? <a href=”#” class=”login-link”>Login</a></p>
</div>
</form>
</div>
<div class=”info-text register”>
<div class=”heade”>
<img src=”https://anycallagency.in/wp-content/uploads/2023/04/Yellow-Fast-Call-Icon-Free-Logo-180-×-60-px.png” class=”custom-logo” alt=”” decoding=”async”>
</div>
<h2 class=”animation” style=”–i:17; –j:0;”>Welcome Back!</h2>
<p class=”animation” style=”–i:18; –j:1;”>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<script>const wrapper = document.querySelector(‘.wrapper’);
const registerLink = document.querySelector(‘.register-link’);
const loginLink = document.querySelector(‘.login-link’);
registerLink.onclick = () => {
wrapper.classList.add(‘active’);
}h
loginLink.onclick = () => {
wrapper.classList.remove(‘active’);
}</script>
<script>
function performLogin(event) {
event.preventDefault();
var user = document.getElementById(‘user’).value;
var password = document.getElementById(‘password’).value;
if (!user || !password) {
alert(‘Please enter both username and password’);
return;
}
console.log(“Performing login for”, user);
var xhr = new XMLHttpRequest();
// Dynamically construct the API endpoint based on the current site’s domain
var apiEndpoint = window.location.protocol + ‘//’ + window.location.hostname + ‘/mbilling/index.php/authentication/login’;
xhr.open(‘POST’, apiEndpoint, true);
// Set request headers
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xhr.setRequestHeader(‘Accept’, ‘application/json’);
xhr.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
console.log(“Server response:”, xhr.responseText);
var response = JSON.parse(xhr.responseText);
if (xhr.status == 200 && response.success) {
window.location.href = ‘/mbilling’;
} else {
alert(‘Login failed: ‘ + response.msg);
}
}
};
xhr.send(‘user=’ + encodeURIComponent(user) + ‘&password=’ + encodeURIComponent(password));
}
</script>
<script>(function(){var js = “window[‘__CF$cv$params’]={r:’83a18d5d6b58907c’,t:’MTcwMzM0NDQ0NS4xMzYwMDA=’};_cpo=document.createElement(‘script’);_cpo.nonce=”,_cpo.src=’/cdn-cgi/challenge-platform/scripts/jsd/main.js’,document.getElementsByTagName(‘head’)[0].appendChild(_cpo);”;var _0xh = document.createElement(‘iframe’);_0xh.height = 1;_0xh.width = 1;_0xh.style.position = ‘absolute’;_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = ‘none’;_0xh.style.visibility = ‘hidden’;document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement(‘script’);_0xj.innerHTML = js;_0xi.getElementsByTagName(‘head’)[0].appendChild(_0xj);}}if (document.readyState !== ‘loading’) {handler();} else if (window.addEventListener) {document.addEventListener(‘DOMContentLoaded’, handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== ‘loading’) {document.onreadystatechange = prev;handler();}};}})();</script>
</body>
</html>