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             .line-left {
  32                 border-left: 2px solid transparent;
  33             }
  34
  35             .line-right {
  36                 border-right: 2px solid transparent;
  37             }
  38
  39             .line-top {
  40                 border-top: 2px solid transparent;
  41             }
  42
  43             .line-bottom {
  44                 border-bottom: 2px solid transparent;
  45             }
  46
  47             .sprite.measurements .line-left {
  48                 border-left: 2px solid black;
  49             }
  50
  51             .sprite.measurements .line-right {
  52                 border-right: 2px solid black;
  53             }
  54
  55             .sprite.measurements .line-top {
  56                 border-top: 2px solid black;
  57             }
  58
  59             .sprite.measurements .line-bottom {
  60                 border-bottom: 2px solid black;
  61             }
  62
  63             .sprite.measurements .dimension-top {
  64                 transform: translate(50%, -50%);
  65             }
  66
  67             .sprite.measurements .dimension-bottom {
  68                 transform: translate(50%, 50%);
  69             }
  70
  71             .sprite.measurements .dimension-left {
  72                 transform: translateY(50%);
  73             }
  74
  75             .sprite.measurements .dimension-right {
  76                 transform: translateY(50%);
  77             }
  78
  79             .sprite.measurements .dimension-left .line-left, .sprite.measurements .dimension-right .line-right {
  80                 height: 100%;
  81             }
  82
  83             .sprite .height {
  84                 visibility: hidden;
  85                 padding-left: 5px;
  86             }
  87
  88             .sprite .width {
  89                 visibility: hidden;
  90                 text-align:center;
  91             }
  92
  93             .sprite.measurements .height, .sprite.measurements .width {
  94                 visibility: visible;
  95             }
  96
  97             .sprite .grid {
  98                 border: 1px solid red;
  99             }
 100
 101             /*.sprite {
 102                 float: left;
 103                 margin-right: 20px;
 104             }*/
 105         </style>
 106
 107     </head>
 108     <body>
 109         <div class="container-fluid">
 110             <h1><?php echo $name; ?></h1>
 111
 112             <ul class="nav nav-tabs">
 113                 <li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
 114                 <li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
 115             </ul>
 116
 117             <div class="tab-content">
 118                 <div class="tab-pane fade in active" id="comparison">
 119                     <div id="original_sprite">
 120                         <div class="col-md-6">
 121                             <h2>Original</h2>
 122                             <div class="sprite col-md-8"><?php echo $original_sprite; ?></div>
 123                             <div class="colour_table col-md-4"><?php echo $original_colour_table; ?></div>
 124                         </div>
 125                         <div class="col-md-6">
 126                             <h2>Ironlack approximation</h2>
 127                             <div class="sprite col-md-8"><?php echo $ironlak_sprite; ?></div>
 128                             <div class="colour_table col-md-4"><?php echo $ironlak_colour_table; ?></div>
 129                         </div>
 130                     </div>
 131                 </div>
 132                 <div class="tab-pane fade in" id="materials">
 133                     <div class="col-md-6">
 134                         <h2>Summary</h2>
 135                         <div class="sprite measurements col-md-8">
 136                             <?php echo $ironlak_sprite; ?>
 137                         </div>
 138                         <div class="col-md-4">
 139                             <h3>Cost of materials</h3>
 140                             <?php $materials = $cost_of_lumber + $cost_of_cans; ?>
 141                             <?php $materials_used = $value_of_lumber_used + $value_of_can_used; ?>
 142                             <table class="table">
 143                                 <tr>
 144                                     <th>Wood</th>
 145                                     <td><?php echo $cost_of_lumber; ?></td>
 146                                 </tr>
 147                                 <tr>
 148                                     <th>Paint</th>
 149                                     <td><?php echo $cost_of_cans; ?></td>
 150                                 </tr>
 151                                 <tr>
 152                                     <td></td>
 153                                     <td><strong><?php echo $materials; ?></strong></td>
 154                                 </tr>
 155                             </table>
 156
 157                             <h3>Value of materials used</h3>
 158                             <table class="table">
 159                                 <tr>
 160                                     <th>Wood</th>
 161                                     <td><?php echo $value_of_lumber_used; ?></td>
 162                                 </tr>
 163                                 <tr>
 164                                     <th>Paint</th>
 165                                     <td><?php echo $value_of_can_used; ?></td>
 166                                 </tr>
 167                                 <tr>
 168                                     <td></td>
 169                                     <td><strong><?php echo $materials_used; ?></strong></td>
 170                                 </tr>
 171                             </table>
 172
 173                             <h3>Profit @ <?php echo $markup*100; ?>% Markup</h3>
 174                             <table class="table">
 175                                 <tr>
 176                                     <th>Sell price</th>
 177                                     <td><?php echo $materials_used*$markup; ?></td>
 178                                 </tr>
 179                                 <tr>
 180                                     <th>Less materials</th>
 181                                     <td><?php echo $materials_used*$markup - $materials; ?></td>
 182                                 </tr>
 183                             </table>
 184
 185                         </div>
 186                     </div>
 187                     <div class="col-md-6">
 188                         <h2>Materials Breakdown</h2>
 189                         <div class="col-md-12">
 190                             <h3>Paint</h3>
 191                             <?php echo $spray_can_breakdown; ?>
 192                         </div>
 193
 194                         <div class="col-md-12">
 195                             <h3>Paint</h3>
 196                             <?php echo $lumber_breakdown; ?>
 197                         </div>
 198                     </div>
 199                 </div>
 200             </div>
 201         </div>
 202
 203         <script>
 204             padSprite = function(sprite) {
 205                 var height = $(".sprite:first table tr").length;
 206                 var width = $(".sprite:first table tr:first td").length;
 207
 208                 $(sprite).find('tr').each(function() {
 209                     $(this).append("<td class=\"added\"></td>");
 210                 });
 211
 212                 $(sprite).find('tr:first td:last').append('<div class="line-top"></div>');
 213                 $(sprite).find('tr:first td:last').addClass('dimension-top');
 214
 215                 $(sprite).find('tr:last td:last').append('<div class="line-bottom"></div>');
 216                 $(sprite).find('tr:last td:last').addClass('dimension-bottom');
 217
 218                 $(sprite).find('tr').each(function(){
 219                     $(this).find('td').eq(0).before('<td class="added"></td>');
 220                 });
 221
 222                 for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
 223                     var cells = cells ? cells + '<td class="added"></td>' : '<tr><td class="added"></td>';
 224                 }
 225                 cells += "<td class=\"added\"></td></tr><tr><td class=\"added\"></td><td class=\"line-top width added\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
 226                 $(sprite).find("tr:last").after(cells);
 227
 228                 $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').append('<div class="line-left"></div>');
 229                 $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').addClass('dimension-left');
 230
 231                 $(sprite).find('tr:nth-last-child(2) td:first').append('<div class="line-right"></div>');
 232                 $(sprite).find('tr:nth-last-child(2) td:first').addClass('dimension-right');
 233
 234                 $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height added\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
 235             };
 236
 237             padSprite($(".measurements"));
 238             $(".sprite:not(.measurements").each(function() {
 239                 padSprite(this);
 240             });
 241
 242             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
 243
 244             $(".sprite td").width(pixelSize);
 245             $(".sprite td").height(pixelSize);
 246
 247             $(window).bind('resize', function(e)
 248             {
 249                 window.resizeEvt;
 250                 $(window).resize(function()
 251                 {
 252                     clearTimeout(window.resizeEvt);
 253                     window.resizeEvt = setTimeout(function()
 254                     {
 255                         var pixelSize = Math.floor($(".sprite:visible").filter(":first").width()*0.75 / $(".sprite:first table tr:first td").length);
 256                         //console.log($(".sprite:visible").filter(":first").width());
 257                         //console.log($(".sprite:first table tr:first td").length)
 258                         //console.log(pixelSize);
 259                         $(".sprite td").width(pixelSize);
 260                         $(".sprite td").height(pixelSize);
 261                     }, 250);
 262                 });
 263             });
 264
 265             $( ".colour-row" ).hover(function() {
 266                 var colour = $(this).attr('colour');
 267                 $("." + colour).toggleClass("highlighted");
 268             });
 269
 270             function nextTab(elem) {
 271               $(elem + ' li.active')
 272                 .next()
 273                 .find('a[data-toggle="tab"]')
 274                 .click();
 275             }
 276
 277             $(document).keypress(function(e) {
 278               if(e.which == 110) {
 279                 var active = $(".nav li.active");
 280                 var tabs = active.parent().children();
 281                 tabs.eq((tabs.index(active) + 1) % tabs.length).find('a[data-toggle="tab"]').click();
 282               }
 283
 284               if(e.which == 103) {
 285                   $(".sprite tr td:not(.added)").toggleClass("grid");
 286               }
 287             });
 288         </script>
 289     </body>
 290 </html>
 291