public_html/index.php

   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         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  10
  11         <link rel="stylesheet" href="basic.css">
  12         <link rel="stylesheet" href="dropzone.css">
  13
  14         <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  15
  16         <!-- Latest compiled and minified JavaScript -->
  17         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  18         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  19         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  20         <script src="dropzone.js"></script>
  21         <script src="form.js"></script>
  22
  23         <style>
  24             body {
  25                 font-family: 'Oswald', sans-serif;
  26             }
  27
  28             .text-center {
  29                 text-align: center;
  30             }
  31
  32             .vertical-center {
  33               min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  34               min-height: 100vh; /* These two lines are counted as one :-)       */
  35
  36               display: flex;
  37               align-items: center;
  38             }
  39
  40             #edit .thumbnail {
  41                 max-height: 30vh;
  42                 max-width: 30vh;
  43                 padding: 0px;
  44             }
  45
  46             #edit img {
  47                 height: 30vh;
  48                 width: 30vh;
  49                 object-fit: contain;
  50                 image-rendering: pixelated;
  51             }
  52
  53             .dropzone {
  54                 border: 2px dashed #0A8A40;
  55                 border-radius: 5px;
  56                 background: #18B55A;
  57             }
  58
  59             .dz-message {
  60                 font-size: 20px;
  61             }
  62
  63             form fieldset {
  64                 position: absolute;
  65                 transform: translateY(-50%);
  66                 width: 80%;
  67                 margin-left: 10%;
  68             }
  69
  70             form fieldset:not(:first-of-type) {
  71                 display: none;
  72             }
  73
  74             #sprite img {
  75                 width: 100%;
  76                 image-rendering: pixelated;
  77             }
  78
  79             .menu-container>div {
  80                 height: 72px;
  81             }
  82
  83             .text-scroll{
  84                 left: 0;
  85                 text-align: center;
  86                 overflow: hidden;
  87                 margin: 5px;
  88             }
  89
  90             .text-scroll span{
  91                 display: block;
  92                 -webkit-transition: all 0.5s ease-in-out;
  93                 -moz-transition: all 0.5s ease-in-out;
  94                 -o-transition: all 0.5s ease-in-out;
  95                 transition: all 0.5s ease-in-out;
  96                 font-size: 72px;
  97             }
  98
  99             .text-scroll:hover span{
 100                 margin: -85px 0 0 0;
 101                 cursor: default;
 102             }
 103
 104             #edit .text-scroll:hover span {
 105                 margin-top: -75px;
 106             }
 107
 108             #edit h2 {
 109                 background: #2ecc71;
 110                 color: white;
 111                 padding-bottom: 10px;
 112                 padding-top: 10px;
 113             }
 114
 115             #upload {
 116                 background: #2ecc71;
 117             }
 118
 119             #materials .form-control {
 120                 width:50px;
 121             }
 122
 123             #materials #custom-materials {
 124                 display: none;
 125             }
 126
 127             #upload {
 128                 color: white;
 129             }
 130
 131             #spritename {
 132                 background: none;
 133                 border: none;
 134                 box-shadow: none;
 135                 margin-top: 10px;
 136                 height: 45px;
 137                 font-size: 30px;
 138                 border-bottom: 2px dashed white;
 139                 text-align: center;
 140                 color: white;
 141             }
 142
 143             #spritename::-webkit-input-placeholder {
 144                 color: white;
 145                 font-size: 30px;
 146             }
 147
 148             .control-label {
 149                 text-align: left !important;
 150             }
 151
 152             #materials-presets a:hover {
 153                 cursor: pointer;
 154             }
 155
 156             #materials-presets a.active {
 157                 background-color: blue;
 158             }
 159
 160             .text-scroll a, #text-scroll a:hover {
 161                 text-decoration: none;
 162                 color: #333;
 163             }
 164         </style>
 165     </head>
 166     <body>
 167
 168         <div id="menu" class="container-fluid vertical-center">
 169             <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
 170                 <div class="menu-container">
 171                    <div class="text-scroll">
 172                        <span>
 173                            <a href="#upload"><i class="fa fa-upload"></i><h2>UPLOAD</h2></a>
 174                        </span>
 175                     </div>
 176                 </div>
 177             </div>
 178             <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
 179                 <div class="menu-container">
 180                    <div class="text-scroll">
 181                        <span>
 182                            <a href="#edit"><i class="fa fa-edit"></i><h2>EDIT</h2></a>
 183                        </span>
 184                     </div>
 185                 </div>
 186             </div>
 187         </div>
 188
 189         <div id="upload" class="container-fluid vertical-center">
 190             <form action="upload.php" method="POST" class="form-horizontal">
 191                 <fieldset id="upload_fs">
 192                     <div class="dropzone" id="dropzone"></div>
 193                 </fieldset>
 194                 <fieldset id="materials_fs">
 195                     <div id="sprite" class="col-md-2 col-md-push-3"></div>
 196                     <div id="materials" class="col-md-3 col-md-push-4">
 197                         <h2>Materials</h2>
 198
 199                         <div id="materials-presets">
 200                             <div class="list-group">
 201                                 <a class="list-group-item" id="bunnings18">Bunnings 18x18mm pine</a>
 202                                 <a class="list-group-item" id="bunnings42">Bunnings 42x42mm pine</a>
 203                             </div>
 204
 205                             <input class="btn btn-success" type="submit" name="submit" value="Calculate">
 206                             <a class="btn btn-primary" id="custom">Custom</a>
 207                         </div>
 208
 209                         <div id="custom-materials">
 210                             <h3>All measurements in meters</h3>
 211
 212                             <div class="form-group">
 213                                 <label for="wood_size" class="control-label col-md-2">Size:</label>
 214                                 <div class="col-md-10"><input id="wood_size" name="wood_size" class="form-control" type="text"></input></div>
 215                             </div>
 216
 217                             <div class="form-group">
 218                                 <label for="wood_length" class="control-label col-md-2">Length:</label>
 219                                 <div class="col-md-10"><input id="wood_length" name="wood_length" class="form-control" type="text"></input></div>
 220                             </div>
 221
 222                             <div class="form-group">
 223                                 <label for="wood_cost" class="control-label col-md-2">Cost:</label>
 224                                 <div class="col-md-10"><input id="wood_cost" name="wood_cost" class="form-control" type="text"></input></div>
 225                             </div>
 226
 227                             <div class="form-group">
 228                                 <label for="markup" class="control-label col-md-2">Markup:</label>
 229                                 <div class="col-md-10"><input id="markup" name="markup" class="form-control" type="text" value="1.5"></input></div>
 230                             </div>
 231
 232                             <input class="btn btn-success" type="submit" name="submit" value="Calculate">
 233                             <a href="#" class="btn btn-primary" id="presets">Presets</a>
 234                         </div>
 235                     </div>
 236                 </fieldset>
 237             </form>
 238         </div>
 239
 240         <div id="edit" class="container-fluid vertical-center">
 241             <div class="col-xs-8 col-xs-push-2">
 242                 <?php foreach(glob("uploads/*.txt") as $file): ?>
 243                     <?php $vars =  unserialize(file_get_contents($file)); ?>
 244                     <?php $hash =  basename($file, ".txt"); ?>
 245                     <div class="col-lg-4 col-sm-6 col-xs-12">
 246                         <div class="text-scroll thumbnail">
 247                             <span>
 248                                 <a href="upload.php?sprite=<?php echo $hash; ?>">
 249                                      <img src="uploads/<?php echo $hash; ?>.png" class="img-responsive">
 250                                 </a>
 251                                 <h2><?php echo $vars['spritename']; ?></h2>
 252                             </span>
 253                         </div>
 254                    </div>
 255                 <?php endforeach; ?>
 256             </div>
 257         </div>
 258         <script>
 259             Dropzone.options.dropzone = {
 260                 url: "upload.php",
 261                 thumbnailHeight: 120,
 262                 init: function() {
 263                     this.on("success", function(file, response) {
 264                         $("#sprite").append('<img src="uploads/' + response + '.png"><input type="hidden" name="hash" value="' + response + '"></input> <input id="spritename" name="spritename" class="form-control" type="text" placeholder="Name" autocomplete="off"></input>');
 265                     });
 266
 267                     this.on("complete", function(file) {
 268                         setTimeout(function() {
 269                             fs_complete($("#upload_fs"));
 270                         }, 500);
 271                     });
 272                 }
 273             };
 274
 275             $("#custom").click(function(e) {
 276                 e.preventDefault();
 277                 $("#materials-presets").fadeOut("slow", function() {
 278                        $("#custom-materials").fadeIn("slow");
 279                 })
 280             });
 281
 282             $("#presets").click(function(e) {
 283                 e.preventDefault();
 284                 $("#custom-materials").fadeOut("slow", function() {
 285                        $("#materials-presets").fadeIn("slow");
 286                 })
 287             });
 288
 289
 290             $("#materials-presets .list-group a").click(function() {
 291                 $("#materials-presets a").removeClass("active");
 292                 $(this).addClass("active");
 293
 294                 switch($(this).attr('id')) {
 295                     case 'bunnings18':
 296                         $("#wood_size").val("0.018");
 297                         $("#wood_length").val("2.4");
 298                         $("#wood_cost").val("9.59");
 299                         break;
 300                     case 'bunnings42':
 301                         $("#wood_size").val("0.042");
 302                         $("#wood_length").val("2.4");
 303                         $("#wood_cost").val("14.83");
 304                         break;
 305                 }
 306             });
 307         </script>
 308     </body>
 309 </html>