<?php
session_start();
include("admin/includes/config.php");
?>
<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CCI - MI Portal</title>
<link rel="icon" type="image/png" href="./admin/assets/images/cci_favicon.png" sizes="16x16">
<!-- remix icon font css -->
<link rel="stylesheet" href="./admin/assets/css/remixicon.css">
<!-- BootStrap css -->
<link rel="stylesheet" href="./admin/assets/css/lib/bootstrap.min.css">
<!-- Apex Chart css -->
<link rel="stylesheet" href="./admin/assets/css/lib/apexcharts.css">
<!-- Data Table css -->
<link rel="stylesheet" href="./admin/assets/css/lib/dataTables.min.css">
<!-- Text Editor css -->
<link rel="stylesheet" href="./admin/assets/css/lib/editor-katex.min.css">
<link rel="stylesheet" href="./admin/assets/css/lib/editor.atom-one-dark.min.css">
<link rel="stylesheet" href="./admin/assets/css/lib/editor.quill.snow.css">
<!-- Date picker css -->
<link rel="stylesheet" href="./admin/assets/css/lib/flatpickr.min.css">
<!-- Calendar css -->
<link rel="stylesheet" href="./admin/assets/css/lib/full-calendar.css">
<!-- Vector Map css -->
<link rel="stylesheet" href="./admin/assets/css/lib/jquery-jvectormap-2.0.5.css">
<!-- Popup css -->
<link rel="stylesheet" href="./admin/assets/css/lib/magnific-popup.css">
<!-- Slick Slider css -->
<link rel="stylesheet" href="./admin/assets/css/lib/slick.css">
<!-- prism css -->
<link rel="stylesheet" href="./admin/assets/css/lib/prism.css">
<!-- file upload css -->
<link rel="stylesheet" href="./admin/assets/css/lib/file-upload.css">
<link rel="stylesheet" href="./admin/assets/css/lib/audioplayer.css">
<!-- main css -->
<link rel="stylesheet" href="./admin/assets/css/style.css">
<style>
#password-strength {
margin-top: 10px;
height: 8px;
background-color: #e0e0e0;
border-radius: 5px;
}
#password-strength .strength-bar {
height: 100%;
width: 0%;
background-color: red;
border-radius: 5px;
transition: width 0.3s ease-in-out;
}
#strength-message {
display: block;
margin-top: 5px;
color: #6c757d;
}
</style>
</head>
<body>
<section class="auth bg-base d-flex flex-wrap">
<div class="auth-left d-lg-block d-none">
<div class="d-flex align-items-center flex-column h-100 justify-content-center">
<img src="./admin/assets/images/auth/auth_image2.png" alt="">
</div>
</div>
<div class="auth-right py-32 px-24 d-flex flex-column justify-content-center">
<div class="max-w-464-px mx-auto w-100">
<div>
<a href="index.php" class="mb-40 max-w-290-px">
<img src="./admin/assets/images/cci_logo.png" alt="">
</a>
<h6 class="mb-12" style="font-size: 22px !important;">Register On Our Research Portal</h6>
</div>
<form action="registration.php" method="POST">
<div class="icon-field mb-16">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="f7:person"></iconify-icon>
</span>
<input required name="user_name" type="text" class="form-control h-56-px bg-neutral-50 radius-12" placeholder="Username">
</div>
<div class="icon-field mb-16">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="mage:email"></iconify-icon>
</span>
<input required name="user_email" type="email" class="form-control h-56-px bg-neutral-50 radius-12" placeholder="Email">
</div>
<div class="mb-20">
<div class="position-relative ">
<div class="icon-field">
<span class="icon top-50 translate-middle-y">
<iconify-icon icon="solar:lock-password-outline"></iconify-icon>
</span>
<input required name="user_password" type="password" class="form-control h-56-px bg-neutral-50 radius-12" id="your-password" placeholder="Password">
</div>
<span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#your-password"></span>
</div>
<!-- Password strength meter -->
<div id="password-strength">
<div class="strength-bar"></div>
</div>
<span id="strength-message" class="mt-12 text-sm text-secondary-light">Your password must have at least 8 characters</span>
</div>
<?php
if (isset($_SESSION['error'])) {
echo "<div class='alert alert-danger alert-dismissible fade show' role='alert'>
" . $_SESSION['error'] . "
<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
</div>";
unset($_SESSION['error']);
}
if (isset($_SESSION['success'])) {
echo "<div class='alert alert-success alert-dismissible fade show' role='alert'>
" . $_SESSION['success'] . "
<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
</div>";
unset($_SESSION['success']);
}
?>
<button type="submit" class="btn btn-primary text-sm btn-sm px-12 py-16 w-100 radius-12 mt-32"> Sign Up</button>
<div class="mt-32 text-center text-sm">
<p class="mb-0">Already have an account? <a href="index.php" class="text-primary-600 fw-semibold">Sign In</a></p>
</div>
</form>
</div>
</div>
</section>
<!-- jQuery library js -->
<script src="./admin/assets/js/lib/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js -->
<script src="./admin/assets/js/lib/bootstrap.bundle.min.js"></script>
<!-- Apex Chart js -->
<!-- <script src="./admin/assets/js/lib/apexcharts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- Data Table js -->
<script src="./admin/assets/js/lib/dataTables.min.js"></script>
<!-- Iconify Font js -->
<script src="./admin/assets/js/lib/iconify-icon.min.js"></script>
<!-- jQuery UI js -->
<script src="./admin/assets/js/lib/jquery-ui.min.js"></script>
<!-- Vector Map js -->
<script src="./admin/assets/js/lib/jquery-jvectormap-2.0.5.min.js"></script>
<script src="./admin/assets/js/lib/jquery-jvectormap-world-mill-en.js"></script>
<!-- Popup js -->
<script src="./admin/assets/js/lib/magnifc-popup.min.js"></script>
<!-- Slick Slider js -->
<script src="./admin/assets/js/lib/slick.min.js"></script>
<!-- prism js -->
<script src="./admin/assets/js/lib/prism.js"></script>
<!-- file upload js -->
<script src="./admin/assets/js/lib/file-upload.js"></script>
<!-- audioplayer -->
<script src="./admin/assets/js/lib/audioplayer.js"></script>
<!-- main js -->
<script src="./admin/assets/js/app.js"></script>
<!-- jQuery, Bootstrap, and SweetAlert2 -->
<script src="./admin/assets/js/lib/jquery-3.7.1.min.js"></script>
<script src="./admin/assets/js/lib/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<?php
if (isset($_SESSION['registered'])) {
echo "
<script>
Swal.fire({
title: 'Success!',
text: '" . $_SESSION['registered'] . "',
icon: 'success',
showConfirmButton: false,
timer: 3000
}).then(function() {
window.location = 'index.php'; // Redirect after SweetAlert is closed
});
</script>
";
unset($_SESSION['registered']); // Remove the message after displaying it
}
?>
<script>
// ================== Password Show Hide Js Start ==========
function initializePasswordToggle(toggleSelector) {
$(toggleSelector).on('click', function() {
$(this).toggleClass("ri-eye-off-line");
var input = $($(this).attr("data-toggle"));
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
}
// Call the function
initializePasswordToggle('.toggle-password');
// ========================= Password Show Hide Js End ===========================
document.getElementById('your-password').addEventListener('input', function() {
var password = this.value;
var strengthBar = document.querySelector('#password-strength .strength-bar');
var strengthMessage = document.getElementById('strength-message');
var strength = 0;
// Check password strength
if (password.length >= 8) strength++; // Minimum 8 characters
if (/[A-Z]/.test(password)) strength++; // Contains uppercase letters
if (/[a-z]/.test(password)) strength++; // Contains lowercase letters
if (/\d/.test(password)) strength++; // Contains digits
if (/[@$!%*?&]/.test(password)) strength++; // Contains special characters
// Update strength bar width and color
switch (strength) {
case 0:
strengthBar.style.width = '0%';
strengthBar.style.backgroundColor = 'red';
strengthMessage.textContent = 'Your password must have at least 8 characters';
break;
case 1:
strengthBar.style.width = '20%';
strengthBar.style.backgroundColor = 'red';
strengthMessage.textContent = 'Very Weak';
break;
case 2:
strengthBar.style.width = '40%';
strengthBar.style.backgroundColor = 'orange';
strengthMessage.textContent = 'Weak';
break;
case 3:
strengthBar.style.width = '60%';
strengthBar.style.backgroundColor = 'yellow';
strengthMessage.textContent = 'Fair';
break;
case 4:
strengthBar.style.width = '80%';
strengthBar.style.backgroundColor = 'lightgreen';
strengthMessage.textContent = 'Good';
break;
case 5:
strengthBar.style.width = '100%';
strengthBar.style.backgroundColor = 'green';
strengthMessage.textContent = 'Strong';
break;
}
});
window.setTimeout(function() {
var alerts = document.querySelectorAll('.alert');
alerts.forEach(function(alert) {
var bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 4000); // 4000ms = 4 seconds
</script>
</body>
</html>