index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

{% extends "snippets/layout.html" %}

{% block title '¯\\_(ツ)_/¯ | Maximilian Möhring' %}

{% 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;
		}

		.box {
			border: white solid 1px;
			padding: 1em;
		}
{% 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="shadow box">
		Index

		<ul class="list-unstyled">
{% for subtitle, args in faces %}
			<li>
				# <a href="#{{ subtitle }}">{{ subtitle }}</a>
			</li>
{% endfor %}
		</ul>
	</div>
	<div class="row text-center faces-start">

{% for subtitle, args in faces %}
	<h2 class="col-12 float-left subtitle" id="{{ 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 %}