Sign upLogin

ali2210/WizDwarf

View on GitHub
Star
credit.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Wizdwarfs</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
    <link rel='stylesheet' type='text/css' media='screen' href='/css/payment.css'>
    <script src='/js/payment.js'></script>
</head>
<body>
  <div class='main-dashboard-div'>
    <nav class="navbar navbar-expand-md navbar-light custom-navbar">
      <a class="navbar-brand" href="/home">
        <img src="/images/logo.png" alt="Logo" class="logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active pl-3">
            <a class="nav-link" href="/dashboard">
              <i class="fa fa-home icon-light change-service-color" aria-hidden="true"></i>
            </a>
          </li>
      <li class="nav-item dropdown pl-3">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-briefcase change-service-color" aria-hidden="true"></i>
        </a>
        <div class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="/dashbaord/setting/profile"><i class="fa fa-user-circle-o change-service-color" aria-hidden="true"></i> Edit Profile</a>
          <a class="dropdown-item" href="/dashboard/setting/pay/credit/add"><i class="fa fa-shopping-cart change-service-color" aria-hidden="true"></i> Monetize</a>
          <a class="dropdown-item" href="/dashbaord/setting/about"><i class="fa fa-book change-service-color" aria-hidden="true"></i> Biography</a>
        </div>
      </li>
     </ul>
    </div>
  </div> 
  <div claas="man" style="margin-top: 200px;
  display: flex;
  justify-content: right;
  position: absolute;
  margin-right: 1px;
  height: 50%; perspective-origin: center ; 
  margin-left: -30%;">
    <div class="main">
      <div class="human">
        <div class="human__hair-b"></div>
        <div class="human__head">
          <div class="human__face">
            <div class="human__hair-c">
              <div class="human__hair"></div>
            </div>
            <div class="human__nose"></div>
            <div class="human__eye-l"></div>
            <div class="human__eye-r"></div>
            <div class="human__cheeks-l"></div>
            <div class="human__cheeks-r"></div>
            <div class="human__mouth"></div>
            <div class="human__eyebrow-l"></div>
            <div class="human__eyebrow-r"></div>
          </div>
        </div>
        <div class="human__ears">
          <div class="human__ear-l"></div>
          <div class="human__ear-r"></div>
        </div>
        <div class="human__arm-l"></div>
        <div class="human__arm-r"></div>
        <div class="human__body-c">
          <div class="human__body"></div>
        </div>
        <div class="human__legs">
          <div class="human__leg-l"></div>
          <div class="human__leg-r"></div>
        </div>
        <div class="human__shoes">
          <div class="human__shoe-c">
            <div class="human__shoe-l"></div>
          </div>
          <div class="human__shoe-c">
            <div class="human__shoe-r"></div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="table__top">
          <div class="laptop"></div>
          <div class="cup"></div>
        </div>
        <div class="table__bottom"></div>
        <div class="table__legs">
          <div class="table__leg"></div>
          <div class="table__leg"></div>
          <div class="table__leg"></div>
          <div class="table__leg"></div>
        </div>
      </div>
      <div class="chair">
        <div class="chair__top"></div>
        <div class="chair__line"></div>
        <div class="chair__base"></div>
        <div class="chair__wheels">
          <div class="chair__wheel"></div>
          <div class="chair__wheel"></div>
        </div>
      </div>
      <div class="trashcan"></div>
      <div class="window">
        <div class="window__container">
          <div class="building">
            <div class="building__window building__window--active building__window-on-1"></div>
            <div class="building__window building__window--active building__window-on-2"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active building__window-on-3"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
          </div>
          <div class="building">
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active building__window-on-4"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active building__window-on-3"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
          </div>
          <div class="building">
            <div class="building__window-f"></div>
            <div class="building__window-f building__window--active building__window-on-1"></div>
            <div class="building__window-f building__window--active"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f building__window--active"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f building__window--active building__window-on-2"></div>
            <div class="building__window-f building__window--active"></div>
            <div class="building__window-f"></div>
            <div class="building__window-f building__window--active"></div>
            <div class="building__window-f"></div>
          </div>
          <div class="building">
            <div class="building__window"></div>
            <div class="building__window building__window--active building__window-on-1"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active building__window-on-4"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window building__window--active"></div>
            <div class="building__window"></div>
            <div class="building__window"></div>
          </div>
        </div>
      </div>
      <div class="lamp">
        <div class="lamp__top">
          <div class="lamp__light"></div>
        </div>
        <div class="lamp__base-c">
          <div class="lamp__base"></div>
        </div>
      </div>
      <div class="bricks">
        <div class="brick"></div>
        <div class="brick"></div>
      </div>
    </div>
  </div>
  <div class="loading" style="display: flex;
  position: absolute;
  margin-top: 100%;
  margin-right: 30px;
  perspective-origin: center;">
    <div class="loader">
      <div class="inner one"></div>
      <div class="inner two"></div>
      <div class="inner three"></div>
      <div class="inner four"></div>
      <div class="inner five"></div>
    </div><div class="loader">
      <div class="inner one"></div>
      <div class="inner two"></div>
      <div class="inner three"></div>
      <div class="inner four"></div>
      <div class="inner five"></div>
    </div>
  </div>
  <div class="form-main">
    <form action="/dashboard/setting/pay/credit/add" method="post" class="credit-form">
      <div class="main container card-form">
        <div class="card text-white " style="max-width: 18rem;">
          <div class="card-header"> Credit Card </div>
          <div class="card-body">
            <!-- <h5 class="card-title"><i class="fa fa-paypal change-service-blue " aria-hidden="true" id="loading"></i></h5> -->
            <p class="card-text">
               <div class="form row custom col md-3" >
                  <label for="cardNo" class="custom-form-label holder"> Card Number </label> 
                  <input type="text" class="custom-form-input" id="cardNo" name="cardNo" onchange="InputCardNumberEvent()" required>
               </div>
               <div class="form row custom col md-3" >
                <label for="name" class="custom-form-label holder"> First Name </label> 
                <input type="text" class="custom-form-input" id="name" name="fholder">
               </div>
             <div class="form row custom col md-3" >
              <label for="surename" class="custom-form-label holder"> Surename </label> 
              <input type="text" class="custom-form-input" id="surename" name="surename">
            </div>
            <div class="form row custom col md-3" >
              <label for="cardtype" class="custom-form-label holder"> Card Type </label> 
              <input type="text" class="custom-form-input" id="cardtype" name="cardtype">
            </div>
             <div class="form row custom col md-3" >
              <label for="expire" class="custom-form-label holder"> Expire date </label> 
              <input type="month" class="custom-form-input year" id="expire" name="expire">
            </div>
            <div class="form row custom col md-3" >
              <label for="cvv" class="custom-form-label holder"> CVV code </label> 
              <input type="text" class="custom-form-input" id="cvv" name="cvv">
           </div>
               <div class="form-action">
              <button type="submit" class="submit-btn"><i class="fa fa-address-card " aria-hidden="true"></i></button>
              <button type="reset" class="cancel-btn"><i i class="fa fa-trash-o" aria-hidden="true"></i></button>
               </div>
            </p>
          </div>
        </div>
       
      </div>
      
    </form> 
  </div> 
  
  
 
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
</html>