From 3d156367bfb9df16d71d317e9905488d77041ec7 Mon Sep 17 00:00:00 2001
From: Michele Azzolari <michele@azzolari.it>
Date: Wed, 10 Oct 2018 10:23:30 +0200
Subject: [PATCH] Add new typewriter template, #2

---
 template/typewriter.html | 91 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 template/typewriter.html
diff --git a/template/typewriter.html b/template/typewriter.html
new file mode 100644
index 0000000..5dc4b09
--- /dev/null
+++ b/template/typewriter.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- Very simple webpage that scales decently -->
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<title>rep_SNAME</title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<style type="text/css">
+		html, body {
+			height: 100%;
+		}
+		body {
+			margin: 0;
+            background-color: #FFFFFF;
+            color: #000000;
+		}
+		.flex-container {
+			height: 100%;
+			padding: 0;
+			margin: 0;
+			display: -webkit-box;
+			display: -moz-box;
+			display: -ms-flexbox;
+			display: -webkit-flex;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.row {
+			width: auto;
+		}
+		.flex-item {
+			padding: 5px;
+			margin: 10px;
+			line-height: 20px;
+			font-weight: bold;
+			font-size: 2em;
+			text-align: left;
+		}
+        #content {
+            visibility: hidden;
+        }
+	</style>
+	
+</head>
+<body>
+<div class="flex-container">
+	<div class="row">
+		<div class="flex-item">
+            <div id="content">
+			    <span id="sitename">rep_SNAME</span> is being worked on by <span id="devname">rep_DEVNAME!</span>
+            </div>
+            <div id="paper"></div>
+		</div>
+	</div>
+</div>
+<script>
+
+    const init = function() {
+        let pos = 0;
+        let on = false;
+
+        const paper = document.getElementById('paper');
+
+        const typechar = function() {
+            const content = document.getElementById('content');
+            const text = content.textContent.trim();
+            let wait = false;
+            paper.innerText = text.substr(0, pos) + (on ? '_' : '');
+            if(on) {
+                on = false;
+                pos++;
+                if(pos > text.length) {
+                    wait = true;
+                    pos = 0;
+                }
+            } else {
+                on = true;
+            }
+            setTimeout(function() {
+                typechar();
+            }, wait ? 1500 : 150);
+        };
+        typechar();
+    };
+    init();
+</script>
+</body>
+</html>
\ No newline at end of file
