 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, colorTemperature 20s ease-in-out 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: 5;
}
.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: 5;
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%; }
}
@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0px) scale(1);
}
}
/* 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;
}
}
/* Advanced 3D Audio Waveform */
.audio-waveform-3d {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 300px;
z-index: -1;
perspective: 1000px;
transform-style: preserve-3d;
}
.waveform-layer {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(102, 126, 234, 0.4) 20%,
rgba(118, 75, 162, 0.6) 40%,
rgba(240, 147, 251, 0.5) 60%,
rgba(245, 87, 108, 0.7) 80%,
transparent 100%);
animation: waveform3D 12s ease-in-out infinite;
transform: rotateX(60deg) translateZ(-50px);
}
.waveform-layer:nth-child(1) {
animation-delay: 0s;
opacity: 0.6;
transform: rotateX(60deg) translateZ(-100px) scaleY(1.2);
}
.waveform-layer:nth-child(2) {
animation-delay: 2s;
opacity: 0.4;
transform: rotateX(60deg) translateZ(-50px) scaleY(1.5);
}
.waveform-layer:nth-child(3) {
animation-delay: 4s;
opacity: 0.3;
transform: rotateX(60deg) translateZ(0px) scaleY(1.8);
}
@keyframes waveform3D {
0%, 100% {
transform: rotateX(60deg) translateZ(-50px) scaleY(1) translateX(-100%);
filter: hue-rotate(0deg);
}
25% {
transform: rotateX(60deg) translateZ(-25px) scaleY(1.3) translateX(-50%);
filter: hue-rotate(90deg);
}
50% {
transform: rotateX(60deg) translateZ(0px) scaleY(1.6) translateX(0%);
filter: hue-rotate(180deg);
}
75% {
transform: rotateX(60deg) translateZ(-25px) scaleY(1.3) translateX(50%);
filter: hue-rotate(270deg);
}
}
/* Advanced Reactive Particle System */
.reactive-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.reactive-particle {
position: absolute;
width: 6px;
height: 6px;
background: radial-gradient(circle, #667eea, #764ba2);
border-radius: 50%;
animation: reactiveFloat 15s linear infinite;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}
.reactive-particle:nth-child(odd) {
background: radial-gradient(circle, #f093fb, #e91e63);
box-shadow: 0 0 20px rgba(240, 147, 251, 0.8);
}
@keyframes reactiveFloat {
0% {
transform: translateY(100vh) translateX(0px) scale(0);
opacity: 0;
}
10% {
opacity: 1;
transform: translateY(90vh) translateX(10px) scale(1);
}
90% {
opacity: 1;
transform: translateY(10vh) translateX(-10px) scale(1);
}
100% {
transform: translateY(-100px) translateX(0px) scale(0);
opacity: 0;
}
}
/* Advanced Glassmorphism with Multiple Layers */
.glass-layers {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.glass-layer {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: glassFloat 20s ease-in-out infinite;
}
.glass-layer:nth-child(1) {
top: 10%; left: 10%;
animation-delay: 0s;
animation-duration: 25s;
}
.glass-layer:nth-child(2) {
top: 60%; right: 15%;
animation-delay: 5s;
animation-duration: 30s;
}
.glass-layer:nth-child(3) {
bottom: 20%; left: 20%;
animation-delay: 10s;
animation-duration: 22s;
}
@keyframes glassFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-30px) rotate(90deg) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(0px) rotate(180deg) scale(1);
opacity: 0.3;
}
75% {
transform: translateY(-20px) rotate(270deg) scale(1.1);
opacity: 0.5;
}
}
/* Interactive Studio Equipment */
.interactive-equipment {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
}
.interactive-icon {
position: absolute;
color: rgba(255, 255, 255, 0.2);
font-size: 2rem;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: auto;
}
.interactive-icon:hover {
color: rgba(102, 126, 234, 0.8);
transform: scale(1.5) rotate(10deg);
text-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
}
.interactive-icon:nth-child(1) {
top: 20%; left: 15%;
animation: iconFloat 8s ease-in-out infinite;
}
.interactive-icon:nth-child(2) {
top: 30%; right: 20%;
animation: iconFloat 10s ease-in-out infinite;
animation-delay: 2s;
}
.interactive-icon:nth-child(3) {
bottom: 30%; left: 25%;
animation: iconFloat 12s ease-in-out infinite;
animation-delay: 4s;
}
.interactive-icon:nth-child(4) {
bottom: 20%; right: 15%;
animation: iconFloat 9s ease-in-out infinite;
animation-delay: 6s;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-15px) rotate(5deg); }
50% { transform: translateY(0px) rotate(0deg); }
75% { transform: translateY(-10px) rotate(-3deg); }
}
/* Advanced Form Interactions */
.form-input-container {
position: relative;
}
.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),
0 0 50px rgba(102, 126, 234, 0.1);
transform: translateY(-3px) scale(1.02);
}
/* Enhanced Button with Particle Explosion */
.login-btn {
position: relative;
overflow: hidden;
}
.login-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
}
.login-btn:hover::after {
width: 300px;
height: 300px;
}
/* Advanced Card with Holographic Effect */
.login-card {
position: relative;
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);
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;
}
.login-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 0%,
rgba(102, 126, 234, 0.05) 25%,
rgba(118, 75, 162, 0.05) 50%,
rgba(240, 147, 251, 0.05) 75%,
transparent 100%);
animation: holographicShift 8s ease-in-out infinite;
}
@keyframes holographicShift {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
/* Advanced Logo with 3D Effect */
.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;
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
transform-style: preserve-3d;
}
.logo-icon:hover {
transform: rotateY(15deg) scale(1.1);
filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
}
/* Advanced Color Temperature Shifts */
@keyframes colorTemperature {
0%, 100% { filter: hue-rotate(0deg) saturate(1); }
25% { filter: hue-rotate(30deg) saturate(1.2); }
50% { filter: hue-rotate(60deg) saturate(1.1); }
75% { filter: hue-rotate(90deg) saturate(1.3); }
}
/* Main Container */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
z-index: 10;
}
@keyframes topBorderGlow {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
@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)); }
}
/* 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;
}
.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 {
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>
<!-- Advanced 3D Audio Waveform -->
<div class="audio-waveform-3d">
<div class="waveform-layer"></div>
<div class="waveform-layer"></div>
<div class="waveform-layer"></div>
</div>
<!-- Advanced Reactive Particle System -->
<div class="reactive-particles" id="reactive-particles"></div>
<!-- Advanced Glassmorphism Layers -->
<div class="glass-layers">
<div class="glass-layer"></div>
<div class="glass-layer"></div>
<div class="glass-layer"></div>
</div>
<!-- Interactive Studio Equipment -->
<div class="interactive-equipment">
<div class="interactive-icon" onclick="triggerParticleExplosion(this)">🎤</div>
<div class="interactive-icon" onclick="triggerParticleExplosion(this)">🎧</div>
<div class="interactive-icon" onclick="triggerParticleExplosion(this)">🎛️</div>
<div class="interactive-icon" onclick="triggerParticleExplosion(this)">🎚️</div>
</div>
<!-- Sound Wave Visualizer -->
<div class="sound-waves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
<!-- Studio Equipment Icons -->
<div class="studio-equipment">
<div class="equipment-icon">🎤</div>
<div class="equipment-icon">🎧</div>
<div class="equipment-icon">🎛️</div>
<div class="equipment-icon">🎚️</div>
<div class="equipment-icon">🎹</div>
<div class="equipment-icon">🥁</div>
</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>
<!-- EQ Bars -->
<div class="eq-bars">
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
<div class="eq-bar"></div>
</div>
<!-- Volume Meter -->
<div class="volume-meter">
<div class="volume-level"></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>
<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);
}
}
// Create reactive particles
function createReactiveParticles() {
const container = document.getElementById('reactive-particles');
for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.className = 'reactive-particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
container.appendChild(particle);
}
}
// Particle explosion effect
function triggerParticleExplosion(element) {
const rect = element.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// Create explosion particles
for (let i = 0; i < 20; i++) {
const particle = document.createElement('div');
particle.style.position = 'fixed';
particle.style.left = centerX + 'px';
particle.style.top = centerY + 'px';
particle.style.width = '4px';
particle.style.height = '4px';
particle.style.background = `hsl(${Math.random() * 60 + 240}, 70%, 60%)`;
particle.style.borderRadius = '50%';
particle.style.pointerEvents = 'none';
particle.style.zIndex = '1000';
particle.style.transition = 'all 1s ease-out';
document.body.appendChild(particle);
// Animate particle
setTimeout(() => {
const angle = (Math.PI * 2 * i) / 20;
const distance = 100 + Math.random() * 50;
const x = centerX + Math.cos(angle) * distance;
const y = centerY + Math.sin(angle) * distance;
particle.style.transform = `translate(${x - centerX}px, ${y - centerY}px)`;
particle.style.opacity = '0';
}, 10);
// Remove particle after animation
setTimeout(() => {
particle.remove();
}, 1000);
}
// Add ripple effect
const ripple = document.createElement('div');
ripple.style.position = 'fixed';
ripple.style.left = centerX + 'px';
ripple.style.top = centerY + 'px';
ripple.style.width = '0px';
ripple.style.height = '0px';
ripple.style.border = '2px solid rgba(102, 126, 234, 0.8)';
ripple.style.borderRadius = '50%';
ripple.style.transform = 'translate(-50%, -50%)';
ripple.style.pointerEvents = 'none';
ripple.style.zIndex = '999';
ripple.style.transition = 'all 0.8s ease-out';
document.body.appendChild(ripple);
setTimeout(() => {
ripple.style.width = '200px';
ripple.style.height = '200px';
ripple.style.opacity = '0';
}, 10);
setTimeout(() => {
ripple.remove();
}, 800);
}
// Mouse tracking for reactive effects
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
// Update glass layers position based on mouse
const glassLayers = document.querySelectorAll('.glass-layer');
glassLayers.forEach((layer, index) => {
const speed = (index + 1) * 0.02;
const x = (mouseX - window.innerWidth / 2) * speed;
const y = (mouseY - window.innerHeight / 2) * speed;
layer.style.transform = `translate(${x}px, ${y}px) rotate(${index * 45}deg)`;
});
});
// Enhanced form interactions
document.addEventListener('DOMContentLoaded', function() {
createParticles();
createReactiveParticles();
// 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';
// Add typing effect
this.addEventListener('input', function() {
if (this.value.length > 0) {
this.style.borderColor = 'rgba(102, 126, 234, 0.8)';
this.style.boxShadow = '0 0 0 6px rgba(102, 126, 234, 0.15), 0 12px 30px rgba(102, 126, 234, 0.2)';
}
});
});
input.addEventListener('blur', function() {
this.parentElement.parentElement.querySelector('.form-label').style.color = '#e2e8f0';
if (this.value.length === 0) {
this.style.borderColor = 'rgba(255, 255, 255, 0.15)';
this.style.boxShadow = 'none';
}
});
});
// Button loading state with enhanced effects
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;
// Add pulse effect
button.style.animation = 'pulse 1s infinite';
});
// Add pulse animation
const style = document.createElement('style');
style.textContent = `
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
`;
document.head.appendChild(style);
});
</script>
</body>
</html>