carousel working fine, and new activity of edit exp date of credit card is on testing

This commit is contained in:
unknown 2017-01-04 23:20:54 -04:00
parent 86777a4699
commit 2b2b40a9ef
11 changed files with 1572 additions and 46 deletions

View file

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

View file

@ -72,7 +72,7 @@
</div> </div>
{% if credit_card_data.last4 %} {% if credit_card_data.last4 %}
<form role="form" id="billing-form" method="post" action="{% url 'digitalglarus:booking_payment' %}" novalidate> <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="billing-head">Credit Card<a class="btn btn-primary btn-grey btn-edit" href="{% url 'digitalglarus:TermsAndConditions' %}">New</a><a class="btn btn-primary btn-grey btn-edit" href="{% url 'digitalglarus:edit_credit_card' %}">Edit</a></h2>
<h2 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h2> <h2 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h2>
<h2 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h2> <h2 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h2>
<input type="hidden" name="credit_card_needed" value="false"/> <input type="hidden" name="credit_card_needed" value="false"/>
@ -220,7 +220,7 @@
<h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2> <h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2>
<hr class="primary"> <hr class="primary">
<div class="price-exp-box"> <div class="price-exp-box">
<p class="text-left"> <p class="text-center">
<p class="term-head">1. Membership</p> <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.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> 1.2. Each additional day costs 15CHF for members.<br>
@ -246,7 +246,7 @@
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. 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> <br><br>
</p> </p>
<div class="text-center"> <div class="row col-xs-12 col-sm-7 col-lg-6 text-center">
<a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a> <a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
</div> </div>
<div class="row col-md-2 text-center wow fadeInDown"> <div class="row col-md-2 text-center wow fadeInDown">

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

@ -3,54 +3,26 @@
{% block content %} {% block content %}
<style type="text/css"> <style type="text/css">
@media screen and (min-width: 768px) {
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;
}
cancel-subscription-modal .modal-body { cancel-subscription-modal .modal-body {
max-height: 800px; max-height: 10000px;
} }
}
@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 { .price2 {
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
}
} }
</style> </style>
<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">
<section id="price"> <section id="price">
<div class="signup-container"> <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-3 col-lg-4 text-center wow fadeInDown"> </div>
@ -134,12 +106,12 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="row col-xs-18 col-sm-12 col-lg-20 modal-content">
<div class="modal-body"> <div class="modal-body">
<section id="price2"> <section id="price2">
<div class="container"> <div class="row col-xs-12 col-sm-7 col-lg-6 container">
<!--<div class="row col-md-2 text-center wow fadeInDown"></div> --> <!--<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"> <div class="row col-xs-12 col-sm-7 col-lg-6 text-center wow fadeInDown">
@ -151,7 +123,7 @@
<h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2> <h2 class="price">Valid from 31 October 2016, v1.0 dated 31 October 2016</h2>
<hr class="primary"> <hr class="primary">
<div class="price-exp-box"> <div class="price-exp-box">
<p class="text-left"> <p class="text-center">
<p class="term-head">1. Membership</p> <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.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> 1.2. Each additional day costs 15CHF for members.<br>
@ -178,7 +150,7 @@
<br><br> <br><br>
</p> </p>
<div class="text-center"> <div class="row col-xs-12 col-sm-7 col-lg-6 text-center">
<a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a> <a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
</div> </div>
<div class="row col-md-2 text-center wow fadeInDown"> <div class="row col-md-2 text-center wow fadeInDown">
@ -194,6 +166,11 @@
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->

View file

@ -118,7 +118,7 @@
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-6 col-xs-offset-1 col-md-offset-3"> <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> <a class="btn btn-primary btn-grey" href="{% url 'digitalglarus:booking_payment' %}">Cancel</a>

View file

@ -6,13 +6,14 @@ from .views import ContactView, IndexView, AboutView, HistoryView, LoginView, Si
PasswordResetView, PasswordResetConfirmView, MembershipPaymentView, MembershipActivatedView,\ PasswordResetView, PasswordResetConfirmView, MembershipPaymentView, MembershipActivatedView,\
MembershipPricingView, BookingSelectDatesView, BookingPaymentView, OrdersBookingDetailView,\ MembershipPricingView, BookingSelectDatesView, BookingPaymentView, OrdersBookingDetailView,\
BookingOrdersListView, MembershipOrdersListView, OrdersMembershipDetailView, \ BookingOrdersListView, MembershipOrdersListView, OrdersMembershipDetailView, \
MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView, \ MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView,EditCreditCard, \
MembershipReactivateView,TermsAndConditions,ValidateUser,SupportusView,Probar,TermsAndConditions2,TermsAndConditions3,BookingPaymentView2 MembershipReactivateView,TermsAndConditions,ValidateUser,SupportusView,Probar,TermsAndConditions2,TermsAndConditions3,BookingPaymentView2
# from membership.views import LoginRegistrationView # from membership.views import LoginRegistrationView
urlpatterns = [ urlpatterns = [
url(_(r'booking/payment/edit/?$'),EditCreditCard,name= 'edit_credit_card'),
url(_(r'booking/payment/view/?$'), BookingPaymentView2, name='booking_payment_view'), url(_(r'booking/payment/view/?$'), BookingPaymentView2, name='booking_payment_view'),
url(_(r'probar3/?$'),TermsAndConditions3, name='probar3'), url(_(r'probar3/?$'),TermsAndConditions3, name='probar3'),
url(_(r'probar2/?$'),TermsAndConditions2.as_view(), name='credit_card_edit'), url(_(r'probar2/?$'),TermsAndConditions2.as_view(), name='credit_card_edit'),

View file

@ -174,8 +174,64 @@ def TermsAndConditions(request):
print ("JNSKDJNASJDNKSJANDKJNSAKJDNKJND") print ("JNSKDJNASJDNKSJANDKJNSAKJDNKJND")
''' '''
def TermsAndConditions3(request): def TermsAndConditions3(request):
print ("hola hola hola hola hola")
return render_to_response('digitalglarus/new_credit_card.html',{'last4':credit_card_data['last4'],'brand_type':credit_card_data['cc_brand']}) return render_to_response('digitalglarus/new_credit_card.html',{'last4':credit_card_data['last4'],'brand_type':credit_card_data['cc_brand']})
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): class TermsAndConditions2(TemplateView):
template_name ="digitalglarus/credit_card_edit_confirmation.html" template_name ="digitalglarus/credit_card_edit_confirmation.html"