<?php
//require('connect.php');
 ?>

<!DOCTYPE html>
<html lang="en">

<style>
.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

.main-container {
  position: relative;
  width: 1512px;
  height: 982px;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}
.box {
  position: absolute;
  width: 642px;
  height: 982px;
  top: 0;
  left: 0;
  font-size: 0px;
  background: #4e453c;
}
.text {
  display: block;
  position: relative;
  height: 77px;
  margin: 108px 0 0 115px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
  color: #ffffff;
  font-size: 64px;
  font-weight: 600;
  line-height: 77px;
  text-align: left;
  white-space: nowrap;
  z-index: 2;
}
.text-2 {
  display: block;
  position: relative;
  height: 48px;
  margin: 9px 0 0 119px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
  color: #ffffff;
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  text-align: left;
  white-space: nowrap;
  z-index: 14;
}
.img {
    position: absolute;
    width: 473px;
    height: 471px;
    top: 265px;
    left: 72px;
    font-size: 0px;
    background: url(/rythm/assets/rythmlogo.png) no-repeat center;
    background-size: cover;
    z-index: 17;
}
.box {
    position: absolute;
    width: 642px;
    height: 982px;
    top: 0;
    left: 0;
    font-size: 0px;
    background: black;
}

.section {
  position: absolute;
  width: 635px;
  height: 48px;
  top: 658px;
  left: 759px;
  background: #f7c76a;
  z-index: 15;
  border-radius: 15px;
}

           
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100;1,200;1,300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;

}

.card-1 {
    height: 100vh;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}
.card-2 {
    height: 100vh;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
	margin-top: -170px 
}
.form {
  position: relative;
  filter:drop-shadow(0 0 2px #000000);
  border-radius: 5px;
  width: 600px;
  height:600px;
  background-color: #ffffff;
  padding:40px;
  margin-left: 546px 
}

.form img {
    position: absolute;
    height: 20px;
    top: 213px;
    right: 70px;
    cursor: pointer;
}

.form input {
    outline: 0;
    background: #f2f2f2;
    border-radius: 4px;
    width: 100%;
    border: 0;
    margin: 15px 0;
    padding: 15px;
    font-size: 14px;
}

.form input:focus {
  box-shadow: 0px 0px 5px 0px #f7c76a;
}

span {
    color: red;
    margin: 10px 0;
    font-size: 14px;
}

.form button {
    outline: 0;
    background: #f7c76a;
    width: 100%;
    border: 0;
    margin-top: 10px;
    border-radius: 3px;
    padding: 15px;
    color: #FFFFFF;
    font-size: 15px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.form button:hover,
.form button:active,
.form button:focus {
    background: #f7c76a;
    color: #fff;

}

.message{
    margin: 15px 0;
    text-align: center;

}
.form .message a {
    font-size: 14px;
    color: #6a62d2;
    text-decoration: none;
}
 ol,
        ul {
            list-style: none;
			
        }

        li {
            display: inline-block;
            padding: 20px 50px 20px;
            vertical-align: middle;
			
        }

        a:hover,
        a:focus,
        a:active {
            color: #999;
            text-decoration: none;
        }

        a {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            text-decoration: none;
            transition: color 0.1s, background-color 0.1s;
            position: relative;
            display: block;
            padding: 16px 0;
            margin: 0 12px;
            letter-spacing: 1px;
            font-size: 12px;
            line-height: 16px;
            font-weight: 900;
            text-transform: uppercase;
            transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
            color: #000;
        }

        a::before {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background-color: #000;
            transition: width 0.3s ease-out;
        }

        a:hover::before,
        a:focus::before {
            width: 100%;
            background-color: blue;
        }
		 li.item a {
            font-size: 18px;
			font-weight:500;
			
        }

        .form button {
    outline: 0;
    background: deeppink;
    width: 100%;
    border: 0;
    margin-top: 10px;
    border-radius: 3px;
    padding: 15px;
    color: #FFFFFF;
    font-size: 15px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}
</style>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RythmWoods</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" />
  </head>
  <body>
    <div class="main-container">
      <div class="box">
        <span class="text">Welcome </span
        ><span class="text-2">RythmWoods Software</span>
      </div>
      <div class="img"></div>
     
      <div id="holediv" class="card-1">
        <div class="form">
              <nav>
	 
        <ul>
		 <h3>Login Your Account!</h3>
            <li class="item"><a href="#" onclick="showlogin(1);" style="color:deeppink;font-weight:600">Sign_In</a></li>
            <li class="item" ><a href="#" onclick="showlogin(2);" style="margin:-88px 340px;color:deeppink;font-weight:600">Sign_Up</a></li>
           
        </ul>
		
    </nav> 
	 <div id="loginddd" style="display:block;">
			<div id="holediv" class="card-2">
				<div class="card">
					<form class="login-form " action="validation.php" target="_blank">
						<h2 style="text-align:center">LOGIN</h2><br>
						<input type="text" required placeholder=" Enter Email" id="Inputusername" name="Inputusername">
						<input  type="password" required placeholder="Password" id="InputPassword" name="InputPassword">
						<!-- <img src="https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-2/32/hide-512.png"
							onclick="show()" id="showimg" style="width:28px;margin-top:125px;"> -->
						<span id="vaild-pass"></span>
						<button type="submit" onlcik="">LOGIN</button><br>
						<div style="display:flex;justify-content:space-between;">
						<p class="message" onclick="forgetpass('loginddd')" style="color:blue">Forgot your password?</p>
                   </div>
					</form>
				</div>
			</div>
	 </div>
            
			
			
			
			
			
			
			
        </div>
    </div>

    <!-- Generated by Codia AI - https://codia.ai/ -->
  </body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
      


    function forgetpass(val) {
  $.ajax({
    type: 'POST',
    url: 'forgetpass.php?divid='+val,
    success: function (data) {
     $(".card-2").html(data);
    },
    
  });
}
     
function showlogin(val)
{
	//debugger;
	if(val==1)
	{
		$.ajax({
    type: 'POST',
    url: 'login_two.php',
    success: function (data) {
     $(".card-2").html(data);
    },
    
  });
	}
	else
	{
		$.ajax({
    type: 'POST',
    url: 'sign_up.php',
    success: function (data) {
     $(".card-2").html(data);
    },
    
  });
		
		
	}
}

 
    
	 </script>
</html>