Created
December 23, 2020 23:21
-
-
Save MintayRibkins/876769a81be75b28684378b765146f77 to your computer and use it in GitHub Desktop.
Tailwind checkout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <link href="https://tailwindcomponents.com/css/component.ecommerce-checkout.css" rel="stylesheet"> | |
| <title>Корзина</title> | |
| </head> | |
| <body class="bg-white" style="color: #525252"> | |
| <div class="container mx-auto sm:px-4"> | |
| <div class="py-5 text-center"> | |
| <img class="block mx-auto mb-4" src="logo.png" alt="" width="137" height="126"> | |
| <h2>Корзина</h2> | |
| </div> | |
| <div class="flex flex-wrap"> | |
| <!-- <step1>--> | |
| <div class="pr-4 pl-4 mb-4 md:w-1/2 lg:w-full sm:w-full"> | |
| <ul class="flex flex-col pl-0 mb-0 border rounded border-gray-300 mb-3"> | |
| <li> | |
| <div class="flex justify-center lg:justify-end"> | |
| <div class="border rounded-md w-full px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-gray-700 font-medium">Товары в корзине</h3> | |
| <span class="text-gray-600 text-sm">Edit</span> | |
| <span class="inline-block p-1 text-center font-semibold text-sm align-baseline leading-none rounded bg-gray-600 text-white hover:bg-gray-700 rounded-full py-1 px-3">3</span> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed"> | |
| <div> | |
| <small class="text-gray-700">Код товара: 111-898</small> | |
| <h6 class="my-0">Пижама мужская Cocoon</h6> | |
| <small class="text-gray-700">Размер: S</small> | |
| </div> | |
| <div> | |
| <div class="flex justify-between"> | |
| <div class="flex"> | |
| <img class="h-20 w-20 object-cover rounded" src="./img/product1.jpeg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <label for="counter" | |
| class="w-full text-gray-700 text-sm font-semibold">Кол-во:</label> | |
| <div class="flex flex-row h-10 w-full rounded-lg relative bg-transparent mt-1"> | |
| <button data-action="decrement" | |
| class="bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer outline-none"> | |
| <span class="m-auto text-2xl font-thin">−</span> | |
| </button> | |
| <input id="counter" type="number" style="-webkit-appearance: none; -moz-appearance: textfield;" | |
| class="outline-none focus:outline-none text-center w-full bg-gray-300 font-semibold text-md hover:text-black focus:text-black md:text-basecursor-default flex items-center text-gray-700 outline-none" | |
| name="custom-input-number" value="0"/> | |
| <button data-action="increment" | |
| class="bg-gray-300 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer"> | |
| <span class="m-auto text-2xl font-thin">+</span> | |
| </button> | |
| </div> | |
| </li> | |
| <!-- <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed">--> | |
| <!-- <div>--> | |
| <!-- <h6 class="my-0">Second product</h6>--> | |
| <!-- <small class="text-gray-700">Brief description</small>--> | |
| <!-- </div>--> | |
| <!-- <span class="text-gray-700">$8</span>--> | |
| <!-- </li>--> | |
| <!-- <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between lh-condensed">--> | |
| <!-- <div>--> | |
| <!-- <h6 class="my-0">Third item</h6>--> | |
| <!-- <small class="text-gray-700">Brief description</small>--> | |
| <!-- </div>--> | |
| <!-- <span class="text-gray-700">$5</span>--> | |
| <!-- </li>--> | |
| <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between bg-gray-100"> | |
| <div class="text-green-500"> | |
| <h6 class="my-0">Промо код</h6> | |
| <small>LETO1050</small> | |
| </div> | |
| <span class="text-green-500">-5%</span> | |
| </li> | |
| <li class="relative block py-3 px-6 -mb-px border border-r-0 border-l-0 border-gray-300 no-underline flex justify-between"> | |
| <span>Сумма к оплате:</span> | |
| <strong>2000</strong> | |
| </li> | |
| </ul> | |
| <form class="relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 p-2 shadow-xl"> | |
| <div class="relative flex items-stretch w-full"> | |
| <input type="text" | |
| class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" | |
| placeholder="промо код"> | |
| <div class="input-group-append"> | |
| <button style="background: #fd79cc" type="submit" | |
| class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline text-white hover:bg-gray-700"> | |
| активировать | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- </main step>--> | |
| <!-- <step4>--> | |
| <div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4"> | |
| <form class="max-w-xl m-4 p-10 bg-white shadow-xl"> | |
| <p class="text-gray-800 font-medium">Контактные данные</p> | |
| <div class=""> | |
| <label class="block text-sm text-gray-00" for="cus_name">Имя</label> | |
| <input class="w-full px-5 py-1 text-gray-900 bg-gray-100 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Имя" aria-label="Name"> | |
| </div> | |
| <div class="mt-2"> | |
| <label class="block text-sm text-gray-600" for="cus_email">Email</label> | |
| <input class="w-full px-5 py-4 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email"> | |
| </div> | |
| <div class="mt-2"> | |
| <label class=" block text-sm text-gray-600" for="cus_email">Адресс</label> | |
| <input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email"> | |
| </div> | |
| <div class="mt-2"> | |
| <label class="hidden text-sm block text-gray-600" for="cus_email">Город</label> | |
| <input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email"> | |
| </div> | |
| <div class="inline-block mt-2 w-1/2 pr-1"> | |
| <label class="hidden block text-sm text-gray-600" for="cus_email">Country</label> | |
| <input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email"> | |
| </div> | |
| <div class="inline-block mt-2 -mx-1 pl-1 w-1/2"> | |
| <label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label> | |
| <input class="w-full px-2 py-2 text-gray-900 bg-gray-100 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email"> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- </step1>--> | |
| <!-- <step2>--> | |
| <div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4"> | |
| <form class="mt-8 w-full shadow-xl"> | |
| <h4 class="text-sm text-gray-500 font-medium">Методы Доставки</h4> | |
| <div class="mt-6"> | |
| <button class="flex items-center justify-between w-full bg-white rounded-md border-2 border-blue-500 p-4 focus:outline-none"> | |
| <label class="flex items-center"> | |
| <input type="radio" class="form-radio h-5 w-5 text-blue-600" checked><span | |
| class="ml-2 text-sm text-gray-700">Новая почта</span> | |
| </label> | |
| <span class="text-gray-600 text-sm">бесплатно</span> | |
| </button> | |
| <button class="mt-6 flex items-center justify-between w-full bg-white rounded-md border p-4 focus:outline-none"> | |
| <label class="flex items-center"> | |
| <input type="radio" class="form-radio h-5 w-5 text-blue-600"><span | |
| class="ml-2 text-sm text-gray-700">DC Delivery</span> | |
| </label> | |
| <span class="text-gray-600 text-sm">$26</span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- </step2>--> | |
| <!-- <step3>--> | |
| <div class="md:w-1/2 lg:w-1/3 sm:w-full pr-4 pl-4 mb-4"> | |
| <form class="mt-8 w-full shadow-xl"> | |
| <h4 class="text-sm text-gray-500 font-medium">Методы оплаты</h4> | |
| <div class="mt-6"> | |
| <button class="flex items-center justify-between w-full bg-white rounded-md border-2 border-blue-500 p-4 focus:outline-none"> | |
| <label class="flex items-center"> | |
| <input type="radio" class="form-radio h-5 w-5 text-blue-600" checked><span | |
| class="ml-2 text-sm text-gray-700">Новая почта</span> | |
| </label> | |
| <span class="text-gray-600 text-sm">бесплатно</span> | |
| </button> | |
| <button class="mt-6 flex items-center justify-between w-full bg-white rounded-md border p-4 focus:outline-none"> | |
| <label class="flex items-center"> | |
| <input type="radio" class="form-radio h-5 w-5 text-blue-600"><span | |
| class="ml-2 text-sm text-gray-700">DC Delivery</span> | |
| </label> | |
| <span class="text-gray-600 text-sm">$26</span> | |
| </button> | |
| </div> | |
| <p class="mt-4 text-gray-800 font-medium text-center">Информация об оплате</p> | |
| <div class=""> | |
| <label class="block text-sm text-gray-600" for="cus_name">Card</label> | |
| <input class="w-full px-2 py-2 text-gray-700 bg-gray-100 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Card Number MM/YY CVC" aria-label="Name"> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- </step3>--> | |
| <div> | |
| <hr> | |
| </div> | |
| <!-- <div class="md:w-2/3 pr-4 pl-4 md:order-1">--> | |
| <!-- <h4 class="mb-3">Адресс доставки</h4>--> | |
| <!-- <form class="needs-validation" novalidate>--> | |
| <!-- <div class="flex flex-wrap ">--> | |
| <!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="firstName">First name</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="firstName" placeholder="" value="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Valid first name is required.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="lastName">Last name</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="lastName" placeholder="" value="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Valid last name is required.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="mb-3">--> | |
| <!-- <label for="username">Username</label>--> | |
| <!-- <div class="relative flex items-stretch w-full">--> | |
| <!-- <div class="input-group-prepend">--> | |
| <!-- <span class="input-group-text">@</span>--> | |
| <!-- </div>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="username" placeholder="Username" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red" style="width: 100%;">--> | |
| <!-- Your username is required.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="mb-3">--> | |
| <!-- <label for="email">Email <span class="text-gray-700">(Optional)</span></label>--> | |
| <!-- <input type="email" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="email" placeholder="you@example.com">--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Please enter a valid email address for shipping updates.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="mb-3">--> | |
| <!-- <label for="address">Address</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="address" placeholder="1234 Main St" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Please enter your shipping address.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="mb-3">--> | |
| <!-- <label for="address2">Address 2 <span class="text-gray-700">(Optional)</span></label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="address2" placeholder="Apartment or suite">--> | |
| <!-- </div>--> | |
| <!-- <div class="flex flex-wrap ">--> | |
| <!-- <div class="md:w-2/5 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="country">Country</label>--> | |
| <!-- <select class="custom-select block w-full" id="country" required>--> | |
| <!-- <option value="">Choose...</option>--> | |
| <!-- <option>United States</option>--> | |
| <!-- </select>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Please select a valid country.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="md:w-1/3 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="state">State</label>--> | |
| <!-- <select class="custom-select block w-full" id="state" required>--> | |
| <!-- <option value="">Choose...</option>--> | |
| <!-- <option>California</option>--> | |
| <!-- </select>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Please provide a valid state.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="zip">Zip</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="zip" placeholder="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Zip code required.--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <hr class="mb-4">--> | |
| <!-- <div class="custom-control custom-checkbox">--> | |
| <!-- <input type="checkbox" class="custom-control-input" id="same-address">--> | |
| <!-- <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>--> | |
| <!-- </div>--> | |
| <!-- <div class="custom-control custom-checkbox">--> | |
| <!-- <input type="checkbox" class="custom-control-input" id="save-info">--> | |
| <!-- <label class="custom-control-label" for="save-info">Save this information for next time</label>--> | |
| <!-- </div>--> | |
| <!-- <hr class="mb-4">--> | |
| <!-- <h4 class="mb-3">Payment</h4>--> | |
| <!-- <div class="block my-3">--> | |
| <!-- <div class="custom-control custom-radio">--> | |
| <!-- <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>--> | |
| <!-- <label class="custom-control-label" for="credit">Credit card</label>--> | |
| <!-- </div>--> | |
| <!-- <div class="custom-control custom-radio">--> | |
| <!-- <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>--> | |
| <!-- <label class="custom-control-label" for="debit">Debit card</label>--> | |
| <!-- </div>--> | |
| <!-- <div class="custom-control custom-radio">--> | |
| <!-- <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>--> | |
| <!-- <label class="custom-control-label" for="paypal">Paypal</label>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="flex flex-wrap ">--> | |
| <!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="cc-name">Name on card</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-name" placeholder="" required>--> | |
| <!-- <small class="text-gray-700">Full name as displayed on card</small>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Name on card is required--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="md:w-1/2 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="cc-number">Credit card number</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-number" placeholder="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Credit card number is required--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="flex flex-wrap ">--> | |
| <!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="cc-expiration">Expiration</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-expiration" placeholder="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Expiration date required--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <div class="md:w-1/4 pr-4 pl-4 mb-3">--> | |
| <!-- <label for="cc-expiration">CVV</label>--> | |
| <!-- <input type="text" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="cc-cvv" placeholder="" required>--> | |
| <!-- <div class="hidden mt-1 text-sm text-red">--> | |
| <!-- Security code required--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- </div>--> | |
| <!-- <hr class="mb-4">--> | |
| <!-- <button class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded no-underline bg-blue-600 text-white hover:bg-blue-600 py-3 px-4 leading-tight text-xl block w-full" type="submit">Continue to checkout</button>--> | |
| <!-- </form>--> | |
| <!-- </div>--> | |
| </div> | |
| <!-- <footer class="my-5 pt-5 text-gray-700 text-center text-small">--> | |
| <!-- <p class="mb-1">© 2017-2018 Company Name</p>--> | |
| <!-- <ul class="list-inline">--> | |
| <!-- <li class="list-inline-item"><a href="#">Privacy</a></li>--> | |
| <!-- <li class="list-inline-item"><a href="#">Terms</a></li>--> | |
| <!-- <li class="list-inline-item"><a href="#">Support</a></li>--> | |
| <!-- </ul>--> | |
| <!-- </footer>--> | |
| </div> | |
| <!-- Bootstrap core JavaScript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> | |
| <script src="../../assets/js/vendor/popper.min.js"></script> | |
| <script src="../../dist/js/bootstrap.min.js"></script> | |
| <script src="../../assets/js/vendor/holder.min.js"></script> | |
| <script> | |
| // Example starter JavaScript for disabling form submissions if there are invalid fields | |
| (function() { | |
| 'use strict'; | |
| window.addEventListener('load', function() { | |
| // Fetch all the forms we want to apply custom Bootstrap validation styles to | |
| var forms = document.getElementsByClassName('needs-validation'); | |
| // Loop over them and prevent submission | |
| var validation = Array.prototype.filter.call(forms, function(form) { | |
| form.addEventListener('submit', function(event) { | |
| if (form.checkValidity() === false) { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| } | |
| form.classList.add('was-validated'); | |
| }, false); | |
| }); | |
| }, false); | |
| })(); | |
| </script> | |
| <script> | |
| function decrement(e) { | |
| const btn = e.target.parentNode.parentElement.querySelector( | |
| 'button[data-action="decrement"]' | |
| ); | |
| const target = btn.nextElementSibling; | |
| let value = Number(target.value); | |
| value--; | |
| target.value = value; | |
| } | |
| function increment(e) { | |
| const btn = e.target.parentNode.parentElement.querySelector( | |
| 'button[data-action="decrement"]' | |
| ); | |
| const target = btn.nextElementSibling; | |
| let value = Number(target.value); | |
| value++; | |
| target.value = value; | |
| } | |
| const decrementButtons = document.querySelectorAll( | |
| `button[data-action="decrement"]` | |
| ); | |
| const incrementButtons = document.querySelectorAll( | |
| `button[data-action="increment"]` | |
| ); | |
| decrementButtons.forEach(btn => { | |
| btn.addEventListener("click", decrement); | |
| }); | |
| incrementButtons.forEach(btn => { | |
| btn.addEventListener("click", increment); | |
| }); | |
| </script> | |
| </body> | |
| <style> | |
| input[type='number']::-webkit-inner-spin-button, | |
| input[type='number']::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| -moz-appearance: textfield; | |
| } | |
| .custom-number-input input:focus { | |
| outline: none !important; | |
| -moz-appearance: textfield; | |
| } | |
| .custom-number-input button:focus { | |
| outline: none !important; | |
| -moz-appearance: textfield; | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment