<?php
// Enable error reporting for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Start session
session_start();
// Check if user is already logged in
if (isset($_SESSION['user_id'])) {
header("Location: index.php");
exit;
}
// Include database configuration
require_once 'config/database.php';
// include 'sendmail.php'; // Include the sendmail function
// Try to fetch settings from database
try {
$settings_query = "SELECT * FROM site_settings";
$settings_result = $conn->query($settings_query);
if ($settings_result && $settings_result->num_rows > 0) {
while ($row = $settings_result->fetch_assoc()) {
if ($row['setting_key'] == 'site_logo') {
$site_logo = $row['setting_value'];
} else if ($row['setting_key'] == 'site_name') {
$site_name = $row['setting_value'];
}
}
}
} catch (Exception $e) {
error_log("Error fetching site settings: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password - Popular Computer Institute</title>
<link rel="icon" href="$site_logo" type="image/png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
overflow: hidden;
position: relative;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.forgot-container {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
padding: 40px;
width: 100%;
max-width: 400px;
backdrop-filter: blur(10px);
transform: translateY(0);
transition: transform 0.3s ease;
}
.forgot-container:hover {
transform: translateY(-5px);
}
.forgot-header {
text-align: center;
margin-bottom: 30px;
}
.forgot-header img {
width: 80px;
margin-bottom: 15px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.forgot-header h2 {
color: #333;
font-weight: 600;
margin-bottom: 10px;
}
.forgot-header p {
color: #666;
font-size: 14px;
}
.form-floating {
margin-bottom: 20px;
}
.form-control {
border-radius: 10px;
padding: 12px 15px;
border: 2px solid #e1e5eb;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: #4e73df;
box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}
.btn-reset {
background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
border: none;
border-radius: 10px;
padding: 12px;
font-weight: 600;
width: 100%;
margin-top: 10px;
transition: all 0.3s ease;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(78, 115, 223, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(78, 115, 223, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(78, 115, 223, 0);
}
}
.btn-reset:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(78, 115, 223, 0.4);
}
.links {
text-align: center;
margin-top: 20px;
}
.links a {
color: #4e73df;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.links a:hover {
color: #224abe;
}
.alert {
border-radius: 10px;
margin-bottom: 20px;
}
.back-to-login {
text-align: center;
margin-top: 20px;
}
.back-to-login a {
color: #4e73df;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.back-to-login a:hover {
color: #224abe;
transform: translateX(-5px);
}
.back-to-login i {
margin-right: 5px;
}
/* Loading spinner */
.spinner {
display: none;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 0.8s linear infinite;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-reset.loading .spinner {
display: inline-block;
}
.btn-reset.loading span {
display: none;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="forgot-container">
<div class="forgot-header">
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="<?php echo htmlspecialchars($site_name); ?>">
<h2>Forgot Password?</h2>
<p>Enter your email address and we'll send you instructions to reset your password.</p>
</div>
<form method="POST" action="" id="forgotForm" action="mail.php">
<div class="form-floating">
<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required>
<label for="email">Email address</label>
</div>
<button type="submit" class="btn btn-primary btn-reset" id="resetButton">
<div class="spinner"></div>
<span><i class="fas fa-paper-plane me-2"></i>Send Reset Link</span>
</button>
</form>
<div class="back-to-login">
<a href="login.php">
<i class="fas fa-arrow-left"></i>Back to Login
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Initialize particles.js
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
// Form submit loading state
document.getElementById('forgotForm').addEventListener('submit', function() {
document.getElementById('resetButton').classList.add('loading');
});
</script>
</body>
</html>
