API tools faq
paste
Advertisement
Makiver

Untitled

Makiver
Jul 15th, 2019
148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 27.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.             <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  5.         <title></title>
  6.         <style type="text/css">
  7.  
  8.             body{
  9.  
  10.  
  11.             }
  12.             div{
  13.                 touch-action: none;
  14.             }
  15.             .as{
  16.                 height: 300px;
  17.                 width: 300px;
  18.  
  19.  
  20.                 overflow: hidden;
  21.                 border-radius: 20px;
  22.                 top: 80px;
  23.                 left: calc(50% - 150px);
  24.                 overflow-wrap: break-word;
  25.                 outline: none;
  26.                 box-shadow:  0 5px 10px rgba(15,10,18,0.05), 0 15px 40px rgba(16,13,20,0.2);
  27.             }
  28.             .touch{
  29.                 height: 25px;
  30.                 width: 25px;
  31.                 border-radius: 100%;
  32.                 background-color: white;
  33.                 position: absolute;
  34.                 pointer-events: none;
  35.                 opacity: 0;
  36.             }
  37.             .d{
  38.                 position: absolute;
  39.                 height: 30px;
  40.                 width: 30px;
  41.                 background-color: red;
  42.                 border-radius: 100%;
  43.                 transform: translateX(-50%) translateY(-50%);
  44.  
  45.             }
  46.  
  47.             .wwsd{
  48.                 box-shadow:  0 5px 10px rgba(15,10,18,0.1), 0 15px 40px rgba(16,13,20,0.2);
  49.                 background-color: rgba(255,255,255,0.3);
  50.                 position: absolute;
  51.                 pointer-events: none;
  52.                 opacity: 0;
  53.                 transition-duration: 0.2s;
  54.  
  55.                 height: calc(50% - 30px);
  56.                 width: 50%;
  57.                 border-radius: 10px;
  58.             }
  59.             #add{
  60.                 box-shadow:  0 5px 10px rgba(15,10,18,0.2), 0 15px 40px rgba(16,13,20,0.3);
  61.                 position: absolute;
  62.                 top: 10px;
  63.                 right: 10px;
  64.                 height: 40px;
  65.                 width: 40px;
  66.                 background-color: rgb(41, 103, 204);
  67.                 border-radius: 100%;
  68.             }
  69.             #delete{
  70.                 box-shadow:  0 5px 10px rgba(15,10,18,0.2), 0 15px 40px rgba(16,13,20,0.3);
  71.                 position: absolute;
  72.                 top: 10px;
  73.                 right: -50px;
  74.                 height: 40px;
  75.                 width: 40px;
  76.                 background-color: rgb(41, 103, 204);
  77.                 border-radius: 100%;
  78.                 transition-duration: 0.2s;
  79.                 background-size: contain;
  80.                 background-position: center;
  81.             }
  82.             .bar{
  83.                 outline: none;
  84.             }
  85.         </style>
  86.     </head>
  87.     <!-- <body></body> -->
  88.     <body>
  89.             <div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;background-color: rgba(255,66,66,0.6);">
  90.             </div>
  91.  
  92.             <div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;" id="con"  >
  93.                 <div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;">
  94.                     <div class="touch" ></div>
  95.                     <div class="touch"></div>
  96.  
  97.                     <div style="position: absolute;top: 0px;left:0px;height: 60px;width:100%;background-color: rgb(244, 66, 66);" id="tasky"></div>
  98.  
  99.                     <div id="add" onclick="addd();" >
  100.                         <div style="background-color: rgb(208, 222, 245);width: 6px;height: 20px;position: absolute;top: 10px;left:17px; "></div>
  101.                         <div style="background-color: rgb(208, 222, 245);width: 6px;height: 20px;position: absolute;top: 10px;left:17px;transform: rotate(90deg); "></div>
  102.                     </div>
  103.                     <div id="delete" >
  104.                     </div>
  105.                     <div class="wwsd" style="top: 60px;left: 0;" id="t_l"></div>
  106.                     <div class="wwsd" style="top: calc(50% + 30px);right: 0;" id="b_r"></div>
  107.                     <div  class="wwsd" style="top: calc(50% + 30px);left: 0;" id="b_l"></div>
  108.                     <div  class="wwsd" style="top: 60px;right: 0;" id="t_r"></div>
  109.  
  110.                 <!--    <div  style="position: absolute;background-color:rgba(127, 20, 20,0.6);" id="as"  class="as" ondblclick="full(this);" contenteditable="false"  full="nope" ondblclick="full(this);" onclick="this.style.zIndex=zq;zq++;">
  111.                         <div style="position: relative;top: 0px;left:0px;height: 25px;width:100%;background-color:rgb(127, 20, 20);border-top-right-radius: 10px;border-top-left-radius: 10px;"  class="bar" small="nope"  onclick="ww(this,1);" >
  112.                         </div>
  113.                     </div>
  114.  
  115.                     <div   style="position: absolute;background-color: rgba(182, 255, 94,0.6);" id="as" class="as" ondblclick="full(this);" contenteditable="false"  full="nope" ondblclick="full(this);" onclick="this.style.zIndex=zq;zq++;">
  116.                         <div style="position: relative;top: 0px;left:0px;height: 25px;width:100%;background-color: rgb(182, 255, 94);border-top-right-radius: 10px;border-top-left-radius: 10px;"  class="bar" small="nope"  onclick="ww(this,2);">
  117.                         </div>
  118.                     </div>
  119.  
  120.                     <div   style="position: absolute;background-color: rgba(90, 252, 220,0.6);" id="as" class="as" ondblclick="full(this);" contenteditable="false"  full="nope" ondblclick="full(this);" onclick="this.style.zIndex=zq;zq++;">
  121.                         <div style="position: relative;top: 0px;left:0px;height: 25px;width:100%;background-color: rgb(90, 252, 220);border-top-right-radius: 10px;border-top-left-radius: 10px;"  class="bar" small="nope"  onclick="ww(this,3);">
  122.                         </div>
  123.                     </div>
  124.  
  125.                     <div  style="position: absolute;background-color: rgba(90, 166, 252,0.6);" id="as"  class="as" ondblclick="full(this);" contenteditable="false"  full="nope" ondblclick="full(this);" onclick="this.style.zIndex=zq;zq++;">
  126.                         <div style="position: relative;top: 0px;left:0px;height: 25px;width:100%;background-color: rgb(90, 166, 252);border-top-right-radius: 10px;border-top-left-radius: 10px;"  class="bar" small="nope"  onclick="ww(this,3);" >
  127.                         </div>-->
  128.  
  129.                     </div>
  130.                 </div>
  131.             </div>
  132.  
  133.         <script type="text/javascript">
  134.             var hg=document.getElementById("con").offsetHeight;
  135.             var hgg=document.getElementById("con").offsetWidth;
  136.             window.onload=function(){
  137.                 var dsfgsd=document.getElementsByClassName("as");
  138.                 var hg=document.getElementById("con").offsetHeight;
  139.                 var hgg=document.getElementById("con").offsetWidth;
  140.                 document.getElementById("con").addEventListener('touchmove',ered,{passive : true});
  141.                 document.getElementById("con").addEventListener('touchend',eered,{passive : true});
  142.                 document.getElementById("con").addEventListener('touchstart',ered,{passive : true});
  143.                 for(var i=0;i<dsfgsd.length;i++){
  144.                     dsfgsd[i].style.top=(hg/2 - dsfgsd[i].offsetHeight/2 - 30 + 15*i +60)+"px";
  145.                     dsfgsd[i].style.left=(hgg/2 - dsfgsd[i].offsetWidth/2 - 30 +15*i)+"px";
  146.                     dsfgsd[i].addEventListener('touchmove',a,{passive : true});
  147.                     dsfgsd[i].addEventListener('touchend',end,{passive : true});
  148.                 }
  149.             };
  150.             var rev=0;
  151.             var smalll=0;
  152.             var htr;
  153.             var ee;
  154.             var ini=1;
  155.             var ini_x=[];
  156.             var ini_y=[];
  157.             var vv=0;
  158.             var g=0;
  159.             var gg=0;
  160.             var gc=0;
  161.             var gcc=0;
  162.             var ini_h=0;
  163.             var ini_w=0;
  164.             var ff=0;
  165.             var spot=0;
  166.             var zq=0;
  167.             function ewfr(x){
  168.                 if(x==1){
  169.                     eere.style.transitionDuration="0.3s";
  170.                     eere.style.left="0";
  171.                     eere.style.top="60px";
  172.                     eere.style.height=(dde/2 - 30)+"px";
  173.                     eere.style.width=ddee/2+"px";
  174.                     setTimeout(function(){
  175.                         eere.style.transitionDuration="0s";
  176.                     },300);
  177.                 }
  178.                 else if(x==2){
  179.                     eere.style.transitionDuration="0.3s";
  180.                     eere.style.left="0";
  181.                     eere.style.top="60px";
  182.                     eere.style.height=(dde - 60)+"px";
  183.                     eere.style.width=(ddee)/2+"px";
  184.                     setTimeout(function(){
  185.                         eere.style.transitionDuration="0s";
  186.                     },300);
  187.                 }
  188.                 else if(x==3){
  189.                     eere.style.transitionDuration="0.3s";
  190.                     eere.style.left="0";
  191.                     eere.style.top=(dde/2 + 30)+"px";
  192.                     eere.style.height=(dde/2 - 30)+"px";
  193.                     eere.style.width=(ddee)/2+"px";
  194.                     setTimeout(function(){
  195.                         eere.style.transitionDuration="0s";
  196.                     },300);
  197.                 }
  198.                 else if(x==4){
  199.                     eere.style.transitionDuration="0.3s";
  200.                     eere.style.left=(ddee)/2+"px";
  201.                     eere.style.top="60px";
  202.                     eere.style.height=(dde/2 - 30)+"px";
  203.                     eere.style.width=(ddee)/2+"px";
  204.                     setTimeout(function(){
  205.                         eere.style.transitionDuration="0s";
  206.                     },300);
  207.                 }
  208.                 else if(x==5){
  209.                         eere.style.transitionDuration="0.3s";
  210.                         eere.style.left=(ddee)/2+"px";
  211.                         eere.style.top="60px";
  212.                         eere.style.height=(dde)+"px";
  213.                         eere.style.width=(ddee)/2+"px";
  214.                         setTimeout(function(){
  215.                             eere.style.transitionDuration="0s";
  216.                         },300);
  217.                 }
  218.                 else if(x==6){
  219.                     eere.style.transitionDuration="0.3s";
  220.                     eere.style.left=(ddee)/2+"px";
  221.                     eere.style.top=(dde/ 2+ 30)+"px";
  222.                     eere.style.height=(dde/2 - 30)+"px";
  223.                     eere.style.width=(ddee)/2+"px";
  224.                     setTimeout(function(){
  225.                         eere.style.transitionDuration="0s";
  226.                     },300);
  227.                 }
  228.                 else if(x==7){
  229.                     eere.style.transitionDuration="0.3s";
  230.                     eere.style.left="0";
  231.                     eere.style.top="60px";
  232.                     eere.style.height=(dde/2 - 30)+"px";
  233.                     eere.style.width=(ddee)+"px";
  234.                     setTimeout(function(){
  235.                             eere.style.transitionDuration="0s";
  236.                         },300);
  237.                 }
  238.                 else if(x==8){
  239.                     eere.style.transitionDuration="0.3s";
  240.                     eere.style.left="0";
  241.                     eere.style.top=(dde/2 + 30)+"px";
  242.                     eere.style.height=(dde/2 - 30)+"px";
  243.                     eere.style.width=(ddee)+"px";
  244.                     setTimeout(function(){
  245.                         eere.style.transitionDuration="0s";
  246.                     },300);
  247.                 }
  248.                 spot=0;
  249.             }
  250.  
  251.             function end(x){
  252.                 document.getElementById("delete").style.right="-50px";
  253.                 document.getElementsByClassName("touch")[0].style.opacity=0;
  254.                 document.getElementsByClassName("touch")[1].style.opacity=0;
  255.                 eere=x.changedTouches[0].target;
  256.                 if(eere.className=="bar"){
  257.                     eere=eere.parentElement;
  258.                 }
  259.  
  260.                 document.getElementById("t_l").style.opacity=0;
  261.                 ewfr(spot);
  262.                 if(document.getElementById("neww")){
  263.                     document.getElementById("neww").remove();
  264.                 }
  265.                 wwss=x.changedTouches[0].clientX;
  266.                 if(rev==1){
  267.                     eere.remove();
  268.                 }
  269.  
  270.                 if(ee && ee.children[0].getAttribute("small")=="nope" && htr<60){
  271.                     ee.style.zIndex=zq;
  272.                     zq++;
  273.                     ww(ee.children[0],70,wwss);
  274.                 }
  275.                 ff=0;
  276.                 vv=0;
  277.                 ini_x=[];
  278.                 ini_y=[];
  279.             }
  280.  
  281.             function ered(x){
  282.                 document.getElementsByClassName('touch')[0].style.top=event.touches[0].clientY-15+'px';
  283.                 document.getElementsByClassName('touch')[0].style.left=event.touches[0].clientX-15+'px';
  284.                 document.getElementsByClassName('touch')[0].style.zIndex=zq+9;
  285.                 document.getElementsByClassName('touch')[0].style.opacity=1;
  286.                 if(event.touches.length==2){
  287.                     document.getElementsByClassName('touch')[1].style.top=event.touches[1].clientY-15+'px';
  288.                     document.getElementsByClassName('touch')[1].style.left=event.touches[1].clientX-15+'px';
  289.                     document.getElementsByClassName('touch')[1].style.zIndex=zq+9;
  290.                     document.getElementsByClassName('touch')[1].style.opacity=1;
  291.                 }
  292.             }
  293.  
  294.             function eered(x){
  295.                 document.getElementsByClassName('touch')[0].style.opacity=0;
  296.                 document.getElementsByClassName('touch')[1].style.opacity=0;
  297.             }
  298.  
  299.             function dist(a,c,b,d){
  300.                 e=Math.sqrt((a-c)*(a-c) + (b-d)*(b-d));
  301.                 return e;
  302.             }
  303.  
  304.             dde=document.getElementById("con").offsetHeight;
  305.             ddee=document.getElementById("con").offsetWidth;
  306.             pos=[];
  307.  
  308.             function a(x,y){
  309.                 document.getElementById("delete").style.right="10px";
  310.                 var b=x;
  311.                 var c=x.touches;
  312.                 var zer=c[0].clientX;
  313.                 var zerr=c[0].clientY;
  314.  
  315.                 if(c.length==2){
  316.                     var un=c[1].clientX;
  317.                     var unn=c[1].clientY;
  318.                 }
  319.  
  320.                 ee=c[0].target;
  321.  
  322.                 if(ee.className=="bar"){
  323.                     ee=ee.parentElement;
  324.                 }
  325.  
  326.                 if(c.length==2 && c[0].target==c[1].target){
  327.                     if(vv==0){
  328.                             ee.style.zIndex=zq;
  329.                             zq++;
  330.                             ini_x.push(zer);
  331.                             ini_y.push(zerr);
  332.                             ini_x.push(un);
  333.                             ini_y.push(unn);
  334.                             g=Math.abs(zerr-unn);
  335.                             gc=Math.abs(zer-un);
  336.                             ini_h=ee.offsetHeight;
  337.                             ini_w=ee.offsetWidth;
  338.                             ini_t=ee.offsetTop;
  339.                             ini_l=ee.offsetLeft;
  340.                     }
  341.                     if(ff==2){
  342.                         ini_x=[];
  343.                         ini_y=[];
  344.                         ini_x.push(zer);
  345.                         ini_y.push(zerr);
  346.                         ini_x.push(un);
  347.                         ini_y.push(unn);
  348.                         g=Math.abs(zerr-unn);
  349.                         gc=Math.abs(zer-un);
  350.                         ini_h=ee.offsetHeight;
  351.                         ini_w=ee.offsetWidth;
  352.                         ini_t=ee.offsetTop;
  353.                         ini_l=ee.offsetLeft;
  354.                     }
  355.                     ff=1;
  356.                     gg=Math.abs(zerr-unn);
  357.                     gcc=Math.abs(zer-un);
  358.                     ee.style.height=ini_h-(g-gg) +"px";
  359.                     ee.style.width=ini_w-(gc-gcc) + "px";
  360.                     ee.style.top=ini_t+(g-gg)/2 +((zerr - ini_y[0]) + (unn - ini_y[1]))*0.5 + "px";
  361.                     ee.style.left=ini_l+(gc-gcc)/2 + ((zer - ini_x[0]) + (un - ini_x[1]))*0.5 +"px";
  362.                 }
  363.  
  364.                 if(vv==0 && c.length==1){
  365.                     ee.style.zIndex=zq;
  366.                     zq++;
  367.                     ini_x.push(zer);
  368.                     ini_y.push(zerr);
  369.                     ini_t=ee.offsetTop;
  370.                     ini_l=ee.offsetLeft;
  371.                 }
  372.                 vv=1;
  373.                 if(c.length==1){
  374.                     if(zerr<60 && zer>(hgg-60) && zer<hgg){
  375.                         rev=1;
  376.                         ee.style.opacity=0.3;
  377.                     }
  378.                     else{
  379.                         rev=0;
  380.                         ee.style.opacity=1;
  381.                     }
  382.                     ff=2;
  383.                     ee.style.top=ini_t-(ini_y[0]-zerr)+"px";
  384.                     ee.style.left=ini_l-(ini_x[0]-zer)+"px";
  385.                     htr=zerr;
  386.  
  387.                     if(zerr<60){
  388.                         ee.style.transform="scale(0.7)";
  389.                         rgvh=zer;
  390.                         veeve=Math.min((Math.floor((rgvh)/60)),smalll);
  391.                         veeve=Math.max(veeve,0);
  392.  
  393.                         if(document.getElementById("neww")){
  394.                             document.getElementById("neww").remove();
  395.                         }
  396.                         newItemm = document.createElement("div");
  397.                         newItemm.style="height:50px;width:50px;background-color:transparent;display:inline-block;";
  398.                         newItemm.id="neww";
  399.                         document.getElementById("tasky").insertBefore(newItemm,document.getElementById("tasky").children[veeve]);
  400.                     }
  401.                     else{
  402.                     ee.style.transform="scale(1)";
  403.                         if(document.getElementById("neww")){
  404.                             document.getElementById("neww").remove();
  405.                         }
  406.                     }
  407.  
  408.                     if(zer<10){
  409.                         if(zerr>60 && zerr<(60+(dde-60)/3)){
  410.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  411.                             document.getElementById("t_l").style.left="0";
  412.                             document.getElementById("t_l").style.top="60px";
  413.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  414.                             document.getElementById("t_l").style.width="50%";
  415.                             spot=1;
  416.                         }
  417.                         else if(zerr<(60+2*(dde-60)/3)){
  418.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  419.                             document.getElementById("t_l").style.left="0";
  420.                             document.getElementById("t_l").style.top="60px";
  421.                             document.getElementById("t_l").style.height="calc(100% - 60px)";
  422.                             document.getElementById("t_l").style.width="50%";
  423.                             spot=2;
  424.                         }
  425.                         else if(zerr<(60+(dde-60))){
  426.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  427.                             document.getElementById("t_l").style.left="0";
  428.                             document.getElementById("t_l").style.top="calc(50% + 30px)";
  429.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  430.                             document.getElementById("t_l").style.width="50%";
  431.                             spot=3;
  432.                         }
  433.                     }
  434.                     else if(zer>(ddee-10)){
  435.                         if(zerr>60 && zerr<(60+(dde-60)/3)){
  436.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  437.                             document.getElementById("t_l").style.left="50%";
  438.                             document.getElementById("t_l").style.top="60px";
  439.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  440.                             document.getElementById("t_l").style.width="50%";
  441.                             spot=4;
  442.                         }
  443.                         else if(zerr<(60+2*(dde-60)/3)){
  444.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  445.                             document.getElementById("t_l").style.left="50%";
  446.                             document.getElementById("t_l").style.top="60px";
  447.                             document.getElementById("t_l").style.height="calc(100% - 60px)";
  448.                             document.getElementById("t_l").style.width="50%";
  449.                             spot=5;
  450.                         }
  451.                         else if(zerr<(60+(dde-60))){
  452.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  453.                             document.getElementById("t_l").style.left="50%";
  454.                             document.getElementById("t_l").style.top="calc(50% + 30px)";
  455.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  456.                             document.getElementById("t_l").style.width="50%";
  457.                             spot=6;
  458.                         }
  459.                     }
  460.                     else if(zerr>(60) && zerr<70){
  461.                         if(zer>0 && zer<(ddee/3)){
  462.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  463.                             document.getElementById("t_l").style.left="0%";
  464.                             document.getElementById("t_l").style.top="60px";
  465.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  466.                             document.getElementById("t_l").style.width="50%";
  467.                             spot=1;
  468.                         }
  469.                         else if(zer<2*(ddee/3)){
  470.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  471.                             document.getElementById("t_l").style.left="0";
  472.                             document.getElementById("t_l").style.top="60px";
  473.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  474.                             document.getElementById("t_l").style.width="100%";
  475.                             spot=7;
  476.                         }
  477.                         else if(zer<3*(ddee/3)){
  478.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  479.                             document.getElementById("t_l").style.left="50%";
  480.                             document.getElementById("t_l").style.top="60px";
  481.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  482.                             document.getElementById("t_l").style.width="50%";
  483.                             spot=4;
  484.                         }
  485.                     }
  486.                     else if(zerr>(dde-10)){
  487.                         if(zer>0 && zer<(ddee/3)){
  488.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  489.                             document.getElementById("t_l").style.left="0%";
  490.                             document.getElementById("t_l").style.top="calc(50% + 30px)";
  491.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  492.                             document.getElementById("t_l").style.width="50%";
  493.                             spot=3;
  494.                         }
  495.                         else if(zer<2*(ddee/3)){
  496.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  497.                             document.getElementById("t_l").style.left="0";
  498.                             document.getElementById("t_l").style.top="calc(50% + 30px)";
  499.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  500.                             document.getElementById("t_l").style.width="100%";
  501.                             spot=8;
  502.                         }
  503.                         else if(zer<3*(ddee/3)){
  504.                             document.getElementById("t_l").style.opacity="1";document.getElementById("t_l").style.zIndex=zq+1;
  505.                             document.getElementById("t_l").style.left="50%";
  506.                             document.getElementById("t_l").style.top="calc(50% + 30px)";
  507.                             document.getElementById("t_l").style.height="calc(50% - 30px)";
  508.                             document.getElementById("t_l").style.width="50%";
  509.                             spot=6;
  510.                         }
  511.                     }
  512.                     else{
  513.                         document.getElementById("t_l").style.opacity="0";
  514.                         spot=0;
  515.                     }
  516.                 }
  517.             }
  518.  
  519.             vvv=0;
  520.             function full(x){
  521.                 x.style.height=(document.getElementById("con").offsetHeight-60)+"px";
  522.                 x.style.width=(document.getElementById("con").offsetWidth)+"px";
  523.                 x.style.top=60+"px";
  524.                 x.style.left=0+"px";
  525.             }
  526.  
  527.             function ww(x,y=55,z=0,vvd=150,vvvd=210){
  528.                 htr=610;
  529.                 werewr=x.parentElement;
  530.                 x.style.zIndex=zq;
  531.                 zq++;
  532.                 werewr.style.transform="scale(1)";
  533.                 if(x.getAttribute("small")=="nope"){
  534.                     smalll++;
  535.                     x.setAttribute("small","yup");
  536.                     gge=werewr;
  537.                     werewr.style.transitionDuration="0.3s";
  538.                     veeee=Math.min((Math.floor((z)/60)),smalll);
  539.                     veeee=Math.max(veeee,0);
  540.                     werewr.style.height="50px";
  541.                     werewr.style.width="50px";
  542.                     werewr.style.borderRadius="10px";
  543.                     werewr.style.top="5px";
  544.                     if(veeee==smalll){
  545.                         werewr.style.left=((smalll -1)*60 +5)+"px";
  546.                     }
  547.                     else{
  548.                         werewr.style.left=((veeee)*60 +5)+"px";
  549.                     }
  550.                     setTimeout(function(){
  551.                         werewr.style.transitionDuration="0s";
  552.                         werewr.style.position="static";
  553.                         werewr.style.display="inline-block";
  554.                         werewr.style.margin="5px";
  555.                         werewr.addEventListener('touchmove',dew,{passive : true});
  556.                         werewr.addEventListener('touchend',dew_end,{passive : true});
  557.                         if(rev==1){
  558.                             smalll--;
  559.                             werewr.remove();
  560.                             rev=0;
  561.                         }
  562.                         else{
  563.                             document.getElementById("tasky").insertBefore(werewr,document.getElementById("tasky").children[veeee]);
  564.                         }
  565.                     },300);
  566.                 }
  567.                 else{
  568.                     smalll--;
  569.                     x.setAttribute("small","nope");
  570.                     werewr.removeEventListener('touchmove',dew,{passive : true});
  571.                     werewr.removeEventListener('touchend',dew_end,{passive : true});
  572.                     werewr.style.left=werewr.offsetLeft +"px";
  573.                     console.log(parseInt(werewr.style.left)==(werewr.offsetLeft));
  574.                     werewr.style.transitionDuration="0.3s";
  575.  
  576.                     if(vvd<10){
  577.                         if(vvvd>60 && vvvd<(60+(dde-60)/3)){
  578.                             werewr.style.transitionDuration="0.3s";
  579.                             werewr.style.left="0";
  580.                             werewr.style.top="60px";
  581.                             werewr.style.height=(dde/2 - 30)+"px";
  582.                             werewr.style.width=ddee/2+"px";
  583.                             setTimeout(function(){
  584.                                 werewr.style.transitionDuration="0s";
  585.                             },300);
  586.                         }
  587.                         else if(vvvd<(60+2*(dde-60)/3)){
  588.                             werewr.style.transitionDuration="0.3s";
  589.                             werewr.style.left="0";
  590.                             werewr.style.top="60px";
  591.                             werewr.style.height=(dde - 60)+"px";
  592.                             werewr.style.width=(ddee)/2+"px";
  593.                             setTimeout(function(){
  594.                                     werewr.style.transitionDuration="0s";
  595.                             },300);
  596.                         }
  597.                         else if(vvvd<(60+(dde-60))){
  598.                             werewr.style.transitionDuration="0.3s";
  599.                             werewr.style.left="0";
  600.                             werewr.style.top=(dde/2 + 30)+"px";
  601.                             werewr.style.height=(dde/2 - 30)+"px";
  602.                             werewr.style.width=(ddee)/2+"px";
  603.                             setTimeout(function(){
  604.                                     werewr.style.transitionDuration="0s";
  605.                             },300);
  606.                         }
  607.                     }
  608.                     else if(vvd>(ddee-10)){
  609.                         if(vvvd>60 && vvvd<(60+(dde-60)/3)){
  610.                             werewr.style.transitionDuration="0.3s";
  611.                             werewr.style.left=(ddee)/2+"px";
  612.                             werewr.style.top="60px";
  613.                             werewr.style.height=(dde/2 - 30)+"px";
  614.                             werewr.style.width=(ddee)/2+"px";
  615.                             setTimeout(function(){
  616.                                 werewr.style.transitionDuration="0s";
  617.                             },300);
  618.                         }
  619.                         else if(vvvd<(60+2*(dde-60)/3)){
  620.                             werewr.style.transitionDuration="0.3s";
  621.                             werewr.style.left=(ddee)/2+"px";
  622.                             werewr.style.top="60px";
  623.                             werewr.style.height=(dde)+"px";
  624.                             werewr.style.width=(ddee)/2+"px";
  625.                             setTimeout(function(){
  626.                                 werewr.style.transitionDuration="0s";
  627.                             },300);
  628.                         }
  629.                         else if(vvvd<(60+(dde-60))){
  630.                             werewr.style.transitionDuration="0.3s";
  631.                             werewr.style.left=(ddee)/2+"px";
  632.                             werewr.style.top=(dde/ 2+ 30)+"px";
  633.                             werewr.style.height=(dde/2 - 30)+"px";
  634.                             werewr.style.width=(ddee)/2+"px";
  635.                             setTimeout(function(){
  636.                                     werewr.style.transitionDuration="0s";
  637.                             },300);
  638.                         }
  639.                     }
  640.                     else if(vvvd>(60) && vvvd<70){
  641.                         if(vvd>0 && vvd<(ddee/3)){
  642.                             werewr.style.transitionDuration="0.3s";
  643.                             werewr.style.left="0";
  644.                             werewr.style.top="60px";
  645.                             werewr.style.height=(dde/2 - 30)+"px";
  646.                             werewr.style.width=ddee/2+"px";
  647.                             setTimeout(function(){
  648.                                 werewr.style.transitionDuration="0s";
  649.                             },300);
  650.                         }
  651.                         else if(vvd<2*(ddee/3)){
  652.                             werewr.style.transitionDuration="0.3s";
  653.                             werewr.style.left="0";
  654.                             werewr.style.top="60px";
  655.                             werewr.style.height=(dde/2 - 30)+"px";
  656.                             werewr.style.width=(ddee)+"px";;
  657.                             setTimeout(function(){
  658.                                 werewr.style.transitionDuration="0s";
  659.                             },300);
  660.                         }
  661.                         else if(vvd<3*(ddee/3)){
  662.                             werewr.style.transitionDuration="0.3s";
  663.                             werewr.style.left=(ddee)/2+"px";
  664.                             werewr.style.top="60px";
  665.                             werewr.style.height=(dde/2 - 30)+"px";
  666.                             werewr.style.width=(ddee)/2+"px";
  667.                             setTimeout(function(){
  668.                                 werewr.style.transitionDuration="0s";
  669.                             },300);
  670.                         }
  671.                     }
  672.  
  673.                     else if(vvvd>(dde-10)){
  674.                         if(vvd>0 && vvd<(ddee/3)){
  675.                             werewr.style.transitionDuration="0.3s";
  676.                             werewr.style.left="0";
  677.                             werewr.style.top=(dde/2 + 30)+"px";
  678.                             werewr.style.height=(dde/2 - 30)+"px";
  679.                             werewr.style.width=(ddee)/2+"px";
  680.                             setTimeout(function(){
  681.                                 werewr.style.transitionDuration="0s";
  682.                             },300);
  683.                         }
  684.                         else if(vvd<2*(ddee/3)){
  685.                             werewr.style.transitionDuration="0.3s";
  686.                             werewr.style.left="0";
  687.                             werewr.style.top=(dde/2 + 30)+"px";
  688.                             werewr.style.height=(dde/2 - 30)+"px";
  689.                             werewr.style.width=(ddee)+"px";
  690.                             setTimeout(function(){
  691.                                     werewr.style.transitionDuration="0s";
  692.                             },300);
  693.                         }
  694.                         else if(vvd<3*(ddee/3)){
  695.                             werewr.style.transitionDuration="0.3s";
  696.                             werewr.style.left=(ddee)/2+"px";
  697.                             werewr.style.top=(dde/ 2+ 30)+"px";
  698.                             werewr.style.height=(dde/2 - 30)+"px";
  699.                             werewr.style.width=(ddee)/2+"px";
  700.                             setTimeout(function(){
  701.                                 werewr.style.transitionDuration="0s";
  702.                             },300);
  703.                         }
  704.                     }
  705.                     else{
  706.                         werewr.style.top=(vvvd-150)+"px";
  707.                         werewr.style.left=(vvd-150)+"px";
  708.                         werewr.style.height="300px";
  709.                         werewr.style.width="300px";
  710.                     }
  711.  
  712.                     werewr.style.position="absolute";
  713.                     werewr.style.display="block";
  714.                     werewr.style.margin="0px";
  715.                     werewr.style.borderRadius="20px";
  716.  
  717.                     setTimeout(function(){
  718.                     werewr.style.transitionDuration="0s";
  719.                     if(rev==1){
  720.                         werewr.remove();
  721.                         rev=0;
  722.                         smalll--;
  723.                     }
  724.                     else{
  725.                         document.getElementById("con").appendChild(werewr);
  726.                     }
  727.                     },300);
  728.  
  729.                 }
  730.             }
  731.  
  732.             var rgh;
  733.             var ggg;
  734.             var vdf=0;
  735.             function dew(y){
  736.                 veee=Math.min((Math.floor((rgh)/60)),smalll);
  737.                 veee=Math.max(veee,0);
  738.                 x=y.touches[0].target;
  739.                 if(x.className=="bar"){
  740.                     x=x.parentElement;
  741.                 }
  742.                 if(document.getElementById("neww")){
  743.                     document.getElementById("neww").remove();
  744.                 }
  745.                 if(ggg<60){
  746.                     newItemm = document.createElement("div");
  747.                     newItemm.style="height:50px;width:50px;background-color:transparent;display:inline-block;";
  748.                     newItemm.id="neww";
  749.                     document.getElementById("tasky").insertBefore(newItemm,document.getElementById("tasky").children[veee]);
  750.                 }
  751.                 rgh=y.touches[0].clientX;
  752.                 ggg=y.touches[0].clientY;
  753.                 if(ggg>60){
  754.                     x.style.transform="scale(1.5)";
  755.                 }
  756.                 else{
  757.                     x.style.transform="scale(1)";
  758.                 }
  759.                 x.style.position="absolute";
  760.                 if(vdf==0){
  761.                     vdf=1;
  762.                 }
  763.             }
  764.  
  765.             function dew_end(y){
  766.  
  767.                 vdf=0;
  768.                 x=y.changedTouches[0].target;
  769.  
  770.  
  771.                 if(x.className=="bar"){
  772.                     x=x.parentElement;
  773.                 }
  774.                 veee=Math.min((Math.floor((y.changedTouches[0].clientX)/60)),smalll);
  775.                 veee=Math.max(veee,0);
  776.                 ggg=y.changedTouches[0].clientY;
  777.  
  778.                 if(ggg<60){
  779.                     htr=610;
  780.                     x.style.position="static";
  781.                     if(document.getElementById("neww")){
  782.                         document.getElementById("neww").remove();
  783.                     }
  784.                     if(rev==1){
  785.                         x.remove();
  786.                         rev=0;
  787.                         smalll--;
  788.                     }
  789.                     else{
  790.                     document.getElementById("tasky").insertBefore(x,document.getElementById("tasky").children[veee]);
  791.                     }
  792.                 }
  793.                 else{
  794.                     if(document.getElementById("neww")){
  795.                         document.getElementById("neww").remove();
  796.                     }
  797.  
  798.                     ww(x.children[0],555,0,y.changedTouches[0].clientX,y.changedTouches[0].clientY);
  799.                 }
  800.             }
  801.  
  802.             function addd(){
  803.                 var dfdfdf=Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256)+", "+Math.floor(Math.random()*256);
  804.                 newItemmm= document.createElement("div");
  805.                 newItemmm.style="position: absolute;background-color:rgba("+dfdfdf+",0.6)";
  806.                 newItemmm.id="as";
  807.                 newItemmm.style.zIndex=zq+1;
  808.                 newItemmm.className="as";
  809.                 newItemmm.contenteditable="false";
  810.                 newItemmm.setAttribute("full","nope");
  811.                 newItemmm.ondblclick=function(){
  812.                     full(this);
  813.                 }
  814.                 newItemmm.onclick=function(){
  815.                     zq++;
  816.                     this.style.zIndex=zq;
  817.                 }
  818.                 newItemmm.addEventListener('touchmove',a,{passive : true});
  819.                 newItemmm.addEventListener('touchend',end,{passive : true});
  820.                 newItemmm.innerHTML="   <div style='position: relative;top: 0px;left:0px;height: 25px;width:100%;background-color: rgb("+dfdfdf+");border-top-right-radius: 10px;border-top-left-radius: 10px;''  class='bar' small='nope'  onclick='ww(this,2);''></div>";
  821.                 document.getElementById("con").appendChild(newItemmm);
  822.             }
  823.         </script>
  824.     </body>
  825. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!