Skip to content

Instantly share code, notes, and snippets.

@fabiode

fabiode/simulator.html.erb

Created January 7, 2020 01:29
Show Gist options
  • Save fabiode/b0f4f10e5dfe853a8e26c7ee1e1a334a to your computer and use it in GitHub Desktop.
Save fabiode/b0f4f10e5dfe853a8e26c7ee1e1a334a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simulator.html.erb
<div class="poupador-simulator" data-controller="poupador">
<% lead = local_assigns[:newsletter_lead] || @newsletter_lead %>
<%= hidden_field_tag 'lead[id]', lead.try(:id), data: { target: 'poupador.id', path: send_email_newsletter_leads_path } %>
<p class="t-light-gray text-center">Esta é apenas uma simulação aproximada da sua economia.</p>
<span class="hr very-light-gray"></span>
<div data-target="poupador.calculator">
<div class="row">
<div class="col text-center">
<%= image_pack_tag 'images/icons/icone-colaboradores.png', style: 'max-width: 100px;' %>
<h6 class="t-light-gray">Número de Colaboradores</h6>
<div class="form-group">
<input type="number" min="1" data-target="poupador.employees" class="form-control" placeholder="Nº Funcionários" data-action="change->poupador#validate" />
<div class="invalid-feedback">
</div>
</div>
</div>
<div class="col text-center">
<%= image_pack_tag 'images/icons/icone-dinheiro.png', style: 'max-width: 100px;' %>
<h6 class="t-light-gray">Custo mensal</h6>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text font-weight-bold t-gray">R$</span>
</div>
<input type="tel" data-target="poupador.amount" class="form-control rounded-right" placeholder="Valor do Benefício" data-action="change->poupador#validate"/>
<div class="invalid-feedback">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button data-action="click->poupador#calculate" class="btn btn-action btn-lg t-all-caps font-weight-bold btn-block"><%= icon 'piggy-bank' %> Simular</button>
</div>
</div>
</div>
<div data-target="poupador.resultContent" class="d-none">
<div class="row">
<div class="col py-3 t-gray text-center border-bottom">
<h5><%= icon 'credit-card' %> Sem Poupador: R$ <span data-target="poupador.fullresult"></span></h5>
</div>
</div>
<div class="row">
<div class="col py-3 text-center">
<h4 class="t-all-caps font-weight-bold text-dark-blue"><%= icon 'piggy-bank' %> <%= icon 'plus-circle', add_class: 'h5' %> <%= icon 'credit-card' %> Com poupador: <br> R$ <span data-target="poupador.result"></span></h4>
</div>
</div>
<div class="row">
<div class="col text-center">
<div class="bg-yellow rounded shadow-sm p-3 position-relative">
<%= icon 'piggy-bank', add_class: 'h1 t-transporte' %>
<h2 class="text-shadow-sm font-weight-bold t-all-caps text-white"> Você economiza: <br> R$ <span data-target="poupador.economy"></span></h2>
<div class="icon-wrapper text-shadow-sm" style="top: -1rem; right: -1rem">
<%= icon 'certificate', add_class: 'h1 t-transporte with-content' %>
<div class="content font-weight-bold text-white">
-30%
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col">
<button data-action="click->poupador#leadForm" data-target="poupador.leadBtn" class="btn btn-action btn-lg t-all-caps font-weight-bold btn-block">Quero economizar agora </button>
</div>
</div>
<div class="row">
<div class="col">
<button data-action="click->poupador#reset" class="btn btn-secondary t-all-caps font-weight-bold btn-block"><%= icon 'arrow-left' %> Fazer nova simulação</button>
</div>
<div class="col">
<button data-action="click->poupador#sendEmail" data-target="poupador.emailBtn" class="btn btn-primary t-all-caps font-weight-bold btn-block"><%= icon 'envelope-open-text' %> Enviar simulação para o meu e-mail.</button>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment