Inline page in website

1 files changed, 123 insertions, 0 deletions

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8a55a02
--- /dev/null
+++ b/index.html
@@ -0,0 +1,123 @@
+{% extends "snippets/layout.html" %}
+
+{% block title '¯\\_(ツ)_/¯ | maximilianmoehring.com' %}
+
+{% block css %}
+		html {
+			width: 100%;
+		}
+		.main {
+		}
+		h2 {
+			margin-top: 3rem;
+			margin-bottom: 3rem;
+		}
+		hr {
+			margin-top: 1rem;
+			border-top-color: #f07206 !important;
+			width: 50%;
+		}
+		.hidden {
+			visibility: hidden;
+		}
+		.face {
+			font-size: 2rem;
+			margin-top: 0.5rem;
+			margin-bottom: 0.5rem;
+			color: #e1e1e1;
+		}
+		@media (max-width: 768px ) {
+				.face {
+					padding-right: 0px !important;
+					padding-left: 0px !important;
+					font-size: 1.5rem;
+					margin-top: 0.5rem;
+					margin-bottom: 0.5rem;
+				}
+				.face-col {
+					padding-right: 1px;
+					padding-left: 1px;
+				}
+		}
+		.faces-start {
+			margin-left: 0;
+		}
+		#faces-footer {
+			position: fixed;
+			bottom: 0;
+			width: 100%;
+			height: 60px; /* Set the fixed height of the footer here */
+			line-height: 60px; /* Vertically center the text there */
+			/*
+			background-color: #f5f5f5;
+			background-color: #67e567;
+			*/
+			background-color: #90dd90;
+			color: #008000;
+		}
+
+		.btn-outline-light {
+			border-color: #262626;
+		}
+{% endblock %}
+
+{% block main %}
+
+<div class="container">
+
+	<div class="flavor-text">
+		<h1>Best faces on the net</h1>
+		<em>Search, find and click to copy. ヾ(⌐■_■)ノ♪</em>
+	</div>
+	<div class="row text-center faces-start">
+
+{% for subtitle, args in faces %}
+	<h2 class="col-12 float-left subtitle">{{ subtitle }}
+	<hr>
+	</h2>
+	<br>
+
+	{% for face in args %}
+		<div class="col-12 col-lg-6 text-center face-col">
+			<button class="btn btn-outline-light face">{{ face }}</button>
+		</div>
+	{% endfor %}
+{% endfor %}
+
+	</div>
+</div>
+
+<div id="faces-footer" class="hidden">
+	<div class="container text-center">
+	Copied that!
+	</div>
+</div>
+
+<script>
+	function copy(that){
+		var inp = document.createElement('input');
+		document.body.appendChild(inp)
+		inp.value = that;
+		inp.select();
+		document.execCommand('copy',false);
+		console.log("Copied: " + inp.value);
+		inp.remove();
+		successfull_copied();
+	};
+	function successfull_copied() {
+		var footer = document.getElementById('faces-footer');
+		footer.classList.remove('hidden');
+		setTimeout(function(){ document.getElementById('faces-footer').classList.add('hidden'); }, 3000);
+	};
+	window.addEventListener("load",function() {
+		var faces = document.getElementsByClassName('face');
+		for ( var i = 0; i<faces.length; i++) {
+			faces[i].addEventListener("click", function(e){
+				console.log(e.target.textContent);
+				copy(e.target.textContent);
+			});
+		}
+	});
+</script>
+
+{% endblock %}