 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;
overflow-x: hidden;
background: #0a0a0a;
min-height: 100vh;
position: relative;
}
/* Animated Background */
.login-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
#1a1a2e 0%,
#16213e 25%,
#0f3460 50%,
#533483 75%,
#667eea 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
z-index: -3;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Sound Wave Visualizer */
.sound-waves {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
z-index: -1;
opacity: 0.3;
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(102, 126, 234, 0.3) 20%,
rgba(118, 75, 162, 0.4) 40%,
rgba(240, 147, 251, 0.3) 60%,
rgba(245, 87, 108, 0.4) 80%,
transparent 100%);
animation: waveMove 8s ease-in-out infinite;
}
.wave:nth-child(1) { animation-delay: 0s; opacity: 0.4; }
.wave:nth-child(2) { animation-delay: 2s; opacity: 0.3; }
.wave:nth-child(3) { animation-delay: 4s; opacity: 0.2; }
@keyframes waveMove {
0%, 100% { transform: translateX(-100%) scaleY(1); }
50% { transform: translateX(100%) scaleY(1.5); }
}
/* Studio Equipment Icons */
.studio-equipment {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.equipment-icon {
position: absolute;
color: rgba(255, 255, 255, 0.1);
font-size: 1.5rem;
animation: equipmentFloat 10s ease-in-out infinite;
}
.equipment-icon:nth-child(1) {
top: 15%; left: 8%;
animation-delay: 0s;
animation-duration: 12s;
}
.equipment-icon:nth-child(2) {
top: 25%; right: 12%;
animation-delay: 3s;
animation-duration: 15s;
}
.equipment-icon:nth-child(3) {
bottom: 25%; left: 15%;
animation-delay: 6s;
animation-duration: 11s;
}
.equipment-icon:nth-child(4) {
bottom: 15%; right: 8%;
animation-delay: 9s;
animation-duration: 14s;
}
.equipment-icon:nth-child(5) {
top: 45%; left: 3%;
animation-delay: 2s;
animation-duration: 13s;
}
.equipment-icon:nth-child(6) {
top: 55%; right: 3%;
animation-delay: 5s;
animation-duration: 10s;
}
@keyframes equipmentFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.1; }
25% { transform: translateY(-15px) rotate(3deg) scale(1.1); opacity: 0.3; }
50% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.1; }
75% { transform: translateY(-10px) rotate(-2deg) scale(1.05); opacity: 0.2; }
}
/* EQ Bars */
.eq-bars {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: end;
gap: 3px;
height: 60px;
z-index: 1;
}
.eq-bar {
width: 4px;
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 2px;
animation: eqAnimate 2s ease-in-out infinite;
}
.eq-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.eq-bar:nth-child(2) { height: 35px; animation-delay: 0.2s; }
.eq-bar:nth-child(3) { height: 50px; animation-delay: 0.4s; }
.eq-bar:nth-child(4) { height: 40px; animation-delay: 0.6s; }
.eq-bar:nth-child(5) { height: 25px; animation-delay: 0.8s; }
.eq-bar:nth-child(6) { height: 45px; animation-delay: 1s; }
.eq-bar:nth-child(7) { height: 30px; animation-delay: 1.2s; }
.eq-bar:nth-child(8) { height: 55px; animation-delay: 1.4s; }
@keyframes eqAnimate {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(1.3); }
}
/* Volume Meter */
.volume-meter {
position: fixed;
top: 20px;
right: 20px;
width: 8px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
z-index: 1;
overflow: hidden;
}
.volume-level {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 4px;
animation: volumePulse 3s ease-in-out infinite;
}
@keyframes volumePulse {
0%, 100% { height: 30%; }
50% { height: 80%; }
}
/* Overlay */
.login-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(3px);
z-index: -2;
}
/* Floating Musical Elements */
.floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.floating-note {
position: absolute;
color: rgba(255, 255, 255, 0.1);
font-size: 2rem;
animation: floatUpDown 6s ease-in-out infinite;
}
.floating-note:nth-child(1) {
top: 10%; left: 10%;
animation-delay: 0s;
animation-duration: 8s;
}
.floating-note:nth-child(2) {
top: 20%; right: 15%;
animation-delay: 2s;
animation-duration: 10s;
}
.floating-note:nth-child(3) {
bottom: 30%; left: 20%;
animation-delay: 4s;
animation-duration: 7s;
}
.floating-note:nth-child(4) {
bottom: 10%; right: 10%;
animation-delay: 6s;
animation-duration: 9s;
}
.floating-note:nth-child(5) {
top: 50%; left: 5%;
animation-delay: 1s;
animation-duration: 11s;
}
.floating-note:nth-child(6) {
top: 60%; right: 5%;
animation-delay: 3s;
animation-duration: 6s;
}
@keyframes floatUpDown {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
25% { transform: translateY(-20px) rotate(5deg); opacity: 0.3; }
50% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
75% { transform: translateY(-15px) rotate(-3deg); opacity: 0.2; }
}
/* Particle System */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(102, 126, 234, 0.6);
border-radius: 50%;
animation: particleFloat 20s linear infinite;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(100px);
opacity: 0;
}
}
/* Main Container */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
z-index: 1;
}
/* Enhanced Card */
.login-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 2rem;
width: 100%;
max-width: 400px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 15px 30px rgba(102, 126, 234, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
animation: cardSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.login-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#667eea 25%,
#764ba2 50%,
#f093fb 75%,
transparent 100%);
animation: topBorderGlow 4s ease-in-out infinite alternate;
}
@keyframes topBorderGlow {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Header */
.login-header {
text-align: center;
margin-bottom: 1.5rem;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
text-decoration: none;
}
/* Enhanced Logo */
.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: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
0% { filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.5)); }
100% { filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.8)); }
}
.logo-text {
font-size: 1.4rem;
font-weight: 900;
background: linear-gradient(135deg, #ffffff, #e2e8f0, #667eea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}
.login-title {
font-size: 1.4rem;
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #ffffff, #cbd5e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.login-subtitle {
font-size: 0.85rem;
color: #a0aec0;
font-weight: 400;
line-height: 1.4;
}
/* Form Styles */
.login-form {
margin-bottom: 1rem;
}
.form-group {
margin-bottom: 1rem;
position: relative;
}
.form-label {
display: block;
color: #e2e8f0;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.4rem;
transition: all 0.3s ease;
}
.form-input-container {
position: relative;
}
/* Enhanced Form Inputs */
.form-input {
width: 100%;
padding: 1rem 1.2rem 1rem 3rem;
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
color: white;
font-size: 1.1rem;
font-weight: 500;
backdrop-filter: blur(15px);
transition: all 0.3s ease;
outline: none;
}
.form-input:focus {
border-color: rgba(102, 126, 234, 0.8);
background: rgba(255, 255, 255, 0.12);
box-shadow:
0 0 0 6px rgba(102, 126, 234, 0.15),
0 12px 30px rgba(102, 126, 234, 0.2);
transform: translateY(-3px);
}
.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;
transform: translateY(-50%) scale(1.1);
}
/* Login Button */
/* Enhanced Login Button */
.login-btn {
width: 100%;
padding: 1.2rem 1.5rem;
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
border: none;
border-radius: 12px;
color: white;
font-size: 1.1rem;
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow:
0 8px 25px rgba(102, 126, 234, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1);
text-transform: uppercase;
letter-spacing: 1px;
}
.login-btn:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 40px rgba(102, 126, 234, 0.6),
0 0 0 2px rgba(255, 255, 255, 0.2);
background: linear-gradient(135deg, #5a67d8, #6b46c1, #e91e63);
}
.login-btn:active {
transform: translateY(-2px) scale(1.01);
}
.login-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transition: left 0.6s ease;
}
.login-btn:hover::before {
left: 100%;
}
/* Social Login */
.social-login {
margin: 1rem 0;
}
.social-divider {
position: relative;
text-align: center;
margin: 1rem 0;
}
.social-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
}
.social-divider span {
background: rgba(255, 255, 255, 0.05);
padding: 0 1rem;
color: #a0aec0;
font-size: 0.8rem;
font-weight: 500;
}
.social-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.social-btn {
padding: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: white;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.social-btn.google {
border-color: rgba(219, 68, 55, 0.3);
}
.social-btn.google:hover {
background: rgba(219, 68, 55, 0.1);
border-color: rgba(219, 68, 55, 0.5);
}
.social-btn.facebook {
border-color: rgba(24, 119, 242, 0.3);
}
.social-btn.facebook:hover {
background: rgba(24, 119, 242, 0.1);
border-color: rgba(24, 119, 242, 0.5);
}
/* Links */
.signup-link {
text-align: center;
color: #a0aec0;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.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: 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.4rem;
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) {
.login-container {
padding: 1rem;
min-height: 100vh;
}
.login-card {
padding: 2rem 1.5rem;
max-width: 100%;
margin: 0.5rem;
border-radius: 20px;
}
.login-title {
font-size: 2rem;
}
.login-subtitle {
font-size: 1.2rem;
}
.logo-text {
font-size: 2rem;
}
.logo-icon {
font-size: 2.5rem;
}
.form-input {
padding: 1.2rem 1.5rem 1.2rem 4rem;
font-size: 1.4rem;
}
.form-label {
font-size: 1.2rem;
}
.login-btn {
padding: 1.4rem 2rem;
font-size: 1.4rem;
}
.social-buttons {
grid-template-columns: 1fr;
gap: 1rem;
}
.social-btn {
padding: 1.2rem 1.5rem;
}
.back-btn {
top: 1rem;
left: 1rem;
padding: 0.8rem 1rem;
}
}
@media (max-width: 480px) {
.login-container {
padding: 0.5rem;
}
.login-card {
padding: 1.5rem 1rem;
border-radius: 16px;
margin: 0.25rem;
}
.login-title {
font-size: 1.8rem;
}
.login-subtitle {
font-size: 1.1rem;
}
.logo-text {
font-size: 1.8rem;
}
.logo-icon {
font-size: 2rem;
}
.form-input {
padding: 1rem 1.25rem 1rem 3.5rem;
font-size: 1.3rem;
}
.form-icon {
left: 1.2rem;
font-size: 1.5rem;
}
.login-btn {
padding: 1.2rem 1.5rem;
font-size: 1.3rem;
}
.social-btn {
padding: 1rem;
font-size: 1.2rem;
}
.back-btn {
padding: 0.6rem 0.8rem;
font-size: 1.2rem;
}
.logo-icon {
font-size: 2rem;
}
.form-input {
padding: 1rem 1.2rem 1rem 3.5rem;
font-size: 1.3rem;
}
.form-label {
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<!-- Animated Background -->
<div class="login-background"></div>
<div class="login-overlay"></div>
<!-- Floating Musical Elements -->
<div class="floating-elements">
<div class="floating-note">♪</div>
<div class="floating-note">♫</div>
<div class="floating-note">♬</div>
<div class="floating-note">🎵</div>
<div class="floating-note">🎶</div>
<div class="floating-note">♭</div>
</div>
<!-- Floating Particles -->
<div class="particles" id="particles"></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>
<div class="form-input-container">
<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>
<div class="form-group">
<label class="form-label" for="password">Password</label>
<div class="form-input-container">
<input type="password" id="password" name="password" class="form-input" placeholder="Enter your password" required>
<i class="fas fa-lock form-icon"></i>
</div>
</div>
<button type="submit" class="login-btn">
<i class="fas fa-sign-in-alt"></i>
Sign In to Your Account
</button>
</form>
<div class="social-login">
<div class="social-divider">
<span>Or continue with</span>
</div>
<div class="social-buttons">
<a href="#" class="social-btn google">
<i class="fab fa-google"></i>
Google
</a>
<a href="#" class="social-btn facebook">
<i class="fab fa-facebook-f"></i>
Facebook
</a>
</div>
</div>
<div class="signup-link">
Don't have an account? <a href="/auth/register_new.php">Sign up for free</a>
</div>
</div>
</div>
<script>
// Create floating particles
function createParticles() {
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
particlesContainer.appendChild(particle);
}
}
// Enhanced form interactions
document.addEventListener('DOMContentLoaded', function() {
createParticles();
// Form validation and feedback
const form = document.querySelector('.login-form');
const inputs = document.querySelectorAll('.form-input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.parentElement.querySelector('.form-label').style.color = '#667eea';
});
input.addEventListener('blur', function() {
this.parentElement.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>