Merge pull request #155 from naqv/hover_digitalglarus

Hover digitalglarus
This commit is contained in:
Levi Velázquez 2017-01-10 20:17:27 -05:00 committed by GitHub
commit 3eb0a276ea
24 changed files with 2700 additions and 114 deletions

View File

@ -1,4 +1,5 @@
import calendar
from datetime import datetime, date, timedelta
from dateutil.relativedelta import relativedelta

View File

@ -71,7 +71,7 @@
padding-right: 15px;
padding-top: 15px;
padding-bottom: 30px;
margin-top: 80px;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;
@ -174,7 +174,7 @@
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 80px;
margin-top: 0px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;

View File

@ -64,8 +64,8 @@
}
.ungleich-gallery-text-carousel .carousel-indicators li, .text-carousel .carousel-indicators li {
width: 5px;
height: 5px;
width: 10px;
height: 10px;
margin: 10px;
border: 0;
border-radius: 50%;

View File

@ -28,6 +28,7 @@ $( document ).ready(function() {
var hasCreditcard = window.hasCreditcard;
hasCreditcard= true;
console.log("has creditcard");
console.log("has creditcard");
console.log("has creditcard");
@ -40,9 +41,11 @@ $( document ).ready(function() {
e.preventDefault();
if (hasCreditcard) {
$('#billing-form').submit();
console.log("has creditcard2");
}
else  {
$('#payment-form').submit();
console.log("has creditcard3");
}
@ -73,7 +76,7 @@ $( document ).ready(function() {
/* Visual feedback */
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
console.log("submiting2");
var PublishableKey = window.stripeKey;
Stripe.setPublishableKey(PublishableKey);
Stripe.card.createToken($form, function stripeResponseHandler(status, response) {

View File

@ -84,7 +84,7 @@
<input type="hidden" name="start_date" value="{{order.booking.start_date}}">
<!-- <a class="" href="{% url 'digitalglarus:booking_orders_list' %}" data-toggle="modal" data-target="#cancel-booking-modal">Cancel booking</a> -->
<a class="btn btn-primary btn-blue" href="{% url 'digitalglarus:booking_orders_list' %}">Go to my page</a>
<button type="button" class="btn btn-primary btn-blue" data-toggle="modal" data-target="#cancel-booking-modal">Cancel booking</button>
<button type="button" class="btn btn-primary btn-grey" data-toggle="modal" data-target="#cancel-booking-modal">Cancel booking</button>
</p>
<div class="modal fade bs-example-modal-sm" id="cancel-booking-modal" tabindex="-1" role="dialog">

View File

@ -70,14 +70,15 @@
<br>
</form>
</div>
{% if credit_card_data.last4 and credit_card_data.cc_brand %}
{% if credit_card_data.last4 %}
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
<h2 class="billing-head">Credit Card</h2>
<h2 class="billing-head">Credit Card<a class="btn btn-primary btn-grey btn-edit" href="{% url 'digitalglarus:TermsAndConditions' %}">New</a></h2>
<h2 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h2>
<h2 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h2>
<input type="hidden" name="credit_card_needed" value="false"/>
</form>
{% else %}
<h2 class="billing-head">Credit Card (Last used)</h2>
<div class="signup-form form-group row">
<form role="form" id="payment-form" novalidate>
@ -146,7 +147,11 @@
<div class="order-box">
<h3 class="col-xs-6 order-item">Dates {{start_date}} - {{end_date}}</h3>
<p class="order-bottom-text">
<a href="{{request.META.HTTP_REFERER}}">Change dates</a>
<!-- <a href="{{request.META.HTTP_REFERER}}">Change dates</a> -->
<a href="{% url 'digitalglarus:booking' %}">Change dates</a>
</p>
<hr class="greyline">
<h2 class="col-xs-6 payment-total">Total days: {{booking_days}} </h2>
@ -164,8 +169,8 @@
<br/>
<input type="checkbox" class="custom-control-input agree-terms">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">I accept the Digital Glarus <a href="{% url 'digitalglarus:TermsAndConditions' %}" target="_blank">Terms and Conditions</a>, <a href=#>Community Guidelines</a> and <a href=#>Privacy Policy</a></span>
</label>
<span class="custom-control-description">I accept the Digital Glarus <a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">Terms and Conditions</a>, <a href=#>Community Guidelines</a> and <a href=#>Privacy Policy</a></span>
</label>
<div class="button-box">
<div class="row">
<div class="col-xs-12">
@ -203,6 +208,72 @@
</div>
</div>
</section>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<section id="price2">
<div class="container">
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-12 col-lg-6 text-center wow fadeInDown">
<div class="price-box">
<span class="glyphicon glyphicon-flag"></span>
<h2 class="section-heading">General Terms & Conditions of Digital Glarus Membership</h2>
<h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2>
<hr class="primary">
<div class="price-exp-box">
<p class="text-left">
<p class="term-head">1. Membership</p>
1.1. The membership fee is 35CHF per month and charged on the 1st day of each month after your first month of subscription. <br>
1.2. Each additional day costs 15CHF for members.<br>
<br>
<p class="term-head">2. Coworking days</p>
2.1. Coworking days are counted as 1 calendar day. <br>
2.2. Free coworking days are included in the membership. <br>
2.3. Unused working days are not refunded and can not be compensated for. <br><br>
<p class="term-head">3. Possible reduction</p>
3.1. Your first month's membership fee is calculated according to the date of your subscription. <br>
3.2. The days already passed in the first month are discounted from the first month's membership fee.<br>
3.3. A member booking more than 19 days for coworking gets a reduction in total cost and will only pay maximum 290CHF per month. The reduction will be applied automatically on Digital Glarus website.<br><br>
<p class="term-head">4. Member's right to cancellation </p>
4.1. The member may cancel or change the booking of working day at any time prior to 7 days before the working day with no extra cost. <br>
4.2. Bookings cancelled less than 7 days before the working date will not be refunded.<br><br>
<p class="term-head">5. Digital Glarus' right to cancel a membership </p>
5.1. Digital Glarus may cancel a membership contract without notice at any time, stating the reasons for the cancellation.<br>
5.2. Members disrupting the environment of coworking may be rejected to join the membership.<br><br>
<p class="term-head">6. Digital Glarus' right to cancel a membership </p>
6.1. Digital Glarus may cancel a membership contract without notice at any time, stating the reasons for the cancellation.<br>
6.2. Digital Glarus may reject a member who disrupts the environment of coworking space from joining the membership.<br>
6.3. Digital Glarus may terminate the membership of a member who disrupts the environment of coworking space. <br>
6.4. Digital Glarus may expell a member who disrupts the environment of coworking space from the coworking space, stating the reasons for the expulsion.
<br><br>
</p>
<div class="text-center">
<a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
</div>
<div class="row col-md-2 text-center wow fadeInDown">
</div>
</div>
</div>
</div>
<div class="row col-md-3 text-center wow fadeInDown"></div>
</div>
</section>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- stripe key data -->
{% if stripe_key %}

View File

@ -0,0 +1,301 @@
{% extends "new_base_glarus.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.form-control#id_country{
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
.order-bottom-text a{
margin-left: 0px;
}
</style>
<section id="price">
<div class="signup-container">
<div class="col-xs-12 col-sm-6 col-lg-8 text-center wow fadeInDown">
<div class="payment-box">
<h2 class="section-heading payment-head">Booking</h2>
<!-- <h2 class="membership-amount">35CHF</h2> -->
<hr class="greyline-long">
<h2 class="membership-lead">
Your Digital Glarus Membership enables
you to use our coworking space and it includes
2 working days for the month you signed up.
The membership fee is a monthly subscription.
Additional day costs
15CHF per day. More than 17 days a month it
will charge only 290CHF/month.
</h2>
{% if is_free %}
<h2 class="billing-head">Billing Adress</h2>
<div class="signup-form form-group row">
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
{% for field in form %}
{% csrf_token %}
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
{% bootstrap_form_errors form type='non_fields'%}
<br>
</form>
</div>
<hr class="greyline-long">
<br/>
<h2 class="billing-head">Your booking is FREE of charge! You can change or cancel the booking freely 7 days before the booking date.</h2>
<br/><br/>
{% else %}
<h2 class="billing-head">Billing Adress</h2>
<div class="signup-form form-group row">
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
{% for field in form %}
{% csrf_token %}
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
{% bootstrap_form_errors form type='non_fields'%}
<br>
</form>
<div class="col-xs-4 col-md-6 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
</div>
<div class="col-xs-4 col-md-6 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
<div class="col-xs-4 col-md-6 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
{% if last4 %}
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
<h2 class="billing-head">Credit Card<a class="btn btn-primary btn-grey btn-edit" href="{% url 'digitalglarus:TermsAndConditions' %}">Edit</a></h2>
<h2 class="membership-lead">Last 4: *****{{last4}}</h2>
<h2 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h2>
<input type="hidden" name="credit_card_needed" value="false"/>
</form>
{% else %}
<h2 class="billing-head">Credit Card (Last used)</h2>
<div class="signup-form form-group row">
<form role="form" id="payment-form" novalidate>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="cardName" placeholder="Name on card" required autofocus data-stripe="name" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="cardNumber" placeholder="Valid Card Number" required data-stripe="number" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 nopadding">
<label for="expMonth">EXPIRATION DATE</label><br/>
<div class="col-xs-6 col-lg-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="expMonth" placeholder="MM" required data-stripe="exp_month" />
</div>
</div>
<div class="col-xs-6 col-lg-6 col-md-6 pl-ziro">
<div class="form-group">
<input type="text" class="form-control" name="expYear" placeholder="YY" required data-stripe="exp_year" />
</div>
</div>
</div>
<div class="col-xs-4 col-md-6 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
{% if paymentError %}
<div class="row">
<div class="col-xs-12">
<p>
{% bootstrap_alert paymentError alert_type='danger' %}
</p>
</div>
</div>
{% endif %}
</form>
<br>
</div>
{% endif %}
{% endif %}
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 wow fadeInDown">
<div class="order-summary">
<div class="header text-center">
<h2 class="order-name">Booking Summary</h2>
</div>
<div class="order-box">
<h3 class="col-xs-6 order-item">Dates {{start_date}} - {{end_date}}</h3>
<p class="order-bottom-text">
<a href="{{request.META.HTTP_REFERER}}">Change dates</a>
</p>
<hr class="greyline">
<h2 class="col-xs-6 payment-total">Total days: {{booking_days}} </h2>
<h2 class="order-sum">{{original_price|floatformat}}CHF</h2>
<br/>
{% if free_days %}
<h2 class="col-xs-6 payment-total">Free days: {{free_days}}</h2>
<h2 class="order-sum"><span class="text-danger">-{{total_discount|floatformat}}CHF</span></h2>
{% endif %}
<hr class="greyline">
<h2 class="col-xs-6 payment-total">Total</h2>
<h2 class="order-result">{{final_price|floatformat}}CHF</h2>
<div class="text-center">
<label class="custom-control custom-checkbox">
<br/>
<input type="checkbox" class="custom-control-input agree-terms">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">I accept the Digital Glarus <a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">Terms and Conditions</a>, <a href=#>Community Guidelines</a> and <a href=#>Privacy Policy</a></span>
</label>
<div class="button-box">
<div class="row">
<div class="col-xs-12">
<button id="payment_button" class="btn btn-primary btn-md btn-blck submit-payment" type="submit">Book</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<div class="col-md-4 map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br>
(044) 534-66-22
<p>&nbsp;</p>
</span>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
</section>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<section id="price2">
<div class="container">
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-7 col-lg-6 text-center wow fadeInDown">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="price-box">
<span class="glyphicon glyphicon-flag"></span>
<h2 class="section-heading">General Terms & Conditions of Digital Glarus Membership</h2>
<h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2>
<hr class="primary">
<div class="price-exp-box">
<p class="text-left">
<p class="term-head">1. Membership</p>
1.1. The membership fee is 35CHF per month and charged on the 1st day of each month after your first month of subscription. <br>
1.2. Each additional day costs 15CHF for members.<br>
<br>
<p class="term-head">2. Coworking days</p>
2.1. Coworking days are counted as 1 calendar day. <br>
2.2. Free coworking days are included in the membership. <br>
2.3. Unused working days are not refunded and can not be compensated for. <br><br>
<p class="term-head">3. Possible reduction</p>
3.1. Your first month's membership fee is calculated according to the date of your subscription. <br>
3.2. The days already passed in the first month are discounted from the first month's membership fee.<br>
3.3. A member booking more than 19 days for coworking gets a reduction in total cost and will only pay maximum 290CHF per month. The reduction will be applied automatically on Digital Glarus website.<br><br>
<p class="term-head">4. Member's right to cancellation </p>
4.1. The member may cancel or change the booking of working day at any time prior to 7 days before the working day with no extra cost. <br>
4.2. Bookings cancelled less than 7 days before the working date will not be refunded.<br><br>
<p class="term-head">5. Digital Glarus' right to cancel a membership </p>
5.1. Digital Glarus may cancel a membership contract without notice at any time, stating the reasons for the cancellation.<br>
5.2. Members disrupting the environment of coworking may be rejected to join the membership.<br><br>
<p class="term-head">6. Digital Glarus' right to cancel a membership </p>
6.1. Digital Glarus may cancel a membership contract without notice at any time, stating the reasons for the cancellation.<br>
6.2. Digital Glarus may reject a member who disrupts the environment of coworking space from joining the membership.<br>
6.3. Digital Glarus may terminate the membership of a member who disrupts the environment of coworking space. <br>
6.4. Digital Glarus may expell a member who disrupts the environment of coworking space from the coworking space, stating the reasons for the expulsion.
<br><br>
</p>
<div class="text-center">
<a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
</div>
<div class="row col-md-2 text-center wow fadeInDown">
</div>
</div>
</div>
</div>
<div class="row col-md-3 text-center wow fadeInDown"></div>
</div>
</section>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- stripe key data -->
{% if stripe_key %}
<script type="text/javascript">
(function () {window.stripeKey = "{{stripe_key}}";})();
</script>
{%endif%}
{% if credit_card_data.last4 and credit_card_data.cc_brand %}
<script type="text/javascript">
(function () {window.hasCreditcard = true;})();
</script>
{%endif%}
{% endblock %}

View File

@ -24,7 +24,7 @@
</form>
<br>
<div class="notice-box">
<p class="order-bottom-text">Still have trouble? Contact us for technical support.</p>
<p class="signup-text">Still have trouble?<a href="mailto:info@ungleich.ch" > Contact us </a>.</p>
</div>
</div>

View File

@ -0,0 +1,113 @@
{% extends "new_base_glarus.html" %}
{% load staticfiles cms_tags bootstrap3%}
{% block title %}crowdfunding{% endblock %}
{% block content %}
<style type="text/css">
#cancel-subscription-modal{
margin-top:10%;
}
#cancel-subscription-modal .modal-header{
border-bottom: none;
}
#cancel-subscription-modal .modal-footer{
border-top: none;
text-align: center;
}
.space-above {
margin-top: 10px;
}
</style>
<section id="price">
<div class="signup-container">
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center wow fadeInDown">
<!-- <span class="glyphicon glyphicon-user"></span> -->
<div class="payment-box">
<h2 class="billing-head">Update your credit card information</h2>
<hr class="greyline-long">
<h2 class="membership-lead">Do you want to update your credit card information ?</h2>
<div class="date-box">
</div>
<!--<hr class="primary">-->
<div class="signup-form form-group row">
<div class="button-booking-box form-inline row">
<form method="POST" action="">
{% csrf_token %}
<a class="btn btn-primary btn-grey space-above" href="{{request.META.HTTP_REFERER}}">Go back</a>
<button type="button" class="btn btn-primary btn-blue space-above" data-toggle="modal" data-target="#cancel-subscription-modal">Update my credit card</button>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Cancel Subscription</h4>
</div>
<div class="modal-body">
<p>Do you want to cancel your subscription?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-grey" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>
</div>
<div class="notice-box text-left">
<p class="order-bottom-text">
Your membership wouldn't be automatically renewed each month.
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<div class="col-md-4 map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br>
(044) 534-66-22
<p>&nbsp;</p>
</span>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
</section>
{% endblock %}

View File

@ -0,0 +1,311 @@
/*
* Remodal - v1.1.0
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
* http://vodkabears.github.io/remodal/
*
* Made by Ilya Makarov
* Under MIT License
*/
/* ==========================================================================
Remodal's default mobile first theme
========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
-webkit-filter: blur(3px);
filter: blur(3px);
}
/* Default theme styles of the overlay */
.remodal-overlay {
background: rgba(43, 46, 56, 0.9);
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
-webkit-animation-name: remodal-overlay-opening-keyframes;
animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
-webkit-animation-name: remodal-overlay-closing-keyframes;
animation-name: remodal-overlay-closing-keyframes;
}
/* Default theme styles of the wrapper */
.remodal-wrapper {
padding: 10px 10px 0;
}
/* Default theme styles of the modal dialog */
.remodal {
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
padding: 35px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #2b2e38;
background: #fff;
}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
-webkit-animation-name: remodal-opening-keyframes;
animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
-webkit-animation-name: remodal-closing-keyframes;
animation-name: remodal-closing-keyframes;
}
/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
vertical-align: middle;
}
/* Close button */
.remodal-close {
position: absolute;
top: 0;
left: 0;
display: block;
overflow: visible;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
cursor: pointer;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
color: #95979c;
border: 0;
outline: 0;
background: transparent;
}
.remodal-close:hover,
.remodal-close:focus {
color: #2b2e38;
}
.remodal-close:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 35px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 35px;
content: "\00d7";
text-align: center;
}
/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
font: inherit;
display: inline-block;
overflow: visible;
min-width: 110px;
margin: 0;
padding: 12px 0;
cursor: pointer;
-webkit-transition: background 0.2s;
transition: background 0.2s;
text-align: center;
vertical-align: middle;
text-decoration: none;
border: 0;
outline: 0;
}
.remodal-confirm {
color: #fff;
background: #81c784;
}
.remodal-confirm:hover,
.remodal-confirm:focus {
background: #66bb6a;
}
.remodal-cancel {
color: #fff;
background: #e57373;
}
.remodal-cancel:hover,
.remodal-cancel:focus {
background: #ef5350;
}
/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
padding: 0;
border: 0;
}
/* Keyframes
========================================================================== */
@-webkit-keyframes remodal-opening-keyframes {
from {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes remodal-opening-keyframes {
from {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 0;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@-webkit-keyframes remodal-closing-keyframes {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
}
}
@keyframes remodal-closing-keyframes {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
}
}
@-webkit-keyframes remodal-overlay-opening-keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes remodal-overlay-opening-keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes remodal-overlay-closing-keyframes {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes remodal-overlay-closing-keyframes {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Media queries
========================================================================== */
@media only screen and (min-width: 641px) {
.remodal {
max-width: 700px;
}
}
/* IE8
========================================================================== */
.lt-ie9 .remodal-overlay {
background: #2b2e38;
}
.lt-ie9 .remodal {
width: 700px;
}

View File

@ -0,0 +1,93 @@
/*
* Remodal - v1.1.0
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
* http://vodkabears.github.io/remodal/
*
* Made by Ilya Makarov
* Under MIT License
*/
/* ==========================================================================
Remodal's necessary styles
========================================================================== */
/* Hide scroll bar */
html.remodal-is-locked {
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
}
/* Anti FOUC */
.remodal,
[data-remodal-id] {
display: none;
}
/* Necessary styles of the overlay */
.remodal-overlay {
position: fixed;
z-index: 9999;
top: -5000px;
right: -5000px;
bottom: -5000px;
left: -5000px;
display: none;
}
/* Necessary styles of the wrapper */
.remodal-wrapper {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
}
.remodal-wrapper:after {
display: inline-block;
height: 100%;
margin-left: -0.05em;
content: "";
}
/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Necessary styles of the modal dialog */
.remodal {
position: relative;
outline: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.remodal-is-initialized {
/* Disable Anti-FOUC */
display: inline-block;
}

View File

@ -0,0 +1,785 @@
/*
* Remodal - v1.1.0
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
* http://vodkabears.github.io/remodal/
*
* Made by Ilya Makarov
* Under MIT License
*/
!(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], function($) {
return factory(root, $);
});
} else if (typeof exports === 'object') {
factory(root, require('jquery'));
} else {
factory(root, root.jQuery || root.Zepto);
}
})(this, function(global, $) {
'use strict';
/**
* Name of the plugin
* @private
* @const
* @type {String}
*/
var PLUGIN_NAME = 'remodal';
/**
* Namespace for CSS and events
* @private
* @const
* @type {String}
*/
var NAMESPACE = global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME;
/**
* Animationstart event with vendor prefixes
* @private
* @const
* @type {String}
*/
var ANIMATIONSTART_EVENTS = $.map(
['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'],
function(eventName) {
return eventName + '.' + NAMESPACE;
}
).join(' ');
/**
* Animationend event with vendor prefixes
* @private
* @const
* @type {String}
*/
var ANIMATIONEND_EVENTS = $.map(
['animationend', 'webkitAnimationEnd', 'MSAnimationEnd', 'oAnimationEnd'],
function(eventName) {
return eventName + '.' + NAMESPACE;
}
).join(' ');
/**
* Default settings
* @private
* @const
* @type {Object}
*/
var DEFAULTS = $.extend({
hashTracking: true,
closeOnConfirm: true,
closeOnCancel: true,
closeOnEscape: true,
closeOnOutsideClick: true,
modifier: '',
appendTo: null
}, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS);
/**
* States of the Remodal
* @private
* @const
* @enum {String}
*/
var STATES = {
CLOSING: 'closing',
CLOSED: 'closed',
OPENING: 'opening',
OPENED: 'opened'
};
/**
* Reasons of the state change.
* @private
* @const
* @enum {String}
*/
var STATE_CHANGE_REASONS = {
CONFIRMATION: 'confirmation',
CANCELLATION: 'cancellation'
};
/**
* Is animation supported?
* @private
* @const
* @type {Boolean}
*/
var IS_ANIMATION = (function() {
var style = document.createElement('div').style;
return style.animationName !== undefined ||
style.WebkitAnimationName !== undefined ||
style.MozAnimationName !== undefined ||
style.msAnimationName !== undefined ||
style.OAnimationName !== undefined;
})();
/**
* Is iOS?
* @private
* @const
* @type {Boolean}
*/
var IS_IOS = /iPad|iPhone|iPod/.test(navigator.platform);
/**
* Current modal
* @private
* @type {Remodal}
*/
var current;
/**
* Scrollbar position
* @private
* @type {Number}
*/
var scrollTop;
/**
* Returns an animation duration
* @private
* @param {jQuery} $elem
* @returns {Number}
*/
function getAnimationDuration($elem) {
if (
IS_ANIMATION &&
$elem.css('animation-name') === 'none' &&
$elem.css('-webkit-animation-name') === 'none' &&
$elem.css('-moz-animation-name') === 'none' &&
$elem.css('-o-animation-name') === 'none' &&
$elem.css('-ms-animation-name') === 'none'
) {
return 0;
}
var duration = $elem.css('animation-duration') ||
$elem.css('-webkit-animation-duration') ||
$elem.css('-moz-animation-duration') ||
$elem.css('-o-animation-duration') ||
$elem.css('-ms-animation-duration') ||
'0s';
var delay = $elem.css('animation-delay') ||
$elem.css('-webkit-animation-delay') ||
$elem.css('-moz-animation-delay') ||
$elem.css('-o-animation-delay') ||
$elem.css('-ms-animation-delay') ||
'0s';
var iterationCount = $elem.css('animation-iteration-count') ||
$elem.css('-webkit-animation-iteration-count') ||
$elem.css('-moz-animation-iteration-count') ||
$elem.css('-o-animation-iteration-count') ||
$elem.css('-ms-animation-iteration-count') ||
'1';
var max;
var len;
var num;
var i;
duration = duration.split(', ');
delay = delay.split(', ');
iterationCount = iterationCount.split(', ');
// The 'duration' size is the same as the 'delay' size
for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) {
num = parseFloat(duration[i]) * parseInt(iterationCount[i], 10) + parseFloat(delay[i]);
if (num > max) {
max = num;
}
}
return max;
}
/**
* Returns a scrollbar width
* @private
* @returns {Number}
*/
function getScrollbarWidth() {
if ($(document.body).height() <= $(window).height()) {
return 0;
}
var outer = document.createElement('div');
var inner = document.createElement('div');
var widthNoScroll;
var widthWithScroll;
outer.style.visibility = 'hidden';
outer.style.width = '100px';
document.body.appendChild(outer);
widthNoScroll = outer.offsetWidth;
// Force scrollbars
outer.style.overflow = 'scroll';
// Add inner div
inner.style.width = '100%';
outer.appendChild(inner);
widthWithScroll = inner.offsetWidth;
// Remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
/**
* Locks the screen
* @private
*/
function lockScreen() {
if (IS_IOS) {
return;
}
var $html = $('html');
var lockedClass = namespacify('is-locked');
var paddingRight;
var $body;
if (!$html.hasClass(lockedClass)) {
$body = $(document.body);
// Zepto does not support '-=', '+=' in the `css` method
paddingRight = parseInt($body.css('padding-right'), 10) + getScrollbarWidth();
$body.css('padding-right', paddingRight + 'px');
$html.addClass(lockedClass);
}
}
/**
* Unlocks the screen
* @private
*/
function unlockScreen() {
if (IS_IOS) {
return;
}
var $html = $('html');
var lockedClass = namespacify('is-locked');
var paddingRight;
var $body;
if ($html.hasClass(lockedClass)) {
$body = $(document.body);
// Zepto does not support '-=', '+=' in the `css` method
paddingRight = parseInt($body.css('padding-right'), 10) - getScrollbarWidth();
$body.css('padding-right', paddingRight + 'px');
$html.removeClass(lockedClass);
}
}
/**
* Sets a state for an instance
* @private
* @param {Remodal} instance
* @param {STATES} state
* @param {Boolean} isSilent If true, Remodal does not trigger events
* @param {String} Reason of a state change.
*/
function setState(instance, state, isSilent, reason) {
var newState = namespacify('is', state);
var allStates = [namespacify('is', STATES.CLOSING),
namespacify('is', STATES.OPENING),
namespacify('is', STATES.CLOSED),
namespacify('is', STATES.OPENED)].join(' ');
instance.$bg
.removeClass(allStates)
.addClass(newState);
instance.$overlay
.removeClass(allStates)
.addClass(newState);
instance.$wrapper
.removeClass(allStates)
.addClass(newState);
instance.$modal
.removeClass(allStates)
.addClass(newState);
instance.state = state;
!isSilent && instance.$modal.trigger({
type: state,
reason: reason
}, [{ reason: reason }]);
}
/**
* Synchronizes with the animation
* @param {Function} doBeforeAnimation
* @param {Function} doAfterAnimation
* @param {Remodal} instance
*/
function syncWithAnimation(doBeforeAnimation, doAfterAnimation, instance) {
var runningAnimationsCount = 0;
var handleAnimationStart = function(e) {
if (e.target !== this) {
return;
}
runningAnimationsCount++;
};
var handleAnimationEnd = function(e) {
if (e.target !== this) {
return;
}
if (--runningAnimationsCount === 0) {
// Remove event listeners
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
doAfterAnimation();
}
};
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName]
.on(ANIMATIONSTART_EVENTS, handleAnimationStart)
.on(ANIMATIONEND_EVENTS, handleAnimationEnd);
});
doBeforeAnimation();
// If the animation is not supported by a browser or its duration is 0
if (
getAnimationDuration(instance.$bg) === 0 &&
getAnimationDuration(instance.$overlay) === 0 &&
getAnimationDuration(instance.$wrapper) === 0 &&
getAnimationDuration(instance.$modal) === 0
) {
// Remove event listeners
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
doAfterAnimation();
}
}
/**
* Closes immediately
* @private
* @param {Remodal} instance
*/
function halt(instance) {
if (instance.state === STATES.CLOSED) {
return;
}
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
instance.$bg.removeClass(instance.settings.modifier);
instance.$overlay.removeClass(instance.settings.modifier).hide();
instance.$wrapper.hide();
unlockScreen();
setState(instance, STATES.CLOSED, true);
}
/**
* Parses a string with options
* @private
* @param str
* @returns {Object}
*/
function parseOptions(str) {
var obj = {};
var arr;
var len;
var val;
var i;
// Remove spaces before and after delimiters
str = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',');
// Parse a string
arr = str.split(',');
for (i = 0, len = arr.length; i < len; i++) {
arr[i] = arr[i].split(':');
val = arr[i][1];
// Convert a string value if it is like a boolean
if (typeof val === 'string' || val instanceof String) {
val = val === 'true' || (val === 'false' ? false : val);
}
// Convert a string value if it is like a number
if (typeof val === 'string' || val instanceof String) {
val = !isNaN(val) ? +val : val;
}
obj[arr[i][0]] = val;
}
return obj;
}
/**
* Generates a string separated by dashes and prefixed with NAMESPACE
* @private
* @param {...String}
* @returns {String}
*/
function namespacify() {
var result = NAMESPACE;
for (var i = 0; i < arguments.length; ++i) {
result += '-' + arguments[i];
}
return result;
}
/**
* Handles the hashchange event
* @private
* @listens hashchange
*/
function handleHashChangeEvent() {
var id = location.hash.replace('#', '');
var instance;
var $elem;
if (!id) {
// Check if we have currently opened modal and animation was completed
if (current && current.state === STATES.OPENED && current.settings.hashTracking) {
current.close();
}
} else {
// Catch syntax error if your hash is bad
try {
$elem = $(
'[data-' + PLUGIN_NAME + '-id="' + id + '"]'
);
} catch (err) {}
if ($elem && $elem.length) {
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
if (instance && instance.settings.hashTracking) {
instance.open();
}
}
}
}
/**
* Remodal constructor
* @constructor
* @param {jQuery} $modal
* @param {Object} options
*/
function Remodal($modal, options) {
var $body = $(document.body);
var $appendTo = $body;
var remodal = this;
remodal.settings = $.extend({}, DEFAULTS, options);
remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1;
remodal.state = STATES.CLOSED;
remodal.$overlay = $('.' + namespacify('overlay'));
if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) {
$appendTo = $(remodal.settings.appendTo);
}
if (!remodal.$overlay.length) {
remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
$appendTo.append(remodal.$overlay);
}
remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
remodal.$modal = $modal
.addClass(
NAMESPACE + ' ' +
namespacify('is-initialized') + ' ' +
remodal.settings.modifier + ' ' +
namespacify('is', STATES.CLOSED))
.attr('tabindex', '-1');
remodal.$wrapper = $('<div>')
.addClass(
namespacify('wrapper') + ' ' +
remodal.settings.modifier + ' ' +
namespacify('is', STATES.CLOSED))
.hide()
.append(remodal.$modal);
$appendTo.append(remodal.$wrapper);
// Add the event listener for the close button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function(e) {
e.preventDefault();
remodal.close();
});
// Add the event listener for the cancel button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="cancel"]', function(e) {
e.preventDefault();
remodal.$modal.trigger(STATE_CHANGE_REASONS.CANCELLATION);
if (remodal.settings.closeOnCancel) {
remodal.close(STATE_CHANGE_REASONS.CANCELLATION);
}
});
// Add the event listener for the confirm button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="confirm"]', function(e) {
e.preventDefault();
remodal.$modal.trigger(STATE_CHANGE_REASONS.CONFIRMATION);
if (remodal.settings.closeOnConfirm) {
remodal.close(STATE_CHANGE_REASONS.CONFIRMATION);
}
});
// Add the event listener for the overlay
remodal.$wrapper.on('click.' + NAMESPACE, function(e) {
var $target = $(e.target);
if (!$target.hasClass(namespacify('wrapper'))) {
return;
}
if (remodal.settings.closeOnOutsideClick) {
remodal.close();
}
});
}
/**
* Opens a modal window
* @public
*/
Remodal.prototype.open = function() {
var remodal = this;
var id;
// Check if the animation was completed
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
return;
}
id = remodal.$modal.attr('data-' + PLUGIN_NAME + '-id');
if (id && remodal.settings.hashTracking) {
scrollTop = $(window).scrollTop();
location.hash = id;
}
if (current && current !== remodal) {
halt(current);
}
current = remodal;
lockScreen();
remodal.$bg.addClass(remodal.settings.modifier);
remodal.$overlay.addClass(remodal.settings.modifier).show();
remodal.$wrapper.show().scrollTop(0);
remodal.$modal.focus();
syncWithAnimation(
function() {
setState(remodal, STATES.OPENING);
},
function() {
setState(remodal, STATES.OPENED);
},
remodal);
};
/**
* Closes a modal window
* @public
* @param {String} reason
*/
Remodal.prototype.close = function(reason) {
var remodal = this;
// Check if the animation was completed
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
return;
}
if (
remodal.settings.hashTracking &&
remodal.$modal.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
) {
location.hash = '';
$(window).scrollTop(scrollTop);
}
syncWithAnimation(
function() {
setState(remodal, STATES.CLOSING, false, reason);
},
function() {
remodal.$bg.removeClass(remodal.settings.modifier);
remodal.$overlay.removeClass(remodal.settings.modifier).hide();
remodal.$wrapper.hide();
unlockScreen();
setState(remodal, STATES.CLOSED, false, reason);
},
remodal);
};
/**
* Returns a current state of a modal
* @public
* @returns {STATES}
*/
Remodal.prototype.getState = function() {
return this.state;
};
/**
* Destroys a modal
* @public
*/
Remodal.prototype.destroy = function() {
var lookup = $[PLUGIN_NAME].lookup;
var instanceCount;
halt(this);
this.$wrapper.remove();
delete lookup[this.index];
instanceCount = $.grep(lookup, function(instance) {
return !!instance;
}).length;
if (instanceCount === 0) {
this.$overlay.remove();
this.$bg.removeClass(
namespacify('is', STATES.CLOSING) + ' ' +
namespacify('is', STATES.OPENING) + ' ' +
namespacify('is', STATES.CLOSED) + ' ' +
namespacify('is', STATES.OPENED));
}
};
/**
* Special plugin object for instances
* @public
* @type {Object}
*/
$[PLUGIN_NAME] = {
lookup: []
};
/**
* Plugin constructor
* @constructor
* @param {Object} options
* @returns {JQuery}
*/
$.fn[PLUGIN_NAME] = function(opts) {
var instance;
var $elem;
this.each(function(index, elem) {
$elem = $(elem);
if ($elem.data(PLUGIN_NAME) == null) {
instance = new Remodal($elem, opts);
$elem.data(PLUGIN_NAME, instance.index);
if (
instance.settings.hashTracking &&
$elem.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
) {
instance.open();
}
} else {
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
}
});
return instance;
};
$(document).ready(function() {
// data-remodal-target opens a modal window with the special Id
$(document).on('click', '[data-' + PLUGIN_NAME + '-target]', function(e) {
e.preventDefault();
var elem = e.currentTarget;
var id = elem.getAttribute('data-' + PLUGIN_NAME + '-target');
var $target = $('[data-' + PLUGIN_NAME + '-id="' + id + '"]');
$[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open();
});
// Auto initialization of modal windows
// They should have the 'remodal' class attribute
// Also you can write the `data-remodal-options` attribute to pass params into the modal
$(document).find('.' + NAMESPACE).each(function(i, container) {
var $container = $(container);
var options = $container.data(PLUGIN_NAME + '-options');
if (!options) {
options = {};
} else if (typeof options === 'string' || options instanceof String) {
options = parseOptions(options);
}
$container[PLUGIN_NAME](options);
});
// Handles the keydown event
$(document).on('keydown.' + NAMESPACE, function(e) {
if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
current.close();
}
});
// Handles the hashchange event
$(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent);
});
});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,293 @@
{% extends "new_base_glarus.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.form-control#id_country{
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
.order-bottom-text a{
margin-left: 0px;
}
</style>
<section id="price">
<div class="signup-container">
<div class="col-xs-12 col-sm-6 col-lg-8 text-center wow fadeInDown">
<div class="payment-box">
<h2 class="section-heading payment-head">Edit Credit Card</h2>
<!-- <h2 class="membership-amount">35CHF</h2> -->
<hr class="greyline-long">
<h2 class="membership-lead">
</h2>
<br>
<h2 class="billing-head">Credit Card Information</h2>
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
{% csrf_token %}
<h2 class="membership-lead">Last 4: *****{{last4}}</h2>
<h2 class="membership-lead">Type: {{cc_brand}}</h2>
<h2 class="membership-lead">Exp month: {{expMonth}}</h2>
<h2 class="membership-lead">Exp year: {{expYear}}</h2>
<input type="hidden" name="credit_card_needed" value="false"/>
</form>
<h2 class="billing-head">Edit Card credit card</h2>
<div class="signup-form form-group row">
<!-- <form role="form" id="payment-form" novalidate> -->
<form role="form" id="payment-form2" method="post" action="{% url 'digitalglarus:booking_payment_view' %}" novalidate>
{% csrf_token %}
<div class="text-center">
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<label for="expMonth">EXPIRATION DATE</label><br/>
<div class="col-xs-6 col-lg-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="expMonth" placeholder="MM" required data-stripe="exp_month" />
</div>
</div>
<div class="col-xs-6 col-lg-6 col-md-6 pl-ziro">
<div class="form-group">
<input type="text" class="form-control" name="expYear" placeholder="YY" required data-stripe="exp_year" />
</div>
</div>
</div>
</div>
<input type="checkbox" hidden="True" class="custom-control-input agree-terms" checked>
<div class="row">
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">
<a class="btn btn-primary btn-grey" href="{% url 'digitalglarus:booking_payment' %}">Cancel</a>
<button class="btn btn-primary btn-md btn-blck submit-payment" type="submit">Save</button>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
{% if paymentError %}
<div class="row">
<div class="col-xs-12">
<p>
{% bootstrap_alert paymentError alert_type='danger' %}
</p>
</div>
</div>
{% endif %}
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<div class="col-md-4 map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br>
(044) 534-66-22
<p>&nbsp;</p>
</span>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
</section>
<!-- stripe key data -->
{% if stripe_key %}
<script type="text/javascript">
(function () {window.stripeKey = "{{stripe_key}}";})();
</script>
{%endif%}
<script>
$( document ).ready(function() {
$.ajaxSetup({
beforeSend: function(xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
alert("POR AQUI");
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
//Acept term and conditions button
var submit_form_btn = $('#payment_button');
submit_form_btn.on('click', submit_payment);
function submit_payment(e){
$('#billing-form').submit();
alert("POR AQUI2");
// $form.submit();
}
var $form = $('#payment-form');
$form.submit(payWithStripe);
/* If you're using Stripe for payments */
function payWithStripe(e) {
console.log("submiting");
e.preventDefault();
if (!$('.agree-terms').is(':checked')){
alert("You must accept terms and conditions.");
return;
}
/* Visual feedback */
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
var PublishableKey = window.stripeKey;
Stripe.setPublishableKey(PublishableKey);
Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
if (response.error) {
/* Visual feedback */
alert("POR AQUI3");
$form.find('[type=submit]').html('Try again');
/* Show Stripe errors on the form */
$form.find('.payment-errors').text(response.error.message);
$form.find('.payment-errors').closest('.row').show();
} else {
/* Visual feedback */
$form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
/* Hide Stripe errors on the form */
$form.find('.payment-errors').closest('.row').hide();
$form.find('.payment-errors').text("");
// response contains id and card, which contains additional card details
var token = response.id;
// AJAX
//set token on a hidden input
$('#id_token').val(token);
$('#billing-form').submit();
}
});
}
/* Form validation */
$.validator.addMethod("month", function(value, element) {
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
}, "Please specify a valid 2-digit month.");
$.validator.addMethod("year", function(value, element) {
return this.optional(element) || /^[0-9]{2}$/.test(value);
}, "Please specify a valid 2-digit year.");
validator = $form.validate({
rules: {
cardNumber: {
required: true,
creditcard: true,
digits: true
},
expMonth: {
required: true,
month: true
},
expYear: {
required: true,
year: true
},
cvCode: {
required: true,
digits: true
}
},
highlight: function(element) {
$(element).closest('.form-control').removeClass('success').addClass('error');
},
unhighlight: function(element) {
$(element).closest('.form-control').removeClass('error').addClass('success');
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error);
}
});
paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") &&
$form.find('[name=expMonth]').hasClass("success") &&
$form.find('[name=expYear]').hasClass("success") &&
$form.find('[name=cvCode]').val().length > 1) {
return true;
} else {
return false;
}
};
$form.find('[type=submit]').prop('disabled', true);
var readyInterval = setInterval(function() {
if (paymentFormReady()) {
$form.find('[type=submit]').prop('disabled', false);
clearInterval(readyInterval);
}
}, 250);
});
</script>
{% endblock %}

