 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/.cursor-server/data/User/History/-74981c98/ |
<?php
session_start();
// Include database configuration and security tracking
require_once '../config/database.php';
require_once '../includes/security_tracking.php';
// Check if user is already logged in
if (isset($_SESSION['user_id'])) {
header('Location: /dashboard.php');
exit;
}
$error = '';
$success = '';
// Handle login form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$email = $_POST['email'] ?? '';
$password = $_POST['password'] ?? '';
// Authenticate user with database
$user = authenticateUser($email, $password);
if ($user) {
// Log successful login
logLoginAttempt($email, true, $user['id']);
$_SESSION['user_id'] = $user['id'];
$_SESSION['user_email'] = $user['email'];
$_SESSION['user_name'] = $user['name'];
$_SESSION['credits'] = $user['credits'];
$_SESSION['plan'] = $user['plan'];
// Set admin status if user is admin
$_SESSION['is_admin'] = isset($user['is_admin']) ? $user['is_admin'] : false;
// Check for redirect parameter
$redirect = $_GET['redirect'] ?? '/dashboard.php';
header('Location: ' . $redirect);
exit;
} else {
// Log failed login attempt
logLoginAttempt($email, false, null, 'Invalid credentials');
$error = 'Invalid email or password';
}
}
// Set page variables for header
$page_title = 'Login - SoundStudioPro';
$page_description = 'Sign in to your SoundStudioPro account and start creating amazing AI music.';
$current_page = 'login';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $page_title ?></title>
<meta name="description" content="<?= $page_description ?>">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #667eea 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
overflow-x: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Animated Background Elements */
.bg-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-icon {
position: absolute;
color: rgba(255, 255, 255, 0.1);
font-size: 2rem;
animation: float 6s ease-in-out infinite;
}
.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
.floating-icon:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
.floating-icon:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 6s; }
.floating-icon:nth-child(5) { top: 50%; left: 5%; animation-delay: 1s; }
.floating-icon:nth-child(6) { top: 60%; right: 5%; animation-delay: 3s; }
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
50% { transform: translateY(-20px) rotate(5deg); opacity: 0.3; }
}
/* Main Container */
.login-container {
position: relative;
z-index: 10;
width: 100%;
max-width: 400px;
}
/* Login Card */
.login-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 2.5rem;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.3),
0 15px 30px rgba(102, 126, 234, 0.2);
position: relative;
overflow: hidden;
}
.login-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Header */
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.5rem;
text-decoration: none;
}
.logo-icon {
font-size: 2.5rem;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.logo-text {
font-size: 1.5rem;
font-weight: 900;
background: linear-gradient(135deg, #ffffff, #e2e8f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login-title {
font-size: 1.8rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
}
.login-subtitle {
font-size: 0.95rem;
color: #a0aec0;
font-weight: 400;
line-height: 1.5;
}
/* Form Styles */
.login-form {
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-label {
display: block;
color: #e2e8f0;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.form-input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: white;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus {
border-color: #667eea;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.form-input::placeholder {
color: #718096;
}
.form-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: #667eea;
transition: all 0.3s ease;
}
.form-input:focus + .form-icon {
color: #f093fb;
}
/* Login Button */
.login-btn {
width: 100%;
padding: 1.2rem 1.5rem;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
border-radius: 12px;
color: white;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.login-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
.login-btn:active {
transform: translateY(-1px);
}
/* Links */
.signup-link {
text-align: center;
color: #a0aec0;
font-size: 0.9rem;
margin-top: 1.5rem;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.signup-link a:hover {
color: #5a67d8;
text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}
/* Error/Success Messages */
.error, .success {
padding: 1rem;
border-radius: 12px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 0.9rem;
font-weight: 500;
}
.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.success {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #86efac;
}
/* Back Button */
.back-btn {
position: fixed;
top: 2rem;
left: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1rem 1.5rem;
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.8rem;
z-index: 10;
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 1rem;
}
.login-card {
padding: 2rem 1.5rem;
border-radius: 16px;
}
.login-title {
font-size: 1.6rem;
}
.logo-text {
font-size: 1.3rem;
}
.logo-icon {
font-size: 2rem;
}
.form-input {
padding: 1rem 1rem 1rem 2.5rem;
font-size: 1rem;
}
.form-icon {
left: 0.8rem;
font-size: 1rem;
}
.login-btn {
padding: 1rem 1.5rem;
font-size: 1rem;
}
.back-btn {
top: 1rem;
left: 1rem;
padding: 0.8rem 1rem;
}
}
@media (max-width: 480px) {
.login-card {
padding: 1.5rem 1rem;
border-radius: 12px;
}
.login-title {
font-size: 1.4rem;
}
.logo-text {
font-size: 1.2rem;
}
.logo-icon {
font-size: 1.8rem;
}
.form-input {
padding: 0.9rem 0.9rem 0.9rem 2.5rem;
font-size: 0.95rem;
}
.login-btn {
padding: 0.9rem 1.2rem;
font-size: 0.95rem;
}
}
</style>
</head>
<body>
<!-- Animated Background Elements -->
<div class="bg-elements">
<div class="floating-icon">🎤</div>
<div class="floating-icon">🎧</div>
<div class="floating-icon">🎛️</div>
<div class="floating-icon">🎚️</div>
<div class="floating-icon">🎹</div>
<div class="floating-icon">🥁</div>
</div>
<!-- Back Button -->
<a href="/" class="back-btn">
<i class="fas fa-arrow-left"></i>
Back to Home
</a>
<!-- Main Container -->
<div class="login-container">
<div class="login-card">
<div class="login-header">
<a href="/" class="logo">
<i class="fas fa-music logo-icon"></i>
<span class="logo-text">SoundStudioPro</span>
</a>
<h1 class="login-title">Welcome Back</h1>
<p class="login-subtitle">Access your AI music creation studio and continue making amazing tracks with our advanced tools.</p>
</div>
<?php if ($error): ?>
<div class="error">
<i class="fas fa-exclamation-triangle"></i>
<?php echo htmlspecialchars($error); ?>
</div>
<?php endif; ?>
<?php if ($success): ?>
<div class="success">
<i class="fas fa-check-circle"></i>
<?php echo htmlspecialchars($success); ?>
</div>
<?php endif; ?>
<form method="POST" class="login-form">
<div class="form-group">
<label class="form-label" for="email">Email Address</label>
<input type="email" id="email" name="email" class="form-input" placeholder="Enter your email address" required>
<i class="fas fa-envelope form-icon"></i>
</div>
<div class="form-group">
<label class="form-label" for="password">Password</label>
<input type="password" id="password" name="password" class="form-input" placeholder="Enter your password" required>
<i class="fas fa-lock form-icon"></i>
</div>
<button type="submit" class="login-btn">
<i class="fas fa-sign-in-alt"></i>
Sign In to Your Account
</button>
</form>
<div class="signup-link">
Don't have an account? <a href="/auth/register_new.php">Sign up for free</a>
</div>
</div>
</div>
<script>
// Enhanced form interactions
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('.login-form');
const inputs = document.querySelectorAll('.form-input');
// Form validation and feedback
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.querySelector('.form-label').style.color = '#667eea';
});
input.addEventListener('blur', function() {
this.parentElement.querySelector('.form-label').style.color = '#e2e8f0';
});
});
// Button loading state
form.addEventListener('submit', function() {
const button = this.querySelector('.login-btn');
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
button.disabled = true;
});
});
</script>
</body>
</html>