added email signup form and CTA

_config.yml

@@ -28,8 +28,10 @@ exclude_from_localization: ["assets"]
 parallel_localization: false
 
 # Build settings
+permalink:          /:title/
 markdown:           kramdown
-exclude:            ["README.md", 'Gemfile.lock', 'Gemfile']
+exclude:            ["README.md", 'Gemfile.lock', 'Gemfile', "docker-compose.yml"]
+include:            ["_pages"]
 plugins:
   - jekyll-feed
 

_data/da/common.yml

@@ -3,6 +3,9 @@ global:
   description: >-
     Den danske totalovervågning er kendt ulovlig, men teleselskaber og politikere er ligeglade. 
     Nu gør vi noget ved det! #ulovligLogning
+  emailplaceholder: indtast din email
+  signup: JA! jeg vil gerne holdes opdateret.
+  ctatext: Hvis du vil hjælpe eller give et bidrag, kan du [trykke her](#wannahelp). 
   langs:
     da: Dansk
     en: Engelsk

_data/en/common.yml

@@ -3,6 +3,9 @@ global:
   description: >-
     The Danish states mass surveillance has been ruled illegal, but the telcos and the politicians don't care.
     Now we are going to do something about it! #ulovligLogning
+  emailplaceholder: enter your email
+  signup: Yes! I want to be kept in the loop.
+  ctatext: If you want to help us or donate to our cause [click here](#wannahelp).
   langs:
     da: Danish
     en: English

_includes/ctascale.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 600"><a><g><circle r="250" cy="300" cx="250" fill="#ff4c00" fill-rule="evenodd"/><text y="275.465" x="251.718" style="text-align:center;text-shadow: 3px 3px 0 #d94100;" font-weight="400" font-size="96" font-family="Eczar" text-anchor="middle" fill="#fff"><tspan style="text-align:center" y="275.465" x="251.718">Giv et</tspan><tspan style="text-align:center" y="371.871" x="251.718">bidrag!</tspan></text><animateTransform attributeName="transform" type="translate" values="0 0; 0 -50; 0 0;0 -10; 0 0" begin="0s" dur="0.5s" repeatCount="4"/></g><path d="M230.715 436.685c-2.77 0-5 2.23-5 5v92.858c0 .713.151 1.387.418 2h-34.586a4.988 4.988 0 0 0 0 7.07l54.918 54.918a4.988 4.988 0 0 0 7.07 0l54.918-54.918a4.988 4.988 0 0 0 0-7.07h-34.586a4.991 4.991 0 0 0 .418-2v-92.858c0-2.77-2.23-5-5-5z" fill="#ff4c00" fill-rule="evenodd"/></a></svg>

_includes/head.html

@@ -4,6 +4,9 @@
   <title>{{ global.title }}</title>
   <link rel="stylesheet" href="{{ site.baseurl }}/assets/style/main.css?{{ site.time | date: '%s' }}">
   <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.name }}" href="{{ site.baseurl }}/feed.xml" />
+  {% if page.redirect %}
+    <meta http-equiv='refresh' content='5;url={% if site.active_lang == site.default_lang %} {{site.url}} {% else %} {{site.url}}/{{ site.active_lang }} {% endif %}' />    
+  {% endif %}
   <meta property="og:type" content="website">
   <meta property="og:image" content="{{ site.url }}/assets/img/og01.png" />
   <meta property="og:url" content="{{ site.url }}" />

_layouts/centered.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<section class="centered">
+	<div class="content">
+		{{ content }}
+	</div>
+</section>

_layouts/indexpage.html

@@ -1,11 +1,23 @@
 ---
 layout: default
 ---
+{% assign global = site.data.common.global %}
 {% for section in page.sections %}
 <section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
 	<h1>{{ section.heading }}</h1>
 	<div class="paragraphs">
 		{{ section.content | markdownify }}
