From 630b9220882fcdfd7e7479c59d123b51f917249a Mon Sep 17 00:00:00 2001
From: Gustavo Adolfo Mesa Roldan <gustavo.mesa@hidup.io>
Date: Tue, 5 Mar 2019 05:57:47 +0100
Subject: [PATCH] last of today

---
 index.4.html | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 index.4.html
diff --git a/index.4.html b/index.4.html
new file mode 100644
index 0000000..797f6a5
--- /dev/null
+++ b/index.4.html
@@ -0,0 +1,213 @@
+<html>
+    <head>
+        <style>
+            /* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */
+
+
+            @import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,700);
+
+            * {
+                margin:0;
+                padding:0;
+                list-style:none;
+                text-decoration:none;
+                box-sizing:border-box;
+                font-family: "Courier New", Courier, monospace;
+            }
+
+            html, body{
+                width:100%;
+                height:100%;
+                display: flex;
+            }
+
+
+            body {                
+                padding:40px;
+                background: black;
+                overflow: hidden;
+            }
+
+
+            .wrapper {
+                transform-style: preserve-3d;
+                margin: 0 auto;
+                width:250px;
+                height:400px;
+                top: 0;left: 0;right: 0;bottom: 0;
+                margin: auto;
+            }
+
+            .wrapper:after {
+                top: 100%;
+                left: 0;
+                z-index: -1;
+                display: block;
+                content: '';
+                height: 22px;
+                width: 100%;                
+            }
+
+
+            .bloc {
+                display: flex;
+                justify-content: center;
+            }
+
+            .content {
+                filter: blur(1px);
+                -webkit-filter: blur(1px);
+                transform: translateZ(80px) scale(1);
+                -webkit-transform: translateZ(80px) scale(1);
+                height: 370px;
+                width: 460px;
+                margin:auto;
+                top: 0px;
+                right: 0px;
+                bottom: 0px;
+                left: 0px;
+                padding:20px;
+                padding-top:0px;
+                color: black;
+                z-index: 3;
+            }
+            pre span {
+                transform-style: preserve-3d;
+                white-space: pre;
+            }
+        </style>
+
+        <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
+        <script>
+
+            function rn(min, max){
+                return Math.floor(Math.random() * (max - min + 1) + min)
+            }
+            var c  = [rn(0,255), rn(0,255), rn(0,255)],
+                r = rn(0,2),
+                direction = rn(0,1),
+                letters,
+                countLetter,
+                thisLetter = 0;
+
+            function colorizer(){
+                var time = 1;
+               
+                now = $(letters[thisLetter]).html()
+                if (c[r] > 0 && c[r] < 255){                    
+                    if(direction){
+                        c[r]++;
+                    }else{
+                        c[r]--;
+                    }                                            
+                }else{
+                    r = rn(0,2),
+                    direction = !direction;
+                    c[r] = c[r] >= 255 ? 250 : c[r]
+                    c[r] = c[r] <= 0 ? 1 : c[r]
+                }
+
+                $(letters[thisLetter]).html("|")
+                if (now != " " && now != "░"){
+                    time = 50;
+                    //now = "█";
+                    $(letters[thisLetter]).css({color: "rgb("+c[0]+"  ,"+c[1]+"  ,"+c[2]+"  )"})
+                }else{
+                    //now = "░";
+                    $(letters[thisLetter]).css({color: "white"})
+                }
+
+                setTimeout(() => {
+                    $(letters[thisLetter]).html(now)
+                    if (thisLetter == countLetter){
+                        thisLetter = 0
+                    }else{
+                        thisLetter++
+                    }
+                    colorizer()
+                }, time);
+                
+            }
+
+            $(document).ready(function() {
+                !(function ($doc, $win) {
+
+                    text = " "
+                    +"                                                "
+                    +"              `/+-            -+/`              "
+                    +"              dMMMNy:`    `:yNMMMd              "
+                    +"             /MMMMMMMMmddmMMMMMMMM/             "
+                    +"            `NMMMMMMMMMMMMMMMMMMMMN.            "
+                    +"            yMMMMMMMMMMMMMMMMMMMMMMh            "
+                    +"           :MMMMMMMMMMMMMMMMMMMMMMMM/           "
+                    +"           yddddddddddddddddddddddddy           "
+                    +"          -///::::////::::////:::////:          "
+                    +"         .MMMMMMMMMMMMMMMMMMMMMMMMMMMM:         "
+                    +"  :++++++dMMMMMMMMMMMMMMMMMMMMMMMMMMMMm++++++:  "
+                    +"  .------------------------------------------.  "
+                    +"                                                "
+                    +"         yhys+/:-.``        ``.-:/+syhy         "
+                    +"         dMNyhdmNMMMMMMMMMMMMMMNmdhyNMd         "
+                    +"         dMMy   `/yNMMmyymMMNy/`   yMMd         "
+                    +"         -dMMdymMMds/.    ./sdMMmydMMd-         "
+                    +"           ./++/-              -/++/.           "
+                    +"                                                "
+
+                    var line = 1;
+                    var colums = 48;
+                    text.split("").map(function(letter, index) {
+                        if(index != colums){
+                            $("pre").append("<span id='span_"+line+"_"+index % colums+"' class='line_"+line+" col_"+index % colums+"'>"+letter+"</span>")
+                        }           
+
+                        if(index % colums == 0 && index != 0){
+                            $("pre").append("<br>")
+                            line++
+                        }    
+                           
+                    });
+                    
+                
+                    letters = $("pre span");                    
+                    countLetter = letters.length
+                    colorizer()
+
+                   /* var screenWidth = $win.screen.width / 2,
+                        screenHeight = $win.screen.height / 2,
+                        $elems = $doc.getElementsByClassName("elem"),
+                        validPropertyPrefix = '',
+                        otherProperty = 'perspective(1000px)',
+                        elemStyle = $elems[0].style
+
+                    if(typeof elemStyle.webkitTransform == 'string') {
+                        validPropertyPrefix = 'webkitTransform';
+                    } else if (typeof elemStyle.MozTransform == 'string') {
+                        validPropertyPrefix = 'MozTransform'
+                    }
+
+                    $doc.addEventListener('mousemove', function (e) {
+                        var centroX = e.clientX - screenWidth,
+                            centroY = screenHeight - (e.clientY + 13),
+                            degX = centroX * 0.1,
+                            degY = centroY * 0.2,
+                            $elem
+
+                        for (var i = 0; i < $elems.length; i++) {
+                            $elem = $elems[i];
+                            $elem.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)'
+                        };
+                    });*/
+                })(document, window)
+            });
+        </script>  
+    </head>
+    <body>
+        <div class="wrapper elem" style="transform: perspective(600px) rotateY(0deg) rotateX(0deg);">
+            <div class="bloc">
+                <div class="content">
+                    <pre></pre>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
