Merge pull request #154 from ungleich/feature/new_digitalglarus

Feature/new digitalglarus

digitalglarus/admin.py

@@ -1,15 +1,29 @@
 from django.contrib import admin
 from .models import Supporter, DGGallery, DGPicture, Booking, BookingPrice,\
-    MembershipOrder, Membership, MembershipType, BookingOrder
+    MembershipOrder, Membership, MembershipType, BookingOrder, BookingCancellation
 
+from django.core.urlresolvers import reverse
 from utils.models import ContactMessage
-#
+from django.utils.html import format_html
+
+
 class DGPictureInline(admin.StackedInline):
     model = DGPicture
 
+
 class DGGalleryAdmin(admin.ModelAdmin):
     inlines = [DGPictureInline]
 
+
+class BookingCancellationAdmin(admin.ModelAdmin):
+    list_display = ('id', 'get_order', 'created_at', 'required_refund', 'refund')
+
+    def get_order(self, obj):
+        order = obj.order
+        order_url = reverse("admin:digitalglarus_bookingorder_change", args=[order.id])
+        return format_html("<a href='{url}'>{order_id}</a>", url=order_url, order_id=order.id)
+
+
 admin.site.register(DGGallery, DGGalleryAdmin)
 admin.site.register(ContactMessage)
 admin.site.register(Booking)
@@ -18,3 +32,4 @@ admin.site.register(MembershipOrder)
 admin.site.register(Membership)
 admin.site.register(MembershipType)
 admin.site.register(BookingOrder)
+admin.site.register(BookingCancellation, BookingCancellationAdmin)

digitalglarus/forms.py

@@ -8,7 +8,7 @@ from utils.models import BillingAddress
 from utils.forms import LoginFormMixin, SignupFormMixin, BillingAddressForm
 
 from .models import MembershipType, MembershipOrder
-from .models import Booking
+from .models import Booking, BookingOrder
 
 
 class LoginForm(LoginFormMixin):
@@ -74,6 +74,21 @@ class BookingBillingForm(BillingAddressForm):
         }
 
 
+class CancelBookingForm(forms.ModelForm):
+    status = forms.CharField(widget=forms.HiddenInput(), required=False)
+
+    class Meta:
+        model = BookingOrder
+        fields = ['status']
+
+    # def clean(self):
+    #     booking = self.instance.booking
+    #     days_to_start = (booking.start_date - datetime.today().date()).days
+    #     if days_to_start < 7:
+    #         raise forms.ValidationError("You can't cancel your booking")
+    #     return self.cleaned_data
+
+
 class BookingDateForm(forms.Form):
     start_date = forms.DateField(required=False,
                                  widget=forms.TextInput(attrs={'id': 'booking-date-1',

digitalglarus/migrations/0023_bookingorder_status.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2016-11-25 03:04
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('digitalglarus', '0022_auto_20161023_0218'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookingorder',
+            name='status',
+            field=models.PositiveIntegerField(choices=[(1, 'Approved'), (2, 'Cancelled')], default=1),
+        ),
+    ]

digitalglarus/migrations/0024_bookingcancellation.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2016-12-02 02:22
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('digitalglarus', '0023_bookingorder_status'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BookingCancellation',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('created_at', models.DateTimeField(auto_now=True)),
+                ('required_refund', models.BooleanField(default=True)),
+                ('refund', models.BooleanField(default=False)),
+                ('order', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='digitalglarus.BookingOrder')),
+            ],
+        ),
+    ]

digitalglarus/mixins.py

@@ -1,5 +1,11 @@
+from django.core.urlresolvers import reverse_lazy
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.views.generic import UpdateView
 from django.db import models
 from django.http import HttpResponseRedirect
+from django.contrib import messages
+
+
 from membership.models import StripeCustomer
 from utils.models import BillingAddress
 
@@ -50,3 +56,27 @@ class Ordereable(models.Model):
         instance.cc_brand = stripe_charge.source.brand
         instance.save()
         return instance
+
+
+class ChangeMembershipStatusMixin(LoginRequiredMixin, UpdateView):
+    success_message = None
+    success_url = reverse_lazy('digitalglarus:membership_orders_list')
+    login_url = reverse_lazy('digitalglarus:login')
+    fields = '__all__'
+
+    def get_object(self):
+        from .models import MembershipOrder
+        membership_order = MembershipOrder.objects.\
+            filter(customer__user=self.request.user).last()
+        if not membership_order:
+            raise AttributeError("Membership does not exists")
+        membership = membership_order.membership
+        return membership
+
+    def post(self, *args, **kwargs):
+        membership = self.get_object()
+        membership.activate()
+
+        messages.add_message(self.request, messages.SUCCESS, self.success_message)
+
+        return HttpResponseRedirect(self.success_url)

digitalglarus/models.py

@@ -65,6 +65,19 @@ class Membership(models.Model):
     start_date = models.DateField()
     end_date = models.DateField()
 
+    @classmethod
+    def get_current_membership(cls, user):
+
+        has_order_current_month = Q(membershiporder__customer__user=user,
+                                    membershiporder__created_at__month=datetime.today().month)
+        # import pdb;pdb.set_trace()
+        return cls.objects.\
+            filter(has_order_current_month).last()
+
+    # def get_current_active_membership(cls, user):
+    #     membership = cls.get_current_membership(user)
+    #     return membership if membership and membership.active else None
+
     @classmethod
     def get_by_user(cls, user):
         return cls.objects.\
@@ -75,15 +88,23 @@ class Membership(models.Model):
         instance = cls.objects.create(**data)
         return instance
 
+    @classmethod
+    def activate_or_crete(cls, data, user):
+        membership = cls.get_by_user(user)
+        membership_id = membership.id if membership else None
+        obj, created = cls.objects.update_or_create(id=membership_id, defaults=data)
+        return obj
+
     @classmethod
     def is_digitalglarus_active_member(cls, user):
-        past_month = (datetime.today() - relativedelta(months=1)).month
+        # past_month = (datetime.today() - relativedelta(months=1)).month
         has_order_current_month = Q(membershiporder__customer__user=user,
                                     membershiporder__created_at__month=datetime.today().month)
-        has_order_past_month = Q(membershiporder__customer__user=user,
-                                 membershiporder__created_at__month=past_month)
+        # has_order_past_month = Q(membershiporder__customer__user=user,
+                                 # membershiporder__created_at__month=past_month)
         active_membership = Q(active=True)
-        return cls.objects.filter(has_order_past_month | has_order_current_month).\
+        # return cls.objects.filter(has_order_past_month | has_order_current_month).\
+        return cls.objects.filter(has_order_current_month).\
             filter(active_membership).exists()
 
     def update_dates(self, start_date, end_date):
@@ -95,6 +116,10 @@ class Membership(models.Model):
         self.active = False
         self.save()
 
+    def activate(self):
+        self.active = True
+        self.save()
+
 
 class MembershipOrder(Ordereable, models.Model):
     membership = models.ForeignKey(Membership)
@@ -213,9 +238,18 @@ class Booking(models.Model):
 
 
 class BookingOrder(Ordereable, models.Model):
+
+    APPROVED, CANCELLED = range(1, 3)
+
+    STATUS_CHOICES = (
+        (APPROVED, 'Approved'),
+        (CANCELLED, 'Cancelled')
+    )
+
     booking = models.OneToOneField(Booking)
     original_price = models.FloatField()
     special_month_price = models.FloatField()
+    status = models.PositiveIntegerField(choices=STATUS_CHOICES, default=1)
 
     @classmethod
     def user_has_not_bookings(cls, user):
@@ -230,6 +264,30 @@ class BookingOrder(Ordereable, models.Model):
     def booking_days(self):
         return (self.booking.end_date - self.booking.start_date).days + 1
 
+    def refund_required(self):
+        days_to_start = (self.booking.start_date - datetime.today().date()).days
+        return True if days_to_start < 7 else False
+
+    def cancel(self):
+        self.status = self.CANCELLED
+        self.save()
+
+
+class BookingCancellation(models.Model):
+
+    order = models.ForeignKey(BookingOrder)
+    created_at = models.DateTimeField(auto_now=True)
+    required_refund = models.BooleanField(default=True)
+    refund = models.BooleanField(default=False)
+
+    def __str__(self):
+        return "Order: {} - Required Refund: {}".format(self.order.id, self.refund)
+
+    @classmethod
+    def create(cls, booking_order):
+        required_refund = booking_order.refund_required()
+        cls.objects.create(order=booking_order, required_refund=required_refund)
+
 
 class Supporter(models.Model):
     name = models.CharField(max_length=200)

digitalglarus/static/digitalglarus/css/agency.css

@@ -67,6 +67,12 @@ h6 {
 	font-size: 18px;
 }
 