View File

@ -1,3 +1,4 @@
{% extends "new_base_glarus.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}

View File

@ -44,8 +44,9 @@
<form method="POST" action="">
{% csrf_token %}
<a class="btn btn-primary btn-grey space-above" href="{{request.META.HTTP_REFERER}}">Go back</a>
<button type="button" class="btn btn-primary btn-blue space-above" data-toggle="modal" data-target="#cancel-subscription-modal">Cancel my Membership</button>
<a class="btn btn-primary btn-grey space-above" href="{{request.META.HTTP_REFERER}}">Go back</a>
@ -59,7 +60,7 @@
<div class="modal-body">
<p>Do you want to cancel your subscription?</p>
</div>
<div class="modal-footer text-center">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-grey" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
@ -81,7 +82,9 @@
</div>
</div>
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
</div>
</div>

View File

@ -19,18 +19,17 @@
padding-right: 1.5em
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 768px) {
#cancel-subscription-modal .modal-dialog {width:1000px;}
.glyphicon-flag {
cancel-subscription-modal .modal-dialog {width:1000px;}
.glyphicon-flag {
font-size: 44px;
display: block;
text-align: center;
margin: 30px auto 30px;
color: #88c7d7;
}
.price2 {
@ -38,7 +37,47 @@
-moz-background-size: cover;
}
cancel-subscription-modal .modal-body {
max-height: 800px;
}
}
@media screen and (min-width: 780px) {
cancel-subscription-modal .modal-dialog {width:1000px;}
.glyphicon-flag {
font-size: 44px;
display: block;
text-align: center;
margin: 30px auto 30px;
color: #88c7d7;
}
.price2 {
-webkit-background-size: cover;
-moz-background-size: cover;
}
}
@media screen and (min-width: 982px) {
cancel-subscription-modal .modal-dialog {width:600px;}
cancel-subscription-modal .modal-body {
max-height: 600px;
}
}
</style>
@ -81,7 +120,8 @@
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="cardName" placeholder="Name on card" required autofocus data-stripe="name" />
<input type="text" class="form-control" name="cardName" placeholder="Name on card" required autofocus data-stripe="name" />
</div>
</div>
</div>
@ -211,19 +251,23 @@
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<section id="price2">
<div class="container">
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-12 col-lg-10 text-center wow fadeInDown">
<div class="price-box">
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<section id="price2">
<div class="container">
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> -->
<div class="row col-xs-12 col-sm-7 col-lg-6 text-center wow fadeInDown">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="price-box">
<span class="glyphicon glyphicon-flag"></span>
<h2 class="section-heading">General Terms & Conditions of Digital Glarus Membership</h2>
<h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2>

View File

@ -7,9 +7,16 @@
<style type="text/css">
@media screen and (min-width: 768px) { }
cancel-subscription-modal .modal-dialog {width:550px;}
cancel-subscription-modal .modal-dialog {width:350px;}
position: relative;
top: -200px;
width: 400px;
z-index: 1000;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.glyphicon-calendar{
font-size: 42px;
@ -26,6 +33,28 @@
}
.cancel-subscription-modal{
position: absolute;
top: -200px;
width: 400px;
z-index: 1000;
margin: 0 auto;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.btn-primary-text {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
color: #0F1221;
letter-spacing: 1px;
padding-right: 10px;
}
</style>
<section id="price">
@ -53,7 +82,7 @@
</div>
<div class="text-center">
<br>
<a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">How to pay?</a>
<a class="btn btn-primary-text" data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">How to pay?</a>
</div>
</div>
@ -105,17 +134,15 @@
</section>
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true">
<div class="modal fade bs-example-modal-sm" id="cancel-subscription-modal" tabindex="-1" role="dialog" aria-hidden ="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<section id="price2">
<div class="signup-container">
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
<div class="col-xs-12 col-sm-12 col-lg-12 text-center wow fadeInDown">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown" margin-top:0;> </div>
<div class="col-xs-12 col-sm-12 col-lg-12 text-center wow fadeInDown" margin-top:0;>
<div class="signup-box">
<span class="glyphicon glyphicon-calendar"></span>
<h2 class="section-heading">How the pricing works</h2>

View File

@ -0,0 +1,340 @@
{% extends "new_base_glarus.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.form-control#id_country{
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
.order-bottom-text a{
margin-left: 0px;
}
</style>
<section id="price">
<div class="signup-container">
<div class="col-xs-12 col-sm-6 col-lg-8 text-center wow fadeInDown">
<div class="payment-box">
<h2 class="section-heading payment-head">New Credit Card</h2>
<!-- <h2 class="membership-amount">35CHF</h2> -->
<hr class="greyline-long">
<h2 class="membership-lead">
</h2>
<!-- {% if is_free %}
<h2 class="billing-head">Billing Adress</h2>
<div class="signup-form form-group row">
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
{% for field in form %}
{% csrf_token %}
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
{% bootstrap_form_errors form type='non_fields'%}
<br>
</form>
</div>
<hr class="greyline-long">
<br/>
<h2 class="billing-head">Your booking is FREE of charge! You can change or cancel the booking freely 7 days before the booking date.</h2>
<br/><br/>
{% else %}
-->
<br>
<h2 class="billing-head">Credit Card Information</h2>
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate>
{% csrf_token %}
<h2 class="membership-lead">Last 4: *****{{last4}}</h2>
<h2 class="membership-lead">Type: {{cc_brand}}</h2>
<input type="hidden" name="credit_card_needed" value="false"/>
</form>
<h2 class="billing-head">Credit Card (New One)</h2>
<div class="signup-form form-group row">
<!-- <form role="form" id="payment-form" novalidate> -->
<form role="form" id="payment-form2" method="post" action="{% url 'digitalglarus:booking_payment_view' %}" novalidate>
{% csrf_token %}
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="cardName" placeholder="Name on card" required autofocus data-stripe="name" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="cardNumber" placeholder="Valid Card Number" required data-stripe="number" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<label for="expMonth">EXPIRATION DATE</label><br/>
<div class="col-xs-6 col-lg-6 col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="expMonth" placeholder="MM" required data-stripe="exp_month" />
</div>
</div>
<div class="col-xs-6 col-lg-6 col-md-6 pl-ziro">
<div class="form-group">
<input type="text" class="form-control" name="expYear" placeholder="YY" required data-stripe="exp_year" />
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 pull-right">
<div class="form-group">
<label for="cvCode">CV CODE</label>
<input type="password" class="form-control" name="cvCode" placeholder="CV" required data-stripe="cvc" />
</div>
</div>
</div>
<input type="checkbox" hidden="True" class="custom-control-input agree-terms" checked>
<div class="row">
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">
<a class="btn btn-primary btn-grey" href="{% url 'digitalglarus:booking_payment' %}">Cancel</a>
<button class="btn btn-primary btn-md btn-blck submit-payment" type="submit">Save</button>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
{% if paymentError %}
<div class="row">
<div class="col-xs-12">
<p>
{% bootstrap_alert paymentError alert_type='danger' %}
</p>
</div>
</div>
{% endif %}
</form>
<br>
</div>
<!-- {% endif %} -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="fill">
<div class="row" class="wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<div class="col-md-4 map-title">
Digital Glarus<br>
<span class="map-caption">In der Au 7 Schwanden 8762 Switzerland
<br>info@digitalglarus.ch
<br>
(044) 534-66-22
<p>&nbsp;</p>
</span>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
</section>
<!-- stripe key data -->
{% if stripe_key %}
<script type="text/javascript">
(function () {window.stripeKey = "{{stripe_key}}";})();
</script>
{%endif%}
<script>
$( document ).ready(function() {
$.ajaxSetup({
beforeSend: function(xhr, settings) {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
alert("POR AQUI");
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
//Acept term and conditions button
var submit_form_btn = $('#payment_button');
submit_form_btn.on('click', submit_payment);
function submit_payment(e){
$('#billing-form').submit();
alert("POR AQUI2");
// $form.submit();
}
var $form = $('#payment-form');
$form.submit(payWithStripe);
/* If you're using Stripe for payments */
function payWithStripe(e) {
console.log("submiting");
e.preventDefault();
if (!$('.agree-terms').is(':checked')){
alert("You must accept terms and conditions.");
return;
}
/* Visual feedback */
$form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
var PublishableKey = window.stripeKey;
Stripe.setPublishableKey(PublishableKey);
Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
if (response.error) {
/* Visual feedback */
alert("POR AQUI3");
$form.find('[type=submit]').html('Try again');
/* Show Stripe errors on the form */
$form.find('.payment-errors').text(response.error.message);
$form.find('.payment-errors').closest('.row').show();
} else {
/* Visual feedback */
$form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
/* Hide Stripe errors on the form */
$form.find('.payment-errors').closest('.row').hide();
$form.find('.payment-errors').text("");
// response contains id and card, which contains additional card details
var token = response.id;
// AJAX
//set token on a hidden input
$('#id_token').val(token);
$('#billing-form').submit();
}
});
}
/* Form validation */
$.validator.addMethod("month", function(value, element) {
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
}, "Please specify a valid 2-digit month.");
$.validator.addMethod("year", function(value, element) {
return this.optional(element) || /^[0-9]{2}$/.test(value);
}, "Please specify a valid 2-digit year.");
validator = $form.validate({
rules: {
cardNumber: {
required: true,
creditcard: true,
digits: true
},
expMonth: {
required: true,
month: true
},
expYear: {
required: true,
year: true
},
cvCode: {
required: true,
digits: true
}
},
highlight: function(element) {
$(element).closest('.form-control').removeClass('success').addClass('error');
},
unhighlight: function(element) {
$(element).closest('.form-control').removeClass('error').addClass('success');
},
errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error);
}
});
paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") &&
$form.find('[name=expMonth]').hasClass("success") &&
$form.find('[name=expYear]').hasClass("success") &&
$form.find('[name=cvCode]').val().length > 1) {
return true;
} else {
return false;
}
};
$form.find('[type=submit]').prop('disabled', true);
var readyInterval = setInterval(function() {
if (paymentFormReady()) {
$form.find('[type=submit]').prop('disabled', false);
clearInterval(readyInterval);
}
}, 250);
});
</script>
{% endblock %}

