Teochew Thunder: Web Tutorial: Hacker Republic Login Sequence (Part 3/4)

Things are starting to get exciting. We now have the first part of the login sequence down, and it's on to the second part.

The screen went blank. Then an animated door opened and a Lara Croft-like figure stepped out. A speech bubble materialized with the text [WHO GOES THERE?]. She clicked on the bubble and wrote Wasp. She got the instant reply [PROVE IT - OR ELSE...] as the animated Lara Croft unlocked the safety catch on her gun.

Create a new file and call it confirm.php. This will be where the Lara Croft-like figure appears. You have a basic HTML setup and a PHP snippet at the top to initialize a session. The page will still reference tt_millenniumlogin.js. You also have a div with the id of guard_wrapper to hold the Lara Croft-like figure.

confirm.php

<?php
session_start();
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Who goes there?</title>

        <script type="text/javascript" src="js/tt_millenniumlogin.js"></script>
    </head>

    <body>
        <div id="guard_wrapper">

        </div>
    </body>
</html>

We'll be using these images.

Now style guard_wrapper. We'll make it 250 by 400 pixels, and set it somewhere in the middle of the screen via the margin property. Then we'll set the background to hold the image.

confirm.php

So now we have this Lara Croft-like figure in the middle of the screen...

Time to build the door. Let's have another div, this time with the id of guard_door, inside the guard_wrapper div. The styling for the guard_door div is included. Here, we've included a "window" in the door using the before pseudoselector. The width and height are set relative to the guard_door div's size, which is in turn set to 100% of the guard_wrapper div's size. The "window" has its outline property set to 800 pixels and is colored black. Due to the guard_door div's overflow property being set to hidden, it gives the illusion of the entire door being black except for the "window"!

confirm.php

Yep, here's what it looks like now.

Next, we're gonna animate the door. To do that, first add a transition property to the guard_door CSS. Then add a PHP block with a conditional block near the bottom of the page. This code should fire off only if the user is logged in. So if someone directly accesses this page without having gone through a proper login, nothing happens.

confirm.php

If the user arrived at this page via a proper login, a JavaScript snippet fires off after a tiny delay. The guard_door div's margin-left property is set to -100%, and the transition takes 5 seconds, giving the appearance that the door is sliding open!

confirm.php

Try it now.

If you would rather the door slide behind the "doorway", try this instead.

confirm.php

            #guard_wrapper
            {
                width:250px;
                height:400px;
                margin:10% auto 0 auto;
                background-image:url(img/laracroft.jpg);
                background-position:center center;
                background-repeat:no-repeat;
                background-size:cover;
                overflow:hidden;
            }

There you go.

Next, we add the speech bubble. There's a speech_wrapper div which a speech div nested within. The function of the speech_wrapper div is simply to hold the speech div in place. It's just set to 250 by 250 pixels, with a margin of 5 pixels from the top. But speech itself has a black background with white text, and here I've used the before pseudoselector to provided the black triangle at the top.

confirm.php

<?php
session_start();
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Who goes there?</title>

        <style>
            #guard_wrapper
            {
                width:250px;
                height:400px;
                margin:10% auto 0 auto;
                background-image:url(img/laracroft.jpg);
                background-position:center center;
                background-repeat:no-repeat;
                background-size:cover;
                overflow:hidden;
            }

            #guard_door
            {
                width:100%;
                height:100%;
                transition:all 5s;
                -webkit-transition:all 5s;
                margin-left:0;
                overflow:hidden;
            }

            #guard_door:before
            {
                display:block;
                content:'';
                margin:20px auto 0 auto;
                outline:800px solid #000000;
                width:50%;
                height:30%;
            }

            #speech_wrapper
            {
                width:250px;
                height:200px;
                margin:5px auto 0 auto;
            }

            #speech
            {
                width:240px;
                height:80px;
                background:#000000;
                position:relative;
                border-radius:10px;
                text-align:center;
                color:#FFFFFF;
                padding:5px;
            }

            #speech:before
            {
                content:"";
                position:absolute;
                right:50%;
                top:-50px;
                width:0;
                height:0;
                border-bottom:25px solid #000000;
                border-right:20px solid transparent;
                border-top:25px solid transparent;
            }
        </style>

        <script type="text/javascript" src="js/tt_millenniumlogin.js"></script>
    </head>
    <body>
        <div id="guard_wrapper">
            <div id="guard_door">

            </div>
        </div>
        <br />
        <div id="speech_wrapper">
            <div id="speech">

            </div>
        </div>
        <?php
        if ($_SESSION["loggedin"])
        {
        ?>
            <script>
                setTimeout(function() {
                document.getElementById("guard_door").style.marginLeft="-100%";
                },1000);
            </script>
        <?php
        }
        ?>
    </body>
</html>

So far so good?

Next, we'll build two screens into the speech div, using another two divs with the ids of confirmid and confirmpassword respectively. The idea here is that confirmid is shown first, and when the user types in a valid id (like "Wasp" in the example), confirmid disappears and confirmpassword is shown. One says "WHO GOES THERE?" and the other says "PROVE IT, OR ELSE..."

confirm.php

        <div id="speech_wrapper">
            <div id="speech">
                <div id="confirmid">
                    <br />
                    WHO GOES THERE?
                </div>
                <div id="confirmpassword">
                    <br />
                    PROVE IT, OR ELSE....
                </div>
            </div>
        </div>

This is what you should see. Both confirmid and confirmpassword are visible.

Here's the content for these divs.
confirm.php

        <div id="speech_wrapper">
            <div id="speech">
                <div id="confirmid">
                    <br />
                    WHO GOES THERE?
                    <br />
                    <input type="text" id="txtConfirmId" maxlength="20">
                     
                    <input type="button" value="go">
                </div>
                <div id="confirmpassword">
                    <br />
                    PROVE IT, OR ELSE....
                    <br />
                    <input type="password" id="txtConfirmPassword" maxlength="20">
                     
                    <input type="button">
                </div>
            </div>
        </div>

This is what you should see now. The content overflows the bubble, but that's all right. We'll take care of that soon.

Now add this line just after the code for opening the door. This fires off the confirm_screen() function which we'll write next, in tt_millenniumlogin.js.

confirm.php

The confirm_screen() function basically decides which div to display and which to hide. In this case, the confirmid div is shown first, remember?

It also changes the background image of the guard_wrapper div accordingly.

tt_millenniumlogin.js

function close_overlay(ovid)
{
    var overlay=document.getElementById(ovid);
    overlay.style.display="none";
}

function confirm_screen(id,password)
{
    document.getElementById("confirmid").style.display=(id?"block":"none");
    document.getElementById("confirmpassword").style.display=(password?"block":"none");

    document.getElementById("guard_wrapper").style.backgroundImage="url(img/laracroft"+(id?"":"_proveit")+".jpg)";

}

So running the code for confirm.php again, this is what you should see now.

We'll handle the second login process.

Teochew Thunder

Pages

Saturday 18 March 2017

Web Tutorial: Hacker Republic Login Sequence (Part 3/4)

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews