API tools faq
paste
Advertisement
mushroomh3ad

imoveis-final-full

mushroomh3ad
Oct 15th, 2024
28
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 25.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Range Slider com Máscara Monetária - Bootstrap 4</title>
  8.  
  9.     <!-- Bootstrap 4 CSS -->
  10.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  11.  
  12.     <style>
  13.         .slider-labels {
  14.             display: flex;
  15.             justify-content: space-between;
  16.             margin-top: 10px;
  17.         }
  18.  
  19.         .slider-container {
  20.             margin-top: 20px;
  21.         }
  22.  
  23.         /* === range theme and appearance === */
  24.         input[type="range"] {
  25.             font-size: 1.5rem;
  26.             width: 100%;
  27.         }
  28.  
  29.         input[type="range"] {
  30.             color: #058075;
  31.             --thumb-height: 1.125em;
  32.             --track-height: 0.125em;
  33.             --track-color: rgba(0, 0, 0, 0.2);
  34.             --brightness-hover: 120%;
  35.             --brightness-down: 110%;
  36.             --clip-edges: 0.125em;
  37.         }
  38.  
  39.         @media (prefers-color-scheme: dark) {
  40.             html {
  41.                 background-color: #000;
  42.             }
  43.  
  44.             html::before {
  45.                 background: radial-gradient(circle at center, #101112, #000);
  46.             }
  47.  
  48.             input[type="range"] {
  49.                 color: #f07167;
  50.                 --track-color: rgba(255, 255, 255, 0.1);
  51.             }
  52.  
  53.             input[type="range"].win10-thumb {
  54.                 color: #3a86ff;
  55.             }
  56.         }
  57.  
  58.         /* === range commons === */
  59.         input[type="range"] {
  60.             position: relative;
  61.             background: #fff0;
  62.             overflow: hidden;
  63.         }
  64.  
  65.         input[type="range"]:active {
  66.             cursor: grabbing;
  67.         }
  68.  
  69.         input[type="range"]:disabled {
  70.             filter: grayscale(1);
  71.             opacity: 0.3;
  72.             cursor: not-allowed;
  73.         }
  74.  
  75.         /* === WebKit specific styles === */
  76.         input[type="range"],
  77.         input[type="range"]::-webkit-slider-runnable-track,
  78.         input[type="range"]::-webkit-slider-thumb {
  79.             -webkit-appearance: none;
  80.             transition: all ease 100ms;
  81.             height: var(--thumb-height);
  82.         }
  83.  
  84.         input[type="range"]::-webkit-slider-runnable-track,
  85.         input[type="range"]::-webkit-slider-thumb {
  86.             position: relative;
  87.         }
  88.  
  89.         input[type="range"]::-webkit-slider-thumb {
  90.             --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  91.             --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  92.             --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  93.             --clip-further: calc(100% + 1px);
  94.             --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
  95.  
  96.             width: var(--thumb-width, var(--thumb-height));
  97.             background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
  98.             background-color: currentColor;
  99.             box-shadow: var(--box-fill);
  100.             border-radius: var(--thumb-width, var(--thumb-height));
  101.  
  102.             filter: brightness(100%);
  103.             clip-path: polygon(100% -1px,
  104.                     var(--clip-edges) -1px,
  105.                     0 var(--clip-top),
  106.                     -100vmax var(--clip-top),
  107.                     -100vmax var(--clip-bottom),
  108.                     0 var(--clip-bottom),
  109.                     var(--clip-edges) 100%,
  110.                     var(--clip-further) var(--clip-further));
  111.         }
  112.  
  113.         input[type="range"]:hover::-webkit-slider-thumb {
  114.             filter: brightness(var(--brightness-hover));
  115.             cursor: grab;
  116.         }
  117.  
  118.         input[type="range"]:active::-webkit-slider-thumb {
  119.             filter: brightness(var(--brightness-down));
  120.             cursor: grabbing;
  121.         }
  122.  
  123.         input[type="range"]::-webkit-slider-runnable-track {
  124.             background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
  125.         }
  126.  
  127.         input[type="range"]:disabled::-webkit-slider-thumb {
  128.             cursor: not-allowed;
  129.         }
  130.  
  131.         /* === Firefox specific styles === */
  132.         input[type="range"],
  133.         input[type="range"]::-moz-range-track,
  134.         input[type="range"]::-moz-range-thumb {
  135.             appearance: none;
  136.             transition: all ease 100ms;
  137.             height: var(--thumb-height);
  138.         }
  139.  
  140.         input[type="range"]::-moz-range-track,
  141.         input[type="range"]::-moz-range-thumb,
  142.         input[type="range"]::-moz-range-progress {
  143.             background: #fff0;
  144.         }
  145.  
  146.         input[type="range"]::-moz-range-thumb {
  147.             background: currentColor;
  148.             border: 0;
  149.             width: var(--thumb-width, var(--thumb-height));
  150.             border-radius: var(--thumb-width, var(--thumb-height));
  151.             cursor: grab;
  152.         }
  153.  
  154.         input[type="range"]:active::-moz-range-thumb {
  155.             cursor: grabbing;
  156.         }
  157.  
  158.         input[type="range"]::-moz-range-track {
  159.             width: 100%;
  160.             background: var(--track-color);
  161.         }
  162.  
  163.         input[type="range"]::-moz-range-progress {
  164.             appearance: none;
  165.             background: currentColor;
  166.             transition-delay: 30ms;
  167.         }
  168.  
  169.         input[type="range"]::-moz-range-track,
  170.         input[type="range"]::-moz-range-progress {
  171.             height: calc(var(--track-height) + 1px);
  172.             border-radius: var(--track-height);
  173.         }
  174.  
  175.         input[type="range"]::-moz-range-thumb,
  176.         input[type="range"]::-moz-range-progress {
  177.             filter: brightness(100%);
  178.         }
  179.  
  180.         input[type="range"]:hover::-moz-range-thumb,
  181.         input[type="range"]:hover::-moz-range-progress {
  182.             filter: brightness(var(--brightness-hover));
  183.         }
  184.  
  185.         input[type="range"]:active::-moz-range-thumb,
  186.         input[type="range"]:active::-moz-range-progress {
  187.             filter: brightness(var(--brightness-down));
  188.         }
  189.  
  190.         input[type="range"]:disabled::-moz-range-thumb {
  191.             cursor: not-allowed;
  192.         }
  193.     </style>
  194. </head>
  195.  
  196. <body>
  197.  
  198.     <form id="formSimulacao" autocomplete="off">
  199.  
  200.         <!-- Step 1 -->
  201.         <div class="step active" id="step1">
  202.  
  203.             <div class="container">
  204.                 <div class="row">
  205.                     <div class="container h-100">
  206.                         <div class="row d-flex justify-content-center align-items-center h-100">
  207.                             <div class="col-lg-12 col-xl-11">
  208.                                 <div class="card text-black" style="border-radius: 25px;">
  209.                                     <div class="card-body p-md-5">
  210.                                         <div class="row justify-content-center">
  211.                                             <div class="form-group">
  212.                                                 <button id="voltar" name="voltar" class="btn btn-primary" type="button"
  213.                                                    onclick="portletHome()">Voltar</button>
  214.                                             </div>
  215.                                         </div>
  216.                                         <div class="row justify-content-center">
  217.                                             <h3>Escolha a forma desejada para simular, pelo valor da carta de
  218.                                                 cr&eacute;dito ou da parcela.</h3>
  219.                                         </div>
  220.                                         <div class="row justify-content-center">
  221.                                             <div
  222.                                                class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-1">
  223.  
  224.                                                 <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
  225.                                                    class="img-fluid" alt="Sample image">
  226.  
  227.                                             </div>
  228.                                             <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-2">
  229.  
  230.                                                 <div class="form-group">
  231.                                                     <div style='display: none;' id="radioDivSegmento" class="col-md-6">
  232.                                                         <input type="radio" id="imoveis" name="segmento" value="IMOVEIS"
  233.                                                            checked>
  234.                                                     </div>
  235.                                                 </div>
  236.  
  237.                                                 <div class="form-group">
  238.                                                     <div id="radioDiv">
  239.                                                         <input type="radio" id="credito" name="tipo" value="CREDITO"
  240.                                                            checked>
  241.                                                         <label for="credito">Valor do cr&eacute;dito</label>
  242.                                                         <input type="radio" id="parcela" name="tipo" value="PARCELA">
  243.                                                         <label for="parcela">Valor da parcela</label>
  244.                                                     </div>
  245.                                                 </div>
  246.  
  247.                                                 <!-- Campo de input para mostrar o valor com máscara monetária -->
  248.                                                 <div class="form-group">
  249.                                                     <input type="text" class="form-control" id="valorBem"
  250.                                                        value="300000">
  251.                                                 </div>
  252.  
  253.                                                 <!-- Range Slider logo abaixo do input -->
  254.                                                 <div class="slider-container">
  255.                                                     <input type="range" id="slider" name="slider" min="0" max="600000" step="1000" value="300000">
  256.                                                 </div>
  257.  
  258.                                                 <!-- Rótulos de mínimo e máximo para o slider -->
  259.                                                 <div class="slider-labels">
  260.                                                     <span id="min-label">R$ 0</span>
  261.                                                     <span id="max-label">R$ 600.000,00</span>
  262.                                                 </div>
  263.  
  264.                                                 <p>Digite ou arraste o seletor acima para ajustar o valor.</p>
  265.  
  266.                                             </div>
  267.                                         </div>
  268.                                         <div class="row justify-content-center">
  269.                                             <div class="form-group">
  270.                                                 <button type="submit" id="verOpcoes" name="verOpcoes"
  271.                                                    class="btn btn-primary">Ver op&ccedil;&otilde;es</button>
  272.                                             </div>
  273.  
  274.                                             <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4"
  275.                                                id="divMensagens">
  276.                                                 <div style='display: none;' id="mensagem-erro"
  277.                                                    class="alert alert-danger">
  278.                                                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  279.                                                        xmlns="http://www.w3.org/2000/svg">
  280.                                                         <path
  281.                                                            d="M12 20C16.4187 20 20 16.4187 20 12C20 7.58125 16.4187 4 12 4C7.58125 4 4 7.58125 4 12C4 16.4187 7.58125 20 12 20ZM12 8C12.4156 8 12.75 8.33437 12.75 8.75V12.25C12.75 12.6656 12.4156 13 12 13C11.5844 13 11.25 12.6656 11.25 12.25V8.75C11.25 8.33437 11.5844 8 12 8ZM13 15C13 15.5531 12.5531 16 12 16C11.4469 16 11 15.5531 11 15C11 14.4469 11.4469 14 12 14C12.5531 14 13 14.4469 13 15Z"
  282.                                                            fill="#DA1414"></path>
  283.                                                     </svg>
  284.                                                     <span class="message"><strong>Ocorreu um erro ao realizar a
  285.                                                             Simula&ccedil;&atilde;o.</span>
  286.                                                 </div>
  287.                                             </div>
  288.                                         </div>
  289.                                     </div>
  290.                                 </div>
  291.                             </div>
  292.                         </div>
  293.                     </div>
  294.                 </div>
  295.  
  296.  
  297.                 <div class="row">
  298.                     <div class="container h-100">
  299.                         <div class="row d-flex justify-content-center align-items-center h-100">
  300.                             <div class="col-lg-12 col-xl-11">
  301.                                 <div id="resultados" class="mt-4 mb-5">
  302.                                     <table class="table table-striped">
  303.                                         <thead>
  304.                                             <tr>
  305.                                                 <th>Valor</th>
  306.                                                 <th>Parcelas(1 a 6)&sup1;</th>
  307.                                                 <th>Demais Parcelas&sup2;</th>
  308.                                                 <th>Prazo</th>
  309.                                             </tr>
  310.                                         </thead>
  311.                                         <tbody>
  312.                                             <tr>
  313.                                                 <td>
  314.                                                     R$ 300.000,00
  315.                                                 </td>
  316.                                                 <td>
  317.                                                     R$ 3.423,00
  318.                                                 </td>
  319.                                                 <td>
  320.                                                     R$ 2.460,03
  321.                                                 </td>
  322.                                                 <td>
  323.                                                     <div class="custom-control custom-switch">
  324.                                                         <input type="checkbox" class="custom-control-input"
  325.                                                            id="switchPrazo1" name="switchPrazo" checked>
  326.                                                         <label class="custom-control-label"
  327.                                                            for="switchPrazo1">150</label>
  328.                                                     </div>
  329.                                                 </td>
  330.                                             </tr>
  331.                                             <tr>
  332.                                                 <td>
  333.                                                     R$ 300.000,00
  334.                                                 </td>
  335.                                                 <td>
  336.                                                     R$ 3.048,01
  337.                                                 </td>
  338.                                                 <td>
  339.                                                     R$ 2.078,37
  340.                                                 </td>
  341.                                                 <td>
  342.                                                     <div class="custom-control custom-switch">
  343.                                                         <input type="checkbox" class="custom-control-input"
  344.                                                            id="switchPrazo2" name="switchPrazo">
  345.                                                         <label class="custom-control-label"
  346.                                                            for="switchPrazo2">180</label>
  347.                                                     </div>
  348.                                                 </td>
  349.                                             </tr>
  350.                                             <tr>
  351.                                                 <td>
  352.                                                     R$ 300.000,00
  353.                                                 </td>
  354.                                                 <td>
  355.                                                     R$ 2.860,50
  356.                                                 </td>
  357.                                                 <td>
  358.                                                     R$ 1.887,53
  359.                                                 </td>
  360.                                                 <td>
  361.                                                     <div class="custom-control custom-switch">
  362.                                                         <input type="checkbox" class="custom-control-input"
  363.                                                            id="switchPrazo3" name="switchPrazo">
  364.                                                         <label class="custom-control-label"
  365.                                                            for="switchPrazo3">200</label>
  366.                                                     </div>
  367.                                                 </td>
  368.                                             </tr>
  369.                                             <tr>
  370.                                                 <td>
  371.                                                     R$ 300.000,00
  372.                                                 </td>
  373.                                                 <td>
  374.                                                     R$ 2.579,25
  375.                                                 </td>
  376.                                                 <td>
  377.                                                     R$ 1.601,28
  378.                                                 </td>
  379.                                                 <td>
  380.                                                     <div class="custom-control custom-switch">
  381.                                                         <input type="checkbox" class="custom-control-input"
  382.                                                            id="switchPrazo4" name="switchPrazo">
  383.                                                         <label class="custom-control-label"
  384.                                                            for="switchPrazo4">240</label>
  385.                                                     </div>
  386.                                                 </td>
  387.                                             </tr>
  388.                                         </tbody>
  389.                                     </table>
  390.                                 </div>
  391.                             </div>
  392.                         </div>
  393.                     </div>
  394.                 </div>
  395.             </div>
  396.  
  397.         </div>
  398.  
  399.     </form>
  400.  
  401.     <!-- jQuery e jQuery Mask Plugin -->
  402.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  403.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  404.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  405.  
  406.     <script type="text/javascript">
  407.         let $portletValorMinimoValorCredito = 0;
  408.         let $portletValorMaximoValorCredito = 600000;
  409.         let $portletValorInicialValorCredito = $portletValorMaximoValorCredito / 2;
  410.         let $portletValorMinimoValorParcela = 0;
  411.         let $portletValorMaximoValorParcela = 6000;
  412.         let $portletValorInicialValorParcela = $portletValorMaximoValorParcela / 2;
  413.  
  414.         // Aplicar a máscara no campo de input ao carregar a página
  415.         $('#valorBem').val(formatCurrency($('#valorBem').val()));
  416.  
  417.         // Definir o valor inicial formatado corretamente
  418.         let valorInicial = 0;
  419.  
  420.         if (typeof $portletValorMaximoValorCredito != "undefined") {
  421.             valorInicial = $portletValorMaximoValorCredito / 2;
  422.         }
  423.  
  424.         $("#valorBem").val(formatCurrency(valorInicial));
  425.         $("#slider").val(valorInicial);
  426.  
  427.         // Adiciona um evento onchange aos radio button
  428.         $('input[name="tipo"]').change(function () {
  429.  
  430.             let valorSelecionado = $('input[name="tipo"]:checked').val();
  431.  
  432.             if (valorSelecionado === "CREDITO") {
  433.  
  434.                 $('#valorBem').val(formatCurrency($portletValorInicialValorCredito));
  435.                 $("#max-label").text("R$ " + formatCurrency($portletValorMaximoValorCredito) + ",00");
  436.                 $('#slider').attr('max', $portletValorMaximoValorCredito);
  437.                 $('#slider').val($portletValorInicialValorCredito);
  438.  
  439.  
  440.             } else if (valorSelecionado === "PARCELA") {
  441.  
  442.                 $('#valorBem').val(formatCurrency($portletValorInicialValorParcela));
  443.                 $("#max-label").text("R$ " + formatCurrency($portletValorMaximoValorParcela) + ",00");
  444.                 $('#slider').attr('max', $portletValorMaximoValorParcela);
  445.                 $('#slider').val($portletValorInicialValorParcela);
  446.  
  447.             }
  448.  
  449.         });
  450.  
  451.         // Logica do Slider
  452.  
  453.         // Atualizar o valor do input conforme o slider muda
  454.         $("#slider").on('input', function () {
  455.             let valorSlider = $(this).val();
  456.             $('#valorBem').val(formatCurrency(valorSlider));
  457.         });
  458.  
  459.         $('#valorBem').on('keypress', function (e) {
  460.             // Permitir apenas números
  461.             if (e.which < 48 || e.which > 57) {
  462.                 e.preventDefault();
  463.             }
  464.         });
  465.  
  466.         // Quando o usuário digitar manualmente, manter o "R$" no campo
  467.         $("#valorBem").on('blur', function () {
  468.  
  469.             let valorBem = limparNumero($(this).val());
  470.  
  471.             if (valorBem) {
  472.  
  473.                 let valorSelecionado = $('input[name="tipo"]:checked').val();
  474.  
  475.                 if (valorSelecionado === "CREDITO") {
  476.  
  477.                     if (valorBem > $portletValorMaximoValorCredito) {
  478.  
  479.                         let valorFormatado = formatCurrency($portletValorMaximoValorCredito);
  480.  
  481.                         $('#valorBem').val(valorFormatado);
  482.                         $("#slider").val(limparNumero(valorFormatado)); // Atualizar o slider com o valor correto
  483.                         return;
  484.  
  485.                     }
  486.  
  487.                 } else if (valorSelecionado === "PARCELA") {
  488.  
  489.                     if (valorBem > $portletValorMaximoValorParcela) {
  490.  
  491.                         let valorFormatadoParcela = formatCurrency($portletValorMaximoValorParcela);
  492.  
  493.                         $('#valorBem').val(valorFormatadoParcela);
  494.                         $("#slider").val(limparNumero(valorFormatadoParcela)); // Atualizar o slider com o valor correto
  495.                         return;
  496.  
  497.                     }
  498.  
  499.                 }
  500.  
  501.                 if ($(this).val() === "") {
  502.  
  503.                     $(this).val(formatCurrency($("#slider").val())); // Aplicar formatação correta
  504.  
  505.                 } else {
  506.  
  507.                     $(this).val(formatCurrency(valorBem)); // Aplicar formatação correta
  508.                     $("#slider").val(valorBem); // Atualizar o slider com o valor correto
  509.  
  510.                 }
  511.  
  512.             } else {
  513.  
  514.                 $("#valorBem").val(formatCurrency(valorInicial));
  515.                 $("#slider").val(valorInicial);
  516.  
  517.             }
  518.  
  519.         });
  520.  
  521.         function formatCurrency(value) {
  522.             return parseInt(value).toLocaleString('pt-BR');
  523.         }
  524.  
  525.         function limparNumero(valor) {
  526.             return valor.replace(/[^\d]/g, '');
  527.         }
  528.  
  529.         // // Adiciona um evento de clique para os checkboxes da tabela step 2
  530.         // $('input[name="switchPrazo"]').change(function() {
  531.  
  532.         //     console.log("evento checkbox");
  533.  
  534.  
  535.  
  536.         // });
  537.  
  538.         document.querySelectorAll('input[name="switchPrazo"]').forEach(function (element) {
  539.             element.addEventListener('change', function () {
  540.                 // Aqui você adiciona o código que deseja executar quando o switch for alterado
  541.                 console.log("Mudança detectada no switch:", this.id);
  542.  
  543.                 // Desmarca todos os outros checkboxes e remove a classe 'font-weight-bold' de suas linhas
  544.                 $("input[name='switchPrazo']").not(this).prop('checked', false).closest('tr').removeClass('font-weight-bold');
  545.  
  546.                 // Se o checkbox atual estiver marcado, adiciona a classe 'font-weight-bold' à linha correspondente
  547.                 if ($(this).prop('checked')) {
  548.  
  549.                     $(this).closest('tr').addClass('font-weight-bold');
  550.  
  551.                 } else {
  552.  
  553.                     $(this).closest('tr').removeClass('font-weight-bold');
  554.  
  555.                 }
  556.  
  557.             });
  558.         });
  559.  
  560.     </script>
  561.  
  562. </body>
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!