gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 <!doctype html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <meta name="description" content="">
   7     <meta name="author" content="">
   8     <link rel="icon" href="../../../../favicon.ico">
   9
  10     <title>Checkout example for Bootstrap</title>
  11
  12     <!-- Bootstrap core CSS -->
  13     <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
  14
  15     <!-- Custom styles for this template -->
  16     <link href="form-validation.css" rel="stylesheet">
  17   </head>
  18
  19   <body class="bg-light">
  20
  21     <div class="container">
  22       <div class="py-5 text-center">
  23         <img class="d-block mx-auto mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
  24         <h2>Checkout form</h2>
  25         <p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
  26       </div>
  27
  28       <div class="row">
  29         <div class="col-md-4 order-md-2 mb-4">
  30           <h4 class="d-flex justify-content-between align-items-center mb-3">
  31             <span class="text-muted">Your cart</span>
  32             <span class="badge badge-secondary badge-pill">3</span>
  33           </h4>
  34           <ul class="list-group mb-3">
  35             <li class="list-group-item d-flex justify-content-between lh-condensed">
  36               <div>
  37                 <h6 class="my-0">Product name</h6>
  38                 <small class="text-muted">Brief description</small>
  39               </div>
  40               <span class="text-muted">$12</span>
  41             </li>
  42             <li class="list-group-item d-flex justify-content-between lh-condensed">
  43               <div>
  44                 <h6 class="my-0">Second product</h6>
  45                 <small class="text-muted">Brief description</small>
  46               </div>
  47               <span class="text-muted">$8</span>
  48             </li>
  49             <li class="list-group-item d-flex justify-content-between lh-condensed">
  50               <div>
  51                 <h6 class="my-0">Third item</h6>
  52                 <small class="text-muted">Brief description</small>
  53               </div>
  54               <span class="text-muted">$5</span>
  55             </li>
  56             <li class="list-group-item d-flex justify-content-between bg-light">
  57               <div class="text-success">
  58                 <h6 class="my-0">Promo code</h6>
  59                 <small>EXAMPLECODE</small>
  60               </div>
  61               <span class="text-success">-$5</span>
  62             </li>
  63             <li class="list-group-item d-flex justify-content-between">
  64               <span>Total (USD)</span>
  65               <strong>$20</strong>
  66             </li>
  67           </ul>
  68
  69           <form class="card p-2">
  70             <div class="input-group">
  71               <input type="text" class="form-control" placeholder="Promo code">
  72               <div class="input-group-append">
  73                 <button type="submit" class="btn btn-secondary">Redeem</button>
  74               </div>
  75             </div>
  76           </form>
  77         </div>
  78         <div class="col-md-8 order-md-1">
  79           <h4 class="mb-3">Billing address</h4>
  80           <form class="needs-validation" novalidate>
  81             <div class="row">
  82               <div class="col-md-6 mb-3">
  83                 <label for="firstName">First name</label>
  84                 <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
  85                 <div class="invalid-feedback">
  86                   Valid first name is required.
  87                 </div>
  88               </div>
  89               <div class="col-md-6 mb-3">
  90                 <label for="lastName">Last name</label>
  91                 <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
  92                 <div class="invalid-feedback">
  93                   Valid last name is required.
  94                 </div>
  95               </div>
  96             </div>
  97
  98             <div class="mb-3">
  99               <label for="username">Username</label>
 100               <div class="input-group">
 101                 <div class="input-group-prepend">
 102                   <span class="input-group-text">@</span>
 103                 </div>
 104                 <input type="text" class="form-control" id="username" placeholder="Username" required>
 105                 <div class="invalid-feedback" style="width: 100%;">
 106                   Your username is required.
 107                 </div>
 108               </div>
 109             </div>
 110
 111             <div class="mb-3">
 112               <label for="email">Email <span class="text-muted">(Optional)</span></label>
 113               <input type="email" class="form-control" id="email" placeholder="you@example.com">
 114               <div class="invalid-feedback">
 115                 Please enter a valid email address for shipping updates.
 116               </div>
 117             </div>
 118
 119             <div class="mb-3">
 120               <label for="address">Address</label>
 121               <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
 122               <div class="invalid-feedback">
 123                 Please enter your shipping address.
 124               </div>
 125             </div>
 126
 127             <div class="mb-3">
 128               <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
 129               <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
 130             </div>
 131
 132             <div class="row">
 133               <div class="col-md-5 mb-3">
 134                 <label for="country">Country</label>
 135                 <select class="custom-select d-block w-100" id="country" required>
 136                   <option value="">Choose...</option>
 137                   <option>United States</option>
 138                 </select>
 139                 <div class="invalid-feedback">
 140                   Please select a valid country.
 141                 </div>
 142               </div>
 143               <div class="col-md-4 mb-3">
 144                 <label for="state">State</label>
 145                 <select class="custom-select d-block w-100" id="state" required>
 146                   <option value="">Choose...</option>
 147                   <option>California</option>
 148                 </select>
 149                 <div class="invalid-feedback">
 150                   Please provide a valid state.
 151                 </div>
 152               </div>
 153               <div class="col-md-3 mb-3">
 154                 <label for="zip">Zip</label>
 155                 <input type="text" class="form-control" id="zip" placeholder="" required>
 156                 <div class="invalid-feedback">
 157                   Zip code required.
 158                 </div>
 159               </div>
 160             </div>
 161             <hr class="mb-4">
 162             <div class="custom-control custom-checkbox">
 163               <input type="checkbox" class="custom-control-input" id="same-address">
 164               <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
 165             </div>
 166             <div class="custom-control custom-checkbox">
 167               <input type="checkbox" class="custom-control-input" id="save-info">
 168               <label class="custom-control-label" for="save-info">Save this information for next time</label>
 169             </div>
 170             <hr class="mb-4">
 171
 172             <h4 class="mb-3">Payment</h4>
 173
 174             <div class="d-block my-3">
 175               <div class="custom-control custom-radio">
 176                 <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
 177                 <label class="custom-control-label" for="credit">Credit card</label>
 178               </div>
 179               <div class="custom-control custom-radio">
 180                 <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
 181                 <label class="custom-control-label" for="debit">Debit card</label>
 182               </div>
 183               <div class="custom-control custom-radio">
 184                 <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
 185                 <label class="custom-control-label" for="paypal">Paypal</label>
 186               </div>
 187             </div>
 188             <div class="row">
 189               <div class="col-md-6 mb-3">
 190                 <label for="cc-name">Name on card</label>
 191                 <input type="text" class="form-control" id="cc-name" placeholder="" required>
 192                 <small class="text-muted">Full name as displayed on card</small>
 193                 <div class="invalid-feedback">
 194                   Name on card is required
 195                 </div>
 196               </div>
 197               <div class="col-md-6 mb-3">
 198                 <label for="cc-number">Credit card number</label>
 199                 <input type="text" class="form-control" id="cc-number" placeholder="" required>
 200                 <div class="invalid-feedback">
 201                   Credit card number is required
 202                 </div>
 203               </div>
 204             </div>
 205             <div class="row">
 206               <div class="col-md-3 mb-3">
 207                 <label for="cc-expiration">Expiration</label>
 208                 <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
 209                 <div class="invalid-feedback">
 210                   Expiration date required
 211                 </div>
 212               </div>
 213               <div class="col-md-3 mb-3">
 214                 <label for="cc-expiration">CVV</label>
 215                 <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
 216                 <div class="invalid-feedback">
 217                   Security code required
 218                 </div>
 219               </div>
 220             </div>
 221             <hr class="mb-4">
 222             <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
 223           </form>
 224         </div>
 225       </div>
 226
 227       <footer class="my-5 pt-5 text-muted text-center text-small">
 228         <p class="mb-1">&copy; 2017-2018 Company Name</p>
 229         <ul class="list-inline">
 230           <li class="list-inline-item"><a href="#">Privacy</a></li>
 231           <li class="list-inline-item"><a href="#">Terms</a></li>
 232           <li class="list-inline-item"><a href="#">Support</a></li>
 233         </ul>
 234       </footer>
 235     </div>
 236
 237     <!-- Bootstrap core JavaScript
 238     ================================================== -->
 239     <!-- Placed at the end of the document so the pages load faster -->
 240     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 241     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
 242     <script src="../../../../assets/js/vendor/popper.min.js"></script>
 243     <script src="../../../../dist/js/bootstrap.min.js"></script>
 244     <script src="../../../../assets/js/vendor/holder.min.js"></script>
 245     <script>
 246       // Example starter JavaScript for disabling form submissions if there are invalid fields
 247       (function() {
 248         'use strict';
 249
 250         window.addEventListener('load', function() {
 251           // Fetch all the forms we want to apply custom Bootstrap validation styles to
 252           var forms = document.getElementsByClassName('needs-validation');
 253
 254           // Loop over them and prevent submission
 255           var validation = Array.prototype.filter.call(forms, function(form) {
 256             form.addEventListener('submit', function(event) {
 257               if (form.checkValidity() === false) {
 258                 event.preventDefault();
 259                 event.stopPropagation();
 260               }
 261               form.classList.add('was-validated');
 262             }, false);
 263           });
 264         }, false);
 265       })();
 266     </script>
 267   </body>
 268 </html>