C#

Friday, January 24, 2014

LoginPage Using jQuery and CSS With Remember me, Forgot Password and Registration in Asp.Net

LoginPage :

Register Popup :
Forgot Password PopUp:

Code in ASpx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryPopUp.aspx.cs"
    Inherits="Jquerytest.JQueryDraggable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RaffiApp</title>
    <link href="Styles/popup1.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(function () {
            var overlay = $('<div id="overlay"></div>');

            $('.x').click(function () {
                $('.popup').hide();
                overlay.appendTo(document.body).remove();
                return false;
            });
            $('.Forgotx').click(function () {
                $('.Forgotpopup').hide();
                overlay.appendTo(document.body).remove();
                return false;
            });

            $('.click').click(function () {
                overlay.show();
                overlay.appendTo(document.body);
                $('.popup').show();
                return false;
            });
            $('.forgot').click(function () {
                overlay.show();
                overlay.appendTo(document.body);
                $('.Forgotpopup').show();
                return false;
            });
        });
    </script>
</head>
<body style="background-image: url(Images/BG.jpg);">
    <form id="form1" runat="server">
    <div class='popup'>
        <div class='content'>
            <a href="#" class="x">&#10006;</a>
            <p>
                <b>RegisterHere</b></p>
            <label>
                Enter FirstName :</label>
            <asp:TextBox ID="txtFirstName" class="Logintext" runat="server"></asp:TextBox>
            <label>
                Enter UserName :</label>
            <asp:TextBox ID="txtRegUserName" class="Logintext" runat="server"></asp:TextBox>
            <label>
                Password :</label>
            <asp:TextBox ID="txtRegpassword" TextMode="Password" class="Logintext" runat="server"></asp:TextBox>
            <label>
                Confirm Password :</label>
            <asp:TextBox ID="txtRegCpassword" TextMode="Password" class="Logintext" runat="server"></asp:TextBox>
            <asp:Button ID="btnSubmit" class="Loginbutton" OnClick="btnSubmitClick" runat="server"
                Text="Submit" />
        </div>
    </div>
    <div class='Forgotpopup'>
        <div class='Forgotcontent'>
            <a href="#" class="Forgotx ">&#10006;</a>
            <p>
                <b>Forgot Password</b></p>
            <label>
                Enter UserName/EmailId :</label>
            <asp:TextBox ID="txtEmailId" class="Logintext" runat="server"></asp:TextBox><br />
            <asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSendClick" class="Loginbutton" />
        </div>
    </div>
    <div class='login'>
        <asp:Label ID="lblUserName" runat="server" Text="UserName :" class="Loginlable"></asp:Label>
        <asp:TextBox ID="txtUserName" runat="server" class="Logintext"></asp:TextBox>
        <asp:Label ID="lblPassword" runat="server" Text="Password :" class="Loginlable"></asp:Label>
        <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" class="Logintext"></asp:TextBox>
        <div id="lower">
            <input type="checkbox" /><label for="checkbox">Remember Me</label>
            <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLoginClick" class="Loginbutton" /><br />
            <br />
            <a href='' class='click'>Register Here</a><a href='' class='forgot'>Forgot Password</a>
        </div>
    </div>
    </form>
