--- /dev/null
+<html>
+ <head>
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+ <!-- Optional theme -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
+ <link rel="stylesheet" href="basic.css">
+ <link rel="stylesheet" href="dropzone.css">
+
+ <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
+
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+ <script src="dropzone.js"></script>
+ <script src="form.js"></script>
+
+ <style>
+ body {
+ font-family: 'Oswald', sans-serif;
+ }
+
+ .text-center {
+ text-align: center;
+ }
+
+ .vertical-center {
+ min-height: 100%; /* Fallback for browsers do NOT support vh unit */
+ min-height: 100vh; /* These two lines are counted as one :-) */
+
+ display: flex;
+ align-items: center;
+ }
+
+ #edit img {
+ height: 30vh;
+ width: 30vh;
+ object-fit: contain;
+ image-rendering: pixelated;
+ }
+
+ .dropzone {
+ border: 2px dashed #0A8A40;
+ border-radius: 5px;
+ background: #18B55A;
+ }
+
+ .dz-message {
+ font-size: 20px;
+ }
+
+ form fieldset {
+ position: absolute;
+ transform: translateY(-50%);
+ width: 80%;
+ margin-left: 10%;
+ }
+
+ form fieldset:not(:first-of-type) {
+ display: none;
+ }
+
+ #sprite img {
+ width: 100%;
+ image-rendering: pixelated;
+ }
+
+ #menu-container div{
+ height: 72px;
+ left: 0;
+ text-align: center;
+ overflow: hidden;
+ margin: 5px;
+ }
+
+ #menu-container div span{
+ display: block;
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
+ font-size: 72px;
+ margin-top: 3px;
+ }
+
+ #menu-container div:hover span{
+ margin: -85px 0 0 0;
+ cursor: default;
+ }
+
+ #upload {
+ background: #2ecc71;
+ }
+
+ #materials .form-control {
+ width:50px;
+ }
+
+ #materials #custom-materials {
+ display: none;
+ }
+
+ #upload {
+ color: white;
+ }
+
+ #spritename {
+ background: none;
+ border: none;
+ box-shadow: none;
+ margin-top: 10px;
+ height: 45px;
+ font-size: 30px;
+ border-bottom: 2px dashed white;
+ text-align: center;
+ color: white;
+ }
+
+ #spritename::-webkit-input-placeholder {
+ color: white;
+ font-size: 30px;
+ }
+
+ .control-label {
+ text-align: left !important;
+ }
+
+ #materials-presets a:hover {
+ cursor: pointer;
+ }
+
+ #materials-presets a.active {
+ background-color: blue;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div id="menu" class="container-fluid vertical-center">
+ <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
+ <div id="menu-container">
+ <div>
+ <span>
+ <i class="fa fa-upload"></i><h2>UPLOAD</h2>
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
+ <div id="menu-container">
+ <div>
+ <span>
+ <i class="fa fa-edit"></i><h2>EDIT</h2>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="upload" class="container-fluid vertical-center">
+ <form action="upload.php" method="POST" class="form-horizontal">
+ <fieldset id="upload_fs">
+ <div class="dropzone" id="dropzone"></div>
+ </fieldset>
+ <fieldset id="materials_fs">
+ <div id="sprite" class="col-md-2 col-md-push-3"></div>
+ <div id="materials" class="col-md-3 col-md-push-4">
+ <h2>Materials</h2>
+
+ <div id="materials-presets">
+ <div class="list-group">
+ <a class="list-group-item" id="bunnings18">Bunnings 18x18mm pine</a>
+ <a class="list-group-item" id="bunnings42">Bunnings 42x42mm pine</a>
+ </div>
+
+ <input class="btn btn-success" type="submit" name="submit" value="Calculate">
+ <a class="btn btn-primary" id="custom">Custom</a>
+ </div>
+
+ <div id="custom-materials">
+ <h3>All measurements in meters</h3>
+
+ <div class="form-group">
+ <label for="wood_size" class="control-label col-md-2">Size:</label>
+ <div class="col-md-10"><input id="wood_size" name="wood_size" class="form-control" type="text"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="wood_length" class="control-label col-md-2">Length:</label>
+ <div class="col-md-10"><input id="wood_length" name="wood_length" class="form-control" type="text"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="wood_cost" class="control-label col-md-2">Cost:</label>
+ <div class="col-md-10"><input id="wood_cost" name="wood_cost" class="form-control" type="text"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="markup" class="control-label col-md-2">Markup:</label>
+ <div class="col-md-10"><input id="markup" name="markup" class="form-control" type="text" value="1.5"></input></div>
+ </div>
+
+ <input class="btn btn-success" type="submit" name="submit" value="Calculate">
+ <a href="#" class="btn btn-primary" id="presets">Presets</a>
+ </div>
+ </div>
+ </fieldset>
+ </form>
+ </div>
+
+ <div id="edit" class="container-fluid vertical-center">
+ <div class="col-xs-8 col-xs-push-2">
+ <?php foreach(glob("uploads/*.txt") as $file): ?>
+ <?php $vars = unserialize(file_get_contents($file)); ?>
+ <?php $hash = basename($file, ".txt"); ?>
+ <div class="col-lg-4 col-sm-6 col-xs-12">
+ <a href="upload.php?sprite=<?php echo $hash; ?>">
+ <img src="uploads/<?php echo $hash; ?>.png" class="thumbnail img-responsive">
+ </a>
+ </div>
+ <?php endforeach; ?>
+ </div>
+ </div>
+ <script>
+ Dropzone.options.dropzone = {
+ url: "upload.php",
+ thumbnailHeight: 120,
+ init: function() {
+ this.on("success", function(file, response) {
+ $("#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>');
+ });
+
+ this.on("complete", function(file) {
+ setTimeout(function() {
+ fs_complete($("#upload_fs"));
+ }, 500);
+ });
+ }
+ };
+
+ $("#custom").click(function(e) {
+ e.preventDefault();
+ $("#materials-presets").fadeOut("slow", function() {
+ $("#custom-materials").fadeIn("slow");
+ })
+ });
+
+ $("#presets").click(function(e) {
+ e.preventDefault();
+ $("#custom-materials").fadeOut("slow", function() {
+ $("#materials-presets").fadeIn("slow");
+ })
+ });
+
+
+ $("#materials-presets .list-group a").click(function() {
+ $("#materials-presets a").removeClass("active");
+ $(this).addClass("active");
+
+ switch($(this).attr('id')) {
+ case 'bunnings18':
+ $("#wood_size").val("0.018");
+ $("#wood_length").val("2.4");
+ $("#wood_cost").val("9.59");
+ break;
+ case 'bunnings42':
+ $("#wood_size").val("0.042");
+ $("#wood_length").val("2.4");
+ $("#wood_cost").val("14.83");
+ break;
+ }
+ });
+ </script>
+ </body>
+</html>
projects / pixel-calc.git / blobdiff