-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
151 lines (140 loc) · 6.76 KB
/
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
140
141
142
143
144
145
146
147
148
149
150
151
<html>
<head>
<title>Werner Herzog Valentines</title>
<style type="text/css">
body {
display: flex;
align-items:center;
background-color:pink;
flex-flow: row-wrap;
justify-content:center;
}
#image{
order: 0;
}
#valentine{
order: 1;
background-color: #D27FA9;
padding: 1.5em;
margin: .15em;
}
h1{
font-style: italic;
font-size: 3em;
}
a{
text-decoration: none;
color:rebeccapurple;
background-color: #ccc;
padding: .1em;
}
</style>
<!-- probably don't need to use jquery idk idk -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="html2canvas.js"></script>
<script src="FileSaver.min.js"></script>
<script type="text/javascript">
message = []
function newValentine(){
v = document.getElementById('valentine')
if (v) {document.body.removeChild(v)};
t = document.createElement('h1')
t.innerHTML = message[Math.floor(Math.random() * message.length)]
footer = document.createElement('div')
footer.id = 'footer'
footer.innerHTML = '<a href="javascript:saveValentine()">♥ Save This Valentine</a> <a href="javascript:newValentine()">↻ Show Me Another Valentine</a> <a href="https://github.com/lifewinning/wernerherzogvalentines/blob/gh-pages/valentines.txt">♥ Contribute Valentines</a>'
val = document.createElement('div')
val.id = 'valentine'
val.appendChild(t)
val.appendChild(footer)
document.body.appendChild(val)
}
function saveValentine(){
$('#footer').hide()
html2canvas(document.body, {
onrendered: function(canvas) {
img=canvas.toDataURL("image/png");
var data = atob( img.substring( "data:image/png;base64,".length ) ),
dataArray = new Uint8Array(data.length);
for( var i = 0, len = data.length; i < len; ++i ) {
dataArray[i] = data.charCodeAt(i);
}
var blob = new Blob( [ dataArray.buffer ], {type: "image/png"} );
saveAs(blob, "valentine.png")
}
});
$('#footer').show()
}
$(document).ready(function(){
$.get('valentines.txt', function(v){
message = v.trim().split("\n")
newValentine()
})
})
</script>
</head>
<body>
<noscript>
<!-- cli browser support -->
I kind of love you, but you frighten me more than any other animal, valentine.
7O8O88DOOOZZ8ZOO$OO$O$$ODOZZ$$OO8888DDN88D7Z7OZ8DDDNNNND8DDDDNNNNN8ODDDZ8OONNDZZ
O8DDOO8OOO7$Z$OOOODD88OOZD8O88O8DN8O8DD88I78OO88DDNDDOZD8DDDNDDOD8O8ZOOODNDD88NO
8NZZDOZ$OOZOOZ8$8Z$$ZOZ78O8OD8888O8NDDDD8Z88O8DDN8DD88ODDOZ8D8DNNDD8IODDDDNDDNNN
8Z77ZDZO$7ZZO877IZOD78DO8DDDDDD88DNDDNND8D88DNNN8D8ZZO8DD8DDND8NDDODDN8NNDND7777
$DOZ8N$O$O8$7$Z7IZOO888DDNNI77ID8DNNNNO8DD8$88N87Z8OZ8N777D$77$$NDDDNNNNND$$Z?$7
OOOO7$$8ODDZDZ$OOOOO77II8D77III7O8DDND8DDZI?7+?I++?8D87$$777$$$$NDDN8D8N88$Z7OOZ
Z8OOZD8Z8DD8NOOODD??I???II7777777NDDDDO+?7$$?I$+?7?7I8Z$$$$77$$$NNDD8NNNNNNON8OD
D$Z8$Z$8D8DOD8DOD8I77IIIII7I777+?77$DN=$ODDNNDNNNNOO7$DI$77$$778888DNNNNNNZ8D8ND
OO8ZZD8OD8ODNN8DZD777I777I7??+???777??7??NNNN7?==~888O$DN7$$7I8888OODNNNND88DDDN
$$Z$8DZ8D8ODD8DD88D77IIIII+++?++7I7I?7NNNNO?~~~~:~~DNNDZ8OO888888O88NNMNNNN8DDNN
ZI$Z88DDO8DD88OZ8ZOOII?IIII???+77$7I8ONNDD?+==~~~~~NNNNN8OOO888OOOOOO888888DD8ND
O$$OO8D8NO8DDD8DD88O8O?IIIII7+777$O8NNNNNOI=~~~~~~~~NN88DDD888888O888O8888NNND8D
NOOZ88DN$ZZO$Z8N7OO8OOOO8IIIODDZ?INDNNNDNNI=?ND7?NNNNNNDD88N8888O8IIID8888D8DN8N
Z7$O88N$$D$Z7O888OO88O8888888N88DNDDNNNNN8ZO8I7+~=?~~NODD888OOOOOIIIIIIIII7NND8N
78DDNNN$O8DD88888O88OO88888887INDNDNNNNNN$?=~:~=~~+~=888888DOOOZOIIIIIII777INDDD
O8ND8ZI8NND88O88O8888OO8O88O7I777888NNNNN87?++ONND7OI8D8DDDDDOOOOZIIIII77I7MNDDN
8DNZZDZ88DNOZOO8ZO888Z$O77777777788OONNMD8$IIIDNNNNN?DD88DOI7III877?777777MNNN8D
O8$O$DODDNND8Z8ZZZO88ZO$IIII7777IOO8ODNNND$7I?87I?+I7ND8O$$8II7I77$$?777NDNNNNDN
ZZZ7$$Z8DND8NOZZOZOOOZOZ?III7I77O8OOOOZODNZ8ZZ$7?++?=:NNNNDND8Z+7777$MDNNNNNNDNN
7$Z8OZNODON8DOOOOOZZOZZZZOZ?II7888Z88Z,,:N7OO8DZ$$O$N+ZNNNNNNND8ZI77D8ZO8NNNNNDD
ZDD8DDDIZ$88DOOOZZOOOOOOOZOZ8O8O88ZZZ,,,ID7O$ZODDO77$=:NNNNNNNNDD8?DD8DNNNNNNDO8
88DDD888DD8DD8OOOOOOOOOOOOOZ88OO8OOD+,,,~887ZO88D8ZZ7~:NNNMNNNNNND88NNNNNNNNDZ8D
8DNNNDNDNNDDDD8OOOZ$7ZZOOOONN888O8+IZ,,,,~$OZZO8D8$~+NNNNNNNNNNNNNND8=NNNNNDD8NN
==??DONNN888Z77ZOZI7I7ZOOD8DD8DD8?$OZ,,,,,++8DO88D?=NNNMNMNNNNNMNNNNN87NNNNNNDNN
+++++??III?II+?I???IIII$7I7$7OO8ZNZ88,,,:,,O??OOO$ONNNNNNNNMNNMMNNNNNDD$IDDDDNNN
~:~~::~~++==~~++++=++I?++?77$$$IDDDNDNNN,,,,::=?7=NNNNNNNMNMNMMMNNNNNNNOO8O87I$8
::~~~~::+========++====++++++??Z8DNNNNNNNZNNNNNN=~NNNNMNNMNNMMNDNNNNNNN8+~ZZ7777
,:::~~~:?7=======++=======++==+8DNNNNNNNNNNNNNNN7NNNNNNNNMNNMMNNNNNNNNN?~~:IIIII
::::?????II======+=++=++=++=+?=DDNNNNNNNNNNNNNNNONNNNNNNMNMMMMNMNNNNNDI+=~~=II?I
:,,:??????I==~~~~,,:,,:::::::==NDNNNNNNNNNNNNNMNNNNNMMNNNNMMMMMN7MMNZI?+==~~=+??
==~~I?I???.,,~~~.,,,,~~=::~::::DNNNNNNNNNNNMNMNNNNNNNMNNMMMMNMNNZ$$$Z7II+=~~~+II
:==?++?II~=~~~~=~:,,,.,::~~==~~DNNNNNMNNMMMNMNNNNNNNNNMMMMMMMMMN===+=D87?=~:~:~~
????I++=III?I???:=?I~~?I~I~~~==DDNNNNMMMNMNMNNNNNNMMMMMNNMNNMMNN?II?I7INZ+~:~:::
=+I??II?+=~===~~~~=:+:~:~~=?I?+8DDNNNNNNNMMMNMNNMMMMNMMMMMMMMMMN=+======Z7=~~~::
:::=~~~:::~::~~:+???=~:~+?III++ODNDNNNNNNNNNNNMNMMNNNNMMNMMMMMMNI$7IIIIIZZ+=~::~
?+???+??=+~=~~~~::~~~++=+===+?$ND8NNNNNNNNMMMNNNNNNMMNNNNNNNNNNN?~~=+=~=+87I+~~~
=~==+???+?=+=++==?I??????IIIIIIIZ8NNNNNNNNNNNNNNNNNNNNNNNNMNNMNN8777?II??8O7?=~~
+==+???=+++???++?+++=??+I??+?IIIIZZI?II$NNNNNNNNNNNNNNNNNNNNMNNND777777I?7DZI=~~
==++=+=?+?++=?+++++=?=+?+?I????=?$$$77ZZNNNNNNNNNNNMNNNNNMMMNNMNN777777III8Z7?=~
~+=+++=+=~==+++~+=?+~++?+?==?+=?7777$I?ZNNNNNNNNNNNNNMMMNMMMNNNZZ7$I$I7IIIIDZ7=~
:=~=++++?+===+==++++++?++O?Z~=OII$Z7?+==+++NNONNNNNNNNNNNNNNNNDNNN8N7IIIII7O8$++
=:~=~=+=~======:+==~~==ZNDZ7?OZ77IOZI+==~+=?IDDDDD8DDZOO8OOOO8ZDDNNN87IIII?ID77=
::~~+~=~~+~:~====~=+==DONINNDN7+ONIZOI+====+~==$O888DODND88OZ$$II?7III??+++?ZZ??
::::~~~~~:,:=++:=~+8DODONNDN~NDN:~=?O8O7I?+==~~::::OZOZZZZ$$7$7777?+????????7O7?
,,:::::~:,+~=~:::8O,$87NNMNM?$::~===+?$NNN8ZII=:::::::OOZ$777I?II?I?+=+?+++++$?+
,,,:::::,,,O$~:Z7D7N?NN+N=NOO:::~==++?IZDNMMN8?~~::::::~OOZ$$77I7III??+==?+++Z??
,:~::::::::~~ZO$8N+ZD~D:7N8~N:~~~==++??78NNNNNN?~~~:::::~:OOZ$7$7I+II7+~:,,:=?=+
,,,::,,,,,,,=:I8DN$D?7+ONDNI:~~~~+=+7$ZO8D8NNNNN=~~~:~~~:+,IZZOZZ$IZ~:::,::,,,:,
,,,,,,,,,,,,,D8DD8ZD,DI+?~?~~=~++??I7Z88ZNNNNMNDO~~~~+::~:NNDO$ZOZZ~~:,,,,,,,,,,
,,,,:,,,,,,,,=,,:,~ZDO:N~:+=+??I7I$777$7DDNNN88NDN~?~:=:~~~NNM8ZZZ8?~=,:,,~=:::=
,,,,,,,,,,,,,,ZD7$8D$NN:I==7$$$Z7O$ZO778DD8ODNNNNN?=8=??=8+:NNNNOOZZ=~=:D?++=+?=
,,,,,,,,,,,,,=I8DNNNNZNNDIO7O7$8ZO88DZON8DNNNNNNDNN8INIOZ+N:MNNNNDNNZ$II???+++~+
,,,:,,,,,,,,,:$?ZNNN88DNN8+78$Z8O8DODDNNNNNNNNNNNNNDNZ8NODINNNNNNDDND8$7IZ7$7II+
,,,,,,,,,,:::~8OO8NNZODN8+IZZ$ZO8OD8NNNNNNNNNNNNNNDNDNNDDNNNNNNNNN8DDDZ8DZ7DOZ$$
</noscript>
<div id ="image">
<img src="werner.jpg">
</div>
<div id="valentine"></div>
</body>
</html>