Login-Registratin-Form/index.html at master · devstygian/Login-Registratin-Form · 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
136
<!--Date i finish -->
<!-- April 17, 2023-->

<!doctype html>
<html lang>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Crystal Tower</title>

    <link rel="website icon" type="png" sizes="32x32" href="logo-white.png">

    <link rel="stylesheet" href="Design.css">

</head>

<body>

    <div class="mainbox">
        <div class="form-box">
            <div class="button-box">
                <div id="btn"></div>
                <button type="button" class="toggle-btn" onclick="login()">Log In</button>
                <button type="button" class="toggle-btn" onclick="register()">Sign Up</button>
            </div>
            <div class="word">
                <h1>Crystal Tower</h1>
            </div>

            <form id="login" class="input-group">

                        Email Address
                        <input type="email" name="username" class="input-field" placeholder="" required>
                        Password:
                        <input type="password"  name="password" class="input-field" id="inputUser" placeholder="" required>

                        <input type="checkbox" onclick="myOnFunction()"> Show Password

                <script> function myOnFunction() {
                        var x = document.getElementById("inputUser");
                        if (x.type === "password") {
                            x.type = "text";
                        } else {
                            x.type = "password";
                        }
                    }</script>

                <input type="checkbox" class="check-box">
                <p class="term"> Remember me </p>

                <button type="submit" class="submit-btn">Log in</button>

                <script>
                    document.getElementById('login').addEventListener('submit', function () {
                            location.reload();
                            alert('404 Errors');
                            alert('Oh man! The darkness ate your file again.');
                            alert('test website only');
                        });


                </script>
            </form>


            <form id="register" class="input-group">

                        Username:
                        <input type="text" class="input-field" placeholder="" required>
                        Email address:
                        <input type="email" class="input-field" placeholder="" required>
                        Password:
                        <input type="password" class="input-field" id="theInput" placeholder="" required>

                        <input type="checkbox" onclick="OnFunction()"> Show Password

                <script>
                    function OnFunction() {
                        var x = document.getElementById("theInput");
                        if (x.type === "password") {
                            x.type = "text";
                        } else {
                            x.type = "password";
                        }
                    }
                </script>


                <input type="checkbox" class="check-box">
                <p class="term"> I agree to the <a href="#" class="no-underline">terms and conditions</a> </p>

                <button type="submit" id="clearButton" class="submit-btn">Register</button>
                <script>
                    document.getElementById('register').addEventListener('submit', function () {
                            location.reload();
                        });

                    document.getElementById('register').addEventListener('submit', function (event) {
                            event.preventDefault(); // Prevent form submission
                            // Perform form validation and registration logic here
                            // Replace this with your actual registration logic
                            alert('Registration complete.');
                        });

                </script>
            </form>
            <p class="copy">DevStygian © 2023 | ALL RIGHTS RESERVED</p>
        </div>

    </div>

    <script>
        var x = document.getElementById("login")
        var y = document.getElementById("register")
        var z = document.getElementById("btn")

        function register() {
            x.style.left = "-400px";
            y.style.left = "50px";
            z.style.left = "110px";
        }

        function login() {
            x.style.left = "50px";
            y.style.left = "450px";
            z.style.left = "0";
        }
    </script>

</body>

</html>