Code Pasta

Untitled

3 years ago in HTML

                            <!-- 
    TURN ON THE LIGHT
    CREATED BY: chrismory
    2021
-->
<!DOCTYPE HTML>
<html>
    <head>
    <style>
        /*
    TURN ON THE LIGHT
    CREATED BY: chrismory
    2021
*/
body {
    font-family: 'Oswald', sans-serif;
    font-size:25px;
    font-weight:bold;
    margin:0 0 0 0;
    background-color:#f0f0f0;
}
* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#game {
    position:relative;
    margin:auto;
    width:360px;
    height:460px;
}
circle,polyline,path,line {
    display:none;
}
#paths path,#paths line,#paths circle {
    display:block;
}
#complete circle,#complete path {
    display:block;
}
.blocks {
    position:absolute;
    width:72px;
    height:72px;
    display:none;
    z-index:400;
}
#complete {
    position:absolute;
    top:0;
    left:0;
    width:360px;
    height:460px;
    z-index:200;
    display:none;
}
#lighton {
    position:absolute;
    top:0;
    right:0;
    width:120px;
    height:173px;
    background-image:url(https://i.imgur.com/tTabsv6.png);
}
.b_levels {
    position:absolute;
    width:56px;
    height:47px;
    border:2px solid;
    background-color:#e0e0e0;
    border-radius:10px;
    font-size:15px;
    cursor:pointer;
    z-index:400;
}
.b_levels div {
    position:absolute;
    top:15px;
    left:0;
    width:100%;
    font-size:21px;
}
.btn {
    position:absolute;
    top: 127px;
    border:2px solid;
    background-color:#e0e0e0;
    border-radius:10px;
    font-size:15px;
    cursor:pointer;
    padding:5px 10px 5px 10px;
    display:none;
    z-index:200;
}
    </style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
        <title>Turn On the Light</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://hammerjs.github.io/dist/hammer.js"></script>
    </head>
    <body>
        <div id="game">
            <svg id="paths" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
                <path fill="#000000" d="M21 41l7 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 8 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 7 0c1,0 2,0 2,2l0 3c0,2 -1,3 -2,3l-1 0 0 6c0,5 -4,9 -8,9l0 3c0,1 -1,2 -2,2l-8 0c-1,0 -2,-1 -2,-2l0 -3c-4,0 -8,-4 -8,-9l0 -6 -1 0c-1,0 -2,-1 -2,-3l0 -3c0,-2 1,-2 2,-2z"/>
                <line fill="none" stroke="#000000" stroke-width="4" x1="36" y1="68" x2="36" y2= "172" />
                <path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" d="M324 172l0 -16c0,-10 -9,-18 -18,-17 -3,1 -7,3 -9,2 -4,-2 -5,-9 -2,-9 2,0 16,6 14,2 0,-2 -21,-8 -19,-11 3,-3 24,8 23,3 -1,-4 -24,-7 -23,-12 1,-4 26,9 27,4 0,-4 -22,-9 -25,-11 -6,-5 -3,-13 -4,-17 -1,-3 -4,-8 -5,-10 -1,-1 -5,-4 -7,-12 -2,-9 -4,-18 4,-28 8,-10 24,-14 34,-11 10,2 25,14 23,33 -1,9 -7,15 -12,20 -12,10 -6,23 -12,24 -2,1 -4,1 -7,1 -6,-2 -3,-18 -4,-25 -1,-6 -5,-7 -8,-11 -2,-3 1,-5 5,-2 2,3 2,-1 4,-4 3,-4 6,-1 6,1 0,3 1,7 4,1 2,-4 7,-1 5,4 -3,6 -5,6 -10,9"/>
                <path id="mainpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 216c0,20 16,36 36,36l216 0c20,0 36,-16 36,-36l0 -216"/>
                <circle id="maincircle" fill="#fffd56" cx="0" cy="0" r="7">
                    <animateMotion dur="1.5s" calcmode="linear" repeatCount="indefinite">
                    <mpath xlink:href="#mainpath"/>
                </circle>
            </svg>
            <div style="position:absolute;top:15px;left:0;width:320px;text-align:center;">TURN ON</div>
            <div style="position:absolute;top:40px;left:0;width:320px;text-align:center;">THE MAGMORY LIGHT</div>
            <div id="level" style="position:absolute;top:70px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Level: <span>0</span></div>
            <div id="moves" style="position:absolute;top:95px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Moves: <span>0</span></div>
            <svg id="complete" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
            </svg>
            <div id="lighton"></div>
            <div id="info" style="position:absolute;top:90px;left:50px;width:220px;height:auto;font-size:18px;text-align:center;">
                Click on cable<br>
                segments to rotate<br>
                clockwise until all<br>
                the segments are in<br>
                the correct position.
            </div>
            <div id="div_levels" style="position:absolute;top:248px;left:52px;width:260px;height:165px;font-size:18px;text-align:center;"></div>
            <div class="btn" id="b_menu" style="left:85px;">MENU</div>
            <div class="btn" id="b_next" style="left:150px;">NEXT LEVEL</div>
        </div>
    </body>
    <script>
        /*
    TURN ON THE LIGHT
    CREATED BY: chrismory
    2021
*/
var playing = true;
// levels.length = 12 (number of levels)
// each element of levels array is composed of an array
// The game board is a 5x4 matrix
// I define values for the sides of
// each cell of the 5x4 matrix:
// 1 = top
// 2 = right
// 3 = bottom
// 4 = left
// each element of this sub array defines
// the piece (.blocks) of the game starting top-left
// each of the values define what to show,
// example: 141_90
    // 14 indicates that the curved line
    // will go from top (1) to left (4)
    // the third caharacter is a 1
    // this indicates where to draw the arrow
    // as this 3rd character is 1,
    // the arrow will be shown at top
    // the underscore separates the arrow
    // definition from the initial rotation (deg)
    // this deg values can be 0 (no rotation al all)
    // is deg===0 then the brick background is shown
