Adds captcha to the contact form.

2 files changed, 48 insertions, 1 deletions

diff --git a/static/captcha.js b/static/captcha.js
new file mode 100644
index 0000000..6b895bb
--- /dev/null
+++ b/static/captcha.js
@@ -0,0 +1,31 @@
+function loadJSON(path, success, error)
+{
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function()
+    {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                if (success)
+                    success(JSON.parse(xhr.responseText));
+            } else {
+                if (error)
+                    error(xhr);
+            }
+        }
+    };
+    xhr.open("GET", path, true);
+    xhr.send();
+};
+loadJSON('http://127.0.0.1:3333/json/newcaptcha',
+	 function(data){
+		 console.log("success", data);
+		 var captcha = document.getElementById('captcha-img');
+		 captcha.src = "http://127.0.0.1:3333/captcha/" + data.captcha_id + ".png";
+		 var captcha_input = document.getElementById('captcha-id');
+		 captcha_input.value = data.captcha_id; 
+	},
+	function(data) {
+		 console.log("error", data);
+		console.log(data);
+	}
+);
diff --git a/static/custom.css b/static/custom.css
index 807ab55..5dbbc64 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -100,6 +100,15 @@ a:hover {
 .margin-top-small {
 	margin-top: 10px;
 }
+.margin-left{
+	margin-left: 20px;
+}
+.margin-left-small {
+	margin-left: 10px;
+}
+.margin-left-extra-small {
+	margin-left: 5px;
+}
 
 /* Für projects/, damit der Text nicht überlappt, aber nah beieinander steht. */
 @media (min-width: 755px) {
@@ -141,8 +150,9 @@ a:hover {
 	color: #1f1f1f !important;
         text-shadow: 0 0 1px #1f1f1f;
         transition: text-shadow 1s;
-  */
 	color: #3f3f3f !important;
+  */
+	color: #1f1f1f !important;
 }
 .contactform-button:hover {
 	text-decoration: underline;
@@ -167,3 +177,9 @@ select:focus {
 .hp {
 	display: none;
 }
+#captcha-img {
+	background-color: #efefef;
+	background: #efefef;
+	/*box-shadow: 0 0 2px #ddd !important;*/
+	border-radius: 4px;
+}