Simple and Responsive Login Form without Framework

Simple and Responsive Login Form without Framework

Create Simple and Responsive Login Form without Framework using HTML and CSS by Vishesh Grewal
Here In this post I share you

How to create Login Form? [Simple, Responsive, Mobile Friendly]

Creating a Login Form is so simple. I share you source code for Login Form.

Here is demo of Login Form:-

  1. First Create a HTML page on your server. 
  2. Add CSS for login form.
    Style for CSS is below, copy and paste this code.
  3. 
    @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');
    
    *{
      margin: 0;
      padding: 0;
      outline: none;
      box-sizing: border-box;
      font-family: 'Raleway', sans-serif;
    }
    
    body {background: linear-gradient(-45deg, #ee7752, #ff5530, #23a6d5, #ff0000);
     background-size: 400% 400%;
     -webkit-animation: gradient 15s ease infinite;
             animation: gradient 15s ease infinite;
    }
    
    @-webkit-keyframes gradient {
     0% {
      background-position: 0% 50%;
     }
     50% {
      background-position: 100% 50%;
     }
     100% {
      background-position: 0% 50%;
     }
    }
    
    @keyframes gradient {
     0% {
      background-position: 0% 50%;
     }
     50% {
      background-position: 100% 50%;
     }
     100% {
      background-position: 0% 50%;
     }
    }
    
    .cont{
      position: relative;
      width: 25%;
      height: 400px;
      padding: 10px 25px;
      margin: 10vh auto;
      background: #fff;
      border-radius: 8px;
    }
    
    .form{ width: 100%; height: 100%; }
    
    h1, h2, .user, .pass{ 
      text-align: center;
      display: block;
    }
    
    h1{ 
      color: #606060;
      font-weight: bold;
      font-size: 40px;
      margin: 30px auto;
    }
    
    .user, .pass, .login{
      width: 100%;
      height: 45px;
      border: none;
      border-radius: 5px;
      font-size: 20px;
      font-weight: lighter;
      margin-bottom: 30px;
    }
    
    .user, .pass{ background: #ecf0f1; }
    
    .login{
      color: #fff;
      cursor: pointer;
      margin-top: 20px;
      background: #3598dc;
      transition: background 0.4s ease;
    }
    
    .login:hover{ background: #3570dc; }
    
    @media only screen and (min-width : 280px) {
      .cont{ width: 90% }
    }
    
    @media only screen and (min-width : 480px) {
      .cont{ width: 60% }
    }
    
    @media only screen and (min-width : 768px) {
      .cont{ width: 40% }
    }
    
    @media only screen and (min-width : 992px) {
      .cont{ width: 30% }
    }
    
    h2{ color: #fff; margin-top: 25px; }
     
  • Add HTML for Login Form. 

  • Copy and paste this code.

    
    <h2> Responsive Login Form</h2>
    <div class="cont">
    <div class="form">
    <form action="">
          <h1>
    Login</h1>
    <input type="text"
                 class="user"
                 placeholder="Username"/>
          <input type="password" 
                 class="pass"
                 placeholder="Password"/>
          <button class="login">Login</button>
        </form>
      </div>
    </div>
    

    Create JavaScript Obfuscator Tool [PHP]

    Create JavaScript Obfuscator Tool [PHP]

    Create Your Own JavaScript Obfuscator Tool using PHP visheshgrewal.blogspot.com


    JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.


    What is Javascript Obfuscator?

    To transforms your original JavaScript source code into a new representation that's harder to understand, copy, re-use and modify without authorization. The obfuscated result will have the exact functionality of the original code.

    Why Obfuscation?

    • Code size will be reduced.
    • Hide the business logic and your code from others.
    • Reverse engineering is highly difficult.
    • In JavaScript, download time will be reduced.
    If you are developing enterprise application, Then I recommend you can use a product like Jscrambler for obfuscating your code. Reverse engineering of obfuscated code is really difficult to Decode.
     Example of Obfuscating of JavaScript Code.
    Original JavaScript code:-
    function hello(name) {
        console.log('Hello, ' + name);
    }
    hello('New user');

    After obfuscation:-
    
    eval(function(p,a,c,k,e,d)
    {while(c--){if(k[c])
    {p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}
    return p}('7 0(1){6.5(\'4, \'+1)}0(\'3 2\');',8,8,
    'hello|name|user|New|Hello|log|console|function'.split('|')))
    

    How To make your Own JavaScript Obfuscator by Using PHP?
    To create your own JavaScript Obfuscator, You have an hosting account with Supported PHP version 5.4<.
    1.  Create a file with name index.php
    • Click Here to Get Code for Index.php file from Github.
    2. Create 2nd file with name  HunterObfuscator.php

    
    <?php
    class HunterObfuscator
    {
        private $code;
        private $mask;
        private $interval;
        private $option = 0;
        private $expireTime = 0;
        private $domainNames = array();
    
        function __construct($Code, $html = false)
        {
            if ($html) {
                $Code = $this->cleanHtml($Code);
    $this->code = $this->html2Js($Code);
    } else {
    $Code = $this->cleanJS($Code);
    $this->code = $Code;
    }
    
    $this->mask = $this->getMask();
    $this->interval = rand(1, 50);
    $this->option = rand(2, 8);
    }
    
    private function getMask()
    {
    $charset = str_shuffle('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
    return substr($charset, 0, 9);
    }
    
    private function hashIt($s)
    {
    for ($i = 0; $i < strlen($this->mask); ++$i)
    $s = str_replace("$i", $this->mask[$i], $s);
    return $s;
    }
    
    private function prepare()
    {
    if (count($this->domainNames) > 0) {
    $code = "if(window.location.hostname==='" . $this->domainNames[0] . "' ";
    for ($i = 1; $i < count($this->domainNames); $i++)
    $code .= "|| window.location.hostname==='" . $this->domainNames[$i] . "' ";
    $this->code = $code . "){" . $this->code . "}";
    }
    if ($this->expireTime > 0)
    $this->code = 'if((Math.round(+new Date()/1000)) < ' . $this->expireTime . '){' . $this->code . '}';
    }
    
    private function encodeIt()
    {
    $this->prepare();
    $str = "";
    for ($i = 0; $i < strlen($this->code); ++$i)
    $str .= $this->hashIt(base_convert(ord($this->code[$i]) + $this->interval, 10, $this->option)) . $this->mask[$this->option];
    return $str;
    }
    
    public function Obfuscate()
    {
    $rand = rand(0,99);
    $rand1 = rand(0,99);
    return "var _0xc{$rand}e=[\"\",\"\x73\x70\x6C\x69\x74\",\"\x30\x31\x32\x33\x34\x35\x36\x37\x38\x39\x61\x62\x63\x64\x65\x66\x67\x68\x69\x6A\x6B\x6C\x6D\x6E\x6F\x70\x71\x72\x73\x74\x75\x76\x77\x78\x79\x7A\x41\x42\x43\x44\x45\x46\x47\x48\x49\x4A\x4B\x4C\x4D\x4E\x4F\x50\x51\x52\x53\x54\x55\x56\x57\x58\x59\x5A\x2B\x2F\",\"\x73\x6C\x69\x63\x65\",\"\x69\x6E\x64\x65\x78\x4F\x66\",\"\",\"\",\"\x2E\",\"\x70\x6F\x77\",\"\x72\x65\x64\x75\x63\x65\",\"\x72\x65\x76\x65\x72\x73\x65\",\"\x30\"];function _0xe{$rand1}c(d,e,f){var g=_0xc{$rand}e[2][_0xc{$rand}e[1]](_0xc{$rand}e[0]);var h=g[_0xc{$rand}e[3]](0,e);var i=g[_0xc{$rand}e[3]](0,f);var j=d[_0xc{$rand}e[1]](_0xc{$rand}e[0])[_0xc{$rand}e[10]]()[_0xc{$rand}e[9]](function(a,b,c){if(h[_0xc{$rand}e[4]](b)!==-1)return a+=h[_0xc{$rand}e[4]](b)*(Math[_0xc{$rand}e[8]](e,c))},0);var k=_0xc{$rand}e[0];while(j>0){k=i[j%f]+k;j=(j-(j%f))/f}return k||_0xc{$rand}e[11]}eval(function(h,u,n,t,e,r){r=\"\";for(var i=0,len=h.length;iencodeIt() . "\"," . rand(1, 100) . ",\"" . $this->mask . "\"," . $this->interval . "," . $this->option . "," . rand(1, 60) . "))";
    }
    public function setExpiration($expireTime)
    {
    if (strtotime($expireTime)) {
    $this->expireTime = strtotime($expireTime);
    return true;
    }
    return false;
    }
    
    public function addDomainName($domainName)
    {
    if ($this->isValidDomain($domainName)) {
    $this->domainNames[] = $domainName;
    return true;
    }
    return false;
    }
    
    private function isValidDomain($domain_name)
    {
    return (preg_match("/^([a-z\d](-*[a-z\d])*)(\.([a-z\d](-*[a-z\d])*))*$/i", $domain_name)
    && preg_match("/^.{1,253}$/", $domain_name)
    && preg_match("/^[^\.]{1,63}(\.[^\.]{1,63})*$/", $domain_name));
    }
    
    private function html2Js($code)
    {
    $search = array(
    '/\>[^\S ]+/s',     // strip whitespaces after tags, except space
    '/[^\S ]+\
    /' // Remove HTML comments ); $replace = array( '>', '<',             '\\1',             ''         );         $code = preg_replace($search, $replace, $code);         $code = "document.write('" . addslashes($code . " ") . "');";         return $code;     }      private function cleanHtml($code)     {         return preg_replace('//', '', $code); }  private function cleanJS($code) { $pattern = '/(?:(?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:(?<!\:|\\\|\')\/\/.*))/';         $code = preg_replace($pattern, '', $code);         $search = array(             '/\>[^\S ]+/s',     // strip whitespaces after tags, except space '/[^\S ]+\/' // Remove HTML comments ); $replace = array( '>', '<',             '\\1',             ''         );         return preg_replace($search, $replace, $code);     } }
    Vishesh Auto Index 5 Features,Changelog & Download

    Vishesh Auto Index 5 Features,Changelog & Download

    Vishesh Auto Index

    A mobile focused autoindex script that allows users to create a mobile download site. Vishesh Auto Index 5 specially made for mp3 downloading websites.

    If you facing any problem/issue. Feel free to contact me.
    Features:-

    Changelog:- 

    • Page Loading Speed Optimised.
    • Removed some Javascript.
    • Improve stability.
    • Changes in Download Page.
    • Removed Facebook comments plugin.
    • Removed Old Share Buttons with New Icons.
    • Updates Page Fully Change.
    • Improved Updates Manager.
    • File Direct Download instead of using octet-stream.
    • Fixed some known bugs and make more responsive layout.
    • You can change logo anytime.
    • Mass Mp3 tags Changer of All Files in single click.
    • Added FAQ links.
    • Removed All Ads.
    • Admin Panel Security improved.
    • Cookies timelimit Changed.
    • And Much More.

     Old Features:-

    • Every File Have Title, Artist, Category, Label, Lyrics for mp3.
    • Bug Fixed for Bitrate Converted Files.
    • http redirect to http://www (Use https if you have secured connection).
    • Attractive StyleSheet with Bootstrap CSS and Font awesome Icon.
    • Faster Loading.
    • Powerful Updates Manager.
    • Facebook Page Like Button In Homepage & Download Page.
    • Search Form.
    • Bit Rate Converter(requires FFMPEG).
    • Realtime VideoWatermark (requires GDlibrary).
    • Realtime Image/Icon Watermark.
    • Upload Icon for every types of file.
    • AutoMated Sitemap(Full).
    • url.txt for Search Engine Crawling (Make Indexed Your webpage on Search Engine).
    • Recommended Files in Download Page.
    • File display system like common download portals.
    • Upload/Import via URL.
    • Full SEO Optimized.
    • Preview for almost every types of file.
    • Auto Mp3 Tag Editor(if on from admin panel).

    How To Install :-
    ################################
    1. Download Vishesh Auto Index 5
    2. Upload And Extract It on your Online File Manager
    3. Now Goto:-http://yoursitename/install.php 
    4.Enter your database details  and Website details.

    5. Enjoy it.

    How To Access Admin Panel:-###################################
    For access admin panel. Please visit like;
      http://yoursite/admin.php

    Screenshot:-

    Homepage

    Vishesh Auto Index Homepage Snapshot

    Updates Page


    Download Page



    Generating Download Page