برمجتي لتسجيل الدخول السريع بالمنتدى

  <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

  <!-- BEGIN switch_user_logged_out -->
  <divclass="assem">
                        <a href="#"id="user-btn">
                            <divclass="menu-icon">
                                <iclass="fa fa-user-times" aria-hidden="true"></i>
                            </div>
                        </a>
        </div>
        <divid="overlay"class="overlay"style="overflow: hidden; outline: none; width: 0%; right: -20px; display: block;">
        <iid="close-btn"class="fa fa-close"></i>
        <divclass="login-page">
            <divclass="container">
               <h2>الدخول للموقع</h2>
               <div class="user-login">
                    <form action="/login.forum?redirect=/"method="post"name="form_login">
                        <divclass="input-f">
                            <inputtype="text"name="username"placeholder="اسم المستخدم" required>
                        </div>
                        <divclass="input-f">
                            <inputtype="password"name="password"placeholder="كلمة المرور" required>
                        </div>
                        <divclass="input-f">
                            <inputtype="submit"name="login"value="الدخول">
                        </div>
                    </form>
               </div>
               <divclass="register">
                    <buttontype="button"class="frgt"onclick="location.href='/profile?mode=sendpassword&theme_id=144298'">نسيت كلمة المرور</button>
                    <a href="/register">أو يمكنك تسجيل حساب جديد من هنا</a>
               </div>
            </div>
        </div>
        </div>  
              <!-- END switch_user_logged_out -->

    /*
Code by Belm assem
www.fb.com/belm.assem
all copyright reserved
*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-family:'Droid Arabic Kufi';
}
.assem{
    position: fixed;
    top: 15px;
    right:15px;
    animation: assem 4s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes assem {
               from {
                    -webkit-transform: none;
                    transform: none;
                }
                    79.5% {
                    -webkit-transform: none;
                    transform: none;
                }
                80% {
                    -webkit-transform:skewX(-12.5deg)skewY(-12.5deg);
                    transform:skewX(-12.5deg)skewY(-12.5deg);
                }
                84% {
                    -webkit-transform:skewX(6.25deg)skewY(6.25deg);
                    transform:skewX(6.25deg)skewY(6.25deg);
                }

                88% {
                    -webkit-transform:skewX(-3.125deg)skewY(-3.125deg);
                    transform:skewX(-3.125deg)skewY(-3.125deg);
                }

                91% {
                    -webkit-transform:skewX(1.5625deg)skewY(1.5625deg);
                    transform:skewX(1.5625deg)skewY(1.5625deg);
                }

                94% {
                    -webkit-transform:skewX(-0.78125deg)skewY(-0.78125deg);
                    transform:skewX(-0.78125deg)skewY(-0.78125deg);
                }

                96.5% {
                    -webkit-transform:skewX(0.390625deg)skewY(0.390625deg);
                    transform:skewX(0.390625deg)skewY(0.390625deg);
                }

               to {
                    -webkit-transform:skewX(-0.1953125deg)skewY(-0.1953125deg);
                    transform:skewX(-0.1953125deg)skewY(-0.1953125deg);
                }
            }
.assem a{
    color:#fff;
    font-size:16px;
}
.assem i{
    background-color:crimson;
    padding:20px;
    border-radius: 50%;
    line-height:17px;
    width:57px;
    transition: all 0.6s ease;
    -webkit-transition: all0.6s ease;
}
.overlay{
    display: none;
    position: absolute;
    top:0;
    right:0;
    z-index:9999;
    background-color: #7fd4b1;
    width:100%;
    height:100%;
}
#close-btn{
    color: #fff;
    position: absolute;
    z-index: 200;
    top: 10px;
    left: 10px;
    font-size:40px;
    cursor: pointer;
    transition: all 0.3s linear;
}
#close-btn:hover{
    transform:rotate(180deg);
    -webkiy-transform:rotate(180deg);
}
.login-page{
    text-align: center;
}
.container{
    margin-top:40px;  
}
.container h2{
    margin-bottom: 30px;
    font-size:18px;
}
.input-f{
    position: relative
}
.input-finput[type="text"],.input-finput[type="password"]{
    background: transparent;
    width: 350px;
    padding: 16px0px;
    border:0;
    border-bottom: 1px solid#435160;
    font-family:'Droid Arabic Kufi';
}
.input-finput[type="submit"]{
    background-color: #59b991;
    width:350px;
    height:40px;
    border:0;
    border-radius:3px;
   cursor:pointer;
    transition: background 0.4sease-in-out;
    margin-top:30px;
    color: white;
    font-family: Droid Arabic Kufi;
}
.input-finput[type="submit"]:hover{
    background-color: #f7c50d;  
}
.register{
    margin-top:30px;
}
.register a{
    color:#fff;
    text-decoration: none;
    font-size:16px;
}
.register button{
    border:0;
    padding: 6px12px;
    display: inline-block;
    cursor: pointer;
}
.frgt{
    background-color: darkcyan;
    color:#fff;
    border-radius: 3px;
    transition: all 0.3s linear;
}
.frgt:hover{
    background-color:crimson;
}