// there are some special values for this elements:
    // x = brick with a cross
    // y = brick with top-right & bottom-left lines
    // z = brick with top-left & bottom-right lines
var levels = [
    ["122_0","242_90","242_0","242_-90","141_0"],
    ["122_180","343_0","","232_0","141_90","","122_90","242_-90","141_-90"],
    ["x","343_90","232_-90","244_180","131_90","122_-90","242_-180","y","z","141_90","","122_-90","122_-90","141_90"],
    ["133_90","343_-90","232_180","242_90","141_-90","122_90","y","121_90","x","344_-90","233_90","122_-90","343_90","z","141_180","121_90","242_0","122_180","141_90"],
    ["122_90","343_180","232_90","242_180","141_-90","233_180","z","x","y","344_180","133_90","y","z","z","141_90","122_180","242_-90","141_180","233_180","121_-90"],
    ["y","242_90","343_-90","232_180","z","232_90","242_180","x","141_180","141_180","131_90","122_180","x","244_-90","344_90","122_0","244_180","144_90","122_90","144_0"],
    ["122_90","343_-90","232_180","242_-90","141_-90","233_180","z","z","242_90","343_90","133_180","121_180","x","344_90","133_-90","122_-90","242_90","141_180","121_180","144_90"],
    ["133_-90","232_90","343_180","232_180","141_90","122_0","z","y","y","344_-90","232_180","z","y","x","141_90","121_-90","144_180","121_90","144_90","144_-90"],
    ["122_90","242_-90","343_90","344_180","131_-90","233_90","244_90","144_180","z","141_180","133_-90","121_-90","z","y","344_90","122_-90","242_180","141_-90","122_180","141_90"],
    ["133_-90","233_180","344_180","232_90","141_-90","122_-90","y","x","z","343_90","233_180","z","x","141_-90","133_90","122_180","141_-90","121_90","244_180","144_-90"],
    ["122_180","343_-90","232_90","343_-90","131_90","233_180","144_90","131_-90","133_180","131_-90","133_90","232_00","z","z","141_180","122_90","141_-90","122_-90","141_180"],
    ["133_180","232_180","242_-90","343_90","131_90","122_180","x","343_90","122_-90","141_180","233_90","x","x","244_180","344_-90","122_-90","141_180","122_90","242_180","141_-90"]
];
// toverify array contain the matrix elements to be verify,
// when rotation degree for each elements of toverify iz zero
// then the level is complete - see verify() function
var toverify = [
    [1,3],
    [0,4,6,7,8],
    [4,5,6,9,12,13],
    [0,2,3,4,5,7,9,11,12,14,17,18],
    [0,1,2,3,4,5,10,15,16,17],
    [1,2,3,5,6,8,10,16,17],
    [0,1,2,3,4,5,8,9,10,11,13,14,15,16,17,18,19],
    [0,1,2,3,4,5,9,10,14,15,16,17,18],
    [0,1,2,4,5,6,7,9,10,14,15,16,17,18,19],
    [0,1,2,3,4,5,9,10,13,14,15,16,17,18,19],
    [0,1,2,3,4,5,6,7,8,9,10,11,14,15,16,17,18,19],
    [0,1,2,3,4,5,7,8,9,10,13,14,15,16,17,18,19]
];
// completed_paths is an array with SVG paths to show
// the animation when a level is completed
var completed_paths = [
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l216 0c20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36l72 0c20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36m0 0c0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l72 0c20,0 36,16 36,36l0 72 0 72c0,20 -16,36 -36,36l-72 0c-20,0 -36,-16 -36,-36l0 -72c0,-20 16,-36 36,-36l72 0 72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,16 -36,36 0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l72 0c20,0 36,16 36,36 0,20 -16,36 -36,36l-72 0c-20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36l-72 0c-20,0 -36,-16 -36,-36l0 -72 0 -72c0,-20 -16,-36 -36,-36 -20,0 -36,16 -36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72 0 -72"/>',
    '<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36l72 0c20,0 36,16 36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0 -72 0 -72 0c-20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72 0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72"/>'
];
$(document).ready(function() {
    $("body").delegate("#b_next","click",function() {
        var level = parseInt($("#level span").html());
        show_level(level);
    });
    $("body").delegate("#b_menu","click",function() {
        $("body").css("background-color","#f0f0f0");
        $("#complete").html("");
        $("#b_menu,#b_next,#level,#moves").hide();
        $("#info,#mainpath,#maincircle,#div_levels,#lighton").show();
        $(".blocks").remove();
    });
    $("body").delegate(".b_levels","click",function() {
        var level = parseInt($(this).children("div").html());
        $("#info,#div_levels").hide();
        $("#mainpath,#maincircle").hide();
        show_level(level-1);
    });
    $("body").delegate(".blocks","click",function() {
        // rotates the block 90 deg clockwise
        if (playing) {
            blocked = parseInt($(this).data("blocked"));
            if (blocked===0) {
                $(".blocks").css("z-index",100);
                angle = parseInt($(this).data("angle"))+90;
                $(this).css({
                    "transition":"200ms linear all",
                    "z-index":"101",
                    "transform:":"rotate("+angle+"deg)",
                    "-moz-transform":"rotate("+angle+"deg)",
                    "-webkit-transform":"rotate("+angle+"deg)",
                    "-o-transform":"rotate("+angle+"deg)",
                    "-ms-transform":"rotate("+angle+"deg)",
                    "-khtml-transform":"rotate("+angle+"deg)"
                });
                $(this).data("angle",angle);
                moves = parseInt($("#moves span").html());
                $("#moves span").html(moves+1);
                verify();
            }
        }
    });
    show_level_buttons();
});
function show_level_buttons() {
    var level = 1;
    for (var i=0;i<3;i++) {
        for (var j=0;j<4;j++) {
            bhtml = '<div class="b_levels" style="top:'+(i*55)+'px;left:'+(2+j*65)+'px;">LEVEL<div>'+level+'</div></div>';
            $("#div_levels").append(bhtml);
            level++;
        }
    }
}
function verify() {
    // see if all block's rotation angle is zero
    // using javascript mod
    complete = true;
    var level = parseInt($("#level span").html());
    var verify_paths = toverify[level-1];
    for (var i=0;i<verify_paths.length;i++) {
        angle = parseInt($("#block_"+verify_paths[i]).data("angle"));
        mod = angle%360;
        if (mod!=0) {
            complete = false;
        }
    }
    if (complete) {
        playing = false;
        completed();
    }
}
function completed() {
    // show the level completed_paths
    $(".a1,.a2,.a3,.a4").hide();
    $(".blocks circle,.blocks path,.blocks line").hide();
    $(".blocks").css({
        "cursor":"default",
        "background-image":"url()"
    });
    var level = parseInt($("#level span").html());
    $("#complete path:eq("+(level-1)+")").show();
    var completed_path = completed_paths[level-1];
    html = completed_path;
    html += '<circle id="mover" fill="#fffd56" cx="0" cy="0" r="7">';
    html += '</circle>'
    $("#complete").html(html).show();
    var myPath = document.getElementById("motionpath");
    var length = myPath.getTotalLength();
    var speed = length/400;
    html = '<animateMotion dur="'+speed+'s" calcmode="linear" repeatCount="indefinite">';
    html += '<mpath xlink:href="#motionpath"/>';
    $("#complete circle").html(html);
    var level = parseInt($("#level span").html());
    $(".b_levels:eq("+(level-1)+")").css({
        "border":"2px solid #006100",
        "color":"#006100",
        "background-color":"#ffffff"
    });
    if (level<12) {
        $("#b_next").show();
    }
    $("body").css("background-color","#f0f0f0");
    $("#lighton").show();
}
function show_blocks() {
    var paths = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72px" height="72px" viewBox="0 0 72 72" E="xMidYMid meet">';
    paths += '<circle fill="#9a9a9a" cx="36" cy="36" r="36"/>';
    paths += '<polyline fill="none" class="a1" stroke="#000000" stroke-width="4" stroke-linecap="round" points="49,13 36,0 23,13 "/>';
    paths += '<polyline fill="none" class="a2" stroke="#000000" stroke-width="4" stroke-linecap="round" points="59,23 72,36 59,49 "/>';
    paths += '<polyline fill="none" class="a3" stroke="#000000" stroke-width="4" stroke-linecap="round" points="49,59 36,72 23,59 "/>';
    paths += '<polyline fill="none" class="a4" stroke="#000000" stroke-width="4" stroke-linecap="round" points="13,23 0,36 13,49 "/>';
    paths += '<path fill="none" class="p12" stroke="#000000" stroke-width="4" d="M36 0c0,20 16,36 36,36"/>';
    paths += '<path fill="none" class="p23" stroke="#000000" stroke-width="4" d="M36 72c0,-20 16,-36 36,-36"/>';
    paths += '<path fill="none" class="p34" stroke="#000000" stroke-width="4" d="M36 72c0,-20 -16,-36 -36,-36"/>';
    paths += '<path fill="none" class="p14" stroke="#000000" stroke-width="4" d="M36 0c0,20 -16,36 -36,36"/>';
    paths += '<line fill="none" class="p13" stroke="#000000" stroke-width="4" x1="36" y1="0" x2="36" y2= "72" />';
    paths += '<line fill="none" class="p24" stroke="#000000" stroke-width="4" x1="72" y1="36" x2="0" y2= "36" />';
    paths += '';
    paths += '</svg>';
    var c = 0;
    for (var i=0;i<4;i++) {
        for (var j=0;j<5;j++) {
            $("#game").append("<div class='blocks' id='block_"+c+"' data-angle='0' style='top:"+(172+i*72)+"px;left:"+(j*72)+"px;'>"+paths+"</div>");
            c++;
        }
    }
}
function show_level(level) {
    // show blocks according level
    $("body").css("background-color","#c0c0c0");
    playing = true;
    $("#complete").html("").hide();
    $(".blocks").remove();
    show_blocks();
    $("#level span").html(level+1);
    $("#moves span").html(0);
    $("#level,#moves,#b_menu").show();
    $("#lighton,#b_next").hide();
    level_paths = levels[level];
    $(".blocks").css({
        "background-image":"url(https://i.imgur.com/0Fc0TuZ.png)",
        "cursor":"default"
    }).data("angle","0").data("blocked","1").show();
    $(".blocks circle,.blocks polyline,.blocks path,.blocks line").hide();
    for (var i=0;i<level_paths.length;i++) {
        path = level_paths[i];
        switch (path) {
            case "":
                break;
            case "x":
                $(".blocks:eq("+i+") .p13").show();
                $(".blocks:eq("+i+") .p24").show();
                break;
            case "y":
                $(".blocks:eq("+i+") .p12").show();
                $(".blocks:eq("+i+") .p34").show();
                break;
            case "z":
                $(".blocks:eq("+i+") .p23").show();
                $(".blocks:eq("+i+") .p14").show();
                break;
            default:
                arrow = path.substr(2,1);
                angle = parseInt(path.substr(4));
                path = path.substr(0,2);
                $(".blocks:eq("+i+") .p"+path).show();
                bgi = ""
                if (angle!==0) {
                    $(".blocks:eq("+i+") .a"+arrow).show();
                    $(".blocks:eq("+i+") circle").show();
                    $(".blocks:eq("+i+")").css({
                        "background-image":"url()",
                        "cursor":"pointer"
                    }).data("angle",angle).data("blocked",0);
                    rotate_block(i,angle);
                }
                break;
        }
    }
}
function rotate_block(n,angle) {
    $(".blocks:eq("+n+")").css({
        "transform:":"rotate("+angle+"deg)",
        "-moz-transform":"rotate("+angle+"deg)",
        "-webkit-transform":"rotate("+angle+"deg)",
        "-o-transform":"rotate("+angle+"deg)",
        "-ms-transform":"rotate("+angle+"deg)",
        "-khtml-transform":"rotate("+angle+"deg)",
    }).data("angle",angle);
}
    </script>
</html>

                        
Recent Public Pastes
Amazing Collections - 4 days ago [v1.2.1.0] Farming Simulator 25 Trainer (2025) (Plus +8) - 6 days ago TradingView - 1 week ago Untitled - 1 week ago They Like Nature - 1 week ago Untitled - 2 weeks ago Untitled - 2 weeks ago VIDEOS NO SHORTLINK AT ALL FREEEEEEEEEEEEE - 2 weeks ago Sanyuuu - 2 weeks ago Sanyuuu - 2 weeks ago