interface/signupform.html at main · integration-tech/interface · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Signup Form</title>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f0f0; /* Light grey background */
    }
    h2{
        text-align: center;
    }

    .glass-container {
      background: rgba(255, 255, 255, 0.2); /* Glassmorphism effect */
      border-radius: 10px;
      padding: 20px;
      width: 300px;
      height: 350px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    label {
      display: block;
      margin-bottom: 5px;
      color: #333;
      text-align: left;
    }

    input {
      width: 100%;
      padding: 10px 1px 10px 8px;
      border-color: #961414 ;

      margin-bottom: 15px;
      border: none;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.8);
      transition: border-color 0.3s ease; /* Transition effect on border color change */
    }
    input:hover {
      border-color: rgba(219, 52, 66, 0.8); /* Change border color on hover */
    }
    input:focus {

      box-shadow:0 0 0 0.25rem rgba(96, 77, 10, 0.4); /* Add a subtle box shadow on focus */
    }

    button {

      padding: 10px;
      border: none;
      border-radius: 5px;
      background: #3498db;
      color: #fff;
      cursor: pointer;
      font-weight: bold;
      font-size: medium;
      /* cursor: not-allowed; */
    }
    button:hover{
      opacity: .7;
      background-color: #9c9999;
    }

    button.loading {
      background: #bdc3c7; /* Grey out when loading */
      cursor: not-allowed;
    }

    /* #loading {
      display: none;
      text-align: center;
    } */
  </style>
</head>
<body>
  <div class="glass-container">
    <h2>Signup</h2>
    <form id="signupForm">
      <label for="username">Username</label>
      <input type="text" id="username" placeholder="Enter your username" required>

      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required>

      <label for="password">Password</label>
      <input type="password" id="password" placeholder="Enter your password" required>

      <button type="button" onclick="submitForm() ">Signup</button>
      <!-- <div id="loading">Loading...</div> -->
    </form>
  </div>

  <script>
    function submitForm() {
      var form = document.getElementById("signupForm");
    //   var loading = document.getElementById("loading");
      var button = document.querySelector("button");

    //   loading.style.display = "block";
      button.innerText = "Loading...";
      button.classList.add("loading");

      setTimeout(function() {
        form.reset();

        button.innerText = "Signup";
        button.classList.remove("loading");

      }, 1000); // Simulating a 2-second signup process
    }
  </script>
</body>
</html>