Friday 6 November 2015

CSS animation for Venn Diagram representation


<html >
<head>
<style>
.Lower_layer {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.Upper_layer {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
    body{background-color: white;}
    .circle-container {
        position: relative;
        background-color:blue;
        width: 35vw;
        height: 35vw;
        padding: 0;
        border-radius: 50%;
        list-style: none;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        margin: 13vw auto 0;
        transition: 0.5s all;
        transition-delay:0.5s;
    }
    .circle-container:hover{
        background-color:red;
        transition: 0.5s all;
        position: relative;
        width: 12vw;
        height: 12vw;
        padding: 0;
        border-radius: 50%;
        list-style: none;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .circle-container > * {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6vw;
        height: 6vw;
        margin: -4.1vw;
    }
    .circle-container > *:nth-of-type(1) {

    }
    .circle-container > *:nth-of-type(2) {
      }
    .circle-container > *:nth-of-type(3) {
       }
    .circle-container > *:nth-of-type(4) {
         }
    .circle-container > *:nth-of-type(5) {
        }
    .circle-container > *:nth-of-type(6) {
         }
    .circle-container > *:nth-of-type(7) {
         }
    .circle-container > *:nth-of-type(8) {

    }
    .circle-container a {
        display: block;
        text-align: center;
        color:black;
        text-decoration: none;
        border-radius: 50%;
        position:absolute;
        display:block;
        margin: auto;
        height:8vw;
        width:8vw;
        border-radius:50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color:orange;
       
    }
    .circle-container a:hover{
       
        background-color:red;
        -webkit-animation: fly4 0.5s 0s ease both;
        animation: fly4 .5s 0s ease both;
    }

 @keyframes fly4 {
    from {
        transform: rotate3d(0,00,0,1080deg);
    }
}
@-webkit-keyframes fly4 {
    from {
        -webkit-transform:rotate3d(0,000,0,0deg);
    }
}
</style>
<script>
    $('.circle-container').children().each(function() {
        $(this).addClass('item'+($(this).index() + 1));
    });
</script>

</head>
<body >
<div id="Venn">
<ul class='circle-container' >
    <div style="position:absolute;margin-top:-1.75vw;margin-left:-3.75vw;font-size:2vw;text-align:center;vertical-align:middle;
    ">Full(100%)</div>

    <li style=" font-size:1vw;
"><a style="height:10vw;width:10vw;
        line-height:10vw;
 -moz-transform: rotate(0deg) translate(11vw) ;
        -ms-transform: rotate(0deg) translate(11vw) ;
        -webkit-transform: rotate(0deg) translate(11vw) ;
        transform: rotate(0deg) translate(11vw);
        "
          href = "javascript:void(0)" onclick = "myfuncstart1();" >Item1(24%)</a></li>



    <li style="font-size:1vw"><a style="height:5vw;
    width:5vw;
line-height:5vw;
      -moz-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        -ms-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        -webkit-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
        transform: rotate(45deg) translate(14.5vw) rotate(-45deg);"
         href = "javascript:void(0)" onclick = "myfuncstart2();">Item2(10%)</a></li>


    <li style="font-size:1vw"><a   style="height:8vw;width:8vw;
    line-height:8vw;
  -moz-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        -ms-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        -webkit-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
        transform: rotate(90deg) translateX(13vw) rotate(-90deg);"
         href = "javascript:void(0)" onclick = "myfuncstart3();">Item3(12%)</a></li>


    <li style="font-size:1vw"><a style="
height:8vw;width:8vw;line-height:8vw;
    -moz-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        -ms-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        -webkit-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
        transform: rotate(135deg) translate(12.5vw) rotate(-135deg);"
        href = "javascript:void(0)" onclick = "myfuncstart4();">Item4(12%)</a></li>


    <li style="font-size:1vw"><a style="
height:7vw;width:7vw;
    line-height:7vw;
      -moz-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        -ms-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        -webkit-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
        transform: rotate(180deg) translate(12.5vw) rotate(-180deg);"
         href = "javascript:void(0)" onclick = "myfuncstart5();" >Item5(11%)</a></li>


    <li style="font-size:1vw"><a style="
    line-height:5vw;
    height:5vw;width:5vw;
     -moz-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        -ms-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        -webkit-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
        transform: rotate(225deg) translate(9.5vw) rotate(-225deg);"
         href = "javascript:void(0)" onclick = "myfuncstart6();">Item6(10%)</a></li>
    <li style="font-size:1vw">
        <a style="
        height:5vw;width:5vw;
        line-height:5vw;
        -moz-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        -ms-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        -webkit-transform: rotate(270deg) translate(9vw) rotate(-270deg);
        transform: rotate(270deg) translate(9vw) rotate(-270deg);"
        href = "javascript:void(0)" onclick = "myfuncstart7();" >Item7(10%)</a></li>
    <li style="font-size:1vw">

        <a style="
            height:6vw;width:6vw;
            line-height:6vw;
           -moz-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           -ms-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           -webkit-transform: rotate(315deg) translate(12vw) rotate(-315deg);
           transform: rotate(315deg) translate(12vw) rotate(-315deg);"
          href = "javascript:void(0)" onclick = "myfuncstart8();" >Item8(11%)</a></li>

</ul>
</div>


<!--For the pop ups */ -->


<div id="1" class="Upper_layer">

    <script >

        function myfuncstart1(){

            document.getElementById('1').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item1</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('1').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="2" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart2(){

            document.getElementById('2').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item2</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('2').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="3" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart3(){

            document.getElementById('3').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item3</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('3').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="4" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart4(){

            document.getElementById('4').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item4</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('4').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="5" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart5(){

            document.getElementById('5').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item5</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('5').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="6" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart6(){

            document.getElementById('6').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item6</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('6').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="7" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart7(){

            document.getElementById('7').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item7</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('7').style.display='none';document.getElementById('fade').style.display='none'">
       <center> Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

<div id="8" class="Upper_layer">
    <script id="field">
        {
            var options = {};
            $('#field').datepicker(options).focus();

        }
        function myfuncstart8(){

            document.getElementById('8').style.display='block';
            document.getElementById('fade').style.display='block'

        }

    </script>
    <center>Information related to Item8</center>
    <a href = "javascript:void(0)" onclick = "document.getElementById('8').style.display='none';document.getElementById('fade').style.display='none'">
        <center>Close</center>
    </a>
</div>
<div id="fade" class="Lower_layer"></div>

</div>
</body>
</html>

Thursday 5 November 2015

Sample Newspaper website template 2.0 (Using amazing 3D animations)



<html>
    <head>
        <style>

 body{
    background-color: #00bcd4;
 }


    .card{
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        text-align:center;
         -webkit-animation: fly4 2s 0s both;
        animation: fly4 2s 0s ease both;
    }
     .card:hover {
        cursor: pointer;
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: red;
        border-radius: 5px;
        text-align:center;
        animation:show 1s 0s ease both;
        -webkit-animation:show 0.125s 0s ease both;
    }
     .card1{
        float:right;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        text-align:center;
         -webkit-animation: fly4 2s 0s both;
        animation: fly4 2s 0s ease both;
    }
   
     .card1:hover {
        cursor: pointer;
        float:right;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: red;
        border-radius: 5px;
        text-align:center;
         animation:show 1s 0s ease both;
        -webkit-animation:show 0.125s 0s ease both;
    }
    .card2{
        float:left;
        width: 30%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        -webkit-animation: fly 1s 1s both;
        animation: fly 1s 1s ease both;
        text-align:center;
    }
    
     .card3{
        text-align:center;
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
         -webkit-animation: fly4 1s 1s both;
        animation: fly4 1s 1s ease both;
    }
.card3{
    cursor: pointer;
}
.card4{
        float:left;
        width: 45%;
        height:60%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px black;
        background: white;
        border-radius: 5px;
        -webkit-animation: fly5 1.5s 1.5s  both;
        animation: fly5 1.5s 1.5s  ease both;
        text-align:center;
    }
a{
    text-decoration:none;
    text-color:black;
    color:black;
}
@keyframes fly {
    from {
        
        transform: translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly {
    from {
        
        -webkit-transform: translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly1 {
    from {
        
        transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly1 {
    from {
        
        -webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}
 @keyframes fly2 {
    from {
        
        transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly2 {
    from {
        
        -webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg) scale(2,5);
        opacity:0;
    }
}
 @keyframes fly3 {
    from {
        transform-origin:50% 50%;
        transform: translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
        opacity:0;
    }
}

@-webkit-keyframes fly3 {
    from {
        -webkit-transform-origin:50% 50%;   
        -webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly4 {
    from {
        
        transform: rotate3d(200,100,100,1080deg) scale(2,5);;
        
        opacity:0;
    }
}

@-webkit-keyframes fly4 {
    from {
           
        -webkit-transform:rotate3d(200,100,100,1080deg) scale(2,5);
        opacity:0;
    }
}

 @keyframes fly5 {
    from {
        transform-origin:50% 50%;
        transform: translateY(80em) rotate3d(0,100,0,1080deg);
        opacity:0;
    }
}

@-webkit-keyframes fly5 {
    from {
        -webkit-transform-origin:50% 50%;   
        -webkit-transform:translateY(80em) rotate3d(0,100,0,1080deg) scale(5,10);
        opacity:0;
    }
}
</style>
    </head>
    <body>
            <section  style="clear:both">
            <a href="#"><div class="card">
            <Strong>Sports</Strong>
            </div></a>
            <a href="#">
            <div class="card3" style="-webkit-animation: fly1 1.5s 1s ease both;
                                        animation: fly1 1.5s 1s ease both;
                                         margin-left:7%;  ">
            <Strong>Prev Article</Strong>
            </div>
            <div class="card2">
            <Strong>Current Article</Strong>
            </div>
            <a href="#">
            <div class="card3" style="  -webkit-animation: fly2 1.5s 1s ease both;
                                        animation: fly2 1.5s 1s ease both;">
            <Strong>Next Article</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" >
            <Strong>Asia</Strong>
            </div>
            </a>
            </section>

            <section style="clear:both">
            <a href="#">
            <div class="card">
            <Strong>Politics</Strong>
            </div>
            </a>
            <div class="card4" style="margin-left:13%;">
            News Article
            </div>
            <a href="#">
            <div class="card1" >
            <Strong>Europe<br>and<br/>Australia</Strong>
            </div>
            </a>
            </section >
            <section style="margin-top:-40vh;clear:both">
            <a href="#">
            <div class="card" style="margin-top:-22%;">
            <Strong>Current Affairs</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" style="margin-top:-22%;">
            <Strong>America</Strong>
            </div>
            </a>
            </section>
            <section style="clear:both">
            <a href="#">
            <div class="card" style="margin-top:-10%;">
            <Strong>Business</Strong>
            </div>
            </a>
            <a href="#">
            <div class="card1" style="margin-top:-10%;" >
            <Strong>World</Strong>
            </div>
            </a>
            </section>
           
           
    </body>
</html>

Wednesday 4 November 2015

The League of extraordinary newspapers (CSS)

/*
Source code for a pretty insane animation for newspapers.
Watch the 4 second video : https://youtu.be/KSuUCiBhZ_A
*/














<html>
    <head>
        <style>
    .card{
        float:left;
        width: 30%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px #aaa;
        background: blue;
        border-radius: 5px;
        -webkit-animation: fly 1s 1s both;
        animation: fly 1s 1s ease both;
    }
     .card1{
        float:left;
        width: 10%;
        height:10%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px #aaa;
        background: red;
        border-radius: 5px;
    }
    .card2{
        clear:both;
        width: 45%;
        height:40%;
        padding-top:3%;
        margin:2%;
        box-shadow: 0 1px 2px #aaa;
        background: orange;
        border-radius: 5px;
        -webkit-animation: fly3 1.5s 1.5s  both;
        animation: fly3 1.5s 1.5s  ease both;
    }

@keyframes fly {
    from {
   
        transform: translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}

@-webkit-keyframes fly {
    from {
   
        -webkit-transform: translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}

 @keyframes fly1 {
    from {
     
        transform:translateX(150vw) translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}

@-webkit-keyframes fly1 {
    from {
     
        -webkit-transform:translateX(150vw) translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}
 @keyframes fly2 {
    from {
     
        transform:translateX(-150vw) translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}

@-webkit-keyframes fly2 {
    from {
     
        -webkit-transform:translateX(-150vw) translateY(80em) rotate(-1620deg);
        opacity:0;
    }
}
 @keyframes fly3 {
    from {
        transform-origin:50% 50%;
        transform: translateY(80em) rotate3d(0,100,0,540deg);
        opacity:0;
    }
}

@-webkit-keyframes fly3 {
    from {
        -webkit-transform-origin:50% 50%;
        -webkit-transform:translateY(80em) rotate3d(0,100,0,540deg);
        opacity:0;
    }
}
</style>
    </head>
    <body>
        <center>
        <div class="card1" style="  -webkit-animation: fly1 1.5s 1s ease both;
                                        animation: fly1 1.5s 1s ease both;
                                        margin-left:20%;    ">
            <Strong>Left heading </Strong>
            </div>
            <div class="card">
            <Strong>Newspaper Headline </Strong>
            </div>
            <div class="card1" style="  -webkit-animation: fly2 1.5s 1s ease both;
                                        animation: fly2 1.5s 1s ease both;">
            <Strong>Right heading</Strong>
            </div>
            <div class="card2">
            News Article
            </div>
           </center>
    </body>
</html>

Why would you walk when you can fly? (CSS)

/*
Watch the 4 second video :  https://youtu.be/KkJJjLlsV1c
This is some pretty cool CSS animations.
Please check out the link , you do not want to miss this !
*/








<html>
    <head>
        <style>
    .card{
        left: 17%;
        width: 30%;
        height:20%;
        box-shadow: 0 1px 2px #aaa;
        background: red;
        border-radius: 5px;
        -webkit-animation: fly 1.5s 1s ease both;
        animation: fly 1.5s 1s ease both;
    }
    .card1{
        left: 17%;
        width: 30%;
        height:20%;
        box-shadow: 0 1px 2px #aaa;
        background: blue;
        border-radius: 5px;
        -webkit-animation: fly1 1.5s 1s ease both;
        animation: fly1 1.5s 1s ease both;
     
    }

@keyframes fly {
    from {
    transform-origin:50% 50%;
        transform:translateX(100vw) translateY(10em) rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes fly {
    from {
    -webkit-transform-origin:50% 50%;
        -webkit-transform:translateX(100vw) translateY(10em) rotate(-180deg);
        opacity:0;
    }
}

@keyframes fly1 {
    from {
    transform-origin:50% 50%;
        transform:translateX(-100vw) translateY(10em) rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes fly1 {
    from {
    -webkit-transform-origin:50% 50%;
        -webkit-transform:translateX(-100vw) translateY(10em) rotate(-180deg);
        opacity:0;
    }
}



</style>
    </head>
    <body>
        <center>
            <div class="card" style="align:left">
This will fly
</div>
            <div class="card1" style="align:right">
This will fly
</div>
            <div class="card">
This will fly
</div>
            <div class="card1">
This will fly
</div>
            <div class="card">
This will fly
</div>
        </center>
    </body>
</html>

CSS : box-shadow property usage


//CSS
/*

When trying to give effects to your site / web page the box-shadow property in CSS can be a huge help.
If used properly it gives the div a very attractive finish and it has quite a few attributes to play around with
Find the code for simple modulations.

*/

<html>
<head>
<style>
#NoEffect{
height:100px;
width:500px;
background-color:red;
}

#Effect{
height:100px;
width:500px;
background-color:blue;

}
</style>
</head>
<body>
<center>
Effects using box-shadow
box-shadow: none | horizontal-shadow vertical-shadow blur spread color | inset | initial | inherit;
<br/><br/>
<div id="NoEffect">
No Effect
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px black;">
With Effects(firm shadow)
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 20px black; ">
With Effects(distant shadow)
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px 2px black; ">
4th parameter added ->spread : (size of the shadow)<br>
</div>
<br/><br/><br/>
<div id="Effect" style="box-shadow: 5px 5px 5px 15px yellow inset;">
6th parameter added->inset : (sets the shadow to inner instead of outer) <br>
</div>


</center>
</body>
</html> 

Tuesday 3 November 2015

Sample application built using cordova

// Cordova
// Build cross platform mobile applications
// Find HTML CSS and JS source code below which has been used to build the app.
// Cordova is a platform to build native mobile applications using HTML5,CSS and Javascript
// Simple timetable application for university (or college)
+Apache Cordova


/*********HTML************/
// filename: index.html

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no " />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script>
var year = window.localStorage.getItem("year");
var division = window.localStorage.getItem("division");
var department = window.localStorage.getItem("department");

if (division!=null){
if(year!=null){
if(department!=null){
{window.location.href='index1.html'; }
}
}
}
</script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<body style="overflow:hidden;margin:0;padding:0; ">
<frameset cols="100%">
<frame src="index.html" name="abc">
<center>
<div id = "myDiv"  style="overflow:hidden;">
<br></div></div>
</center>
<div id="myApp" style="display:block">
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
var myApp=document.getElementById("myApp");
var myHeader=document.getElementById("header");
    var show = function(){
 myApp.style.display="none";
      myDiv.style.display = "block";
 
 setTimeout(hide, 1500); 
    }

    var hide = function(){
      myDiv.style.display = "none";
 myApp.style.display="block";
 
 
}

    show();
  

</script>

<div style="display:block;
background-color:gray;
margin-right:auto;
margin-left:auto;
margin-bottom:auto;
width:100vw;
height:100vh;
">

<div  class="SwingIn1" style="
margin-top:auto;
margin-bottom:auto;
height:5%;
width:100%;
display:block;
background-color:#68D0FF;
box-shadow: 5px 5px 5px black;
">
<div  >
<script>
var menucheck=0;
function ShowMenu(){
if(menucheck==0){
menucheck=1;
var showMenu=document.querySelector('#showMenu');
showMenu.style.visibility="visible";
showMenu.style.display="block";
var showMenu1=document.querySelector('#showDayMenu');
showMenu1.style.visibility="hidden";
showMenu1.style.display="none";

}
else{
menucheck=0;
var showMenu=document.querySelector('#showMenu');
showMenu.style.visibility="hidden";
showMenu.style.display="none";
var showMenu1=document.querySelector('#showDayMenu');
showMenu1.style.visibility="visible";
showMenu1.style.display="block";
var showMenu=document.querySelector('#showAboutUs');
showMenu.style.visibility="hidden";
showMenu.style.display="none";
}
}

</script>
<div onclick=ShowMenu()>
<img  height="40%" width:"30%" style="display:inline-block;margin-top:2.5%;margin-left:1.5%;" src="img/Reset.png"/>
</div>
<div style="margin-top:-4%">
<center>
Name of app</center>
</div>

<script>

function flushAll(){
window.localStorage.clear();
window.location.href='index.html';
}

</script>

</div>
<center>

<div id="showMenu" style="

height:87.5vh;
width:97vw;
margin-top:1vh;
z-index:2;
background-color:white;
border:5px solid black;
display:none;
position:absolute;
vertical-align:middle;
">

<div style="display:inline-block;">
<div onclick="flushAll()" style="border-bottom:5px solid black;font-size:20px;">Reset</div>
<div onclick="AboutUs()" style="border-bottom:5px solid black;font-size:20px;">About </div>
<div id="ShowAboutUs" style="display:none;"> 
Simple app using cordova</div>
<script>
function AboutUs(){
var showMenu=document.querySelector('#showAboutUs');
showMenu.style.visibility="visible";
showMenu.style.display="inline-block";
var showMenu11=document.querySelector('#AppLogo11');
showMenu11.style.display="none";

}
</script>
<div id="AppLogo11">
</div>
</div></div>
</center>
<table style="z-index:0;position:absolute;;text-align:center; ;" align="center" class="box" id="box">
<tr rowspan=2>

<td style="text-align:center;">
<select name="Choose Department" id="Department" style="margin-top:2em;" onchange="Department()">
<option value="dept" selected="true">Select Department</option>
<option value="Entc" >Comp</option>
<option value="Mech">IT</option>
</select>
</td>
</tr>
<tr>

<td style="text-align:center">
<select   id="Year" onchange="Year()">
<option value="year" selected="true">Select Year</option>
<option value="SE">SE</option>
<option value="TE">TE</option>
<option value="TE">BE</option>
</select>
</td>
</tr>


<td style="text-align:center">
<select  id="Division" onchange="Division()">
<option value="division" id="DivisionOption" selected="true">Choose Division</option>
<option id="DivisionOption1" value="A">A</option>
<option id="DivisionOption1" value="B">B</option>
<option id="DivisionOption1" value="C">C</option>

</select>
</td>
</tr>

<td ><div style="font-size:2.5vh;" id="submit" onclick="csv()" style="cursor:pointer;"  >
Submit</div></td>
</tr>

</div>

<center>
<div style="display:none;" id="newBox">
<center>
<div style="display:block;position:relative;height:100vh;">
<div  style="
box-shadow:5px 5px 5px black;
 position:relative;
margin-top:1.5em;
    left:0.15%;
top:1.5%;
width:94%;
    height:85%;
    background-color:#68D0FF;
border-radius:35px;
-webkit-border-radius:35px;
    display:block;
font-size:1.3vh;
overflow:hidden;
>
<center>
<div onclick=showDayMenu() id="showDayMenu"   value=1 style="
position:relative;
margin-top:-0.5em;
display:inline-block;
background-color:#e8e050;
height:20px;
margin-top:5px;
text-align:center;
width:25%;
font-size:15px;
border-radius:10px;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
z-index:999;
color:#000000" >Change Day</div></center>

<div style="
box-shadow:5px 5px 5px black;
position:relative;
margin-top:1em;
    left:0%;
top:1%;
width:90%;
    background-color:#18D0FF;
border-radius:25px;
-webkit-border-radius:25px;   
    margin-bottom:1.5em;
font-size:1.3vh;
overflow:hidden;
border:2px solid black;
visibility:hidden;
display:none;" 
id="DayMenu">
<div onclick=csvDateSelector1(1) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
height:20px;
margin-right:5px;
margin-top:20px;
text-align:center;
padding-left:3%;
padding-right:3%;
font-size:15px;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Mon</div>
<div onclick=csvDateSelector1(2) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
margin-right:5px;
padding-right:3%;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Tue</div>
<div onclick=csvDateSelector1(3) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
margin-right:5px;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Wed</div>
<div onclick=csvDateSelector1(4) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
margin-right:5px;
height:20px;
font-size:15px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Thur</div>
<div onclick=csvDateSelector1(5) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
height:20px;
font-size:15px;
margin-top:5px;
margin-right:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Fri</div>
<div onclick=csvDateSelector1(6) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Sat</div>

</div>
<div id="dvCSV" onclick=hideDay() ></div>
</div>
<script>
function hideDay(){
var showDaysMenu=document.querySelector('#DayMenu');
showDaysMenu.style.visibility="hidden";
showDaysMenu.style.display="block";

}
function showDayMenu()
{
var showDaysMenu=document.querySelector('#DayMenu');
showDaysMenu.style.visibility="visible";
showDaysMenu.style.display="block";
}
</script>
</div>
<script>
function csvDateSelector1(day){
var day1=parseInt(day);
csvDateSelector(day);
}
</script>
</div>
</center>


<div style="
-webkit-border-top-left-radius:132px;
-webkit-border-bottom-left-radius:132px;
-webkit-border-top-right-radius:132px;
-webkit-border-bottom-right-radius:132px;
width:100%;
background-color:#68D0FF;
display:block;
position:fixed;
bottom:5px;;
right:0px;
box-shadow:5px 5px 5px black;
height:5%;
">
<div
style="
font-size:3vw;
position:absolute;
display:inline-block;
width:75%;
font-family:footlight MT light;
margin-top:3%;
margin-left:16%;

"
><center>Some University</center>
</div>
</div>

</div>
</frame>
</body>
</html>

/*****************HTML ********************/
//filename: index1.html

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<body style="margin:0;padding:0;" onload="initialiseInfo()" >
<center>
<div id = "myDiv"  style="overflow:hidden;" >
<br></div></div>
</center>
<div id="myApp" style="display:block">
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
var myApp=document.getElementById("myApp");
var myHeader=document.getElementById("header");
    var show = function(){
 myApp.style.display="none";
      myDiv.style.display = "block";
 
 setTimeout(hide, 1500); 
    }

    var hide = function(){
      myDiv.style.display = "none";
 myApp.style.display="block";
 
 
}

    show();
  

</script>

<div style="display:block;
background-color:gray;
margin-right:auto;
margin-left:auto;
margin-bottom:auto;
width:100vw;
height:100vh;
">

<div  class="SwingIn1" style="
margin-top:auto;
margin-bottom:auto;
height:5%;
width:100%;
display:block;
background-color:#68D0FF;
box-shadow: 5px 5px 5px black;
">
<div  >

<script>
var menucheck=0;
function ShowMenu(){
if(menucheck==0){
menucheck=1;
var showMenu=document.querySelector('#showMenu');
showMenu.style.visibility="visible";
showMenu.style.display="block";
var showMenu1=document.querySelector('#showDayMenu');
showMenu1.style.visibility="hidden";
showMenu1.style.display="none";

}
else{
menucheck=0;
var showMenu=document.querySelector('#showMenu');
showMenu.style.visibility="hidden";
showMenu.style.display="none";
var showMenu1=document.querySelector('#showDayMenu');
showMenu1.style.visibility="visible";
showMenu1.style.display="block";
var showMenu=document.querySelector('#showAboutUs');
showMenu.style.visibility="hidden";
showMenu.style.display="none";
}
}

</script>
<div onclick=ShowMenu()>
<img  height="40%" width:"30%" style="display:inline-block;margin-top:2.5%;margin-left:1.5%;" src="img/Reset.png"/>
</div>
<div style="margin-top:-4%;">
<center>
Name of app
</center>
</div>

<script>

function flushAll(){
window.localStorage.clear();
window.location.href='index.html';
}

</script>

</div>
<center>

<div id="showMenu" style="

height:87.5vh;
width:97vw;
margin-top:1vh;
z-index:2;
background-color:white;
border:5px solid black;
display:none;
position:absolute;
vertical-align:middle;
">

<div style="display:inline-block;">
<div onclick="flushAll()" style="border-bottom:5px solid black;font-size:20px;">Reset</div>
<div onclick="AboutUs()" style="border-bottom:5px solid black;font-size:20px;">About</div>
<div id="ShowAboutUs" style="display:none;"> 
Simple app using cordova .
</div>
<script>
function AboutUs(){
var showMenu=document.querySelector('#showAboutUs');
showMenu.style.visibility="visible";
showMenu.style.display="inline-block";
var showMenu11=document.querySelector('#AppLogo11');
showMenu11.style.display="none";

}
</script>
</div>
</div></div>
</center>
<center>
<div style="display:block;position:relative;height:100vh;">
<div  style="
box-shadow:5px 5px 5px black;
 position:relative;
margin-top:1.5em;
    left:0.15%;
top:1.5%;
width:94%;
    height:85%;
    background-color:#68D0FF;
border-radius:35px;
-webkit-border-radius:35px;
    display:block;
font-size:1.3vh;
overflow:hidden;
>
<center>
<div onclick=showDayMenu() id="showDayMenu"   value=1 style="
position:relative;
margin-top:-0.5em;
display:inline-block;
background-color:#e8e050;
height:20px;
margin-top:5px;
text-align:center;
width:25%;
font-size:15px;
border-radius:10px;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
z-index:999;
color:#000000" >Change Day</div></center>

<div style="
box-shadow:5px 5px 5px black;
position:relative;
margin-top:1em;
    left:0%;
top:1%;
width:90%;
    background-color:#18D0FF;
border-radius:25px;
-webkit-border-radius:25px;   
    margin-bottom:1.5em;
font-size:1.3vh;
overflow:hidden;
border:2px solid black;
visibility:hidden;
display:none;
id="DayMenu">
<div onclick=csvDateSelector1(1) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
height:20px;
margin-right:5px;
margin-top:20px;
text-align:center;
padding-left:3%;
padding-right:3%;
font-size:15px;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Mon</div>
<div onclick=csvDateSelector1(2) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
margin-right:5px;
padding-right:3%;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Tue</div>
<div onclick=csvDateSelector1(3) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
margin-right:5px;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Wed</div>
<div onclick=csvDateSelector1(4) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
margin-right:5px;
height:20px;
font-size:15px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Thur</div>
<div onclick=csvDateSelector1(5) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
height:20px;
font-size:15px;
margin-top:5px;
margin-right:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Fri</div>
<div onclick=csvDateSelector1(6) value=1 style="position:relative;display:inline-block;background-color:#e8e050;
font-family:footlight MT light;
padding-left:3%;
padding-right:3%;
font-size:15px;
height:20px;
margin-top:5px;
text-align:center;
border-radius:10px;;
margin-bottom:3vh;
font-family:footlight MT light;
box-shadow:2px 2px 2px black;
color:#000000" >Sat</div>

</div>
<div id="dvCSV" onclick=hideDay() ></div>
</div>
<script>
function hideDay(){
var showDaysMenu=document.querySelector('#DayMenu');
showDaysMenu.style.visibility="hidden";
showDaysMenu.style.display="block";

}
function showDayMenu()
{
var showDaysMenu=document.querySelector('#DayMenu');
showDaysMenu.style.visibility="visible";
showDaysMenu.style.display="block";
}
</script>
<script>
function csvDateSelector1(day){
var day1=parseInt(day);
csvDateSelector(day);
}
</script>
</div>
</center>
<div style="
-webkit-border-top-left-radius:132px;
-webkit-border-bottom-left-radius:132px;
-webkit-border-top-right-radius:132px;
-webkit-border-bottom-right-radius:132px;
width:100%;
background-color:#68D0FF;
display:block;
position:fixed;
right:0px;
bottom:5px;;
margin-top:12px;
box-shadow:5px 5px 5px black;
height:5%;
">
<center>SOME UNIVERSITY </center></div></div>


</body>
</html>

/**************CSS****************/
//filename : style.css


html{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}


#DayMenu{

}
 #dvCSV{
 height:100%;
 width:80%;
 display:block;
 visibility:visible;
 }
#dvCSV table{
border-spacing:0px;
border-radius:50px;
margin-top:-4.5em;
}
#dvCSV table td{
text-align:center;
font-size:1.70vh;
border-radius:75px;
border: 1px solid white;

}

body{
  margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;

}
.SwingIn1{
-webkit-border-radius:132px;
}


#startPage{
top:15%;
display:block;
}

.box {
box-shadow:5px 5px 5px black;

    width:60%;
    height:80%;
    background-color:#68D0FF;
    margin-top:7%;
left:18%;
  border-radius:75px;
}
select{
box-shadow:5px 5px 5px black;
border:0px;
background-color:#e8e050;
width:150px;
font-family:"footlight MT light";
border-radius:20px;
margin-top:10px;
text-align:center;
margin-bottom:2em;
font-size:14px;
outline:0px;
}
select:{
outline:0px;
text-decoration:none;
border:0px;
}
select option{
width:120px;
border-radius:15px;
margin-right:auto;
margin-left:auto;
background-color:#e8e050;
box-shadow:5px 5px 5px black;
}
#submit{
width:80px;
height:20px;
border-radius:15px;
margin-right:auto;
margin-left:auto;
background-color:#e8e050;
margin-top:3px;
box-shadow:5px 5px 5px black;
}

#myDiv{
width:100%;
top:0%;
padding-top:15%;
margin-left:auto;
margin-right:auto;
position:absolute;
height:75vh;
background-color:#ffffff;
z-index:100;
display:none;
}

#Beautifying{
font-size:2.5vh;
font-family:footlight MT light;
}

/***********************JS*********************/


/*
//get keyname by index
var keyName = window.localStorage.key(0);

//put a value
window.localStorage.setItem("key", "value");

//get a value by key
var value = window.localStorage.getItem("key");

//remove a value by key
window.localStorage.removeItem("key");

//flush local storage/all key value pairs
window.localStorage.clear();
*/








var n;
var division;
var year;
var department;
var flag=0;
var flag1=0;


function initialiseInfo(){

year = window.localStorage.getItem("year");
division = window.localStorage.getItem("division");
department = window.localStorage.getItem("department");
var d = new Date();
n = d.getDay();
flag1=1;
csvDateSelector(n);

}


function Year(){

var e = document.getElementById("Year");
year = e.options[e.selectedIndex].text;
window.localStorage.setItem("year",year);

}
function Department(){
var e = document.getElementById("Department");
department = e.options[e.selectedIndex].text;
window.localStorage.setItem("department", department);
if(department=="IT")
{
document.getElementById("DivisionOption").innerHTML="A";
window.localStorage.setItem("division","A");

}
}
function Division(){
var e = document.getElementById("Division");
division = e.options[e.selectedIndex].text;
window.localStorage.setItem("division", division);
}
var day;
function csvDateSelector(day1){
var showDaysMenu=document.querySelector('#DayMenu');
showDaysMenu.style.visibility="hidden";
showDaysMenu.style.display="none";
flag=1;
day=parseInt(day1);
var d = new Date();
n = d.getDay();
if (day==n){
csv();
}
else{
n=day;
csv();
}
}

function csv(){
var newBox=document.getElementById("newBox");
var box=document.getElementById("box");
var DayMenu=document.getElementById("DayMenu");
    DayMenu.style.display="block";
var myApp1=document.getElementById("dvCSV");
if(flag1==0){
newBox.style.display="block";
box.style.display="none";
}
$(document).ready(function() {

    if (department=="IT")
{
$.ajax({
        type: "GET",
        url: "https://raw.githubusercontent.com/alichherawalla/Attendanceplusplus/master/IT.csv",
        dataType: "text",
        success: function(data) {processDataIT(data);}
     });
}
if(department=="Comp"){
 
$.ajax({
        type: "GET",
        url: "https://raw.githubusercontent.com/alichherawalla/Attendanceplusplus/master/js/comp.csv",
        dataType: "text",
        success: function(data) {processDataComp(data);}
     });
}
});
function processDataComp(fileUpload) {

var low;
var high;
if(flag==1){
n=day;
}
else{
var d = new Date();
n = d.getDay();
}
if(n<=7)
{
if(n==0){n=1;}
n=n*20-21;

}
if(year=="SE")
{
if(division=="A")
{
if(n==-1){

n=0;
low=0+n;
high=3+n;

}
else if(n==19){

low=0+n;
high=3+n-1;

}

else if(n==39)
{
low=0+n-2;
high=3+n-3;

}
else if(n==59)
{
low=0+n-4;
high=3+n-5;

}


else if(n==79)
{
low=0+n-6;
high=3+n-7;

}

else if(n==99)
{
low=0+n-8;
high=3+n-9;

}
}
else if(division=="B")
{
if(n==-1){n=0;
low=3+n;
high=5+n;
}
else if(n==19){
low=3+n-1;
high=5+n-1;

}


else if(n==39)
{
low=3+n-3;
high=5+n-3;

}


else if(n==59)
{
low=3+n-5;
high=5+n-5;

}

else if(n==79)
{
low=3+n-7;
high=5+n-7;

}
else if(n==99)
{
low=3+n-9;
high=5+n-9;

}
}
else if(division=="C")
{
if(n==-1){n=0;
low=5+n;
high=7+n;
}
else if(n==19){
low=5+n-1;
high=7+n-1;

}

else if(n==39)
{
low=5+n-3;
high=7+n-3;

}
else if(n==59)
{
low=5+n-5;
high=7+n-5;

}
else if(n==79)
{
low=5+n-7;
high=7+n-7;

}

else if(n==99)
{
low=5+n-9;
high=7+n-9;

}
}
}
if(year=="TE")
{
if(division=="A")
{
if(n==-1){n=0;
low=7+n;
high=9+n;
}
else if(n==19){
low=7+n-1;
high=9+n-1;

}


else if(n==39)
{
low=7+n-3;
high=9+n-3;

}
else if(n==59)
{
low=7+n-5;
high=9+n-5;

}
else if(n==79)
{
low=7+n-7;
high=9+n-7;

}

else if(n==99)
{
low=7+n-9;
high=9+n-9;

}

}
else if(division=="B")
{
if(n==-1){n=0;
low=9+n;
high=11+n;
}
else if(n==19){
low=9+n-1;
high=11+n-1;

}

else if(n==39)
{
low=9+n-3;
high=11+n-3;

}
else if(n==59)
{
low=9+n-5;
high=11+n-5;

}
else if(n==79)
{
low=9+n-7;
high=11+n-7;

}

else if(n==99)
{
low=9+n-9;
high=11+n-9;

}
}
else if(division=="C")
{
if(n==-1){n=0;
low=11+n;
high=13+n;
}
else if(n==19){
low=11+n-3;
high=13+n-3;

}

else if(n==39)
{
low=11+n-3;
high=13+n-3;

}
else if(n==59)
{
low=11+n-5;
high=13+n-5;

}
else if(n==79)
{
low=11+n-7;
high=13+n-7;

}

else if(n==99)
{
low=11+n-9;
high=13+n-9;

}
}
}



if(year=="BE")
{
if(division=="A")
{
if(n==-1){n=0;
low=13+n;
high=15+n;
}
else if(n==19){
low=13+n-1;
high=15+n-1;

}

else if(n==39)
{
low=13+n-3;
high=15+n-3;

}
else if(n==59)
{
low=13+n-5;
high=15+n-5;

}
else if(n==79)
{
low=13+n-7;
high=15+n-7;

}

else if(n==99)
{
low=13+n-9;
high=15+n-9;

}
}
else if(division=="B")
{
if(n==-1){n=0;
low=15+n;
high=17+n;
}
else if(n==19){
low=15+n-1;
high=17+n-1;

}


else if(n==39)
{
low=15+n-3;
high=17+n-3;

}
else if(n==59)
{
low=15+n-5;
high=17+n-5;

}
else if(n==79)
{
low=15+n-7;
high=17+n-7;

}

else if(n==99)
{
low=15+n-9;
high=17+n-9;

}
}


else if(division=="C")
{
if(n==-1){n=0;
low=17+n;
high=19+n;
}
else if(n==19){
low=17+n-1;
high=19+n-1;

}

else if(n==39)
{
low=17+n-3;
high=19+n-3;

}
else if(n==59)
{
low=17+n-5;
high=19+n-5;

}
else if(n==79)
{
low=17+n-7;
high=19+n-7;

}

else if(n==99)
{
low=17+n-9;
high=19+n-9;

}
}
}




var allText=fileUpload;
  var allTextLines = allText.split("\n");;
    var headers = allTextLines[5].split(',');
    var lines = [];
    var tarr = [];
    {
var table = document.createElement("table");
                var rows = allText.split("\n");
               for (var i = 4; i < 38; i++){
   var row = table.insertRow(-1);
                    var cells = rows[i].split(",");
j=0;
while(j<high){
if((j<1) | (j>=low & j<high))      
  {
  
                        var cell = row.insertCell(-1);
                        cell.innerHTML = cells[j];
        }
j++;
}
   }
 var dvCSV = document.getElementById("dvCSV");
                dvCSV.innerHTML = "";
                dvCSV.appendChild(table);
 
    }
    
}
}


function processDataIT(fileUpload) {
var low;
var high;
if(flag==1){
n=day;
}
else{
var d = new Date();
n = d.getDay();
}
if(n<=6)
{
if(n==0){n=1;}
n=n*10-11;

}
if(year=="SE")
{
{
if(n==-1){

n=0;
low=0+n;
high=3+n;

}
else if(n==9){

low=0+n-2;
high=3+n-3;

}

else if(n==19)
{
low=0+n-6;
high=3+n-7;

}
else if(n==29)
{
low=0+n-10;
high=3+n-11;

}


else if(n==39)
{
low=0+n-14;
high=3+n-15;

}

else if(n==49)
{
low=0+n-18;
high=3+n-19;

}
}

}
if(year=="TE")
{
{
if(n==-1){n=0;
low=3+n;
high=5+n;
}
else if(n==9){
low=3+n-3;
high=5+n-3;

}


else if(n==19)
{
low=3+n-7;
high=5+n-7;

}
else if(n==29)
{
low=3+n-11;
high=5+n-11;

}
else if(n==39)
{
low=3+n-15;
high=5+n-15;

}

else if(n==49)
{
low=3+n-19;
high=5+n-19;

}

}
}

if(year=="BE")
{
{
if(n==-1){n=0;
low=5+n;
high=7+n;
}

else if(n==9){
low=5+n-3;
high=7+n-3;

}
else if(n==19){
low=5+n-7;
high=7+n-7;

}

else if(n==29)
{
low=5+n-11;
high=7+n-11;

}
else if(n==39)
{
low=5+n-15;
high=7+n-15;

}
else if(n==49)
{
low=5+n-19;
high=7+n-19;

}
}
}





var allText=fileUpload;
  var allTextLines = allText.split("\n");;
    var headers = allTextLines[5].split(',');
    var lines = [];
    var tarr = [];
    
var table = document.createElement("table");
                var rows = allText.split("\n");
               for (var i = 4; i < 40; i++){
   var row = table.insertRow(-1);
                    var cells = rows[i].split(",");
j=0;
while(j<high){
if((j<1) | (j>=low & j<high))      
  {
  
                        var cell = row.insertCell(-1);
                        cell.innerHTML = cells[j];
        }
j++;
}
   }
 var dvCSV = document.getElementById("dvCSV");
                dvCSV.innerHTML = "";
                dvCSV.appendChild(table);
 
    }


/*
The app after building will look something like this but without the images as the links o images have been removed from the code

*/