-
Notifications
You must be signed in to change notification settings - Fork 0
/
time.html
262 lines (236 loc) · 29.1 KB
/
time.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>𝒯𝒾𝒸𝓀</title>
<link id="favicon" rel="icon" type="image/svg" href='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><style> .letter { font: bold 50px sans-serif; fill: black; paint-order: stroke; stroke: white; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; text-anchor:middle } </style><text x="32" y="48" class="letter">⏳</text></svg>' />
<style> /* span#t1, span#t2{ text-decoration: line-through; } */
body { --nowInPx : 0; --nowInDeg : 0; --nowInPer : 0; --lineLength:0 }
div#lost { display: inline-block; width: 450px; vertical-align: top; margin: 5px; } /* iframe {display: none;} */
div#stuff { display: inline-block; width: 450px; vertical-align: top; margin: 5px; font-family: monospace; overflow: hidden; }
div#lifeLine { display: inline-block; width: 500px; height: 25px; vertical-align: top; margin: 5px 0 0 0; font-family: monospace; } div#lifeLine div { display: inline-block; height: 25px; }
div#lifeLine div.ll0 { background-color: #78B159; } div#lifeLine div.ll1 { background-color: red; } div#lifeLine div.ll2 { background-color: #AA8ED6; } div#lifeLine div.ll3 { background-color: black; }
div#wheeloflife { display: inline-block; width: 500px; height: 500px; vertical-align: top; margin: 5px 0 0 0; font-family: monospace; border-radius: 50%; text-align: center; } /*mask: radial-gradient(farthest-side,#0000 90%, #000 95%);*/
div#inWheel { display: inline-block; margin: 5%; width:90%; height:90%; border-radius: 50%; background-color: white; font-size:55px; color:#AA8ED6; line-height : calc( var(--lineLength) * 90 / 100 ); }
div#squareoffortune { display: inline-block; width: var(--lineLength); height: var(--lineLength); vertical-align: top; margin: 5px 0 0 0; font-family: monospace; background : conic-gradient( red 0% 14.29%, orange 14.29% 28.57%, yellow 28.57% 42.86%, green 42.86% 57.14%, cyan 57.14% 71.43%, blue 71.43% 85.71%, violet 85.71% 100.00% ); }
div.okSpin { animation: spin 1s linear 0s infinite; border-radius: 50%; mask: radial-gradient(farthest-side,#0000 90%, #000 95%); } /*background-clip: text; background-color: purple; color:transparent;*/
@keyframes spin {
0.00% { background : conic-gradient( red 000.00% 014.29%, orange 014.29% 028.57%, yellow 028.57% 042.86%, green 042.86% 057.14%, cyan 057.14% 071.43%, blue 071.43% 085.71%, violet 085.71% 100.00% ) }
4.00% { background : conic-gradient( violet 0% 003.99%, red 004.00% 018.29%, orange 018.29% 032.57%, yellow 032.57% 046.86%, green 046.86% 061.14%, cyan 061.14% 075.43%, blue 075.43% 089.71%, violet 089.71% 100% ) }
8.00% { background : conic-gradient( violet 0% 007.99%, red 008.00% 022.29%, orange 022.29% 036.57%, yellow 036.57% 050.86%, green 050.86% 065.14%, cyan 065.14% 079.43%, blue 079.43% 093.71%, violet 093.71% 100% ) }
12.00% { background : conic-gradient( violet 0% 011.99%, red 012.00% 026.29%, orange 026.29% 040.57%, yellow 040.57% 054.86%, green 054.86% 069.14%, cyan 069.14% 083.43%, blue 083.43% 097.71%, violet 097.71% 100% ) }
16.00% { background : conic-gradient( blue 0% 001.70%, violet 001.70% 015.99%, red 016.00% 030.29%, orange 030.29% 044.57%, yellow 044.57% 058.86%, green 058.86% 073.14%, cyan 073.14% 087.43%, blue 087.43% 100% ) }
20.00% { background : conic-gradient( blue 0% 005.70%, violet 005.70% 019.99%, red 020.00% 034.29%, orange 034.29% 048.57%, yellow 048.57% 062.86%, green 062.86% 077.14%, cyan 077.14% 091.43%, blue 091.43% 100% ) }
24.00% { background : conic-gradient( blue 0% 009.70%, violet 009.70% 023.99%, red 024.00% 038.29%, orange 038.29% 052.57%, yellow 052.57% 066.86%, green 066.86% 081.14%, cyan 081.14% 095.43%, blue 095.43% 100% ) }
28.00% { background : conic-gradient( blue 0% 013.70%, violet 013.70% 027.99%, red 028.00% 042.29%, orange 042.29% 056.57%, yellow 056.57% 070.86%, green 070.86% 085.14%, cyan 085.14% 099.43%, blue 099.43% 100% ) }
32.00% { background : conic-gradient( cyan 0% 003.42%, blue 003.42% 017.70%, violet 017.70% 031.99%, red 032.00% 046.29%, orange 046.29% 060.57%, yellow 060.57% 074.86%, green 074.86% 089.14%, cyan 089.14% 100% ) }
36.00% { background : conic-gradient( cyan 0% 007.42%, blue 007.42% 021.70%, violet 021.70% 035.99%, red 036.00% 050.29%, orange 050.29% 064.57%, yellow 064.57% 078.86%, green 078.86% 093.14%, cyan 093.14% 100% ) }
40.00% { background : conic-gradient( cyan 0% 011.42%, blue 011.42% 025.70%, violet 025.70% 039.99%, red 040.00% 054.29%, orange 054.29% 068.57%, yellow 068.57% 082.86%, green 082.86% 097.14%, cyan 097.14% 100% ) }
44.00% { background : conic-gradient( green 0% 001.13%, cyan 001.13% 015.42%, blue 015.42% 029.70%, violet 029.70% 043.99%, red 044.00% 058.29%, orange 058.29% 072.57%, yellow 072.57% 086.86%, green 086.86% 100% ) }
48.00% { background : conic-gradient( green 0% 005.13%, cyan 005.13% 019.42%, blue 019.42% 033.70%, violet 033.70% 047.99%, red 048.00% 062.29%, orange 062.29% 076.57%, yellow 076.57% 090.86%, green 090.86% 100% ) }
52.00% { background : conic-gradient( green 0% 009.13%, cyan 009.13% 023.42%, blue 023.42% 037.70%, violet 037.70% 051.99%, red 052.00% 066.29%, orange 066.29% 080.57%, yellow 080.57% 094.86%, green 094.86% 100% ) }
56.00% { background : conic-gradient( green 0% 013.13%, cyan 013.13% 027.42%, blue 027.42% 041.70%, violet 041.70% 055.99%, red 056.00% 070.29%, orange 070.29% 084.57%, yellow 084.57% 098.86%, green 098.86% 100% ) }
60.00% { background : conic-gradient( yellow 0% 002.85%, green 002.85% 017.13%, cyan 017.13% 031.42%, blue 031.42% 045.70%, violet 045.70% 059.99%, red 060.00% 074.29%, orange 074.29% 088.57%, yellow 088.57% 100% ) }
64.00% { background : conic-gradient( yellow 0% 006.85%, green 006.85% 021.13%, cyan 021.13% 035.42%, blue 035.42% 049.70%, violet 049.70% 063.99%, red 064.00% 078.29%, orange 078.29% 092.57%, yellow 092.57% 100% ) }
68.00% { background : conic-gradient( yellow 0% 010.85%, green 010.85% 025.13%, cyan 025.13% 039.42%, blue 039.42% 053.70%, violet 053.70% 067.99%, red 068.00% 082.29%, orange 082.29% 096.57%, yellow 096.57% 100% ) }
72.00% { background : conic-gradient( orange 0% 000.56%, yellow 000.56% 014.85%, green 014.85% 029.13%, cyan 029.13% 043.42%, blue 043.42% 057.70%, violet 057.70% 071.99%, red 072.00% 086.29%, orange 086.29% 100% ) }
76.00% { background : conic-gradient( orange 0% 004.56%, yellow 004.56% 018.85%, green 018.85% 033.13%, cyan 033.13% 047.42%, blue 047.42% 061.70%, violet 061.70% 075.99%, red 076.00% 090.29%, orange 090.29% 100% ) }
80.00% { background : conic-gradient( orange 0% 008.56%, yellow 008.56% 022.85%, green 022.85% 037.13%, cyan 037.13% 051.42%, blue 051.42% 065.70%, violet 065.70% 079.99%, red 080.00% 094.29%, orange 094.29% 100% ) }
84.00% { background : conic-gradient( orange 0% 012.56%, yellow 012.56% 026.85%, green 026.85% 041.13%, cyan 041.13% 055.42%, blue 055.42% 069.70%, violet 069.70% 083.99%, red 084.00% 098.29%, orange 098.29% 100% ) }
88.00% { background : conic-gradient( red 0% 002.28%, orange 002.28% 016.56%, yellow 016.56% 030.85%, green 030.85% 045.13%, cyan 045.13% 059.42%, blue 059.42% 073.70%, violet 073.70% 087.99%, red 088.00% 100% ) }
92.00% { background : conic-gradient( red 0% 006.28%, orange 006.28% 020.56%, yellow 020.56% 034.85%, green 034.85% 049.13%, cyan 049.13% 063.42%, blue 063.42% 077.70%, violet 077.70% 091.99%, red 092.00% 100% ) }
96.00% { background : conic-gradient( red 0% 010.28%, orange 010.28% 024.56%, yellow 024.56% 038.85%, green 038.85% 053.13%, cyan 053.13% 067.42%, blue 067.42% 081.70%, violet 081.70% 095.99%, red 096.00% 100% ) }
100.00% { background : conic-gradient( red 000.00% 014.29%, orange 014.29% 028.57%, yellow 028.57% 042.86%, green 042.86% 057.14%, cyan 057.14% 071.43%, blue 071.43% 085.71%, violet 085.71% 100.00% ) }
}
div.pouet { display: inline-block; text-align: justify; width: 340px; vertical-align: top; margin: 5px; }
div.pouet div.b { font-weight: bold; text-decoration: underline; }
div.pouet div.d { font-style: italic; text-align: center; font-weight: bold; }
div.pouet div.r { text-align: right; }
</style>
<script type="text/javascript">
var rainbow = [ [ 0, 0, 0 ], [ 255, 0, 0 ], [ 255, 255, 0 ], [ 0, 255, 0 ], [ 0, 255, 255 ], [ 0, 0, 255 ], [ 0, 0, 0 ] ], lineLength = 420;
// first contact first loss first comeback second loss second comeback third loss
var stamps = [ 1569775077050, 1579089209296, 1586350342726, 1594062904960, 1649687400151, 1675717795701, 1689253226000 ], endStamp = 1766491200000, pxStep = ( ( endStamp - stamps[0] ) / lineLength ), degStep = ( ( endStamp - stamps[0] ) / 360. ), perStep = ( ( endStamp - stamps[0] ) / 100. );
// 0 1 2 3 4 5 6
var longBS = "{ Paris } O, I am slain! ( Falls. ) [ If thou be merciful, ] Open the tomb, lay me with Juliet. ( Dies. ) / { Romeo } In faith, I will. Let me peruse this face. / Mercutio’s kinsman, noble County Paris! / What said my man, when my betossed soul / Did not attend him as we rode? I think / He told me Paris should have married Juliet. / Said he not so? Or did I dream it so? / Or am I mad, hearing him talk of Juliet, / To think it was so? O, give me thy hand, / One writ with me in sour misfortune’s book! / I’ll bury thee in a triumphant grave. / A grave? O no, a lantern, slaught’red youth; / For here lies Juliet, and her beauty makes / This vault a feasting presence full of light. / Death, lie thou there, by a dead man interr’d. / ( Laying Paris in the tomb. ) How oft when men are at the point of death / Have they been merry, which their keepers call / A lightning before death! O how may I / Call this a lightning? O my love, my wife, / Death, that hath suck’d the honey of thy breath, / Hath had no power yet upon thy beauty: / Thou art not conquer’d, beauty’s ensign yet / Is crimson in thy lips and in thy cheeks, / And death’s pale flag is not advanced there. / Tybalt, liest thou there in thy bloody sheet? / O, what more favor can I do to thee, / Than with that hand that cut thy youth in twain / To sunder his that was thine enemy? / Forgive me, cousin! Ah, dear Juliet, / Why art thou yet so fair? Shall I believe / That unsubstantial Death is amorous, / And that the lean abhorred monster keeps / Thee here in dark to be his paramour? / For fear of that, I still will stay with thee, / And never from this palace of dim night / Depart again. Here, here will I remain / With worms that are thy chambermaids; O, here / Will I set up my everlasting rest, / And shake the yoke of inauspicious stars / From this world-wearied flesh. Eyes, look your last! / Arms, take your last embrace! And, lips, O you / The doors of breath, seal with a righteous kiss / A dateless bargain to engrossing death! / Come, bitter conduct, come, unsavory guide! / Thou desperate pilot, now at once run on / The dashing rocks thy sea-sick weary bark! / Here’s to my love! ( Drinks. ) [ O true apothecary! ] / Thy drugs are quick. Thus with a kiss I die. / ( Dies. )";
var mediumBS = "{ Juliet } Go get thee hence, for I will not away. / What’s here? A cup clos’d in my true love’s hand? / Poison, I see, hath been his timeless end. / O churl, drunk all, and left no friendly drop / To help me after? I will kiss thy lips, / Haply some poison yet doth hang on them, / To make me die with a restorative. / Thy lips are warm. // { First Watchman } ( Within. ) [ Lead, boy, which way? ] / { Juliet } Yea, noise? Then I’ll be brief. O happy dagger, ( Taking Romeo’s dagger. ) This is thy sheath; ( Stabs herself. ) [there rust, and let me die.] ( Falls on Romeo’s body and dies. ) ";
var shortBS = "{ Capulet } O heavens! O wife, look how our daughter bleeds! / This dagger hath mista’en, for lo his house / Is empty on the back of Montague, / And it mis-sheathed in my daughter’s bosom!";
var subs = { "/" : "<br/>", "(" : '<div class="d">', ")" : "</div>", "[" : '<div class="r">', "]" : "</div>", "{" : '<div class="b">', "}" : "</div>" };
function yoda(f,p) { var r; try { r = f.apply(this,p); } catch(e) { return false; } return r; } // there is no fuckin try
function zfill(a,b=2) { return (''+a).padStart(b,"0"); } //(a.length < b) ? '0'+a : ''+a; | (a.length > b) ? a.slice(-1*b) :
function x(n) { return zfill( Math.floor( n + 0.5 ).toString(16) ); }
function grad(text,c,format=false) { if( c.length < 2 ) { return ( c.length == 1 ) ? '<span style="color:#' + x(c[0][0]) + x(c[0][1]) + x(c[0][2]) + ';">' + text + '</span>' : text; }
let stuff = text.split( "" ), step = stuff.length / ( c.length - 1 ), dc0, dc1, dc2;
if( format ){ for( let i = 0; i < stuff.length; ++i ) { if( subs[stuff[i]] !== undefined ){ stuff[i] = subs[stuff[i]]; } } }
for( var i = 0, k = 0, j = -1; i < stuff.length; ++i, ++k ) {
if( i % Math.floor( step + 0.5 ) == 0 ) { ++j; k = 0;
dc0 = ( ( c[ ( j + 1 ) % c.length ][0] - c[ j % c.length ][0] ) / step ); dc1 = ( ( c[ ( j + 1 ) % c.length ][1] - c[ j % c.length ][1] ) / step ); dc2 = ( ( c[ ( j + 1 ) % c.length ][2] - c[ j % c.length ][2] ) / step );
} stuff[i] = '<span style="color:#' + x( c[ j % c.length ][0] + dc0 * k ) + x( c[ j % c.length ][1] + dc1 * k ) + x( c[ j % c.length ][2] + dc2 * k ) + ';">' + stuff[i] + '</span>';
} return stuff.join('');
}
function format(text) { let stuff = text.split( "" );
for( let i = 0; i < stuff.length; ++i ) { if( subs[stuff[i]] !== undefined ){ stuff[i] = subs[stuff[i]]; } } return stuff.join('');
}
function fx(n) { return ( "000" + n.toFixed(2) ).slice(-6); }
function ms2hms(s,f=47,solid=false) {
let t = ( s < 0 ) ? -1 * s : s, m, r = [];
if( ( t >= 31556952000 || solid ) && ( f & 32 ) ) { m = ''+Math.floor( t / 31556952000 ); r.push( ( solid ? m.padStart( 1, "0" ) : m ) + " year" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 31556952000 ); }
if( ( t >= 2629746000 || solid ) && ( f & 16 ) ) { m = ''+Math.floor( t / 2629746000 ); r.push( ( solid ? m.padStart( 2, "0" ) : m ) + " month" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 2629746000 ); }
if( ( t >= 86400000 || solid ) && ( f & 8 ) ) { m = ''+Math.floor( t / 86400000 ); r.push( ( solid ? m.padStart( 3, "0" ) : m ) + " day" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 86400000 ); }
if( ( t >= 3600000 || solid ) && ( f & 4 ) ) { m = ''+Math.floor( t / 3600000 ); r.push( ( solid ? m.padStart( 2, "0" ) : m ) + " hour" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 3600000 ); }
if( ( t >= 60000 || solid ) && ( f & 2 ) ) { m = ''+Math.floor( t / 60000 ); r.push( ( solid ? m.padStart( 2, "0" ) : m ) + " minute" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 60000 ); }
if( ( t >= 1000 || solid ) && ( f & 1 ) ) { m = ''+Math.floor( t / 1000 ); r.push( ( solid ? m.padStart( 2, "0" ) : m ) + " second" + ( ( m > 1 ) ? "s" : ( solid ? " " : "" ) ) ); t -= ( m * 1000 ); }
return r.join(', ');
}
//function readable(v) { var r = ( v < 0 ) ? v + 4294967296 : v; return ( r > 562949953421312 ) ? ( r / 1125899906842624. ).toFixed(2) + " P": ( r > 549755813888 ) ? ( r / 1099511627776. ).toFixed(2) + " T": ( r > 536870912 ) ? ( r / 1073741824. ).toFixed(2) + " G": ( r > 524288 ) ? ( r / 1048576. ).toFixed(2) + " M": ( r > 512 ) ? ( r / 1024. ).toFixed(2) + " K": r; }
function init(){ let d = [ 1, 2, 4, 8, 16, 32 ], b = [ [], [], [], [] ]; //flip();
document.body.style.setProperty('--lineLength', lineLength + 'px' ); tick();
//for( let i = 0; i < d.length; ++i ) {
// b[0].push( grad( ms2hms( stamps[4] - stamps[0], d[i] ), rainbow ) );
// b[1].push( grad( ms2hms( stamps[4] - stamps[3], d[i] ), rainbow ) );
// b[2].push( grad( ms2hms( stamps[5] - stamps[4], d[i] ), rainbow ) );
// b[3].push( grad( ms2hms( stamps[6] - stamps[4], d[i] ), rainbow ) );
//}
//document.getElementById('breakdown').innerHTML = '<br/>' + [ b[0].join('<br/>'), b[1].join('<br/>'), b[2].join('<br/>'), b[3].join('<br/>') ].join('<br/><br/>') + '<br/>';
//document.getElementById('t1').innerHTML = grad( ms2hms( stamps[4] - stamps[7] ), rainbow ); // latest absence
//document.getElementById('t2').innerHTML = grad( ms2hms( stamps[5] - stamps[4] ), rainbow ); // until expire
//document.getElementById('t3').innerHTML = grad( ms2hms( stamps[4] - stamps[0] ), rainbow ); // total time
document.getElementById('t4').innerHTML = grad( ms2hms( ( stamps[1] - stamps[0] ) + ( stamps[3] - stamps[2] ) + ( stamps[5] - stamps[4] ), 47, true ), rainbow ); // effective time
//document.getElementById('t5').innerHTML = grad( ms2hms( ( stamps[2] - stamps[1] ) + ( stamps[6] - stamps[3] ) + ( stamps[4] - stamps[7] ) ), rainbow ); // lost time
document.getElementById('t9').innerHTML = grad( ms2hms( stamps[5] - stamps[4], 47, true ), rainbow ); // latest presence
if( window.location.href.split('#')[1] != "plain" ) {
document.getElementById('squareoffortune').classList.add("okSpin");
document.getElementById('t6').innerHTML = grad( longBS, rainbow, true ); //format(longBS);
document.getElementById('t7').innerHTML = grad( mediumBS, rainbow, true );//format(mediumBS);
document.getElementById('t8').innerHTML = grad( shortBS, rainbow, true ); //format(shortBS);
} drawTimeLine(); drawTimeCheese(); document.getElementById('lllabel').innerHTML = ms2hms(pxStep);
//setTimeout(tick, 1000);
}
function tick() { let now = stamps[6]/*Date.now()*/; document.body.style.setProperty('--nowInPx', sec2px( now ) + 'px' ); document.body.style.setProperty('--nowInDeg', sec2deg( now ) + 'deg' ); document.body.style.setProperty('--nowInPer', sec2per( now ) + '%' );
let tTotal = now - stamps[0], tLost = ( stamps[2] - stamps[1] ) + ( stamps[4] - stamps[3] ) + ( now - stamps[5] );
document.getElementById('t1').innerHTML = grad( ms2hms( now - stamps[ stamps.length - 1 ], 47, true ), rainbow ); // latest absence
document.getElementById('t2').innerHTML = grad( ms2hms( endStamp - now, 47, true ), rainbow ); // until expire
document.getElementById('t3').innerHTML = grad( ms2hms( tTotal, 47, true ), rainbow ); // total time
document.getElementById('t5').innerHTML = grad( ms2hms( tLost, 47, true ), rainbow ); // lost time
document.getElementById('inWheel').innerHTML = '' + ( ( tTotal - tLost ) / tTotal * 100 ).toFixed(7) + '%';
//setTimeout(tick, 1000); //console.log("ticked");
}
function randStuff(n) { r = ""; for( var i = 0; i < n; ++i ) { r += Math.floor( Math.random() * 10 ); } return r; }
function drawRectangle( parent, x1, y1, x2, y2, itemID = null, className = null, content = null, color = null, callback = null ) { //newLine.style.zIndex = 1;
let newLine = parent.appendChild(document.createElement('div')); newLine.id = ( itemID == null ) ? 'l' + randStuff(12) : itemID;
newLine.style.left = x1; newLine.style.top = y1; newLine.style.height = ( y2 - y1 ) + 'px'; newLine.style.width = ( x2 - x1 ) + 'px';
if( className != null ) { newLine.className = className; } else { newLine.style.position = "relative"; }
if( callback != null ) { newLine.addEventListener('click', callback, false); }
if( content != null ) { newLine.textContent = content; }
if( color != null ) { newLine.style.backgroundColor = color; }
return newLine;
}
function sec2px( sec ) { return Math.floor( ( sec - stamps[0] ) / pxStep ); }
function sec2deg( sec ){ return ( sec - stamps[0] ) / degStep; }
function sec2per( sec ){ return ( sec - stamps[0] ) / perStep; }
//function drawTimeLine() { let newLine; document.getElementById( 'lifeLine' ).style.width = lineLength + 'px';
// for( let i = 0; i < stamps.length - 1 ; ++i ) {
// newLine = document.getElementById( 'lifeLine' ).appendChild( document.createElement( 'div' ) ); newLine.id = 'll-' + i + '-' + ( i + 1 );
// newLine.className = 'll' + i%2; newLine.style.width = ( sec2px( stamps[i+1] ) - sec2px( stamps[i] ) ) + 'px';
// }
// newLine = document.getElementById( 'lifeLine' ).appendChild( document.createElement( 'div' ) ); newLine.id = 'll-' + ( stamps.length - 1 ) + '-now';
// newLine.className = 'll' + ( stamps.length - 1 )%2; newLine.style.width = 'calc( var(--nowInPx) - ' + sec2px( stamps[ stamps.length - 1 ] ) + 'px )';
//
// newLine = document.getElementById( 'lifeLine' ).appendChild( document.createElement( 'div' ) ); newLine.id = 'll-remaining';
// newLine.className = 'll3'; newLine.style.width = 'calc( ' + lineLength + 'px - var(--nowInPx) )';
//}
function drawTimeLine() { let colorMap = [ "green", "red" ], barfill = []; document.getElementById( 'lifeLine' ).style.width = 'var(--lineLength)';
for( let i = 0; i < stamps.length - 1 ; ++i ) {
barfill.push( colorMap[i%colorMap.length] + " " + sec2per( stamps[i] ) + "% " + sec2per( stamps[i+1] ) + "%" );
} barfill.push( colorMap[( stamps.length - 1 )%colorMap.length] + " " + sec2per( stamps[stamps.length-1] ) + "% var(--nowInPer), black var(--nowInPer)" );
document.getElementById( 'lifeLine' ).style.background = "linear-gradient( to right, " + barfill.join(", ") + " )";
}
function drawTimeCheese() { let colorMap = [ "green", "red" ], wheelfill = [];
for( let i = 0; i < stamps.length - 1 ; ++i ) {
wheelfill.push( colorMap[i%colorMap.length] + " " + sec2deg( stamps[i] ) + "deg " + sec2deg( stamps[i+1] ) + "deg" );
} wheelfill.push( colorMap[( stamps.length - 1 )%colorMap.length] + " " + sec2deg( stamps[stamps.length-1] ) + "deg var(--nowInDeg), black var(--nowInDeg)" );
document.getElementById( 'wheeloflife' ).style.width = 'var(--lineLength)'; document.getElementById( 'wheeloflife' ).style.height = 'var(--lineLength)';
document.getElementById( 'wheeloflife' ).style.background = "conic-gradient( " + wheelfill.join(", ") + " )";
}// conic-gradient( red 6deg, orange 6deg 18deg, yellow 18deg 45deg);
function notEmptyArray() { var a = {}, r = "";
for( let i = 0; i < 5; ++i ) { a[ "_" + i ] = i; }
for( let i in a ) { r+= i + " : " + a[i] + ", "; }
console.log(a); console.log(r); return a;
}
function fannimate() {
let colors = [ "red", "orange", "yellow", "green", "cyan", "blue", "violet" ], linewrap = [ " { background : conic-gradient( ", " ) } " ];
let finalCSS = "@keyframes spin { ", turnpc = 0, cpc0 = 0, cpc1 = 0, tmp = []; var gradStops = [];
for( let j = 0; j < 25; ++j ) {
turnpc = ((j/25)*100); finalCSS += "\n " + turnpc.toFixed(2) + "%" + linewrap[0]; gradStops = [];
for( let i = 0; i < colors.length; ++i ) { cpc0 = ( i / colors.length ) * 100; cpc1 = ( ( i + 1 ) / colors.length ) * 100;
if( ( turnpc + cpc0 ) < 100 && ( turnpc + cpc1 ) > 100 ) { gradStops.push( ( fx( turnpc + cpc0 ) + "% 100%" ) + "|" + colors[i] ); gradStops.push( "0% " + fx( ( turnpc + cpc1 ) % 100.01 ) + "%" + "|" + colors[i] ); }
else { gradStops.push( fx( ( turnpc + cpc0 ) % 100.01 ) + "% " + fx( ( turnpc + cpc1 ) % 100.01 ) + "%" + "|" + colors[i] ); }
} gradStops.sort(); for( let i = 0; i < gradStops.length; ++i ) { tmp = gradStops[i].split("|"); finalCSS += tmp[1] + " " + tmp[0] + ", "; } //console.log(gradStops);
finalCSS = finalCSS.substring( 0, finalCSS.length-2 ) + linewrap[1];
} turnpc = 100; finalCSS += "\n " + turnpc.toFixed(2) + "%" + linewrap[0]; turnpc = 0; gradStops = [];
for( let i = 0; i < colors.length; ++i ) { cpc0 = ( i / colors.length ) * 100; cpc1 = ( ( i + 1 ) / colors.length ) * 100;
if( ( turnpc + cpc0 ) < 100 && ( turnpc + cpc1 ) > 100 ) { gradStops.push( ( fx( turnpc + cpc0 ) + "% 100%" ) + "|" + colors[i] ); gradStops.push( "0% " + fx( ( turnpc + cpc1 ) % 100.01 ) + "%" + "|" + colors[i] ); }
else { gradStops.push( fx( ( turnpc + cpc0 ) % 100.01 ) + "% " + fx( ( turnpc + cpc1 ) % 100.01 ) + "%" + "|" + colors[i] ); }
} gradStops.sort(); for( let i = 0; i < gradStops.length; ++i ) { tmp = gradStops[i].split("|"); finalCSS += tmp[1] + " " + tmp[0] + ", "; }
finalCSS = finalCSS.substring( 0, finalCSS.length-2 ) + linewrap[1] + "\n}";
return finalCSS;
}
//newLine.style.left = 'var(--nowInPx)'; newLine.style.top = '0px'; newLine.style.height = '50px';
//newLine.style.left = sec2px( stamps[i] ) + 'px'; newLine.style.top = '0px'; newLine.style.height = '50px';
//function randStuff(n) { r = ""; for( var i = 0; i < n; ++i ) { r += Math.floor( Math.random() * 10 ); } return r; }
//function addStuff(stuff) {
// newStuff = document.createElement(stuff); newStuff.id = 's' + randStuff(12); newStuff.classList = "";
// newStuff.innerHTML = ''; document.body.appendChild( newStuff );
//}
//ask the government instead
//https://deces.matchid.io/deces/api/v1/search?firstName=chloe&sex=F&birthDate=13%2F07%2F1991&deathDate=06%2F07%2F2020-31%2F12%2F2025
//{
// "request": { "sort": [ { "score": "desc" } ], "firstName": "chloe", "sex": "F", "birthDate": "13/07/1991", "deathDate": "06/07/2020-23/12/2025" },
// "response": { "total": 0, "maxScoreES": null, "size": 20, "page": 1, "delay": 41, "persons": [] }
//}
//function flipBack() { var ans = {}, out = [];
// if( this.readyState == 4 || this.readyState == 200 ) {
// if ( false !== ( ans = yoda( JSON.parse, [this.responseText] ) ) ) {
// for (var i = 0; i < ans.response.persons.length; ++i) {
// if( ans.response.persons[i].birth.date == "19910713" ) {
// if( ans.response.persons[i].name.last.trim().toLowerCase() == "ravinet" ) {
// out.push( '<a href="https://deces.matchid.io/search?advanced=true&fuzzy=false&fn=chloe&sex=F&bd=13%2F07%2F1991">looks like her...</a>' );
// } else { out.push( '<a href="https://deces.matchid.io/search?advanced=true&fuzzy=false&fn=chloe&sex=F&bd=13%2F07%2F1991">birthdate matches</a>' ); }
// }
// } if( out.length < 1 ) { out.push( "found nothing... that's reasuring, right ?" ); }
// document.getElementById('lost').innerHTML = out.join("<br/>");
// } else { document.getElementById('lost').innerText = "Bad json, bad..."; console.log( this.responseText ); }
// }
//}
//
////encodeURIComponent("https://deces.matchid.io/deces/api/v1/search?firstName=chloe&sex=F&birthDate=" + encodeURIComponent("13/07/1991") + "&deathDate=" + encodeURIComponent( "06/07/2020-31/12/2025" ) );
//function flip() { var x = new XMLHttpRequest(); x.onreadystatechange = flipBack;
// var apiRequest = "https%3A%2F%2Fdeces.matchid.io%2Fdeces%2Fapi%2Fv1%2Fsearch%3FfirstName%3Dchloe%26sex%3DF%26birthDate%3D13%252F07%252F1991%26deathDate%3D06%252F07%252F2020-31%252F12%252F2025";
// x.open( "GET", "http://localhost/test/fuckCORS.php?fct=call&url=" + apiRequest, true );
// x.setRequestHeader( "Content-type","application/json" ); x.setRequestHeader('X-PINGOTHER', 'pingpong'); x.send( null );
//}
//function changeFavicon(text) {
// const canvas = document.createElement('canvas');
// canvas.height = 64;
// canvas.width = 64;
// const ctx = canvas.getContext('2d');
// ctx.font = '64px serif';
// ctx.fillText(text, 0, 64);
//
// const link = document.createElement('link');
// const oldLinks = document.querySelectorAll('link[rel="shortcut icon"]');
// oldLinks.forEach(e => e.parentNode.removeChild(e));
// link.id = 'dynamic-favicon';
// link.rel = 'shortcut icon';
// link.href = canvas.toDataURL();
// document.head.appendChild(link);
//}
//
//changeFavicon('💚');
</script>
</head>
<body onload="init();">
<div id="stuff">
<span id="t1"></span> missing...<br/><span id="t2"></span> left...<br/><span id="t3"></span> total<br/><span id="t4"></span> effective<br/><span id="t5"></span> lost...<br/><span id="t9"></span> longest...<br/><!-- <span id="breakdown"></span><br/><br/><div id="lost"></div>--><div id="lifeLine"></div><br/>( <span id="lllabel"></span> per pixel )<div id="wheeloflife"><div id="inWheel">-0%</div></div><div id="squareoffortune"></div>
</div><div id="t6" class="pouet"></div><div id="t7" class="pouet"></div><div id="t8" class="pouet"></div>
</body>
</html>