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             td.line-right {
  32                 border-right: 2px solid black;
  33             }
  34
  35             /*.sprite {
  36                 float: left;
  37                 margin-right: 20px;
  38             }*/
  39         </style>
  40
  41     </head>
  42     <body>
  43         <div class="container-fluid">
  44             <h1>Wooden Sprites :)</h1>
  45
  46             <ul class="nav nav-tabs">
  47                 <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
  48                 <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
  49                 <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
  50             </ul>
  51
  52             <div class="tab-content">
  53                 <div class="tab-pane fade in active" id="comparison">
  54                     <div id="original_sprite">
  55                         <div class="col-md-6">
  56                             <h2>Original</h2>
  57                             <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
  58                             <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
  59                         </div>
  60                         <div class="col-md-6">
  61                             <h2>Ironlack approximation</h2>
  62                             <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
  63                             <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
  64                         </div>
  65                     </div>
  66                 </div>
  67                 <div class="tab-pane fade in" id="materials">
  68                     <div class="col-md-6">
  69                         <h2>Dimensions</h2>
  70                         <div class="sprite measurements col-md-8">
  71                             <?php echo $ironlak_sprite; ?>
  72                         </div>
  73                         <div class="col-md-4 vertical-line">&nbsp;</div>
  74                     </div>
  75                     <div class="col-md-6">
  76                         <h2>Paint</h2>
  77                         <div class="col-md-12">
  78                             <?php echo $spray_can_breakdown; ?>
  79                         </div>
  80
  81                         <h2 class="clearfix">Wood</h2>
  82                         <div class="col-md-12">
  83                             <?php echo $lumber_breakdown; ?>
  84                         </div>
  85                     </div>
  86                 </div>
  87                 <div class="tab-pane fade in" id="C">
  88                     nice meme :]
  89                 </div>
  90             </div>
  91         </div>
  92
  93         <script>
  94             //$(".sprite").width());
  95             $(".measurements tr").append("<td class='line-right'></td>")
  96             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
  97
  98             $(".sprite td").width(pixelSize);
  99             $(".sprite td").height(pixelSize);
 100
 101             $(window).bind('resize', function(e)
 102             {
 103                 window.resizeEvt;
 104                 $(window).resize(function()
 105                 {
 106                     clearTimeout(window.resizeEvt);
 107                     window.resizeEvt = setTimeout(function()
 108                     {
 109                         var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
 110                         //console.log($(".sprite:visible").filter(":first").width());
 111                         //console.log($(".sprite:first table tr:first td").length)
 112                         //console.log(pixelSize);
 113                         $(".sprite td").width(pixelSize);
 114                         $(".sprite td").height(pixelSize);
 115                     }, 250);
 116                 });
 117             });
 118
 119             $( ".colour-row" ).hover(function() {
 120                 var colour = $(this).attr('colour');
 121                 $("." + colour).toggleClass("highlighted");
 122             });
 123         </script>
 124     </body>
 125 </html>
 126