JSFiddle - React, Tailwind, and code Playground

by Stefan U

HTML

<!DOCTYPE html>
<?php outputNumber = 0; ?>
<html>
    <head>
        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    </head>
    <body>        
       <center> <div id="container">
            <div id ="dynamic-container">
                <div id ="marker"></div>
                <div id ="innerCircle"> <!-- <p id="outputNumber"> <?php echo $outputNumber ?>  </p> -->
                    <img position:relative; top:300px; id="face" /> </div>
            </div>                
           </div>   </center> 
        
        <p id="outputNumber"> <?php echo $outputNumber; ?>  </p><br />
        <p id="degNumber"> <?php echo $degNumber; ?> </p>
        <p id="outputNumber2"> <?php echo $outputNumber2; ?> </p>
        <p id="xcoordinate"> <?php echo $xcoordinate; ?> </p>
        <p id="ycoordinate"> <?php echo $ycoordinate; ?> </p>
        <p id="totalTime"> <?php echo $totalTime; ?></p><br />
        
    </body>

</html>

CSS

div#dynamic-container{align:center; width:600px; height:600px; background-color: white; position:relative; border: 1px solid black;}

div#innerCircle{align:center; margin-bottom:10px; text-align: center; line-height:400px;width: 580px; height: 580px; position: absolute; left: 10px; top:10px; background-color: white; border: 1px solid black; border-radius:290px; -moz-border-radius: 290px; -webkit-border-radius: 290px;}           
div#marker{width: 10px; height:20px; background: red; position:absolute; left:295px; cursor: crosshair;
            -moz-transform:rotate(45deg);
            -moz-transform-origin:5px 300px;
            
            transform:rotate(45deg);
            transform-origin:5px 300px;                          

            -ms-transform:rotate(45deg);
            -ms-transform-origin:5px 300px;                                
            
            -webkit-transform:rotate(45deg);
            -webkit-transform-origin:5px 300px;                       

            z-index:17;
} 
#face{
    text-align:center;
    position:relative;
    top:148px;
}

JavaScript

var images = new Array();
function preload(){
    for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }    
}

preload(    "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_001.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_002.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_003.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_004.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_005.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_006.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_007.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_008.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_009.jpg",
"https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_010.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_011.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_012.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_013.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_014.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_015.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_016.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_017.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_018.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_019.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_020.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_021.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_022.jpg",
 "https://googledrive.com/host/0B33v_lnvxysAb2xXRGpXTHVqRWs/male_wb_023.jpg",
...