Music-cloud/public/login.html at a3ed5ae7d3f4ff092ff73fbfd4abba028fdfed9f · AstronDaniel/Music-cloud · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log In - BeatWave13</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Flowbite CSS and JS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        body {
            background: linear-gradient(135deg, #1e1e2e, #16213e);
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gradient-text {
            background: linear-gradient(45deg, #00f260, #0575e6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .auth-bg {
            background: rgba(31, 41, 55, 0.7);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-gray-900">
    <div class="w-full max-w-md auth-bg p-8 rounded-xl shadow-2xl">
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold gradient-text mb-4">BeatWave13</h1>
            <h2 class="text-2xl font-semibold text-white">Log In to Your Account</h2>
        </div>

        <form id="loginForm" class="space-y-6">
            <div>
                <label for="username" class="block mb-2 text-sm font-medium text-gray-300">Username</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-user text-gray-400"></i>
                    </div>
                    <input
                        type="text"
                        id="loginUsername"
                        required
                        placeholder="Enter your username or email"
                        class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5"
                    >
                </div>
            </div>

            <div>
                <label for="password" class="block mb-2 text-sm font-medium text-gray-300">Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-lock text-gray-400"></i>
                    </div>
                    <input
                        type="password"
                        id="loginPassword"
                        required
                        placeholder="Enter your password"
                        class="bg-gray-700 border border-gray-600 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5"
                    >
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                        <button type="button" id="togglePassword" class="text-gray-400 hover:text-white">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div class="flex justify-between mt-2">
                    <a href="#" class="text-xs text-blue-500 hover:underline">Forgot Password?</a>
                </div>
            </div>

            <button
                type="submit"
                class="w-full text-white bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
            >
                Log In
            </button>
        </form>

        <div class="text-center mt-6">
            <p class="text-sm text-gray-400">
                Don't have an account?
                <a href="signup.html" class="text-blue-500 hover:underline">Sign Up</a>
            </p>
            <div class="mt-4">
                <a href="index.html" class="text-sm text-gray-300 hover:text-white">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Home
                </a>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Flowbite JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>

    <script src="auth.js"></script>
    <script>
        $(document).ready(function() {
            // Password visibility toggle
            $('#togglePassword').on('click', function() {
                const passwordField = $('#password');
                const type = passwordField.attr('type') === 'password' ? 'text' : 'password';
                passwordField.attr('type', type);
                $(this).find('i').toggleClass('fa-eye fa-eye-slash');
            });

            // Form submission handling (placeholder)
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();

                // Basic client-side validation


                handleLogin(e);
            });
        });
    </script>
</body>
</html>