interesting.git.io/reg.html at master · 6heLL66/interesting.git.io · 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
<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <title>херь какаято</title>
    <link rel="stylesheet" href="regstyle.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,  shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  </head>
<body>
  <div class="border1">

  </div>
  <div class="fo">
    <div class="">
      <ul id="cou">
        <li> <a href="#" style="padding-bottom:20px;" id="b1">Sign Up</a> </li>
        <li> <a href="#" style="padding-bottom:20px;" id="b2">Sign In</a> </li>
      </ul>
    </div>
    <div id="animate">
      <div class="form1">
        <form class="" action="index.html" method="post" onsubmit="valid(this)">
          <label for="name" style="color:#cbcdd6; font-size:25px;">Имя:</label><br><br>
          <input type="text" name="name" placeholder="" id="name"><br><br>
          <!-- <label for="name" style="color:#cbcdd6; font-size:25px;">Email:</label><br><br> -->
          <!-- <input type="text" name="email" placeholder="" id="email"><br><br> -->
          <label for="password" style="color:#cbcdd6; font-size:25px;">Пароль:</label><br><br>
          <input type="password" name="password" placeholder="" id="password"><br><br>
          <label for="repassword" style="color:#cbcdd6; font-size:25px;">Проверка Пароля:</label><br><br>
          <input type="repassword" name="repassword" placeholder="" id="repassword"><br><br>
          <input type="submit" name="submit" value="Готово" style="border-radius: 20px;  border: none;  width: 400px;height: 40px; background-color:#225df6; color:#fff; font-size:20px; margin-top:30px;">
        </form>
      </div>
      <div class="form2">
        <form class="" action="index.html" method="post" onsubmit="valid(this)">
          <label for="name" style="color:#cbcdd6; font-size:25px;">Имя:</label><br><br>
          <input type="text" name="name" placeholder="" id="name"><br><br>
          <!-- <label for="name" style="color:#cbcdd6; font-size:25px;">Email:</label><br><br> -->
          <!-- <input type="text" name="email" placeholder="" id="email"><br><br> -->
          <label for="password" style="color:#cbcdd6; font-size:25px;">Пароль:</label><br><br>
          <input type="password" name="password" placeholder="" id="password"><br><br>

          <input type="submit" name="submit" value="Готово" style="border-radius: 20px;  border: none;  width: 400px;height: 40px; background-color:#225df6; color:#fff; font-size:20px; margin-top:30px;">
        </form>
      </div>
    </div>

  </div>
  <div class="border2">

  </div>
  <script>
    function valid (form) {
     var fail = false;
     var name = form.name.value;
     var password = form.password.value;
     var RePassword = form.RePassword.value;
     var email = form.email.value;

     var abr_pattern= /[a-z0-9!#$%&'*+/=?^`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^`{|}~-]+)@(?:[a-z0-9](?:[a-z0-9-][a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

     if (name == "" || name == " ")
       fail = "Вы не ввели свое имя";
     else if(abr_pattern.test(email)==false)
       fail = "вы ввели email неправильно";
     else if (password == "")
       fail = "Вы не ввели пароль";
     else if (password != RePassword)
     fail = "Пароли не совпадают";


     if (fail)
       alert(fail);
     else
       window.location = index.html;
     }


     $('#b1').click(function(){
       event.preventDefault(),
       $('#b1').css({
         'color':'#fff',
         'border-bottom':' 2px solid #225df6'
         }),
       $('#b2').css({
         'color':'#888da2',
         'border-bottom':'none'
       });
     });
     $('#b2').click(function(){
       event.preventDefault(),
       $('#b2').css({
         'color':'#fff',
         'border-bottom':' 2px solid #225df6'
       }),
       $('#b1').css({
         'color':'#888da2',
         'border-bottom':'none'
       });
     });
     var count;
     count=0;
     $('#b1').click(function(){
     if(count == 1) {
      $('#animate').animate({left:'+=500px'},500)
         $('.fo').animate({height:'650px'},500)
         count--;
     }
     });


      $('#b2').click(function(){
        if(count == 0){
      $('#animate').animate({left:'-=500px'},500)
      $('.fo').animate({height:'500px'},500)
      count++;
     }

       });

  </script>
</body>