<!DOCTYPE html> <html lang="en"> <head> {% include "title.html" %} <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="fonts/icomoon/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" href="css/jquery.fancybox.min.css"> <link rel="stylesheet" href="css/bootstrap-datepicker.css"> <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css"> <link rel="stylesheet" href="css/aos.css"> <link href="css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style.css"> </head> <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300"> <div class="site-wrap"> <div class="site-mobile-menu site-navbar-target"> <div class="site-mobile-menu-header"> <div class="site-mobile-menu-close mt-3"> <span class="icon-close2 js-menu-toggle"></span> </div> </div> <div class="site-mobile-menu-body"></div> </div> {% include "navbar.html" %} <!-- <div class="hero-slide owl-carousel site-blocks-cover"> --> <div class="intro-section" style="background-image: url('images/hero_1.jpg');"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-md-7 mx-auto text-center" data-aos="fade-up"> <h1>Use a Card</h1> {% if card_list is not None and card_list|length > 0 %} <p>Choose a card to use!</p> {% elif card is not None %} <p> Card used! </p> {% elif card_found is not None %} <p> Found card with data: {{ card_found }} </p> {% else %} <p>Consider buying a card today!</p> <p><a href="/buy.html" class="btn btn-primary">Buy</a></p> {% endif %} </div> </div> </div> </div> <!-- </div> --> <div class="site-section"> <div class="container"> <div class="col-md-9"> <div class="row auctions-entry"> {% for card_item in card_list %} <div class="col-6 col-md-4 col-lg-4"> <div class="item"> <div> <strong class="price">{{ card_item.amount }}</strong> <a href="item-single.html"><img src="{{ card_item.product.product_image_path }}" alt="Image" class="img-fluid"></a> </div> <div class="p-4"> <h3><a href="buy/{{ card_item.product.product_id }}">{{ card_item.product.produce_name }}</a></h3> <div class="d-flex mb-2"> <span> {{card_item.product.description }}</span> </div> <form action="/use.html" method="post"> <input type="hidden" name="card_id" id="card_id" value="{{ card_item.id }}"/> <button class="btn btn-bid" type="submit">Use This Card</a> </form> </div> </div> </div> {% endfor %} <div class="col-6 col-md-4 col-lg-4"> <div class="item"> <div> <strong class="price">??</strong> <a href="item-single.html"><img src="/images/product_1.jpg" alt="Image" class="img-fluid"></a> </div> <div class="p-4"> <div class="d-flex mb-2"> <span> Submit your own card for use. Don't worry, this is completely secure! We will validate it on our end.</span> <span class="ml-auto">This card can be for any price.</span> </div> <form method="post" enctype="multipart/form-data"> <input type="file" name="card_data"> <input type="hidden" name="card_supplied" id="card_supplied" value="True"/> <input type="test" name="card_fname" id="card_fname" placeholder="NameYourCard"> <button class="btn btn-bid" type="submit">Submit a Card</button> </form> </div> </div> </div> {% include "footer.html" %} <!-- loader --> <div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#51be78"/></svg></div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-migrate-3.0.1.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.stellar.min.js"></script> <script src="js/jquery.countdown.min.js"></script> <script src="js/bootstrap-datepicker.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/aos.js"></script> <script src="js/jquery.fancybox.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script> <script src="js/main.js"></script> </body> </html>