+		{% if section.id == "intro" %}
+			<p class="ctaTxt">{{ global.ctatext | markdownify }}</p>
+			<a href="#wannahelp" class="cta">{% include ctascale.svg %}</a>
+		{% endif %}
+		{% if section.id == "wannahelp" %}
+		 <form class="signup" action="https://ulovliglogning.dk/dynamic/signup/" method="post">
+		 	<input type="email" required="true" placeholder="{{ global.emailplaceholder }}" name="email">
+		 	<input type="text" name="lang" value="{{ site.active_lang }}" class="hidden">
+		 	<input type="submit" name="submit" value="{{ global.signup }}">
+		 </form>
+		{% endif %}
 	</div>
 </section>
 {% endfor %}

_pages/404.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+permalink: /404
 ---
 
 <style type="text/css" media="screen">

_pages/index-da.md

@@ -30,7 +30,7 @@ sections:
   - id: wannahelp
     heading: Jeg vil hjælpe!
     content: |
-      Hvis du har lyst til at hjælpe, kan du kontakte [Rasmus Malver](https://twitter.com/rasmusmalver) på [Twitter](https://twitter.com/rasmusmalver) eller på [sms/signal](sms:+4526809424).
+      Hvis du har lyst til at hjælpe, kan du kontakte [Rasmus Malver](https://twitter.com/rasmusmalver) på [Twitter](https://twitter.com/rasmusmalver) eller på [sms/signal](sms:+4526809424). Du kan også følge foreningen på [Twitter](https://twitter.com/ulovliglogning). Eller skrive dig op til vores nyhedsbrev herunder.
 
       Økonomiske bidrag kan indbetales så anonymt som muligt på konto <span class="donate">5042 1165817 (IBAN DK6850420001165817 / SWIFT JYBADKKK)</span>. Vær sød at skrive <span class="donate">RASMA.0001</span> i beskedfeltet. Selvom vi har indsamlet 100.000 kr, og dermed har nået det første del-mål, har vi stadig brug for støtte.
 

_pages/redirect/redirect-fail-da.md

@@ -0,0 +1,8 @@
+---
+title: signup
+permalink: /redirect/fail/
+redirect: true
+lang: da
+layout: centered
+---
+Øv! noget gik galt! prøv igen, eller kontakt os på [Twitter](https://twitter.com/ulovliglogning)

_pages/redirect/redirect-fail-en.md

@@ -0,0 +1,8 @@
+---
+title: signup
+permalink: /redirect/fail/
+redirect: true
+lang: en
+layout: centered
+---
+Damn! something went wrong :( try again or contact us on [Twitter](https://twitter.com/ulovliglogning)

_pages/redirect/redirect-success-da.md

@@ -0,0 +1,8 @@
+---
+title: signup
+permalink: /redirect/success/
+redirect: true
+lang: da
+layout: centered
+---
+Tak! du er nu skrevet op til vores nyhedsbrev!

_pages/redirect/redirect-success-en.md

@@ -0,0 +1,8 @@
+---
+title: signup
+permalink: /redirect/success/
+redirect: true
+lang: en
+layout: centered
+---
+Thank you! You are now signed up for our newsletter!

_scss/base/_base.scss

@@ -15,6 +15,10 @@ footer {
     color: #AAA;
 }
 
+.hidden {
+    display: none !important;
+}
+
 .langSwitcher {
     display: inline-block;
     position: absolute;
@@ -32,9 +36,10 @@ footer {
     box-shadow: none;
     border-radius: 3px;
     margin-right: 5px;
+    box-shadow: inset 0 50px 0 rgba(0, 0, 0, 0.35);
 }
 .langSwitcher a.activeLang {
-    box-shadow: inset 0 50px 0 rgba(0, 0, 0, 0.35);
+    box-shadow: none;
 }
 .langSwitcher a:last-child{
     margin-right: 0;

_scss/module/_indexpage.scss

@@ -1,73 +1,106 @@
 section {
-	min-height: 100vh;
+    min-height: 100vh;
-	position: relative;
+    position: relative;
-	display: flex;
+    display: flex;
-	flex-direction: column;
+    flex-direction: column;
-	align-items: center;
+    align-items: center;
-	justify-content: center;
+    justify-content: center;
 
-	background-color: $background-primary;
+    background-color: $background-primary;
-	background-image: linear-gradient(
+    background-image: linear-gradient(
-		to left bottom, 
+        to left bottom, 
-		$background-primary 49%, 
+        $background-primary 49%, 
-		$background-alternative 50%
+        $background-alternative 50%
-	);
+    );
-	background-size: 100% 30px;
+    background-size: 100% 30px;
-	background-repeat: no-repeat;
+    background-repeat: no-repeat;
-	background-position: bottom;
+    background-position: bottom;
 
-	&:nth-of-type(even) {
+    &:nth-of-type(even) {
-		background-color: $background-alternative;
+        background-color: $background-alternative;
-		background-image: linear-gradient(
+        background-image: linear-gradient(
-			to left bottom, 
+            to left bottom, 
-			$background-alternative 49%, 
+            $background-alternative 49%, 
-			$background-primary 50%
+            $background-primary 50%
-		);
+        );
-	}
+    }
-	&:last-of-type {
+    &:last-of-type {
-		background-image: none;
+        background-image: none;
-	}
+    }
+}
+
+
+.cta{display:none;}
+@media screen and (min-width: 1200px) and (orientation:landscape){
+    #intro{position:relative;}
+    .cta{display:inline;position:absolute;left:5%;bottom:15%;
+    height:auto;width:200px;box-shadow:none;}
+    .ctaTxt{display:none;}
+}
+
+
+.signup {
+    input {
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-radius: 0;
+        border: none;
+        padding: 5px 0;
+        height: 2rem;
+        text-align: center;
+        font-size: 1rem;
+    }
+    input[type="text"] {
+
+    }
+    input[type="submit"] {
+        cursor: pointer;
+        color: #FFF;
+        background: darken($background-alternative, 20);
+        border-bottom: 2px solid darken($background-alternative, 25);
+    }
 }
 
 section {
-	.paragraphs {
+    .paragraphs {
-		margin-bottom: 3rem;
+        margin-bottom: 3rem;
-		h3, p {
+        h3, p {
-			max-width: 600px;
+            max-width: 600px;
-			font-family: 'Roboto', sans-serif;
+            font-family: 'Roboto', sans-serif;
-		}
+        }
-		p + h3 {
+        p + h3 {
-			margin-top: 50px;
+            margin-top: 50px;
-		}
+        }
-	}
+    }
 
-	&#intro {
+    &#intro {
-		h1 {
+        h1 {
-			margin: 8rem 0 3rem;
+            margin: 8rem 0 3rem;
-		}
+        }
-	}
+    }
 
-	&#faq {
+    &#faq {
-		.paragraphs {
+        .paragraphs {
-			column-count: unset;
+            column-count: unset;
-		}
+        }
-		ul {
+        ul {
-			list-style-type: none;
+            list-style-type: none;
-			li {
+            li {
-				display: block;
+                display: block;
-				margin: 4rem 300px 0 0;
+                margin: 4rem 300px 0 0;
-				&:nth-child(even) {
+                &:nth-child(even) {
-					margin: 4rem 0 0 300px;
+                    margin: 4rem 0 0 300px;
-				}
+                }
-				@media screen and (max-width: $screen-phone) {
+                @media screen and (max-width: $screen-phone) {
-					&, &:nth-child(even) {
+                    &, &:nth-child(even) {
-						margin: 4rem 0 0;
+                        margin: 4rem 0 0;
-					}
+                    }
-				}
+                }
-				&:first-child {
+                &:first-child {
-					margin-top: 0;
+                    margin-top: 0;
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
 }

dynamic/signup/index.php

@@ -0,0 +1,25 @@
+<?php
+
+$email = $_POST["email"];
+$lang = $_POST["lang"];
+
+ $to = "ulovliglogning@protonmail.com";
+ $subject = "signup";
+ $body = "email: ".$email."\nlang: ".$lang;
+ if (mail($to, $subject, $body)) {
+	if ($lang == "da") {
+		$redirect = "https://ulovliglogning.dk/redirect/success/"
+	} else {
+	 	$redirect = "https://ulovliglogning.dk/".$lang."/redirect/success/"
+	}
+ } else {
+	if ($lang == "da") {
+		$redirect = "https://ulovliglogning.dk/redirect/fail/"
+	} else {
+	 	$redirect = "https://ulovliglogning.dk/".$lang."/redirect/fail/"
+	}
+ }
+
+ header('Location: '.$redirect);
+ die();
+ ?>