View File

@ -26,7 +26,8 @@
</form>
<br>
<div class="notice-box">
<p class="order-bottom-text">Still have trouble? Contact us for technical support.</p>
<p class="signup-text">Still have trouble? For technical support, <a href="mailto:info@ungleich.ch"> contact us </a>.</p>
</div>
</div>

View File

@ -7,8 +7,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
@ -80,17 +79,8 @@
margin: 0px;
color:white;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
@media only screen and (min-width: 769px){
@media only screen and (min-width: 769px){
.dropdown.home-dropdown-mobile {
display: none;
}
@ -98,14 +88,15 @@
display: block;
}
}
@media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile {
@media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile {
display: block;
background-color:
}
.dropdown.home-dropdown-mobile .dropdown-menu{
.dropdown.home-dropdown-mobile .dropdown-menu{
display: block;
background-color: #0f1221;
}
@ -120,16 +111,24 @@
.dropdown.home-dropdown {
display: none;
}
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
</style>
{% block extra_css %} {% endblock %}
</head>
<body id="page-top" class="index">
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
@ -152,7 +151,7 @@
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}" >booking & price</a>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}">booking & price</a>
</li>
<li>
<a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a>
@ -165,9 +164,9 @@
</li>
{% if request.user.is_authenticated %}
{% if request.user.is_authenticated %}
<li class="dropdown home-dropdown-mobile open">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
@ -190,15 +189,15 @@
</li>
</ul>
</li>
<li class="dropdown home-dropdown">
<li class="dropdown home-dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
</a>
<ul id="g-account-menu" class="dropdown-menu" role="menu">
<li>
<a href="{% url 'digitalglarus:booking_orders_list' %}">
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
</a>
</li>
<li>
@ -212,7 +211,8 @@
</a>
</li>
</ul>
</li>
</li>
{% else %}
<li>
<a class="page-scroll" href="{% url 'digitalglarus:login' %}">Login</a>
@ -250,7 +250,7 @@
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li><a href="http://www.ungleich.ch/">ungleich Home</a>
<li><a class="btn btn-primary-text" href="http://www.ungleich.ch/">ungleich Home</a>
</li>
</ul>
</div>

View File

@ -7,7 +7,8 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width" />
<meta name="description" content="">
<meta name="author" content="">
@ -79,7 +80,51 @@
margin: 0px;
color:white;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
@media only screen and (min-width: 769px){
.dropdown.home-dropdown-mobile {
display: none;
}
.dropdown.home-dropdown {
display: block;
}
}
@media only screen and (max-width: 768px){
.dropdown.home-dropdown-mobile {
display: block;
background-color:
}
.dropdown.home-dropdown-mobile .dropdown-menu{
display: block;
background-color: #0f1221;
}
.dropdown.home-dropdown-mobile .dropdown-menu li a {
color:white;
}
.dropdown.home-dropdown-mobile .dropdown-menu li a:hover {
color: #0f1221;
}
.dropdown.home-dropdown {
display: none;
}
}
</style>
{% block extra_css %} {% endblock %}
</head>
@ -97,17 +142,17 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p><a class="navbar-brand page-scroll"href="{% url 'digitalglarus:landing' %}"><img src="{% static 'digitalglarus/img/logo_white.svg' %}"></a></p>
<p><a class="navbar-brand page-scroll" href="{% url 'digitalglarus:landing' %}"><img src="{% static 'digitalglarus/img/logo_white.svg' %}"></a></p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" style="margin-right: -; margin-left: 0px;margin-right: 0px;">
<li class="hidden active">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}">booking & price</a>
<a class="page-scroll" href="{% url 'digitalglarus:booking' %}" >booking & price</a>
</li>
<li>
<a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a>
@ -119,7 +164,31 @@
<a class="page-scroll" href="#contact">Contact</a>
</li>
{% if request.user.is_authenticated %}
<li class="dropdown home-dropdown-mobile open">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
</a>
<ul id="g-account-menu" class="dropdown-menu" role="menu" aria-hidden="true">
<li>
<a href="{% url 'digitalglarus:booking_orders_list' %}">
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
</a>
</li>
<li>
<a href="{% url 'digitalglarus:membership_orders_list' %}"><i class="fa fa-heart-o" aria-hidden="true"></i> {% trans "Membership"%}
</a>
</li>
<li>
<a href="{% url 'digitalglarus:logout' %}">
<i class="fa fa-lock" aria-hidden="true"></i>
{% trans "Logout"%}
</a>
</li>
</ul>
</li>
<li class="dropdown home-dropdown">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-user"></i>{{request.user.name}} <span class="caret"></span>
@ -127,7 +196,7 @@
<ul id="g-account-menu" class="dropdown-menu" role="menu">
<li>
<a href="{% url 'digitalglarus:booking_orders_list' %}">
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
<i class="fa fa-home" aria-hidden="true"></i> {% trans "Bookings"%}
</a>
</li>
<li>