</body>
</html>
CSS CODE:
    form {
            margin: 0 auto;
            margin-top: 20px;
        }
    body 
        {           
            /*background-image:url(../Images/BG.jpg);*/
            width: 24%;   
            height: 119px;   
            font-family: "Helvetica Neue", Helvetica, sans-serif;   
            color: #444;   
            -webkit-font-smoothing: antialiased;    background: #f0f0f0;
        }
  #overlay
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            filter: alpha(opacity=70);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            z-index: 100;
            display: none;
        }
        .content a
        {
            text-decoration: none;
        }
        .popup
        {
            width: 100%;
            margin: 0 auto;
            display: none;
            position: fixed;
            z-index: 101;
        }
        .content
        {
            min-width: 200px;
            width: 350px;
            min-height: 440px;
            margin: 100px auto;
            background: #f3f3f3;
            position: relative;
            z-index: 103;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px #000;
        }
        .content p
        {
            clear: both;
            color: #555555;
            text-align: justify;
        }
        .content p a
        {
            color: #d91900;
            font-weight: bold;
        }
        .content .x
        {
            float: right;
            height: 25px;
            left: 22px;
            position: relative;
            top: -20px;
            width: 25px;           
            display:block;
            text-transform:uppercase;
            text-decoration:none;
            color:#fff;
            font-family:"Tahoma", Helvetica, sans-serif;
            text-align:center;
            font-size:18px;
            line-height:1.4em;
            border-color: #1472ad;
            background-color: #F00;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#cc0000));
            background-image: -webkit-linear-gradient(top, #F00, #cc0000);
            background-image: -moz-linear-gradient(top, #F00, #cc0000);
            background-image: -o-linear-gradient(top, #F00, #cc0000);
            background-image: linear-gradient(to bottom, #F00, #cc0000);
            box-shadow:0px 0px 2px 0px #666;
            -moz-box-shadow:0px 0px 2px 0px #666;
            -webkit-box-shadow:0px 0px 2px 0px #666;
            border-radius:50%;
            -moz-border-radius:50%;
            -webkit-border-radius:50%;
            text-indent:1px;
            font-weight:bold;
        }
        .content .x:hover
        {
            cursor: pointer;
        }       
       
          .Forgotcontent a
        {
            text-decoration: none;
        }
        .Forgotpopup
        {
            width: 100%;
            margin: 0 auto;
            display: none;
            position: fixed;
            z-index: 101;
            margin-top:69px;
        }
        .Forgotcontent
        {          
            min-width: 200px;
            width: 350px;
            min-height: 270px;
            margin: 100px auto;
            background: #f3f3f3;
            position: relative;
            z-index: 103;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px #000;
        }
        .Forgotcontent p
        {
            clear: both;
            color: #555555;
            text-align: justify;
        }
        .Forgotcontent p a
        {
            color: #d91900;
            font-weight: bold;
        }
        .Forgotcontent .Forgotx
        {
            float: right;
            height: 25px;
            left: 22px;
            position: relative;
            top: -20px;
            width: 25px;           
            display:block;
            text-transform:uppercase;
            text-decoration:none;
            color:#fff;
            font-family:"Tahoma", Helvetica, sans-serif;
            text-align:center;
            font-size:18px;
            line-height:1.4em;
            border-color: #1472ad;
            background-color: #F00;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#cc0000));
            background-image: -webkit-linear-gradient(top, #F00, #cc0000);
            background-image: -moz-linear-gradient(top, #F00, #cc0000);
            background-image: -o-linear-gradient(top, #F00, #cc0000);
            background-image: linear-gradient(to bottom, #F00, #cc0000);
            box-shadow:0px 0px 2px 0px #666;
            -moz-box-shadow:0px 0px 2px 0px #666;
            -webkit-box-shadow:0px 0px 2px 0px #666;
            border-radius:50%;
            -moz-border-radius:50%;
            -webkit-border-radius:50%;
            text-indent:1px;
            font-weight:bold;
        }
        .Forgotcontent .x:hover
        {
            cursor: pointer;
        }
       
        p a {
            font-size: 11px;
            color: #aaa;
            float: right;
            margin-top: -13px;
            margin-right: 20px;
        }
        p a:hover {
            color: #555;
        }
        .login
        {
            position: fixed;
            width: 360px;
            height: 280px;
            top: 50%;
            left: 50%;
            margin-top: -140px;
            margin-left: -170px;
       background: #fff;
            border-radius: 3px;
            border: 1px solid #ccc;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
        }
        .Loginlable
        {
            color: #555;
            display: inline-block;
            margin-left: 18px;
            padding-top: 10px;
            font-size: 14px;
        }
      
        .Logintext
        {
            color: #777;
            padding-left: 10px;
            margin: 10px;
            margin-top: 12px;
            margin-left: 18px;
            width: 290px;
            height: 35px;
            color: #777;   
            border: 1px solid #c7d0d2;
            border-radius: 2px;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;           
            -webkit-transition: all .4s ease;
            -moz-transition: all .4s ease;
            transition: all .4s ease;
        }
        .Logintext: hover
        {
            border: 1px solid #b6bfc0;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
        }
        .Logintext: focus
        {
             border: 1px solid #a8c9e4;
             box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
        }
        input[type=checkbox] {
            margin-left: 20px;
            margin-top: 30px;
        }
        .check {
            margin-left: 3px;            
        }
       
        .Loginbutton
        {           
           float: right;
            margin-right: 35px;
            margin-top: 20px;
            width: 80px;
            height: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #acd6ef; /*IE fallback*/
            background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
            background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
            background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
            border-radius: 30px;
            border: 1px solid #66add6;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
            cursor: pointer;
        }
        .Loginbutton : hover
        {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
            background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
            background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        }
        .Loginbutton:active {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
            background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
            background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
        }              
      
        #lower {
                background: #ecf2f5;
                width: 100%;
                height: 89px;
                margin-top: 20px;
               }
        .click
             {
                margin-left: 25px;
                width:100px;
                left:20px;
                font-size:12px;
            }
       .forgot
             {
                margin-left: 25px;
                width:100px;
                left:20px;
                font-size:12px;

            }
Posted by at No comments:

Clock Using jQuery Without Plugin


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/TimeClock.css" rel="stylesheet" type="text/css"></link>
    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create two variable with the names of the months and days in an array
            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

            // Create a newDate() object
            var newDate = new Date();
            // Extract the current date from Date object
            newDate.setDate(newDate.getDate());
            // Output the day, date, month and year
            $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

            setInterval(function () {
                // Create a newDate() object and extract the seconds of the current time on the visitor's
                var seconds = new Date().getSeconds();
                // Add a leading zero to seconds value
                $("#sec").html((seconds < 10 ? "0" : "") + seconds);
            }, 1000);

            setInterval(function () {
                // Create a newDate() object and extract the minutes of the current time on the visitor's
                var minutes = new Date().getMinutes();
                // Add a leading zero to the minutes value
                $("#min").html((minutes < 10 ? "0" : "") + minutes);
            }, 1000);

            setInterval(function () {
                // Create a newDate() object and extract the hours of the current time on the visitor's
                var hours = new Date().getHours();
                // Add a leading zero to the hours value
                $("#hours").html((hours < 10 ? "0" : "") + hours);
            }, 1000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="clock">
        <div id="Date">
        </div>
<ul>
<li id="hours"></li>
<li class="point">:</li>
<li id="min"></li>
<li class="point">:</li>
<li id="sec"></li>
</ul>
</div>
</form>
</body>
</html>
</div>

css code:

body {
}
.clock 
{    
    margin-left:950px;
    margin-right:50px;
    width: 350px;    
    padding: 10px;
    border: 1px solid #333;
    color: #fff;
    background-color:Black;    
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
    
}

#Date {
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
    text-shadow: 0 0 4px #00c6ff;
}

ul {
    width: 300px;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    text-align: center;
}

ul li {
    display: inline;
    font-size: 2em;
    text-align: center;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    text-shadow: 0 0 5px #00c6ff;
}

.point {
    position: relative;
    -moz-animation: mymove 1s ease infinite;
    -webkit-animation: mymove 1s ease infinite;
    padding-left: 10px;
    padding-right: 10px;
}

Posted by at No comments:
Subscribe to: Posts (Atom)