--- /dev/null
+<html>
+ <head>
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+ <!-- Optional theme -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+ <style>
+ .highlighted {
+ background-color: blue;
+ }
+
+ .sprite table.outline td {
+ border: 1px solid red;
+ }
+
+ .sprite table {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .clearfix {
+ clear: both;
+ }
+
+ td.line-right {
+ border-right: 2px solid black;
+ }
+
+ /*.sprite {
+ float: left;
+ margin-right: 20px;
+ }*/
+ </style>
+
+ </head>
+ <body>
+ <div class="container-fluid">
+ <h1>Wooden Sprites :)</h1>
+
+ <ul class="nav nav-tabs">
+ <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
+ <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
+ <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
+ </ul>
+
+ <div class="tab-content">
+ <div class="tab-pane fade in active" id="comparison">
+ <div id="original_sprite">
+ <div class="col-md-6">
+ <h2>Original</h2>
+ <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
+ <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
+ </div>
+ <div class="col-md-6">
+ <h2>Ironlack approximation</h2>
+ <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
+ <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade in" id="materials">
+ <div class="col-md-6">
+ <h2>Dimensions</h2>
+ <div class="sprite measurements col-md-8">
+ <?php echo $ironlak_sprite; ?>
+ </div>
+ <div class="col-md-4 vertical-line"> </div>
+ </div>
+ <div class="col-md-6">
+ <h2>Paint</h2>
+ <div class="col-md-12">
+ <?php echo $spray_can_breakdown; ?>
+ </div>
+
+ <h2 class="clearfix">Wood</h2>
+ <div class="col-md-12">
+ <?php echo $lumber_breakdown; ?>
+ </div>
+ </div>
+ </div>
+ <div class="tab-pane fade in" id="C">
+ nice meme :]
+ </div>
+ </div>
+ </div>
+
+ <script>
+ //$(".sprite").width());
+ $(".measurements tr").append("<td class='line-right'></td>")
+ var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
+
+ $(".sprite td").width(pixelSize);
+ $(".sprite td").height(pixelSize);
+
+ $(window).bind('resize', function(e)
+ {
+ window.resizeEvt;
+ $(window).resize(function()
+ {
+ clearTimeout(window.resizeEvt);
+ window.resizeEvt = setTimeout(function()
+ {
+ var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
+ //console.log($(".sprite:visible").filter(":first").width());
+ //console.log($(".sprite:first table tr:first td").length)
+ //console.log(pixelSize);
+ $(".sprite td").width(pixelSize);
+ $(".sprite td").height(pixelSize);
+ }, 250);
+ });
+ });
+
+ $( ".colour-row" ).hover(function() {
+ var colour = $(this).attr('colour');
+ $("." + colour).toggleClass("highlighted");
+ });
+ </script>
+ </body>
+</html>
+
projects / pixel-calc.git / blobdiff