View File

@ -6,18 +6,21 @@ from .views import ContactView, IndexView, AboutView, HistoryView, LoginView, Si
PasswordResetView, PasswordResetConfirmView, MembershipPaymentView, MembershipActivatedView,\
MembershipPricingView, BookingSelectDatesView, BookingPaymentView, OrdersBookingDetailView,\
BookingOrdersListView, MembershipOrdersListView, OrdersMembershipDetailView, \
MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView, \
MembershipReactivateView,TermsAndConditions,ValidateUser,SupportusView,Probar
MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView,EditCreditCard, \
MembershipReactivateView,TermsAndConditions,ValidateUser,SupportusView,Probar,TermsAndConditions2,TermsAndConditions3,BookingPaymentView2
# from membership.views import LoginRegistrationView
urlpatterns = [
url(_(r'booking/payment/edit/?$'),EditCreditCard,name= 'edit_credit_card'),
url(_(r'booking/payment/view/?$'), BookingPaymentView2, name='booking_payment_view'),
url(_(r'probar3/?$'),TermsAndConditions3, name='probar3'),
url(_(r'probar2/?$'),TermsAndConditions2.as_view(), name='credit_card_edit'),
url(_(r'probar/?$'), Probar, name='probar'),
url(_(r'login/validate/(?P<pk>\!\w+)/?$'), ValidateUser.as_view(), name='validate-login'),
url(_(r'^$'), IndexView.as_view(), name='landing'),
url(_(r'terms_conditions/?$'), TermsAndConditions.as_view(), name='TermsAndConditions'),
url(_(r'new_credit_card/?$'), TermsAndConditions, name='TermsAndConditions'),
url(_(r'support-us/?$'), SupportusView.as_view(), name='supportus'),
url(_(r'contact/?$'), ContactView.as_view(), name='contact'),
url(_(r'login/?$'), LoginView.as_view(), name='login'),

View File

@ -1,6 +1,7 @@
import json
import datetime
from django.views.decorators.csrf import csrf_protect, csrf_exempt
from django.template import RequestContext
from django.conf import settings
from django.shortcuts import get_object_or_404, render
from django.forms import ModelForm
@ -14,24 +15,21 @@ from djangocms_blog.models import Post
from django.contrib import messages
from django.http import JsonResponse
from django.views.generic import View, DetailView, ListView, DeleteView
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render_to_response, redirect, render
from .models import Supporter
from .mixins import ChangeMembershipStatusMixin
from utils.forms import ContactUsForm
from utils.mailer import BaseEmail
from django.views.generic.edit import FormView
from membership.calendar.calendar import BookCalendar
from membership.models import Calendar as CalendarModel, StripeCustomer
from utils.views import LoginViewMixin, SignupViewMixin, \
PasswordResetViewMixin, PasswordResetConfirmViewMixin
from utils.forms import PasswordResetRequestForm, UserBillingAddressForm
from utils.stripe_utils import StripeUtils
from utils.models import UserBillingAddress
import stripe
from .forms import LoginForm, SignupForm, MembershipBillingForm, BookingDateForm,\
BookingBillingForm, CancelBookingForm
@ -40,13 +38,40 @@ from .models import MembershipType, Membership, MembershipOrder, Booking, Bookin
BookingOrder, BookingCancellation
from .mixins import MembershipRequiredMixin, IsNotMemberMixin
class Probar(LoginRequiredMixin, UpdateView):
template_name='digitalglarus/membership_deactivated.html'
model = Membership
success_url = reverse_lazy('digitalglarus:probar')
def BookingPaymentView2(request):
#print (request.user)
resp = dict()
cus = StripeCustomer.get_or_create(email=request.user.email)
s= str(cus)
s= s.split(" ")
resp['object']='card'
resp['exp_month']=request.POST['expMonth']
resp['exp_year']=request.POST['expYear']
resp['number']=request.POST['cardNumber']
resp['cvc']=request.POST['cvCode']
resp['name']=request.POST['cardName']
customer = stripe.Customer.retrieve(s[0])
customer.sources.create(source=resp)
t=stripe.Customer.retrieve(s[0]).sources.all(object="card")
tt=t['data']
x= resp['number']
cc= dict()
for i in tt:
#print (i.id)
#print (i.last4)
#print (x[-4:])
if i.last4 == x[-4:]:
cc['last4']= i.last4
cc['cc_brand']= i.brand
customer.default_source= i.id
customer.save()
current_billing_address = request.user.billing_addresses.first()
#return HttpResponse(json.dumps(resp), content_type ='application/json')
#return render_to_response('digitalglarus/booking_payment.html',{'last4':cc['last4'],'stripe_key': settings.STRIPE_API_PUBLIC_KEY,'street_address': current_billing_address.street_address,'city': current_billing_address.city, 'postal_code': current_billing_address.postal_code,'country': current_billing_address.country,},context_instance= RequestContext(request))
return HttpResponseRedirect('/digitalglarus/booking/payment/')
def Probar(TemplateView):
print ("hello")
class ValidateUser(TemplateView):
#print ("ENTRE AQUI AL MENOS Y",pk)
@ -68,20 +93,87 @@ class ValidateView(SignupViewMixin):
form_class = SignupForm
success_url = reverse_lazy('digitalglarus:login')
@csrf_exempt
def TermsAndConditions(request):
cus = StripeCustomer.get_or_create(email=request.user.email)
s= str(cus)
s= s.split(" ")
cc = dict()
customer = stripe.Customer.retrieve(s[0])
custom_card= customer.default_source
card = customer.sources.retrieve(custom_card)
cc['last4']= card.last4
cc['cc_brand'] = card.brand
m=MembershipOrder.objects.filter(customer__user=request.user)
#customer = StripeCustomer.get_or_create(email=request.user.email)
last_booking_order = BookingOrder.objects.filter(customer__user=request.user).last()
last_membership_order = MembershipOrder.objects.filter(customer__user=request.user).last()
current_billing_address = request.user.billing_addresses.first()
return render_to_response('digitalglarus/new_credit_card.html',{'last4':cc['last4'],'brand_type':cc['cc_brand'],'stripe_key': settings.STRIPE_API_PUBLIC_KEY,'street_address': current_billing_address.street_address,'city': current_billing_address.city, 'postal_code': current_billing_address.postal_code,'country': current_billing_address.country,},context_instance= RequestContext(request))
#def activarUsuario(request, pk):
#if request.method == 'POST':
# u = U.objects.get(pk = pk)
# u.is_active = True
# u.save()
# messages.info(request, 'Usuario Activado')
# Log('activar','usuario',request)
#resp = dict()
#resp['msg'] = 0 #0 para exito
#return HttpResponse(json.dumps(resp), content_type ='application/json')
def TermsAndConditions3(request):
return render_to_response('digitalglarus/new_credit_card.html',{'last4':credit_card_data['last4'],'brand_type':credit_card_data['cc_brand']})
class TermsAndConditions(TemplateView):
template_name ="digitalglarus/terms.html"
def EditCreditCard(request):
cus = StripeCustomer.get_or_create(email=request.user.email)
s= str(cus)
s= s.split(" ")
#t=stripe.Customer.retrieve(s[0]).sources.all(object="card")
#tt=t['data']
#print (tt)
#for i in tt:
# print (i.id)
# print (i.last4)
# print ("aja estoy aqui",i.id)
# customer = stripe.Customer.retrieve(s[0])
# customer.sources.retrieve(i.id).delete()
# crear tarjeta de credito
customer = stripe.Customer.retrieve(s[0])
#print ("voy por aqui")
custom_card= customer.default_source
t=stripe.Customer.retrieve(s[0]).sources.all(object="card")
tt=t['data']
#print (tt)
cc = dict()
for i in tt:
#print (i.id)
#print (i.last4)
if i.id== custom_card:
#print ("ESTA ES LA TARJETA ACTUAL")
cc['last4']= i.last4
cc['cc_brand'] = i.brand
cc['exp_month']=i.exp_month
cc['exp_year']= i.exp_year
#customer.sources.create(source=resp)
#t=stripe.Customer.retrieve(s[0]).sources.all(object="card")
#tt=t['data']
#x= resp['number']
#for i in tt:
# print (i.id)
# print (i.last4)
# print (x[-4:])
# if i.last4 == x[-4:]:
# print ("ESTOY AQUI")
# customer.default_source= i.id
#customer.save()
m=MembershipOrder.objects.filter(customer__user=request.user)
customer = StripeCustomer.get_or_create(email=request.user.email)
last_booking_order = BookingOrder.objects.filter(customer__user=request.user).last()
last_membership_order = MembershipOrder.objects.filter(customer__user=request.user).last()
credit_card_data = last_booking_order.get_booking_cc_data() if last_booking_order \
and last_booking_order.get_booking_cc_data() \
else last_membership_order.get_membership_order_cc_data()
current_billing_address = request.user.billing_addresses.first()
return render_to_response('digitalglarus/edit_credit_card.html',{'last4':cc['last4'],'brand_type':cc['cc_brand'],'expMonth': cc['exp_month'], 'expYear': cc['exp_year']})
class TermsAndConditions2(TemplateView):
template_name ="digitalglarus/credit_card_edit_confirmation.html"
class IndexView(TemplateView):
@ -228,9 +320,34 @@ class BookingPaymentView(LoginRequiredMixin, MembershipRequiredMixin, FormView):
user = self.request.user
last_booking_order = BookingOrder.objects.filter(customer__user=user).last()
last_membership_order = MembershipOrder.objects.filter(customer__user=user).last()
credit_card_data = last_booking_order.get_booking_cc_data() if last_booking_order \
and last_booking_order.get_booking_cc_data() \
else last_membership_order.get_membership_order_cc_data()
#credit_card_data = last_booking_order.get_booking_cc_data() if last_booking_order \
# and last_booking_order.get_booking_cc_data() \
# else last_membership_order.get_membership_order_cc_data()
#print ("LA TARJETA NATACHA QUE QUEREMOS VER SI FUNCIONA ES ESTA",credit_card_data)
#credit_card_data =
#### ESTOY POR AQUI CAMBIANDO ESTO UN POCO PARA VER SI FUNCIONA
##########################################################################################
cus = StripeCustomer.get_or_create(email=user )
s= str(cus)
s= s.split(" ")
customer = stripe.Customer.retrieve(s[0])
#print ("voy por aqui")
custom_card= customer.default_source
t=stripe.Customer.retrieve(s[0]).sources.all(object="card")
tt=t['data']
cc = dict()
for i in tt:
#print (i.id)
#print (i.last4)
if i.id== custom_card:
credit_card_data= i
#print ("ESTA ES LA TARJETA ACTUAL")
cc['last4']= i.last4
cc['cc_brand'] = i.brand
##########################################################################
booking_data.update({
'credit_card_data': credit_card_data if credit_card_data else None,