API tools faq
paste
Advertisement
Guest User

Login Code

a guest
Mar 17th, 2016
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 6.72 KB | None | 0 0
raw download clone embed print report
  1. <? php
  2.     $usernameErr = "BILLYBOBJOW";
  3.     if (isset($_POST['submit'])) {
  4.         if ($_SERVER["REQUEST_METHOD"] == "POST") {
  5.         }
  6.     }
  7.        
  8.     function sanitizeInput($input) {
  9.         $input = trim($input);
  10.         $input = stripslashes($input);
  11.         $input = htmlspecialchars($input);
  12.         return $input;
  13.     }
  14. ?>
  15. <!DOCTYPE html>
  16. <html>
  17.     <head>
  18.         <title>CPHS Inklings</title>
  19.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.         <link rel="stylesheet" href="../stylesheets/main.css" type="text/css">
  21.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  22.     </head>
  23.     <style>
  24.         @font-face {
  25.           font-family: "Helvetica Neue";
  26.           src: url("../HelveticaNeue.ttf") format("truetype");
  27.         }
  28.        
  29.         body {
  30.             margin: 0px;
  31.             box-sizing: border-box;
  32.             overflow: hidden;
  33.             font-weight: 400;
  34.             font-family: "Helvetica Neue";
  35.         }
  36.        
  37.         #background-image {
  38.             margin: 0px;
  39.             position: fixed;
  40.             background-image: url(./courthouse-login.jpg);
  41.             background-size: cover;
  42.             background-position: 50% 50%;
  43.             background-repeat: no-repeat;
  44.             vertical-align: baseline;
  45.             width: 100%;
  46.             height: 100%;
  47.         }
  48.        
  49.         #overlay {
  50.             position: absolute;
  51.             margin: 0px;
  52.             width: 100%;
  53.             height: 100%;
  54.             background-color: rgba(0, 0, 0, 0.5);
  55.             display: flex;
  56.             flex-direction: column;
  57.             justify-content: center;
  58.         }
  59.        
  60.         #message {
  61.             position: relative;
  62.             display: flex;
  63.             justify-content: center;
  64.             transition: transform 1s;
  65.             transform: translateY(-10%);
  66.         }
  67.        
  68.         h1 {
  69.             font-size: 80px;
  70.             color: white;
  71.             font-weight: 100;
  72.         }
  73.        
  74.         #form-container {
  75.             display: flex;
  76.             justify-content: center;
  77.             width: 100%;
  78.             transform: translateY(10%);
  79.         }
  80.        
  81.         #form {
  82.             width: 300px;
  83.             background-color: rgba(255, 255, 255, 0.7);
  84.             border-radius: 10px;
  85.             box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  86.             padding: 20px;
  87.         }
  88.        
  89.         label {
  90.             display: block;
  91.             font-size: 1em;
  92.             margin-bottom: 5px;
  93.             color: black;
  94.             font-style: bold;
  95.         }
  96.        
  97.         input[type="text"], input[type="password"] {
  98.             width: 100%;
  99.             border-radius: 5px;
  100.             border-style: solid;
  101.             border-color: white;
  102.             font-size: 1em;
  103.             font-weight: 800;
  104.             font-family: "Helvetica Neue";
  105.             margin-bottom: 5px;
  106.             color: #ef1538;
  107.         }
  108.        
  109.         .hidden-form {
  110.             display: none;
  111.         }
  112.        
  113.         #expand-form {
  114.             color: black;
  115.             text-align: center;
  116.         }
  117.        
  118.         #expand-form:hover {
  119.             text-decoration: underline;
  120.         }
  121.        
  122.         .error {
  123.             color: red;
  124.         }
  125.     </style>
  126.     <script>
  127.         $(document).ready(function() {
  128.             $('body').width($(window).width());
  129.             $('body').height($(window).height());
  130.             $('#overlay').hide().delay(1000).fadeIn(1000);
  131.             $('#message').hide().delay(2000).fadeIn(1000);
  132.             $('#form').hide().delay(2000).fadeIn(1000).css("transform","translateY(-20%)");
  133.             var message1 = "Don't have an account?";
  134.             var message2 = "Already have an account?";
  135.             $('#expand-form').click(function() {
  136.                 if ($(this).html() == message2) {
  137.                     $(this).html(message1);
  138.                     $('#sign-in-option').prop("checked",true);
  139.                 }
  140.                 else {
  141.                     $(this).html(message2);
  142.                     $('#sign-up-option').prop("checked",true);
  143.                 }
  144.                 $('.hidden-form').each(function() {
  145.                     $(this).toggle("display");
  146.                 });
  147.             });
  148.         });
  149.     </script>
  150.     <body>
  151.         <div id="background-image">
  152.         </div>
  153.         <div id="overlay">
  154.             <div id="message">
  155.                 <h1>Sign In</h1>
  156.             </div>
  157.             <div id="form-container">
  158.                 <div id="form">
  159.                     <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" >
  160.                         <label class="hidden-form" for="first-name">First Name:
  161.                             <span class="error"><?php echo $firstnameErr; ?></span></label>
  162.                         <input class="hidden-form" type="text" id="first-name" name="first-name">
  163.                         <label class="hidden-form" for="last-name">Last Name:
  164.                             <span class="error"><?php echo $lastnameErr; ?></span></label>
  165.                         <input class="hidden-form" type="text" id="last-name" name="last-name">
  166.                         <label for="username">Username:
  167.                             <span class="error"><?php $usernameErr="BILLBOBJOW"; echo $usernameErr;?></span></label>
  168.                         <input type="text" id="username" name="username">
  169.                         <label for="password">Password:
  170.                             <span class="error"><?php echo $passwordErr; ?></span></label>
  171.                         <input type="password" id="password" name="password">
  172.                         <label class="hidden-form" for="confirm">Confirm Password:
  173.                             <span class="error"><?php echo $confirmErr ?></span></label>
  174.                         <input class="hidden-form" type="password" id="confirm" name="confirm">
  175.                         <input style="display: none" id="sign-in-option" type="radio" name="sign-type" value="sign-in" checked="checked">
  176.                         <input style="display: none" id="sign-up-option" type="radio" name="sign-type" value="sign-up">
  177.                         <div style="display: flex; justify-content: center">
  178.                             <input class="inklings-button" id="submit" type="submit" value="Submit" name="submit">
  179.                         </div>
  180.                         <div id="expand-form">
  181.                             Don't have an account?
  182.                         </div>
  183.                     </form>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.        <!--<table style="width: 100%; height: 100%">
  188.        </table>-->
  189.     </body>
  190. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!