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