public_html/breakdown.html

   1 <html>
   2     <head>
   3         <!-- Latest compiled and minified CSS -->
   4         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   5
   6         <!-- Optional theme -->
   7         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
   8
   9         <!-- Latest compiled and minified JavaScript -->
  10         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  11         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  12
  13         <style>
  14             .highlighted {
  15                 background-color: blue;
  16             }
  17
  18             .sprite table.outline td {
  19                 border: 1px solid red;
  20             }
  21
  22             .sprite table {
  23                 margin-left: auto;
  24                 margin-right: auto;
  25             }
  26
  27             .clearfix {
  28                 clear: both;
  29             }
  30
  31             .sprite td.line-left {
  32                 border-left: 2px solid transparent;
  33             }
  34
  35             .sprite td.line-top {
  36                 border-top: 2px solid transparent;
  37             }
  38
  39             .sprite.measurements td.line-left {
  40                 border-left: 2px solid black;
  41             }
  42
  43             .sprite.measurements td.line-top {
  44                 border-top: 2px solid black;
  45             }
  46
  47             .sprite .height {
  48                 visibility: hidden;
  49                 padding-left: 5px;
  50             }
  51
  52             .sprite .width {
  53                 visibility: hidden;
  54                 text-align:center;
  55             }
  56
  57             .sprite.measurements .height, .sprite.measurements .width {
  58                 visibility: visible;
  59             }
  60
  61             /*.sprite {
  62                 float: left;
  63                 margin-right: 20px;
  64             }*/
  65         </style>
  66
  67     </head>
  68     <body>
  69         <div class="container-fluid">
  70             <h1>Wooden Sprites :)</h1>
  71
  72             <ul class="nav nav-tabs">
  73                 <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
  74                 <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
  75                 <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
  76             </ul>
  77
  78             <div class="tab-content">
  79                 <div class="tab-pane fade in active" id="comparison">
  80                     <div id="original_sprite">
  81                         <div class="col-md-6">
  82                             <h2>Original</h2>
  83                             <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
  84                             <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
  85                         </div>
  86                         <div class="col-md-6">
  87                             <h2>Ironlack approximation</h2>
  88                             <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
  89                             <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
  90                         </div>
  91                     </div>
  92                 </div>
  93                 <div class="tab-pane fade in" id="materials">
  94                     <div class="col-md-6">
  95                         <h2>Dimensions</h2>
  96                         <div class="sprite measurements col-md-8">
  97                             <?php echo $ironlak_sprite; ?>
  98                         </div>
  99                         <div class="col-md-4 vertical-line">&nbsp;</div>
 100                     </div>
 101                     <div class="col-md-6">
 102                         <h2>Paint</h2>
 103                         <div class="col-md-12">
 104                             <?php echo $spray_can_breakdown; ?>
 105                         </div>
 106
 107                         <h2 class="clearfix">Wood</h2>
 108                         <div class="col-md-12">
 109                             <?php echo $lumber_breakdown; ?>
 110                         </div>
 111                     </div>
 112                 </div>
 113                 <div class="tab-pane fade in" id="C">
 114                     nice meme :]
 115                 </div>
 116             </div>
 117         </div>
 118
 119         <script>
 120             padSprite = function(sprite) {
 121                 var height = $(".sprite:first table tr").length;
 122                 var width = $(".sprite:first table tr:first td").length;
 123
 124                 $(sprite).find('tr').each(function() {
 125                     $(this).append("<td></td>");
 126                 });
 127
 128                 $(sprite).find('tr').each(function(){
 129                     $(this).find('td').eq(0).before('<td></td>');
 130                 });
 131
 132                 for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
 133                     var cells = cells ? cells + '<td></td>' : '<tr><td></td>';
 134                 }
 135                 cells += "<td></td></tr><tr><td></td><td class=\"line-top width\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
 136                 $(sprite).find("tr:last").after(cells);
 137
 138                 $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
 139             };
 140
 141             padSprite($(".measurements"));
 142             $(".sprite:not(.measurements").each(function() {
 143                 padSprite(this);
 144             });
 145
 146             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
 147
 148             $(".sprite td").width(pixelSize);
 149             $(".sprite td").height(pixelSize);
 150
 151             $(window).bind('resize', function(e)
 152             {
 153                 window.resizeEvt;
 154                 $(window).resize(function()
 155                 {
 156                     clearTimeout(window.resizeEvt);
 157                     window.resizeEvt = setTimeout(function()
 158                     {
 159                         var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
 160                         //console.log($(".sprite:visible").filter(":first").width());
 161                         //console.log($(".sprite:first table tr:first td").length)
 162                         //console.log(pixelSize);
 163                         $(".sprite td").width(pixelSize);
 164                         $(".sprite td").height(pixelSize);
 165                     }, 250);
 166                 });
 167             });
 168
 169             $( ".colour-row" ).hover(function() {
 170                 var colour = $(this).attr('colour');
 171                 $("." + colour).toggleClass("highlighted");
 172             });
 173         </script>
 174     </body>
 175 </html>
 176