API tools faq
paste
Advertisement
Guest User

html

a guest
Apr 3rd, 2020
204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>MATCH</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         body {
  8.         margin: 0px
  9.         }
  10.         .container {
  11.             width: 100vw;
  12.             height: 100vh;
  13.             background: #fff;
  14.             display: flex;
  15.             flex-direction: row;
  16.             justify-content: center;
  17.             align-items: center;
  18.         }
  19.         .container h1{
  20.             position: absolute;
  21.             top: 45px; 
  22.             color: #000;
  23.         }
  24.         .container .perg{
  25.             position: absolute;
  26.             top: 110px;
  27.             color: brown;
  28.             font-size: 20px;
  29.             font-weight: bold;
  30.         }
  31.         .box1 {
  32.             width: 300px;
  33.             height: 300px;
  34.             background: #fff;
  35.             margin-right: 15px;
  36.             cursor: pointer;
  37.         }
  38.         .box1 img{
  39.             border-radius: 150px;
  40.         }
  41.  
  42.         .box2 {
  43.             width: 300px;
  44.             height: 300px;
  45.             background: #fff;
  46.             cursor: pointer;
  47.         }
  48.         .box2 img{
  49.             border-radius: 150px;
  50.         }
  51.         .jeh-vence{
  52.             width: 305px;
  53.             position: absolute;
  54.             bottom: 25px;
  55.             left: 375px;
  56.             text-align: center;
  57.             color: #00487C;
  58.             font-size: 40px;
  59.             display: none;
  60.         }
  61.         .edu-vence{
  62.             width: 306px;
  63.             position: absolute;
  64.             bottom: 25px;
  65.             left: 686px;
  66.             text-align: center;
  67.             color: #00487C;
  68.             font-size: 40px;
  69.             display: none;
  70.         }
  71.         .botao{
  72.             position: absolute;
  73.             bottom: 20px;
  74.         }
  75.         .botao input{
  76.             width: 300px;
  77.             height: 30px;
  78.  
  79.             border-radius: 3px;
  80.             background-color: #548B54;
  81.             border-style: none;
  82.             color: #fff;
  83.             font-weight: bold;
  84.             font-size: 20px;
  85.             text-transform: uppercase;
  86.  
  87.             cursor: pointer;
  88.         }
  89.     </style>
  90.  
  91. </head>
  92. <body>
  93.     <form action="{{url_for('registraVoto')}}" method="POST">
  94.        <div class="container">
  95.             <h1>THE FACE MATCH</h1>
  96.             <p class="perg">Qual a pessoa que mais te interessou? Vote!</p>
  97.             <div class="box1" id="boxJeh" >
  98.                 <img src="../static/img/jeh.png" class="img-jeh" name="jeh" width="300" />
  99.             </div>
  100.             <div class="box2" id="boxEdu">
  101.                 <img src="../static/img/edu.png" class="img-edu" name="edu" width="300" />
  102.             </div>
  103.  
  104.             <div class="jeh-vence" id="Jeh">
  105.                 <p>Gostou mais de Jéssica?</p>
  106.             </div>
  107.  
  108.             <div class="edu-vence" id="Edu">
  109.                 <p>Gostou mais de Eduardo?</p>
  110.             </div>
  111.  
  112.             <div class="botao">
  113.                 {{form.botaopy}}
  114.             </div>
  115.         </div>
  116.     </form>
  117.         <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  118.         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  119.         crossorigin="anonymous">
  120.         </script>
  121.         <script>
  122.             $(document).ready(function(){
  123.                 let eduClicked = $('#Edu');
  124.                 let jehClicked = $('#Jeh');
  125.  
  126.                 $("#boxEdu").click(function(){
  127.                     $("#boxEdu").css("border-style", "ridge");
  128.                     $("#boxEdu").css("border-radius", "155px");
  129.                     $("#boxEdu").css("border-color", "#00EB00");
  130.                     $("#boxEdu").css("box-shadow", "8px 7px 10px #548B54");
  131.  
  132.                     eduClicked.show("fast", function() {
  133.                         // Animation complete.
  134.                   });
  135.                     jehClicked.hide();
  136.                     $("#boxJeh").css("border-style", "");
  137.                     $("#boxJeh").css("border-radius", "");
  138.                     $("#boxJeh").css("border-color", "");
  139.                     $("#boxJeh").css("box-shadow", "");
  140.  
  141.                 });
  142.                 $("#boxJeh").click(function(){
  143.                     $("#boxJeh").css("border-style", "ridge");
  144.                     $("#boxJeh").css("border-radius", "155px");
  145.                     $("#boxJeh").css("border-color", "#00EB00");
  146.                     $("#boxJeh").css("box-shadow", "8px 7px 10px #548B54");
  147.  
  148.  
  149.                     jehClicked.show("fast", function(){
  150.                         // Animation complete.
  151.                     });
  152.                     eduClicked.hide();
  153.                     $("#boxEdu").css("border-style", "");
  154.                     $("#boxEdu").css("border-radius", "");
  155.                     $("#boxEdu").css("border-color", "");
  156.                     $("#boxEdu").css("box-shadow", "");
  157.  
  158.                 });
  159.  
  160.                 pegueiEdu = $(".img-edu").attr("name");
  161.                 pegueiJeh = $(".img-jeh").attr("name");
  162.                
  163.             });
  164.  
  165.             let eventEdu = $('#boxEdu');
  166.             let eventJeh = $('#boxJeh');
  167.  
  168.             let obj = {pegueiEdu:"Edu",pegueiJeh:"Jeh"};
  169.             var json = JSON.stringify(obj);
  170.  
  171.             $(eventEdu).on("click", function(){
  172.                 pegueiEdu = $(".img-edu").attr("name");
  173.                 console.log('Clicou em '+pegueiEdu);
  174.  
  175.                 $.ajax({
  176.                     url: '/votar',
  177.                     type: 'POST',
  178.                     data: json,   // converts js value to JSON string
  179.                     success: function(response){
  180.                         $('.img-edu').text(response);
  181.                     }
  182.                 });
  183.                 $.ajax({
  184.                     url: '/votar',
  185.                     type: 'POST',
  186.                     data: {'getEdu':pegueiEdu},
  187.                 });
  188.             });
  189.  
  190.             $(eventJeh).on("click", function(){
  191.                 pegueiJeh = $(".img-jeh").attr("name");
  192.                 console.log('Clicou em '+pegueiJeh);
  193.  
  194.                 $.ajax({
  195.                     url: '/votar',
  196.                     type: 'POST',
  197.                     data: json,   // converts js value to JSON string
  198.                     success: function(response){
  199.                         $('.img-jeh').text(response);
  200.                     }
  201.                 });
  202.                 $.ajax({
  203.                     url: '/votar',
  204.                     type: 'POST',
  205.                     data: {'getJeh':pegueiJeh},
  206.                 });
  207.  
  208.             });
  209.  
  210.         </script>
  211. </body>
  212. </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!