blob: 8a55a023aa08cc5f7eaccef7965a9c2755877812 (
plain)
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
|
{% 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 %}
|
