ph-assignment-five/index.html at main · kabir31416/ph-assignment-five · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Daisy Ui -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- Google Font -->
     <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=Geist:wght@100..900&display=swap" rel="stylesheet">

    <title>Login</title>

    <style>
        *{
            font-family: 'Geist', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100 px-3 md:px-0 py-10 min-h-screen flex items-center justify-center">
    <div class="card bg-white shadow-xl w-full max-w-[400px] p-6 md:p-8 mx-auto rounded-2xl">
        <div class="flex flex-col items-center justify-center ">
            <div class="flex flex-col items-center gap-1">
                <img class="h-24 w-24" src="assets/github-logo.png" alt="">
                <h1 class="font-semibold text-2xl">GitHub issue tracker</h1>
                <p class="text-base">Sign in to manage your issues</p>
            </div>

            <div class="w-full shrink-0">
                <div class="card-body">
                    <fieldset class="fieldset">
                        <label class="">Username</label>
                        <input id="username" type="text" class="input" placeholder="Enter Username" />
                        <div><a class="text-blue-600">Default: admin</a></div>

                        <label class="">Password</label>
                        <input id="password" type="password" class="input" placeholder="Enter Password" />
                        <div><a class="text-blue-600">Default: admin123</a></div>

                        <button id="login-btn" class="btn btn-primary">Login</button>
                    </fieldset>
                    </div>
            </div>

            <div class="flex flex-col items-center justify-center w-full space-y-2">
                <div class="flex items-center w-full max-w-xs mb-4">
                    <div class="flex-grow border-t border-gray-300"></div>
                    <span class="px-3 text-sm text-gray-500">OR</span>
                    <div class="flex-grow border-t border-gray-300"></div>
                </div>

            <h1 class="text-sm text-slate-500 mb-1">Demo Credentials:</h1>

            <div class="bg-slate-100 border border-slate-200 rounded-xl p-4 w-full max-w-sm">
                    <div class="flex flex-col items-center justify-center">
                        <p class="text-slate-700 text-sm">
                            <span class="font-bold">Username:</span> admin
                        </p>
                        <p class="text-slate-700 text-sm">
                            <span class="font-bold">Password:</span> admin123
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script src="login.js"></script>
</body>
</html>