+@media only screen and (max-width: 400px){ 
+  h1, h2 {
+    font-size: 20px;
+  }
+}
+
 .portfolio-caption-white {
 	text-transform: uppercase;
 	font-family:"Montserrat","Helvetica Neue",Helvetica, Arial,sans-serif;
@@ -118,7 +124,7 @@ h6 {
     border-color: #88c7d7;
     text-transform: uppercase;
     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-weight: 700;
+    font-weight: 400;
     color: #fff;
     background-color: #88c7d7;
 	letter-spacing: 1px;
@@ -131,7 +137,7 @@ h6 {
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
     text-transform: uppercase;
-	font-weight: 700;
+	font-weight: 400;
 	border-color: #ba1924;
     color: #fff;
     background-color: #ba1924;
@@ -241,8 +247,6 @@ fieldset[disabled] .btn-xl.active {
 
 .navbar-default .navbar-collapse {
     border-color: rgba(255,255,255,.02);
-    padding-right: 100px;
-    text-align: right;
 }
 
 .navbar-default .navbar-toggle {
@@ -261,7 +265,7 @@ fieldset[disabled] .btn-xl.active {
 
 .navbar-default .nav li a {
     text-transform: uppercase;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-weight: 400;
     letter-spacing: 1px;
     color: #fff;
@@ -1076,7 +1080,7 @@ h6 intro-smallcap {
 
 .carousel-text {
 	text-transform : none;
-	font-family:"Raleway" , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+	font-famil:"Raleway" , Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size : 20px;
 	font-weight : 100;
 	lign-heignt: 2px;
@@ -1172,11 +1176,11 @@ footer {
 }
 
 .map-caption{
-    text-transform:uppercase;
-    font-size: 13px;
+	text-transform: none;
 	font-family:"Montserrat","Helvetica Neue",Helvetica, Arial,sans-serif;
 	font-weight: 400;
 	color: #ffffff;
+	font-size: 14px;
 	letter-spacing: 1px;
 	text-align:center;
 }
@@ -1201,4 +1205,33 @@ hr {
 .navbar-right {
     float: right!important;
     margin-right: -100px;
-}
+}
+
+.help-box {
+    padding: 2em;
+    padding-top: 2em;
+    padding-bottom: 0.1em;
+    margin-bottom: 0px;
+}
+
+.help-box-group {
+	padding-top: 2em;
+	padding-bottom: 2.5em;
+}
+
+.submit-box {
+    padding-top: 1.5em;
+    padding-bottom: 2em;
+}
+
+.help-wrap {
+	padding-bottom: 2em;
+	padding-left: 4em;
+	padding-right: 4em;
+	padding-top: 2em;
+}
+
+.donate { 
+    font-weight: 600;
+	font-size: 24px;
+}

digitalglarus/static/digitalglarus/css/history.css

@@ -1,11 +1,11 @@
 @charset "UTF-8";
 /* CSS Document */
 
-header.history {
+header {
     text-align: center;
     color: #fff;
     background-attachment: scroll;
-    background-image: url(../img/header_bg_4.png);
+    background-image: url(../img/header_bg_2.png);
     background-position: center center;
     background-repeat: none;
     -webkit-background-size: cover;
@@ -14,64 +14,294 @@ header.history {
     -o-background-size: cover;
 }
 
-.supporter {
-    font-size:18px;
-    font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
-    text-align:center;
-    line-height: 2.5;
+header.history {
+    background-image: url(../img/header_bg_4.png);
+}
+
+
+.supportus {
+	background-image: url(../img/bal_header.png);
+    text-align: center;
     color: #fff;
+    background-attachment: scroll;
+    background-position: center center;
+    background-repeat: none;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+	display: block;
+	overflow-x: hidden;
+}
+
+.supportus .intro-text {
+    padding-top: 100px;
+    padding-bottom: 50px;
+}
+
+.supportus .intro-text .intro-lead-in {
+    margin-bottom: 25px;
+    font-family: 'Raleway', "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 22px;
+    font-style: italic;
+    line-height: 22px;
+}
+
+.supportus .intro-text .intro-heading {
+    margin-bottom: 25px;
+    text-transform: uppercase;
+    font-family: 'Raleway', Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 50px;
+    font-weight: 700;
+    line-height: 50px;
+}
+
+.supportus .intro-headline-big {
+    font-family: 'Raleway' , "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
+    font-size: 2.6em;
+    font-style: normal;
+    font-weight: 200;
+    text-transform: none;
+    text-transform: uppercase;
+    color: #fff;
+}
+@media(min-width : 320px) {
+    .supportus .intro-text {
+	padding-top: 200px;
+	padding-bottom: 200px;
+    }
+
+    .supportus .intro-text .intro-lead-in {
+	margin-bottom: 25px;
+	font-family: "Open Sans Extrabold", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 40px;
+	line-height: 40px;
+	font-style: normal;
+    }
+
+   .supportus .intro-text .intro-heading {
+	margin-bottom: 50px;
+	text-transform: uppercase;
+	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+	font-size: 75px;
+	font-weight: 700;
+	line-height: 75px;
+}
+.supportus .intro-headline-big {
+    font-family: 'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", 
+	font-size: 2.6em;
+    font-style: normal;
+    font-weight: 800;
+    text-transform: uppercase;
+    color: #ffffff;
+	line-height: 1;
+	opacity: 0.85;
+	
+}
+
+.supportus-box {
+    border-style: solid;
+    border-width: 1px;
+	border-color: #ddd;
+	margin-left: 15px;
+    margin-right: 15px;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+/*.supportus .portfolio-item {
+    right: 0;
+    margin: 0;
+	text-align: center;
+	display: block;
+    max-width: 650px;   
+	border: 1px;
+	border-color: #ddd;
+}
+
+.supportus .portfolio-item:hover {
+    opacity: 1;
+}
+
+.supportus .portfolio-item .portfolio-link {
+    display: block;
+    position: relative;
+    margin: 0 auto;
+    max-width: 400px;
+}
+
+.supportus .portfolio-item .portfolio-link .portfolio-hover {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    background: rgba(254,209,54,.9);
+    -webkit-transition: all ease .5s;
+    -moz-transition: all ease .5s;
+    transition: all ease .5s;
+}
+.supportus .portfolio-item .portfolio-link .portfolio-hover:hover {
+    opacity: 1;
+}
+
+.supportus .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 20px;
+    margin-top: -12px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+}
+
+.supportus .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
+    margin-top: -12px;
+}
+.supportus .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
+.supportus .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
+    margin: 0;
+}
+
+.supportus .portfolio-item .portfolio-caption {
+    padding: 25px;
+    max-width: 400px;
+    text-align: center;
+    background-color: #fff;
+}
+
+.supportus .portfolio-item .portfolio-caption h4 {
+	margin: 0;
+	font-size: bold;
+	text-transform: none;
+	color: #494949;
+}
+
+.supportus .portfolio-item .portfolio-caption p {
+	margin: 0;
+	font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 14px;
+}
+
+.supportus * {
+    z-index: 2;
+}
+
+@media(min-width:767px) {
+    .supportus .portfolio-item {
+	margin: 0
+    }
+}
+*/
+
+.supporter-lead {
+    padding: 15px 5px 15px;
+	color: #000;
+	font-size:18px;
+	font-weight: 200;
+	font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
+	text-align:center;
+	line-height: 1.6;
+}
+
+.white-background {
+  background-color: #fff;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  color: #777;
+}
+
+.whatwedowith {
+	    margin-top: 50px;
+		margin-bottom: 0px;
+		padding-top: 3em;
+		padding-bottom: 3em;
+		background-image: url(../img/bricks_header_inverse.png);
+		background-size: cover;
+		background-repeat:no-repeat;
+        -webkit-background-size:cover;
+        -moz-background-size:cover;
+        -o-background-size:cover;
+		background-position:center;
+}
+
+.www {
+	margin-top: 3em;
+	margin-bottom: 15px;
+	font-size: 36px;
+	color: #494949;
+}
+
+.whatwe-wrap {
+     padding-bottom: 2em;
+	 padding-top: 0;
+	 margin-top: 2em;
+	 margin-bottom: 0;
+	 font-size: 36px;
+	 color: #494949;
+}
+
+
+.supporter {
+	font-size:18px;
+	font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
+	text-align:center;
+	line-height: 2.5;
+	color: #fff;
 }
 
 .supporter-intro {
     padding: 15px 5px 15px;
-    color: #fff;
+	color: #fff;
 }
 
 .supporter-black {
     padding: 15px 5px 15px;
-    color: #000;
-    font-size:18px;
-    font-weight: 200;
-    font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
-    text-align:center;
-    line-height: 1.8;
+	color: #000000;
+	font-size:18px;
+	font-weight: 200;
+	font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
+	text-align:center;
+	line-height: 1.8;
 }
 
-@media (max-width: 979px) and (min-width: 768px)
+@media (max-width: 979px)
 .supporter-black{
-    width: 100%;    
+    width: 100%;	
 }
 
 .supporter-headline {
-    color: #fff;
-    font-size: 36px;
-    text-transform: uppercase;
+	color: #fff;
+	font-size: 36px;
+	text-transform: uppercase;
     font-family: 'Raleway', Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-weight: 400;
-    padding-top: 50px;
-    margin-top: 0;
+	padding-top: 50px;
+	margin-top: 0;
     margin-bottom: 15px;
 }
 .supporter-bg {
-    background-image:url(../img/bg-supporter.png);
-    background-position: center center;
-    background-repeat: none;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    background-size: cover;
-    -o-background-size: cover;
+	background-image:url(../img/bg-supporter.png);
+	background-position: center center;
+	background-repeat: none;
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	background-size: cover;
+	-o-background-size: cover;
 }
-    
+	
 .glyphicon-star {
-    font-size: 44px;
+	font-size: 44px;
     display: block;
     text-align: center;
     margin: 30px auto 30px;
-    color: #88c7d7;
+	color: #88c7d7;
 }
 
 .glyphicon-heart {
-    font-size: 42px;
+	font-size: 42px;
     display: block;
     text-align: center;
     margin: 40px auto 20px;
@@ -79,7 +309,7 @@ header.history {
 }
 
 .glyphicon-home {
-    font-size: 42px;
+	font-size: 42px;
     display: block;
     text-align: center;
     margin: 40px auto 40px;
@@ -88,7 +318,7 @@ header.history {
 
 
 .glyphicon-road {
-    font-size: 42px;
+	font-size: 42px;
     display: block;
     text-align: center;
     margin: 40px auto 20px;
@@ -96,7 +326,7 @@ header.history {
 }
 
 /*.glyphicon-inverse {
-    display: block;
+	display: block;
     width: 40px;
     height: 40px;
     border-radius: 100%;
@@ -109,7 +339,7 @@ header.history {
     -moz-transition: all .3s;
     transition: all .3s;
 }*/
-    
+	
 #hr.grey {
     border-color: #ddd;
     border-width: 1px;
@@ -117,35 +347,24 @@ header.history {
 }
 
 .img-100days{
-    width:220px;
-    height: 330px;
-    display: block;
+	width:220px;
+	height: 330px;
+	display: block;
     position: absolute;
     left: 0;
     top: 0;
     text-decoration: none;
 }
 
-#price {
-    background-color: #ddd;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    background-size: cover;
-    -o-background-size: cover;
-}
-.price-box{
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 30px; 
-    padding-bottom: 30px;
-    margin-bottom: 30px;
-    color: inherit;
-    background-color: #fff;
-    margin-top: 30px;
-    margin-left: 10px;
-    margin-right: 10px;
+section#waystohelp {
+	background-color: #fff;
+	display: block;
+	margin-top: 50px;
 }
 
-.graph{
-    padding-top: 30px;
+.whatwedo{
+    margin-top: 0;
+    margin-bottom: 15px;
+    font-size: 36px;
+    color: #f5f5f5;
 }

digitalglarus/static/digitalglarus/css/history1.css

@@ -0,0 +1,151 @@
+@charset "UTF-8";
+/* CSS Document */
+
+header.history {
+    text-align: center;
+    color: #fff;
+    background-attachment: scroll;
+    background-image: url(../img/header_bg_4.png);
+    background-position: center center;
+    background-repeat: none;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+}
+
+.supporter {
+    font-size:18px;
+    font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
+    text-align:center;
+    line-height: 2.5;
+    color: #fff;
+}
+
+.supporter-intro {
+    padding: 15px 5px 15px;
+    color: #fff;
+}
+
+.supporter-black {
+    padding: 15px 5px 15px;
+    color: #000;
+    font-size:18px;
+    font-weight: 200;
+    font-family:raleway, monteserrat, open sans, helvitica neue, sans-serif;
+    text-align:center;
+    line-height: 1.8;
+}
+
+@media (max-width: 979px) and (min-width: 768px)
+.supporter-black{
+    width: 100%;    
+}
+
+.supporter-headline {
+    color: #fff;
+    font-size: 36px;
+    text-transform: uppercase;
+    font-family: 'Raleway', Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 400;
+    padding-top: 50px;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.supporter-bg {
+    background-image:url(../img/bg-supporter.png);
+    background-position: center center;
+    background-repeat: none;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+}
+    
+.glyphicon-star {
+    font-size: 44px;
+    display: block;
+    text-align: center;
+    margin: 30px auto 30px;
+    color: #88c7d7;
+}
+
+.glyphicon-heart {
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    margin: 40px auto 20px;
+    color: #88c7d7;
+}
+
+.glyphicon-home {
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    margin: 40px auto 40px;
+    color: #88c7d7;
+}
+
+
+.glyphicon-road {
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    margin: 40px auto 20px;
+    color: #88c7d7;
+}
+
+/*.glyphicon-inverse {
+    display: block;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    font-size: 20px;
+    line-height: 40px;
+    outline: 0;
+    color: #fff;
+    background-color: #88c7d7;
+    -webkit-transition: all .3s;
+    -moz-transition: all .3s;
+    transition: all .3s;
+}*/
+    
+#hr.grey {
+    border-color: #ddd;
+    border-width: 1px;
+    max-width: 100px;
+}
+
+.img-100days{
+    width:220px;
+    height: 330px;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    text-decoration: none;
+}
+
+#price {
+    background-color: #ddd;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+}
+.price-box{
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 30px; 
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    color: inherit;
+    background-color: #fff;
+    margin-top: 30px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.graph{
+    padding-top: 30px;
+}

digitalglarus/static/digitalglarus/css/price.css

@@ -196,14 +196,29 @@
     color: #88c7d7;
 }
 
+.glyphicon-calendar{
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    margin: 40px auto 20px;
+    color: #88c7d7;
+}
+
 .glyphicon-ok {
-	font-size: 28px;
+	font-size: 42px;
     display: block;
     text-align: center;
     margin-bottom: 20px;
     color: #88c7d7;
 	margin-top: 0px;
 }
+
+.glyphicon-flag {
+	font-size: 44px;
+    display: block;
+    text-align: center;
+    margin: 30px auto 30px;
+	color: #88c7d7;
 }
 
 
@@ -364,7 +379,7 @@
 }
 
 .form-control {
-    color: #000;
+    color: #999;
 	border-radius: 0px;
 	box-shadow: none;
 }
@@ -619,4 +634,11 @@ th {
     color: inherit;
     background-color: #fff;
 	text-align: left;
+	font-size: 15px;
+}
+
+.term-head {
+	font-size: 18px;
+	font-weight: 700;
+	margin: 0 0 0px;
 }

digitalglarus/static/digitalglarus/js/payment.js

@@ -24,6 +24,10 @@ $( document ).ready(function() {
          } 
     });
 
+    //Acept term and conditions button
+
+
+
     var submit_form_btn = $('#payment_button');
     submit_form_btn.on('click', submit_payment);
 
@@ -41,6 +45,12 @@ $( document ).ready(function() {
         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>');
 
@@ -119,7 +129,7 @@ $( document ).ready(function() {
         } else {
             return false;
         }
-    }
+    };
 
     $form.find('[type=submit]').prop('disabled', true);
     var readyInterval = setInterval(function() {
@@ -129,5 +139,7 @@ $( document ).ready(function() {
         }
     }, 250);
 
+
+
 });
 

digitalglarus/static/digitalglarus/js/utils.js

@@ -19,5 +19,4 @@ $( document ).ready(function() {
   });
 
 
-
 });

digitalglarus/templates/digitalglarus/booking.html

@@ -11,8 +11,12 @@
         <div class="signup-box">
             <span class="glyphicon glyphicon-plus"></span>
             <h2 class="section-heading">Booking</h2>
-            <h2 class="signup-lead">Start coworking at Digital Glarus! <br> Membership costs only 
-            <strong>35CHF</strong> per month.<br> 2 free working days included!</h2>
+            <h2 class="signup-lead">
+
+            When do you want to cowork? <br>
+            All members have 2 free days per month! <br>
+            Additional days cost <strong>15CHF</strong>. <br>
+            Work more, get more days free!
             <hr class="primary">
             <div class="signup-form form-group row">
               <div class="col-md-12">

digitalglarus/templates/digitalglarus/booking_orders_detail.html

@@ -8,6 +8,16 @@
     text-align: center !important;
   }
   
+#outer
+{
+    width:100%;
+    text-align: center;
+}
+.inner
+{
+    display: inline-block;
+}
+   
   </style>
 
 <script type="text/javascript">
@@ -20,10 +30,22 @@
           <div class="payment-box">
             <h2 class="section-heading payment-head">Your Booking Detail</h2>
             <hr class="greyline-long">
+            {% bootstrap_form_errors form type='non_fields'%}
+            {% if messages %}
+                <ul class="list-unstyled">
+                {% for message in messages %}
+                    <li>{{ message }}</li>
+                {% endfor %}
+                </ul>
+            {% endif %}
+
             <h2 class="billing-head">Invoice<btn class="btn btn-primary btn-grey btn-edit  print hidden-print" data-print="price">Get PDF</btn></h2>                              
                                
             <h2 class="order-head">Order Number</h2>
             <h2 class="member-name">#{{order.id}}</h2>
+
+            <h2 class="order-head">Status</h2>
+            <h2 class="member-name">{{order.get_status_display}}</h2>
                                 
             <h2 class="order-head">Billed to :</h2>
             <h2 class="history-name">{{user.name}}<br>
@@ -51,15 +73,62 @@
             <hr class="greyline-long">
             <h2 class="col-xs-6 payment-total text-left"> Total</h2>
             <h2 class="order-result">{{final_price|floatformat}}CHF</h2>
-            <br>   
+            
+
+			
+            
+            {% if not order.get_status_display == 'Cancelled' %}
+            <form method="POST" action="">
+              {% csrf_token %} 
+              <p class="inner">
+                <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>
+              </p>
+			         
+              <div class="modal fade bs-example-modal-sm" id="cancel-booking-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 booking</h4>
+                    </div>
+                    <div class="modal-body">
+                      <p>Do you want to cancel your booking?</p>
+                      {% if booking_required %}
+                      <p>
+                        Your booking is within 7 days. You may cancel your booking but the fees will not be refunded. Your booking can be only cancelled freely until 7 days before the booked date.
+                      </p>
+                      {% endif %}
+                    </div>
+                    <div class="modal-footer text-center">
+                      <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>
+			{% else %}
+				<p class="inner">
+					<a class="btn btn-primary btn-blue"  href="{% url 'digitalglarus:booking_orders_list' %}">Go to my page</a>            
+				</p> 
+            {% endif %}
+
+
+
+
+
 
-            <p class="">
-              View my bookings <br/><a class="btn btn-primary btn-sm btn-blck "  href="{% url 'digitalglarus:booking_orders_list' %}">Go to my page</a>            
-            </p>         
           </div>
 
     </div>              
      
+
+
+
     <div class="col-xs-12 col-sm-4 col-lg-4 wow fadeInDown hidden-print"> 
         <div class="order-summary">
            <div class="header text-center">

digitalglarus/templates/digitalglarus/booking_payment.html

@@ -56,7 +56,7 @@
 
                      <hr class="greyline-long">
                      <br/>
-                     <h2 class="billing-head">Your Booking is TOTALLY FREE</h2>
+                     <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>
@@ -162,14 +162,14 @@
                   <div class="text-center">
                     <label class="custom-control custom-checkbox">
                     <br/>
-                    <input type="checkbox" class="custom-control-input">
+                    <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=#>Terms and Conditions</a>, <a href=#>Community Guidelines</a> and <a href=#>Privacy Policy</a></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>
                     <div class="button-box">
                         <div class="row">
                           <div class="col-xs-12">
-                              <button id="payment_button" class="btn btn-primary btn-md btn-blck " type="submit">Book</button>
+                              <button id="payment_button" class="btn btn-primary btn-md btn-blck submit-payment" type="submit">Book</button>
                           </div>
                         </div> 
                     </div>

digitalglarus/templates/digitalglarus/emails/booking_cancellation.html

@@ -0,0 +1,137 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your booking is cancelled.
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             Your booking order from following dates has been cancelled. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/>
+             You can book new dates by visiting our homepage,<br/> or simply clicking the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking' %}" style="border-radius: 2px; color: #ffffff; display: inline-block; font-family: 'Montserrat', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 13px; font-weight: 600; line-height: 37px; text-align: center; text-decoration: none !important; width: 120px; -webkit-text-size-adjust: none; mso-hide: all; background: #5699b9;">BOOK A DATE</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/booking_cancellation.txt

@@ -0,0 +1,137 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your booking is cancelled.
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             Your booking order from following dates has been cancelled. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/>
+             You can book new dates by visiting our homepage,<br/> or simply clicking the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking' %}" style="border-radius: 2px; color: #ffffff; display: inline-block; font-family: 'Montserrat', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 13px; font-weight: 600; line-height: 37px; text-align: center; text-decoration: none !important; width: 120px; -webkit-text-size-adjust: none; mso-hide: all; background: #5699b9;">BOOK A DATE</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/booking_cancellation_notification.html

@@ -0,0 +1,136 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              User {{user.name}}/{{user.email}} requested a booking cancellation
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             {{user.name}} requested a booking cancellation from following dates. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/> 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]-->
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/booking_cancellation_notification.txt

@@ -0,0 +1,136 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              User {{user.name}}/{{user.email}} requested a booking cancellation
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             {{user.name}} requested a booking cancellation from following dates. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/> 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]-->
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/booking_order_email.html

@@ -0,0 +1,136 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Thank you for your booking.
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your booking order from {{booking.start_date|date}} to {{booking.end_date|date}} has been placed. <br/> You can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking_orders_detail' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #5699b9;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Digitalglarus</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/booking_order_email.txt

@@ -0,0 +1,136 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Thank you for your booking.
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
+             Your booking order from {{booking.start_date|date}} to {{booking.end_date|date}} has been placed. <br/> You can view your invoice clicking on the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking_orders_detail' order.id %}" style="border-radius: 5px; color: #ffffff; display: inline-block; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: regular; line-height: 45px; text-align: center; text-decoration: none !important; width: 155px; -webkit-text-size-adjust: none; mso-hide: all; background: #ff6f6f;">View Invoice</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Digitalglarus</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+

digitalglarus/templates/digitalglarus/emails/membership_charge.html

@@ -65,7 +65,7 @@
 <td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
       <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
             <!--[if gte mso 9]>
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
               <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
@@ -74,7 +74,7 @@
               <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
                 <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
-                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static "hosting/img/logo_black.png" %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
                     </td>
                     <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
                     </td>
@@ -100,7 +100,7 @@
           </tr>
 <tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
-             Your monthly membership for period {{membership_start_date|date}} - {{membership_start_date|date}} has been charged. <br/> You can view your invoice clicking on the button below. 
+             Your monthly membership for period {{membership_start_date|date}} - {{membership_end_date|date}} has been charged. <br/> You can view your invoice clicking on the button below. 
             </td>
           </tr>
 <tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
@@ -124,7 +124,7 @@
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
         <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
-              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Digitalglarus</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 </td>
           </tr></table>
 </center>

digitalglarus/templates/digitalglarus/emails/membership_charge.txt

@@ -65,7 +65,7 @@
 <td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
       <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
             <!--[if gte mso 9]>
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
               <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
@@ -74,7 +74,7 @@
               <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
                 <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
-                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static "hosting/img/logo_black.png" %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                      <a href="{{base_url}}" style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
                     </td>
                     <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
                     </td>
@@ -100,7 +100,7 @@
           </tr>
 <tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td class="free-text" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 10px 60px 0px;" align="center">
-             Your monthly membership for period {{membership_start_date|date}} - {{membership_start_date|date}} has been charged. <br/> You can view your invoice clicking on the button below. 
+             Your monthly membership for period {{membership_start_date|date}} - {{membership_end_date|date}} has been charged. <br/> You can view your invoice clicking on the button below. 
             </td>
           </tr>
 <tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
@@ -124,7 +124,7 @@
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
         <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 <td style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 25px 0;" align="center">
-              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">ungleich</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+              <strong style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Digitalglarus</strong><br style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
 </td>
           </tr></table>
 </center>

digitalglarus/templates/digitalglarus/emails/membership_monthly_charge.html

@@ -65,7 +65,7 @@
 <td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
       <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
             <!--[if gte mso 9]>
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
               <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />

digitalglarus/templates/digitalglarus/emails/membership_monthly_charge.txt

@@ -65,7 +65,7 @@
 <td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
       <center style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
       <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
-<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px;" align="center">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
             <!--[if gte mso 9]>
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
               <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />

digitalglarus/templates/digitalglarus/history.html

@@ -102,7 +102,7 @@
         <br>
     {% endfor %}
        <br>
-       <a href="http://startbootstrap.com/template-overviews/creative/" class="btn btn-default btn-primary sr-button">Become a supporter</a>
+       <a href="{% url 'digitalglarus:supportus' %}" class="btn btn-default btn-primary sr-button">Become a supporter</a>
        <br>
        <br>
        <br>
@@ -118,7 +118,8 @@
        <div class="row" class="wow fadeInDown">
         <div class="col-lg-12 text-center wow fadeInDown">
           <div class=" map-wrap">
-          <iframe style="pointer-events:none;margin-top:20px;"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe></div>
+          <iframe style="pointer-events:none;margin-top:20px;"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2721.4267495037207!2d9.070190915609343!3d46.99259307914885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47852e9322cc1971%3A0xf1558647dfdfaa60!2sIn+der+Au+7%2C+8762+Glarus+S%C3%BCd!5e0!3m2!1sen!2sch!4v1470238006004" width="100%" height="450" frameborder="0" style="border:0"></iframe>
+          </div>
             <div class="col-md-4 map-title">
               Digital Glarus<br>
               <span class="map-caption">In der Au 7 Schwanden 8762 Switzerland

digitalglarus/templates/digitalglarus/index.html

@@ -34,6 +34,98 @@
                 </form> -->
             
      </div>
+
+<style type="text/css">
+
+  .caption-style-1{
+    list-style-type: none;
+    margin: 0px;
+    padding: 0px;
+    
+  }
+
+  .caption-style-1 li{
+    float: left;
+    padding: 0px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .caption-style-1 li:hover .caption{
+    opacity: 1;
+
+  }
+
+
+  .caption-style-1 img{
+    margin: 0px;
+    padding: 0px;
+    float: left;
+    z-index: 4;
+  }
+
+
+  .caption-style-1 .caption{
+    cursor: pointer;
+    opacity: 0;
+    -webkit-transition:all 0.45s ease-in-out;
+    -moz-transition:all 0.45s ease-in-out;
+    -o-transition:all 0.45s ease-in-out;
+    -ms-transition:all 0.45s ease-in-out;
+    transition:all 0.45s ease-in-out;
+
+  }
+  .caption-style-1 .blur{
+    background-color: rgba(0,0,0,0.65);
+    height: 800px;
+    width: 800px;
+    z-index: 10;
+    position: absolute;
+  }
+
+  .caption-style-1 .caption-text h1{
+    text-transform: uppercase;
+    font-size: 24px;
+  }
+  .caption-style-1 .caption-text{
+    z-index: 0;
+    color: #fff;
+    width: 400px;
+    height: 200px;
+    text-align: center;
+    top:30px;
+
+
+  }
+
+  /** content **/
+  .content{
+    margin-top: 100px;
+    margin-left: 100px;
+    width: 700px;
+  }
+
+  .content p{
+    color: #ecf0f1;
+    font-family: "Lato";
+    line-height: 28px;
+    font-size: 15px;
+    padding-top: 50px;
+  }
+
+  p.credit{
+    padding-top: 20px;
+    font-size: 12px;
+  }
+
+  p a{
+    color: #ecf0f1;
+  }
+
+  </style>
+
+
+
      </header>
     <!-- form section ends-->
     <!-- Services Section -->
@@ -145,9 +237,10 @@
         <!-- end:recommendationSlider -->
     </div></section>
 
+    
     <!-- Portfolio Grid Section -->
     <section id="portfolio" class="no-padding">
-      <div class="container-fluid">
+    <div class="container-fluid">
     <!--<div class="row">
       <div class="col-lg-12 text-center wow fadeInDown">
         <h2 class="section-heading">here you can</h2>
@@ -155,32 +248,97 @@
       </div>-->
     </div>
     <div class="row no-gutter popup-gallery">
+	
+	
       <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.5s">
-        <img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt=""> 
-        <div class="caption portfolio-caption-white">excursions</div>
-        </div><div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.8s">
-        <img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt="">
-        <div class="caption portfolio-caption-white">enjoy the great outdoors</div>
+        <ul class="caption-style-1">
+          <li>
+            <img src="{% static 'digitalglarus/img/portfolio/excursion.png' %}" class="img-responsive inline-block" alt=""> 
+              <div class="caption">
+                <div class="blur"></div>
+                 
+                   
+              </div>      
+          </li>
+        </ul>
+		<div class="caption portfolio-caption-white">excursions</div>
+		
       </div>
-      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.1s">
-        <img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt="">
-        <div class="caption portfolio-caption-white">cultural events</div>
+	  
+       <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="0.8s">
+          <ul class="caption-style-1">
+            <li>
+              <img src="{% static 'digitalglarus/img/portfolio/ski.png' %}" class="img-responsive inline-block" alt="">
+                <div class="caption">
+                  <div class="blur"></div>
+                     
+                </div>
+            </li>
+          </ul>
+		  <div class="caption portfolio-caption-white">enjoy the great outdoors</div>
       </div>
-      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.2s">
-        <img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
-        <div class="caption portfolio-caption-white">be inspired</div>
-      </div>
-      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.3s">
-        <img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
-        <div class="caption portfolio-caption-white">workshops</div>
-      </div>
-      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.4s">
-        <img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
-        <div class="caption portfolio-caption-white">recharge</div>
-      </div>
-   </div>
 
-    </section>
+
+      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.1s">
+        <ul class="caption-style-1">
+          <li>
+            <img src="{% static 'digitalglarus/img/portfolio/concert.png' %}" class="img-responsive inline-block" alt="">
+              <div class="caption">
+                <div class="blur"></div>
+                    
+              </div>
+          </li>           
+        </ul>  
+		<div class="caption portfolio-caption-white">cultural events</div>
+      </div>
+
+      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.2s">
+        <ul class="caption-style-1">
+          <li>
+            <img src="{% static 'digitalglarus/img/portfolio/inspire.png' %}" class="img-responsive inline-block" alt="">
+              <div class="caption">
+                <div class="blur"></div>
+                    
+              </div>
+          </li>       
+        </ul>  
+		<div class="caption portfolio-caption-white">be inspired</div>
+      </div>
+
+
+
+      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.3s">
+        <ul class="caption-style-1">
+          <li>
+            <img src="{% static 'digitalglarus/img/portfolio/workshop.png' %}" class="img-responsive inline-block" alt="">
+              <div class="caption">
+                <div class="blur"></div>
+              </div>
+           </li>      
+        </ul>
+		<div class="caption portfolio-caption-white">workshops</div>
+      </div>
+
+      <div class="col-lg-4 col-md-4 col-sm-6 portfolio-item wow fadeInDown text-center" data-wow-delay="1.4s">
+        <ul class="caption-style-1">
+          <li>
+            <img src="{% static 'digitalglarus/img/portfolio/recharge.png' %}" class="img-responsive inline-block" alt="">
+              <div class="caption">
+                <div class="blur"></div>
+               </div>         
+          </li>      
+        </ul>
+		 <div class="caption portfolio-caption-white">recharge</div>
+      </div>
+	  
+	  
+	 
+   </div>
+  </section>
+  
+  
+
+
     <!--aside-->
     <aside class="bg-dark">
         <div class="container text-center">
@@ -271,6 +429,10 @@
     </section>
 
 
+
+
+
+
 <!-- 
 <div class="row">
   <div class="box">

digitalglarus/templates/digitalglarus/login.html

@@ -2,7 +2,56 @@
 {% load staticfiles bootstrap3 i18n %}
 {% block content %}
 
+<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 {
+		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;
+
+}
+
+	cancel-subscription-modal .modal-body {
+		max-height: 800px;
+	}
+}
+
+</style>
   <section id="price">
     <div class="signup-container">
 	    <div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
@@ -43,7 +92,10 @@
               {% endfor %}
               <p>{{form.non_field_errors|striptags}}</p>
          
-              <p class="signup-notice">By logging in you agree to our<a href=#terms>Terms of Service</a>.</p>
+              <p class="signup-notice">By logging in you agree to our<a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">Terms of Service</a>.</p>
+			  
+			
+			  
               <button type="submit" class="btn btn-primary btn-blue">Login</button>
             </form>
             <br>
@@ -77,4 +129,66 @@
       </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 -->
 {% endblock %}

digitalglarus/templates/digitalglarus/login_hello.html

@@ -0,0 +1,80 @@
+{% extends "new_base_glarus.html" %}
+{% load staticfiles bootstrap3 i18n %}
+{% block content %}
+
+
+  <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"> 
+        <div class="signup-box">
+          <span class="glyphicon glyphicon-user"></span>
+          <h2 class="section-heading">Log In</h2>
+          {% if not messages %}
+            <h2 class="signup-lead">Welcome!<br></h2>
+          {% endif %}
+          
+
+          {% if messages %}
+              <ul class="list-unstyled">
+              {% for message in messages %}
+                  <li>{{ message }}</li>
+              {% endfor %}
+              </ul>
+          {% endif %}
+
+          <hr class="primary">
+
+          {% block messages %}
+              {% if request.GET.logged_out %}
+                      <div class="alert">  <!-- singular -->
+                          <a class="close" data-dismiss="alert">×</a>
+                          {% trans "You haven been logged out"%}
+                      </div>
+              {% endif %}
+          {% endblock %}
+          
+          <div class="signup-form form-group row">
+            <form action="{% url 'digitalglarus:login' %}" method="post" class="form" novalidate>
+              {% csrf_token %}
+              <input type="hidden" name="" value="{{ request.GET.next }}">
+              {% for field in form %}
+                  {% bootstrap_field field show_label=False type='fields'%}
+              {% endfor %}
+              <p>{{form.non_field_errors|striptags}}</p>
+         
+              <p class="signup-notice">By logging in you agree to our<a href=#terms>Terms of Service</a>.</p>
+              <button type="submit" class="btn btn-primary btn-blue">Login</button>
+            </form>
+            <br>
+            <div class="notice-box">
+               <p class="signup-text">Forgot password?<a href="{% url 'digitalglarus:reset_password' %}">Find ID/Password</a></p>
+               <p class="signup-text">Not a member yet?<a href="{% url 'digitalglarus:signup' %}?{{request.GET.next}}">Sign up </a>now.</p>
+            </div>
+          </div>
+        </div>       
+        <div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown">
+        </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 %}

digitalglarus/templates/digitalglarus/membership_deactivated.html

@@ -19,6 +19,10 @@
     text-align: center;
   }
 
+  .space-above {
+    margin-top: 10px;
+  }
+
 </style>
 
   <section id="price">
@@ -30,7 +34,7 @@
           <div class="payment-box">
              <h2 class="billing-head">Membership Deactivation</h2> 
              <hr class="greyline-long">
-               <h2 class="membership-lead">Are you sure do you want to cancel your membership with us ?</h2>
+               <h2 class="membership-lead">Do you want to cancel your membership with us ?</h2>
                <div class="date-box">
                  </div>
                  <!--<hr class="primary">-->
@@ -40,8 +44,8 @@
 
                           <form method="POST" action="">
                             {% csrf_token %} 
-                            <button type="button" class="btn btn-primary btn-blue" data-toggle="modal" data-target="#cancel-subscription-modal">Cancel my Membership</button>
-                            <a class="btn btn-primary btn-blue" 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>
 
 
 

digitalglarus/templates/digitalglarus/membership_deactivated2.html

@@ -0,0 +1,106 @@
+{% 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;
+  }
+
+</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">Membership Deactivation</h2> 
+             <hr class="greyline-long">
+               <h2 class="membership-lead">Do you want to cancel your membership with us ?</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 %} 
+                            <button type="button" class="btn btn-primary btn-blue" data-toggle="modal" data-target="#cancel-subscription-modal">Cancel my Membership</button>
+                            <a class="btn btn-primary btn-blue" href="{{request.META.HTTP_REFERER}}">Go back</a>
+
+
+
+                            <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 text-center">
+                                    <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 %} 

digitalglarus/templates/digitalglarus/membership_orders_list.html

@@ -1,7 +1,18 @@
 {% extends "new_base_glarus.html" %}
 {% load staticfiles bootstrap3 i18n %}
 {% block content %}
-  
+<style type="text/css">
+
+
+@media only screen and (max-width: 320px) {
+
+   body { font-size: 2em; }
+   
+    
+
+}
+h2 {text-transform: lowercase;}
+  </style>
 
   <!-- Header -->
   <!-- Services Section -->
@@ -18,7 +29,7 @@
             {% if  membership_start_date and membership_end_date%}
               <h2 class="member-name">{{membership_start_date|date}}-{{membership_end_date|date}}</h2>
             {% else %}
-              <h2 class="member-name">You don't have an active membership</h2>
+              <h2>You don't have an active membership</h2>
             {% endif %}
             <hr class="greyline-long">
             <h2 class="order-head">Orders history</h2>
@@ -59,22 +70,40 @@
             {% endif %}
             <hr class="greyline-long">
             <h2 class="order-head">Your Next Membership</h2>
-            {% if  next_membership_start_date and next_membership_end_date%}
+            {% if  next_membership_start_date and next_membership_end_date and current_membership.active %}
 
             
 
             <h2 class="history-name">
               Dates: {{next_membership_start_date|date}} - {{next_membership_end_date|date}}<br>
             </h2>
+            {% elif current_membership.active == False %}
+              <h2 class="history-name">
+                Your membership is deactivated
+              </h2>
             {% else %}
               <h2 class="history-name">
-                You are not a member yet
+                You are not a member.
               </h2>
             {% endif %}
-            <div class="edit-button">
-
-              <a class="btn btn-primary btn-grey btn-deactivate print" href="{% url 'digitalglarus:membership_deactivate' %}">Deactivate</a>
-            </div>
+            {% if not current_membership == None %}
+              {% if current_membership.active %}
+                <div class="edit-button">
+                  <a class="btn btn-primary btn-grey btn-deactivate print" href="{% url 'digitalglarus:membership_deactivate' %}">Deactivate</a>
+                </div>
+              {% elif not current_membership.active %}
+                <form method="POST" action="{% url 'digitalglarus:membership_reactivate' %}">
+                  {% csrf_token %} 
+                  <div class="edit-button">
+                    <button type="submit" class="btn btn-primary btn-grey btn-deactivate print" href="{% url 'digitalglarus:membership_reactivate' %}">Reactivate</button>
+                  </div>
+                </form>
+              {% endif %}
+            {% else %}
+              <div class="edit-button">
+                <a class="btn btn-primary btn-blue" href="{% url 'digitalglarus:membership_pricing' %}">Become a member</a>
+              </div>
+            {% endif %}
             <hr class="greyline-long">
             <div class="row">
               <div class="col-md-12 notice-box">

digitalglarus/templates/digitalglarus/membership_payment.html

@@ -18,6 +18,29 @@
     padding: .5em;
     padding-right: 1.5em
   }
+  
+  @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;
+
+}
+}
+
+
 </style>
 
   <section id="price">
@@ -70,7 +93,7 @@
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="col-xs-6 col-md-6 nopadding">
+                                    <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">
@@ -83,23 +106,33 @@
                                         </div>
                                       </div>
                                     </div>
-                                    <div class="col-xs-4 col-md-6 pull-right">
+                                    <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>
+<!--                                 <div class="row-fluid">
+                                  <div class="col-xs-12 col-md-6 col-md-offset-6">
+                                      <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">
                                     <label class="custom-control custom-checkbox">
                                      <br/>
-                                     <input type="checkbox" class="custom-control-input">
+                                     <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=#>Terms and Conditions</a>, <a href=#>Community Guidelines</a> and <a href=#>Privacy Policy</a></span>
-                                     </label>
-
-                                    <div class="col-xs-12">
-                                        <button class="btn btn-primary btn-md btn-blck " type="submit">Purchase membership</button>
+                                     <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="row">
+                                      <div class="col-xs-6 col-md-6 col-xs-offset-1 col-md-offset-3">
+                                          <button class="btn btn-primary btn-md btn-blck submit-payment" type="submit">Purchase membership</button>
+                                      </div>
                                     </div>
                                 </div>
                                 <div class="row" style="display:none;">
@@ -174,6 +207,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-10 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 %}

digitalglarus/templates/digitalglarus/membership_pricing.html

@@ -3,6 +3,31 @@
 {% block title %}crowdfunding{% endblock %}
 
 {% block content %}
+
+<style  type="text/css">
+@media screen and (min-width: 768px) {
+	
+	cancel-subscription-modal .modal-dialog  {width:550px;}
+
+	
+
+.glyphicon-calendar{
+    font-size: 42px;
+    display: block;
+    text-align: center;
+    margin: 40px auto 20px;
+    color: #88c7d7;
+}
+.price2 {
+	
+
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+
+}
+
+</style>
+
   <section id="price">
     <div class="container">
     <div class="row col-md-2 text-center wow fadeInDown"></div>
@@ -21,21 +46,16 @@
                 The membership fee is a monthly subscription and 
                 with every payment you help us to create a better
                  workspace.
-                You want to work more than 2 days per month in our
-                coworking space? Great! It's only <strong> 15CHF</strong>
-                per additional day. 
-                You want more? That's really cool!
-                If you work 17 days a month or EVERY DAY of a month, 
-                you can do so for <strong> 290CHF</strong>/month..
-                And the best? The discount is
-                applied automatically!
-                Just become a member, book your
-                working day and we will take care of the rest.
                 </p>
                 <div class="text-center">
-              <a class="btn btn-primary btn-blue" href="{% url 'digitalglarus:membership_payment' %}">become a member</a>
+					<a class="btn btn-primary btn-blue" href="{% url 'digitalglarus:membership_payment' %}">become a member</a>
+					
               </div>
-                    </div>
+			  <div class="text-center">
+					<br>
+					<a data-toggle="modal" data-target="#cancel-subscription-modal" target="_blank">How to pay?</a>
+			  </div>
+            </div>
               
        </div>        
       </div>
@@ -60,7 +80,6 @@
             <div class="price-list"><span class="glyphicon glyphicon-ok glyphicon-inverse"></span>Access to any of our great workshops</div>
             <div class="price-list"><span class="glyphicon glyphicon-ok "></span>Special invitation to our fondue nights, cooking & hacking sessions, coworking & cohiking, and many more cool stuff.</div>
             </li>
-            
              </div>
            </div>
         </div>  
@@ -84,4 +103,52 @@
       </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="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"> 
+							<div class="signup-box">
+								<span class="glyphicon glyphicon-calendar"></span>
+								<h2 class="section-heading">How the pricing works</h2>
+								<hr class="primary">
+								<h2 class="signup-lead text-left">
+								<ul>
+									<li>All members get 2 free days per month for booking.<br></li> 
+								</ul>
+								<ul>
+									<li>Additional booking costs 15CHF per day. <br></li>
+								</ul>
+								<ul>
+									<li>But your coworking after 17th day is free of charge. </li>
+								</ul>
+								<ul>
+									<li>So more you work, more you can save money! <br></li>
+								</ul>
+								<ul>
+									<li>You will never be charged more than 290CHF per month.  <br>  </li>
+								</ul>            
+								</h2>
+								<br>
+									<a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
+								<div class="notice-box">
+								</div>
+							</div>
+						</div>       
+						<div class="col-xs-12 col-sm-3 col-lg-4 text-center wow fadeInDown"> </div>
+					</div>
+				</section>	 
+            </div>
+              
+            </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
 {% endblock %} 

digitalglarus/templates/digitalglarus/supportus.html

@@ -0,0 +1,178 @@
+{% extends "new_base_glarus.html" %}
+{% load staticfiles cms_tags %}
+
+{% block extra_css %}
+  <style type="text/css">
+
+  .supportus-posts .post-preview { 
+    background-color: white;
+    padding-right: 3%;
+  }
+
+  .supportus-posts img {
+    margin:6% !important;
+  }
+
+  .supportus-posts p {
+    /*font-size: 0.5em !important;*/
+  }
+
+  .supportus-posts .post-meta {
+    font-size: 0.4em !important;
+  }
+
+  .supporter-white {
+    color: white;
+  }
+
+  #waystohelp .wow{
+    background-color: white;
+  }
+
+  .whatwedowith {
+    margin-top: 0px;
+  }
+
+  </style>
+{% endblock %}
+
+
+{% block content %}
+
+    <!-- Header -->
+    <section>
+      <div class="supportus">
+        <div class="container">
+        <div class="intro-text">
+          <p>
+           </p>
+             <div class="intro-headline-big">
+               <span class="intro-headline-big">
+                  Become Our Supporter
+               </span>
+             </div>
+        </div>
+        </div>  
+       </div>
+    </section>
+<!-- form section ends-->
+    <!-- Services Section -->
+    <section id="waystohelp">
+     <div class="col-md-12 col-lg-12 text-center wow fadeInDown">
+   
+      <div class="help-wrap">
+        <h2 class="section-heading">3 Ways to Help</h2>
+        
+         <p class="text-center supporter-lead">The First Coworking Space of Glarus was not possible without our 
+                                                              supporters. <br>
+                                                              Be our supporter today and help us realize our dream coworking space!</p>
+                                                              
+        </div>
+     
+      
+        <div class="help-box-group row">
+      
+                  <div class="col-md-4 col-sm-6 portfolio-item text-center wow fadeInDown">
+                     <div class="supportus-box">
+                    <!-- <a href="#"> -->
+                        <img class="img-responsive img-centered" src="{% static 'digitalglarus/img/supportus/2.png' %}" alt="">
+                    <!-- </a> -->
+                      
+                          <h3 class="donate">Get our news</h3>
+                           
+                         <div class="help-box">
+                         <hr class="primary"> 
+                             <p>Subscribe to our mailing list and stay informed on our news at Digital Glarus!
+                             We'll keep you up to date to our events and send you special invitations!</p>
+                                
+                                 <!--   <div class="submit-box">    
+                                      <button type="submit" class="btn btn-primary btn-blue">Subscribe</button>
+                                    </div>-->
+                         </div>
+                      </div>
+        </div>    
+      <div class="col-md-4 col-sm-6 text-center wow fadeInDown"> 
+            <div class="supportus-box">
+           <!-- <a href="#"> -->
+                    <img class="img-responsive img-centered image-blog " src="{% static 'digitalglarus/img/supportus/3.png' %}" alt="">
+           <!-- </a> -->
+                
+                  <h3 class="donate">Connect and Share</h3>
+                    
+                     <div class="help-box">
+                     <hr class="primary"> 
+                         <p>Share your experience at Digital Glarus with your friends and collegues, let the other discover our coworking space!</p>
+                             
+                                <!-- <div class="submit-box"> 
+                                 <ul class="list-inline social-buttons">
+             <li><a href="https://twitter.com/ungleich"><i class="fa fa-twitter"></i></a>
+              </li>  
+                <li><a href="https://www.facebook.com/digitalglarus/"><i class="fa fa-facebook"></i></a>
+              </li> </ul>
+                                 </div> -->
+                     </div>  
+             
+            </div>    
+      </div> 
+      <div class="col-md-4 col-sm-6 text-center wow fadeInDown"> 
+             <div class="supportus-box">
+            <!-- <a href="#"> -->
+                    <img class="img-responsive img-centered" src="{% static 'digitalglarus/img/supportus/1.png' %}" alt="">
+                <!-- </a> -->
+             
+                <h3 class="donate">
+                   Donate now
+                </h3>
+                
+                  <div class="help-box">
+                  <hr class="primary"> 
+                     <p>Your donation helps us renovate our 100+years old coworking space! This very old house needs a lot of love.</p>
+                        
+                  </div>
+             </div>       
+      </div>
+  </div>
+  </div>
+ </section>
+ 
+ <section id="whatwedowith">
+
+      <div class="col-md-12 col-lg-12 text-center wow fadeInDown whatwedowith">
+        <div class="whatwe-wrap">
+          <h2 class="whatwedo">What we do with your support</h2>
+           <p class="carousel-text text-center supporter-white">Discover how your donation is being used in renovating our coworking space!</p>
+            <div class="row">
+             <div class="col-md-6 col-md-offset-3 supportus-posts">
+                <div class="blog-list">
+                  {% for post in post_list %}
+                  {% include "ungleich/djangocms_blog/includes/blog_item.html" with post=post image="true" TRUNCWORDS_COUNT=TRUNCWORDS_COUNT %}
+                  {% endfor %}
+                </div>
+             </div>
+          
+            </div>
+      </div>
+    </div>
+
+ 
+ </section>
+    
+    <section id="contact">
+      <div class="row">
+       <div class="fill 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 %}

digitalglarus/templates/digitalglarus/terms.html

@@ -0,0 +1,140 @@
+{% extends "new_base_glarus.html" %}
+{% load staticfiles cms_tags bootstrap3%}
+{% load staticfiles bootstrap3 i18n %}
+{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+
+
+    <title>Digital Glarus</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="./css/lib/animate.min.css" rel="stylesheet">
+
+    <!-- Custom CSS -->
+   
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+	<![endif]-->
+    <link href="css/ungleich.css" rel="stylesheet" type="text/css">
+    <link href="css/history.css" rel="stylesheet" type="text/css">
+    <link href="css/price.css" rel="stylesheet" type="text/css">
+    </link>
+    <!-- Google tracking -->
+    <script src="//www.google-analytics.com/analytics.js" async></script><script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-62285904-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+    
+    </head>
+
+  <body id="page-top" class="index">
+
+    <!-- Navigation -->
+
+
+  
+    <!-- Services Section -->
+  <section id="price">
+    <div class="container">
+     <div class="row col-md-2 text-center wow fadeInDown"></div> 
+    <div class="row col-md-8 col-sm-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">
+                  <div class="row">
+                    <div class="col-sm-3 col-md-offset-4">
+                      <a href="mailto:info@ungleich.ch" class="btn btn-primary btn-blue">Still have a question?</a>
+                    
+                    </div>
+                    
+                  </div>
+              </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> 
+   
+<!-- jQuery -->
+<script src="js/jquery.js"></script>
+
+<!-- Bootstrap Core JavaScript -->
+<script src="js/bootstrap.min.js"></script>
+
+<!-- Plugin JavaScript -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+<script src="js/classie.js"></script>
+<script src="js/cbpAnimatedHeader.js"></script>
+
+    <!-- Contact Form JavaScript -->
+    <script src="js/jqBootstrapValidation.js"></script>
+    <script src="js/contact_me.js"></script>
+    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <script src="./js/lib/wow.min.js"></script>
+    <!-- Custom Theme JavaScript -->
+    <script src="js/agency.js"></script>
+
+    <script src="js/ungleich.js"></script>
+
+
+    <!-- Custom Fonts -->
+    <link href='https://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
+    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+ 
+    <link href="//fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
+</html>
+{% endblock %}

digitalglarus/templates/digitalglarus/user_billing_address.html

@@ -29,6 +29,7 @@
                  <hr class="greyline-long">
                   <h2 class="billing-head">Billing Adress</h2>
                     <div class="signup-form form-group row">
+                      {% if current_billing_address %}
                       <form role="form" id="billing-address-form" method="post" action="{% url 'digitalglarus:user_billing_address' %}" novalidate>
                       {% for field in form %}
                         {% csrf_token %}
@@ -49,6 +50,12 @@
                         </div>
                       </div> 
                       </form>
+                      {% else %}
+                        <div class="text-center">
+                          <h2 class="billing-head text-center">You don't have any order yet</h2>
+                        </div>
+                        
+                      {% endif %}
                     </div>
 
           </div>                

digitalglarus/templates/new_base_glarus.html

@@ -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,33 @@
           <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 +198,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>

digitalglarus/templates/new_base_glarus123123.html

@@ -0,0 +1,249 @@
+{% load static %}
+{% load staticfiles cms_tags menu_tags sekizai_tags  menu_tags  bootstrap3 %}
+{% load i18n %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+    <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="description" content="">
+    <meta name="author" content="">
+
+    <title>Digital Glarus</title>
+
+
+    <link href="{% static 'digitalglarus/css/bootstrap.min.css' %}" rel="stylesheet">
+
+    <!-- Bootstrap Core CSS -->
+    <link href="{% static 'digitalglarus/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet">
+    <link href="{% static  'ungleich_page/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet"
+      type="text/css">
+
+    <link href="{% static 'digitalglarus/css/agency.css' %}" rel="stylesheet">
+    <link href="{% static 'digitalglarus/css/ungleich.css' %}" rel="stylesheet">
+    <link href="{% static 'digitalglarus/css/history.css' %}" rel="stylesheet">
+    <link href="{% static 'digitalglarus/css/price.css' %}" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" />
+
+    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
+    <link href="{% static 'digitalglarus/css/lib/animate.min.css' %}" rel="stylesheet">
+    <!-- <link href="{% static 'css/membership.css' %}" rel="stylesheet"> -->
+
+
+
+    <!-- Custom CSS -->
+    <!-- <link href="css/agency.css" rel="stylesheet"> -->
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="{% static 'digitalglarus/https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="{% static 'digitalglarus/https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <!-- <link href="css/ungleich.css" rel="stylesheet" type="text/css"></link> -->
+    <!-- Google tracking -->
+    <script src="//www.google-analytics.com/analytics.js" async></script><script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-62285904-1', 'auto');
+      ga('send', 'pageview');
+
+    </script>
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+    <style id="igtranslator-color" type="text/css"></style>
+    <style type="text/css">
+
+
+      .navbar-default .nav .dropdown.open .dropdown-toggle {
+        background: none !important;
+        color: white !important;
+      }
+
+
+      .navbar-default .nav .dropdown li a{
+        color:#0f1221;
+        text-transform: capitalize;
+      }
+
+      .navbar-default .nav li a .glyphicon-user{
+
+        font-size: 15px;
+        display: inline-block;
+        margin: 0px;
+        color:white;
+      }
+    </style>
+  </head>
+
+
+
+  <body id="page-top" class="index">
+
+    <!-- Navigation -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container" style="margin-right: -; margin-left: 0px;margin-right: 0px;">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header page-scroll">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <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>
+    </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">
+        <li class="hidden active">
+          <a href="#page-top"></a>
+        </li>
+        <li>
+          <a class="page-scroll" href="{% url 'digitalglarus:booking' %}">booking & price</a>
+        </li>
+        <li>
+          <a class="page-scroll" href="{% url 'digitalglarus:history' %}">history</a>
+        </li>
+        <li>
+          <a class="page-scroll" href="http://blog.ungleich.ch">BLOG</a>
+        </li>
+        <li>
+          <a class="page-scroll" href="#contact">Contact</a>
+        </li>
+
+        {% if request.user.is_authenticated %}
+        <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"%} 
+              </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>              
+        {% else %}
+            <li>
+                <a class="page-scroll" href="{% url 'digitalglarus:login' %}">Login</a>
+            </li> 
+        {% endif %}
+<!--          <li>
+          <a class="page-scroll" href="{% url 'digitalglarus:signup' %}">Sign Up</a>
+        </li>
+ -->      </ul>
+    </div>
+    <!-- /.navbar-collapse -->
+      </div>
+      <!-- /.container-fluid -->
+    </nav>
+
+    {% block content %} {% endblock %}
+    
+    <footer>
+      <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <span class="copyright">Copyright © ungleich GmbH 2016</span>
+      </div>
+      <div class="col-md-4">
+        <ul class="list-inline social-buttons">
+          <li><a href="https://facebook.com/digitalglarus"><i class="fa fa-facebook"></i></a>
+          </li>
+          <li><a href="https://twitter.com/ungleich"><i class="fa fa-twitter"></i></a>
+          </li>
+          <li><a href="https://github.com/ungleich"><i class="fa fa-github"></i></a>
+          </li>
+          <li><a href="https://www.linkedin.com/company/ungleich-gmbh?trk=nav_account_sub_nav_company_admin/"><i class="fa fa-linkedin"></i></a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-md-4">
+        <ul class="list-inline quicklinks">
+          <li><a href="http://www.ungleich.ch/">ungleich Home</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+      </div>
+    </footer>
+        
+<script type="text/javascript" src="{% static 'digitalglarus/bower_components/jquery/dist/jquery.min.js' %}"></script>
+
+<!-- jQuery -->
+<script src="{% static 'digitalglarus/js/jquery.js' %}"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
+
+
+<!-- Bootstrap Core JavaScript -->
+<script src="{% static 'digitalglarus/js/bootstrap.min.js'  %}"></script>
+
+
+<!-- Plugin JavaScript -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+<script src="{% static 'digitalglarus/js/classie.js' %}"></script>
+<script src="{% static 'digitalglarus/js/cbpAnimatedHeader.js' %}"></script>
+
+<!-- Stripe Lib -->
+<script type="text/javascript" src="//js.stripe.com/v2/"></script>
+
+<!-- Proccess payment lib -->
+<script src="{% static 'digitalglarus/js/payment.js' %}"></script>
+
+<!-- Contact Form JavaScript -->
+<script src="{% static 'digitalglarus/js/jqBootstrapValidation.js' %}"></script>
+
+<!-- <script src="{% static 'digitalglarus/js/contact_me.js' %}"></script>
+ -->
+<script src="{% static 'digitalglarus/./js/lib/wow.min.js' %}"></script>
+<!-- Custom Theme JavaScript -->
+<script src="{% static 'digitalglarus/js/agency.js' %}"></script>
+
+<script src="{% static 'digitalglarus/js/ungleich.js' %}"></script>
+
+
+
+<!-- Include Required Prerequisites -->
+<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+<!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
+ --> 
+<!-- Include Date Range Picker -->
+<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js
+"></script>
+
+
+<!-- Booking JavaScript -->
+<script src="{% static 'digitalglarus/js/booking.js' %}"></script>
+
+<!-- Utils JavaScript -->
+<script src="{% static 'digitalglarus/js/utils.js' %}"></script>
+
+<!-- Custom Fonts -->
+<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
+<link href="{% static 'digitalglarus/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
+</html>

digitalglarus/urls.py

@@ -6,11 +6,19 @@ from .views import ContactView, IndexView, AboutView, HistoryView, LoginView, Si
     PasswordResetView, PasswordResetConfirmView, MembershipPaymentView, MembershipActivatedView,\
     MembershipPricingView, BookingSelectDatesView, BookingPaymentView, OrdersBookingDetailView,\
     BookingOrdersListView, MembershipOrdersListView, OrdersMembershipDetailView, \
-    MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView
+    MembershipDeactivateView, MembershipDeactivateSuccessView, UserBillingAddressView, \
+    MembershipReactivateView,TermsAndConditions,ValidateUser,SupportusView,Probar
+
+
 # from membership.views import LoginRegistrationView
 
 urlpatterns = [
+
+	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'support-us/?$'), SupportusView.as_view(), name='supportus'),
     url(_(r'contact/?$'), ContactView.as_view(), name='contact'),
     url(_(r'login/?$'), LoginView.as_view(), name='login'),
     url(_(r'signup/?$'), SignupView.as_view(), name='signup'),
@@ -20,11 +28,14 @@ urlpatterns = [
     url(r'reset-password-confirm/(?P<uidb64>[0-9A-Za-z]+)-(?P<token>.+)/$',
         PasswordResetConfirmView.as_view(), name='reset_password_confirm'),
     url(_(r'history/?$'), HistoryView.as_view(), name='history'),
-    url(_(r'users/billing_address/?$'), UserBillingAddressView.as_view(), name='user_billing_address'),
+    url(_(r'users/billing_address/?$'), UserBillingAddressView.as_view(),
+        name='user_billing_address'),
     url(_(r'booking/?$'), BookingSelectDatesView.as_view(), name='booking'),
     url(_(r'booking/payment/?$'), BookingPaymentView.as_view(), name='booking_payment'),
     url(_(r'booking/orders/(?P<pk>\d+)/?$'), OrdersBookingDetailView.as_view(),
         name='booking_orders_detail'),
+    # url(_(r'booking/orders/(?P<pk>\d+)/cancel/?$'), BookingCancelView.as_view(),
+    #     name='booking_orders_cancel'),
     url(_(r'booking/orders/?$'), BookingOrdersListView.as_view(),
         name='booking_orders_list'),
     url(_(r'membership/payment/?$'), MembershipPaymentView.as_view(), name='membership_payment'),
@@ -32,6 +43,8 @@ urlpatterns = [
         name='membership_activated'),
     url(_(r'membership/deactivate/?$'), MembershipDeactivateView.as_view(),
         name='membership_deactivate'),
+    url(_(r'membership/reactivate/?$'), MembershipReactivateView.as_view(),
+        name='membership_reactivate'),
     url(_(r'membership/deactivate/success/?$'), MembershipDeactivateSuccessView.as_view(),
         name='membership_deactivate_success'),
     url(_(r'membership/pricing/?$'), MembershipPricingView.as_view(),
@@ -43,7 +56,7 @@ urlpatterns = [
     url(_(r'supporters/?$'), views.supporters, name='supporters'),
     url(r'calendar_api/(?P<month>\d+)/(?P<year>\d+)?$', views.CalendarApi.as_view(),name='calendar_api_1'),
     url(r'calendar_api/', views.CalendarApi.as_view(),name='calendar_api'),
-    url(_(r'support-us/?$'), views.support, name='support'),
+    # url(_(r'support-us/?$'), views.support, name='support'),
     url(r'^blog/(?P<slug>\w[-\w]*)/$', views.blog_detail, name='blog-detail'),
     url(r'blog/$', views.blog, name='blog'),
 ]

digitalglarus/views.py

@@ -13,10 +13,11 @@ from django.utils.translation import get_language
 from djangocms_blog.models import Post
 from django.contrib import messages
 from django.http import JsonResponse
-from django.views.generic import View, DetailView, ListView
+from django.views.generic import View, DetailView, ListView, DeleteView
 
 
 from .models import Supporter
+from .mixins import ChangeMembershipStatusMixin
 from utils.forms import ContactUsForm
 from utils.mailer import BaseEmail
 
@@ -33,18 +34,73 @@ from utils.models import UserBillingAddress
 
 
 from .forms import LoginForm, SignupForm, MembershipBillingForm, BookingDateForm,\
-    BookingBillingForm
+    BookingBillingForm, CancelBookingForm
 
 from .models import MembershipType, Membership, MembershipOrder, Booking, BookingPrice,\
-    BookingOrder
+    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')
+	
+	
+
+class ValidateUser(TemplateView):
+    #print ("ENTRE AQUI AL MENOS Y",pk)
+    template_name = "digitalglarus/signup.html"
+    #form_class = SignupForm
+    success_url = reverse_lazy('digitalglarus:login')
+    #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')
+
+class ValidateView(SignupViewMixin):
+    template_name = "digitalglarus/signup.html"
+    form_class = SignupForm
+    success_url = reverse_lazy('digitalglarus:login')
+
+
+    #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')
+
+class TermsAndConditions(TemplateView):
+    template_name ="digitalglarus/terms.html"
+
 
 class IndexView(TemplateView):
     template_name = "digitalglarus/index.html"
 
 
+class SupportusView(TemplateView):
+    template_name = "digitalglarus/supportus.html"
+
+    def get_context_data(self, *args, **kwargs):
+        context = super(SupportusView, self).get_context_data(**kwargs)
+        tags = ["dg-renovation"]
+        posts = Post.objects.filter(tags__name__in=tags, publish=True).translated(get_language())
+        context.update({
+            'post_list': posts
+        })
+        return context
+
+
 class LoginView(LoginViewMixin):
     template_name = "digitalglarus/login.html"
     form_class = LoginForm
@@ -255,6 +311,22 @@ class BookingPaymentView(LoginRequiredMixin, MembershipRequiredMixin, FormView):
         }
         order = BookingOrder.create(order_data)
 
+        context = {
+            'booking': booking,
+            'order': order,
+            'base_url': "{0}://{1}".format(self.request.scheme, self.request.get_host())
+        }
+
+        email_data = {
+            'subject': 'Your booking order has been placed',
+            'to': self.request.user.email,
+            'context': context,
+            'template_name': 'booking_order_email',
+            'template_path': 'digitalglarus/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
         return HttpResponseRedirect(self.get_success_url(order.id))
 
 
@@ -341,13 +413,14 @@ class MembershipPaymentView(LoginRequiredMixin, IsNotMemberMixin, FormView):
             # Get membership dates
             membership_start_date, membership_end_date = membership_type.first_month_range
 
-            # Create membership plan
+            # Create or update membership plan
             membership_data = {
                 'type': membership_type,
+                'active': True,
                 'start_date': membership_start_date,
                 'end_date': membership_end_date
             }
-            membership = Membership.create(membership_data)
+            membership = Membership.activate_or_crete(membership_data, self.request.user)
 
             # Create membership order
             order_data = {
@@ -430,6 +503,16 @@ class MembershipDeactivateView(LoginRequiredMixin, UpdateView):
         return HttpResponseRedirect(self.success_url)
 
 
+class MembershipReactivateView(ChangeMembershipStatusMixin):
+    success_message = "Your membership has been reactivate :)"
+    template_name = "digitalglarus/membership_orders_list.html"
+
+    def post(self, request, *args, **kwargs):
+        membership = self.get_object()
+        membership.activate()
+        return super(MembershipReactivateView, self).post(request, *args, **kwargs)
+
+
 class UserBillingAddressView(LoginRequiredMixin, UpdateView):
     model = UserBillingAddress
     form_class = UserBillingAddressForm
@@ -443,6 +526,14 @@ class UserBillingAddressView(LoginRequiredMixin, UpdateView):
 
         return next_url
 
+    def get_context_data(self, **kwargs):
+        context = super(UserBillingAddressView, self).get_context_data(**kwargs)
+        current_billing_address = self.request.user.billing_addresses.first()
+        context.update({
+            'current_billing_address': current_billing_address
+        })
+        return current_billing_address
+
     def form_valid(self, form):
         """
         If the form is valid, save the associated model.
@@ -470,8 +561,8 @@ class UserBillingAddressView(LoginRequiredMixin, UpdateView):
 
     def get_object(self):
         current_billing_address = self.request.user.billing_addresses.filter(current=True).last()
-        if not current_billing_address:
-            raise AttributeError("Billing Address does not exists")
+        # if not current_billing_address:
+        #     raise AttributeError("Billing Address does not exists")
         return current_billing_address
 
 
@@ -488,12 +579,16 @@ class MembershipOrdersListView(LoginRequiredMixin, ListView):
 
     def get_context_data(self, **kwargs):
         context = super(MembershipOrdersListView, self).get_context_data(**kwargs)
-        start_date, end_date = MembershipOrder.current_membership_dates(self.request.user)
+        current_membership = Membership.get_current_membership(self.request.user)
+        start_date, end_date = (current_membership.start_date, current_membership.end_date)\
+            if current_membership else [None, None]
+
         next_start_date, next_end_date = MembershipOrder.next_membership_dates(self.request.user)
         current_billing_address = self.request.user.billing_addresses.filter(current=True).last()
         context.update({
             'membership_start_date': start_date,
             'membership_end_date': end_date,
+            'current_membership': current_membership,
             'next_membership_start_date': next_start_date,
             'next_membership_end_date': next_end_date,
             'billing_address': current_billing_address
@@ -523,14 +618,84 @@ class OrdersMembershipDetailView(LoginRequiredMixin, DetailView):
         return context
 
 
-class OrdersBookingDetailView(LoginRequiredMixin, DetailView):
+# class BookingCancelView(FormView):
+#     success_message = "Your booking has been cancelled"
+#     model = BookingOrder
+#     form_class = CancelBookingForm
+
+#     def get_success_url(self):
+#         pk = self.kwargs.get(self.pk_url_kwarg)
+#         return reverse_lazy('digitalglarus:booking_orders_list', kwargs={'pk': pk})
+
+#     def form_valid(self, form):
+#         booking_order = self.get_object()
+#         # booking_order.cancel()
+#         request = self.request
+
+#         return HttpResponseRedirect(self.get_success_url())
+
+
+class OrdersBookingDetailView(LoginRequiredMixin, UpdateView):
     template_name = "digitalglarus/booking_orders_detail.html"
     context_object_name = "order"
     login_url = reverse_lazy('digitalglarus:login')
+    form_class = CancelBookingForm
+    success_message = "You booking has been cancelled"
     # permission_required = ['view_hostingorder']
     model = BookingOrder
 
-    def get_context_data(self, *args, **kwargs):
+    def get_success_url(self):
+        pk = self.kwargs.get(self.pk_url_kwarg)
+        return reverse_lazy('digitalglarus:booking_orders_detail', kwargs={'pk': pk})
+
+    def form_valid(self, form):
+
+        booking_order = self.get_object()
+        booking_order.cancel()
+        request = self.request
+
+        BookingCancellation.create(booking_order)
+
+        context = {
+            'order': booking_order,
+            'booking': booking_order.booking,
+            'base_url': "{0}://{1}".format(request.scheme, request.get_host()),
+            'user': request.user
+
+        }
+
+        email_data = {
+            'subject': 'A cancellation has been requested',
+            'to': 'info@ungleich.ch',
+            'context': context,
+            'template_name': 'booking_cancellation_notification',
+            'template_path': 'digitalglarus/emails/'
+        }
+
+        email = BaseEmail(**email_data)
+        email.send()
+
+        context = {
+            'order': booking_order,
+            'booking': booking_order.booking,
+            'base_url': "{0}://{1}".format(request.scheme, request.get_host())
+
+        }
+        email_data = {
+            'subject': 'Your booking has been cancelled',
+            'to': request.user.email,
+            'context': context,
+            'template_name': 'booking_cancellation',
+            'template_path': 'digitalglarus/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        messages.add_message(self.request, messages.SUCCESS, self.success_message)
+
+        return HttpResponseRedirect(self.get_success_url())
+
+    def get_context_data(self, **kwargs):
 
         context = super(OrdersBookingDetailView, self).get_context_data(**kwargs)
 
@@ -553,6 +718,7 @@ class OrdersBookingDetailView(LoginRequiredMixin, DetailView):
             'free_days': free_days,
             'start_date': start_date.strftime('%m/%d/%Y'),
             'end_date': end_date.strftime('%m/%d/%Y'),
+            'booking_required': bookig_order.refund_required(),
         })
 
         return context

dynamicweb/settings/base.py

@@ -181,7 +181,7 @@ CMS_TEMPLATES = (
 DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.postgresql_psycopg2',
-        'NAME': 'app',
+        'NAME': 'app'
     }
 }
 

dynamicweb/settings/base.py.orig

@@ -63,11 +63,8 @@ INSTALLED_APPS = (
     'django_select2',
     'meta',
     'meta_mixin',
-<<<<<<< HEAD
-#    'admin_enhancer',
+#   'admin_enhancer',
     'djangocms_blog',
-=======
->>>>>>> 006d49d7dbddcfd9bb24c40d1f1939b902bc1fc4
     'bootstrap3',
     'compressor',
     'filer',
@@ -438,3 +435,7 @@ REGISTRATION_MESSAGE = {'subject': "Validation mail",
 
 #dont migrate test
 # SOUTH_TESTS_MIGRATE = False
+
+STRIPE_API_PUBLIC_KEY = 'pk_test_uvWyHNJgVL2IB8kjfgJkGjg4'  # used in frontend to call from user browser
+STRIPE_API_PRIVATE_KEY = 'sk_test_uIPMdgXoRGydrcD7fkwcn7dj'  # used in backend payment
+STRIPE_DESCRIPTION_ON_PAYMENT = "Payment for ungleich GmbH services"

requirements.txt

@@ -1,53 +1,86 @@
+Babel==2.3.4
 Django==1.9.4
-aldryn-newsblog
-wheel
-django-bootstrap3
-django-cms
-django-compressor
-django-filter
-django-taggit
-django-taggit-autosuggest
-django-taggit-templatetags
-django-templatetag-sugar
-django-model-utils
-djangocms-blog
-django-dotenv
-psycopg2
-django-mptt
-easy_thumbnails
-django-polymorphic
-model-mommy
-pycryptodome
-django-stored-messages
-django-guardian
+Django-Select2==4.3.2
+Pillow==3.2.0
+URLObject==2.4.0
+Unidecode==0.04.19
+YURL==0.13
+aldryn-apphooks-config==0.2.7
+aldryn-boilerplates==0.7.4
+aldryn-categories==1.0.3
+aldryn-common==1.0.1
+aldryn-newsblog==1.2.1
+aldryn-people==1.2.0
+aldryn-reversion==1.0.8
+aldryn-search==0.2.11
+aldryn-translation-tools==0.2.1
+backport-collections==0.1
+cmsplugin-filer==1.0.1
+django-appconf==1.0.2
+django-appdata==0.1.5
+django-bootstrap3==7.0.1
+django-classy-tags==0.7.2
+django-cms==3.2.5
+django-compressor==2.0
+django-debug-toolbar==1.4
+django-dotenv==1.4.1
+django-extensions==1.6.7
+django-filer==1.2.0
+django-filter==0.13.0
+django-formtools==1.0
+django-guardian==1.4.4
+django-haystack==2.4.1
+django-meta==1.2
+django-meta-mixin==0.3.0
+django-model-utils==2.5
+django-mptt==0.8.4
+django-parler==1.6.3
+django-phonenumber-field==1.1.0
+django-polymorphic==0.9.2
+django-reversion==1.10.2
+django-sekizai==0.9.0
+django-sortedm2m==1.2.2
+django-spurl==0.6.4
+django-standard-form==1.1.1
+django-stored-messages==1.4.0
+django-taggit==0.18.3
+django-taggit-autosuggest==0.2.8
+django-taggit-templatetags==0.2.5
+django-templatetag-sugar==1.0
+django-treebeard==4.0.1
+djangocms-admin-style==1.1.1
+djangocms-apphook-setup==0.1.2
+djangocms-blog==0.7.0
+djangocms-file==1.0
+djangocms-flash==0.3.0
+djangocms-googlemap==0.4.0
+djangocms-inherit==0.2.1
+djangocms-link==1.7.2
+djangocms-page-meta==0.5.11
+djangocms-picture==1.0.0
+djangocms-teaser==0.2.0
+djangocms-text-ckeditor==2.9.3
+djangocms-video==1.0.0
+easy-thumbnails==2.3
+html5lib==0.9999999
+lxml==3.6.0
+model-mommy==1.2.6
+phonenumbers==7.4.0
+phonenumberslite==7.4.0
+psycopg2==2.6.1
+pycryptodome==3.4
+pylibmc==1.5.1
+python-dateutil==2.5.3
+python-slugify==1.2.0
+pytz==2016.4
+rcssmin==1.0.6
+requests==2.10.0
+rjsmin==1.0.12
+six==1.10.0
+sqlparse==0.1.19
+stripe==1.33.0
+wheel==0.29.0
 
-#PLUGINS
-djangocms_flash
-djangocms_googlemap
-djangocms_inherit
-djangocms_link
-djangocms_teaser
-djangocms_page_meta
-djangocms_text_ckeditor
-djangocms_file
-djangocms_picture
-djangocms_video
 
-#PAYMENT
-stripe
 
-django-treebeard
-django-sekizai
-django-classy-tags
-djangocms-admin-style
-html5lib
-six
 
-# Optional, recommended packages
-Pillow>=2
-django-filer
-cmsplugin-filer
-django-reversion
-pylibmc
-django_extensions
-django-debug-toolbar

ungleich/templates/ungleich/djangocms_blog/includes/blog_item.html

@@ -31,7 +31,7 @@
       </p>
 
       <p class="post-subtitle">
-        {% if not TRUNCWORDS_COUNT %}
+        {% if not TRUNCWORDS_COUNT %}       
         {% render_model post "abstract" %}
         {% else %}
         {% render_model post "abstract" "" "" 'truncatewords_html:TRUNCWORDS_COUNT'  %}

utils/forms.py

@@ -116,7 +116,7 @@ class UserBillingAddressForm(forms.ModelForm):
         model = UserBillingAddress
         fields = ['street_address', 'city', 'postal_code', 'country', 'user']
         labels = {
-            'street_address': _('Street Address'),
+            'street_address': _('Street Building'),
             'city': _('City'),
             'postal_code': _('Postal Code'),
             'Country': _('Country'),