/link.html/link.html |
@@ -0,0 +1,160 @@ |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
<meta http-equiv="Pragma" content="no-cache" /> |
<meta http-equiv="Expires" content="0" /> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> |
<meta name="description" content="quick asset upload"> |
<meta name="author" content="Wizardry and Steamworks"> |
<link rel="icon" href="favicon.ico"> |
|
<title>scratch</title> |
|
<!-- Bootstrap core CSS --> |
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> |
<!-- Font Awesome --> |
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
|
<!-- Site-wide style CCS --> |
<link href="css/style.css" rel="stylesheet"> |
|
<!-- Local style --> |
<link href="css/link/style.css" rel="stylesheet"> |
</head> |
|
<body> |
|
<!-- Main component for a primary marketing message or call to action --> |
<div class="paralax-background"></div> |
<div class="jumbotron"> |
<h1>scratch copy</h1> |
<p class="quote">the asset sharer</p> |
</div> |
|
<div class="container"> |
|
<ul class="nav nav-tabs"> |
<li><a href="index.html">Home</a></li> |
<li><a href="file.html">File</a></li> |
<li><a href="text.html">Text</a></li> |
<li><a href="draw.html">Draw</a></li> |
<li class="active"><a href="#">Link</a></li> |
</ul> |
|
<div id="main-panel" class="panel panel-default"> |
<div class="panel-body"> |
<form id="link-form" role="form"> |
<div class="form-group has-feedback"> |
<div class="input-group"> |
<span class="input-group-btn"> |
<button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link." data-disable="true" disabled> |
<i class="glyphicon glyphicon-share"></i> |
</button> |
</span> |
<input id="link" type="text" class="form-control" pattern="^https?://[\-_\.\+!\*'\(\),a-zA-Z0-9]+:?[0-9]{0,5}/.*$"> |
</div> |
<div class="input-group"> |
<input id="URL" type="text" class="form-control" readonly> |
<span class="input-group-btn"> |
<button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button> |
</span> |
</div> |
</div> |
</form> |
</div> |
|
</div> <!-- /container --> |
|
<div id="footer"> |
<div class="container"> |
<p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> |
</div> |
</div> |
|
<!-- jQuery --> |
<script src="bower_components/jquery/dist/jquery.min.js"></script> |
<!-- BootStrap --> |
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
<!-- Bootstrap Validator --> |
<script src="bower_components/bootstrap-validator/dist/validator.min.js"></script> |
<!-- Clipboard --> |
<script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
<script> |
$(document).ready(() => { |
// Attach the form validator. |
$('#link-form').validator({ |
focus: false, |
delay: 1000 |
}).on('invalid.bs.validator', () => { |
$('#save').attr('disabled', true); |
}).on('valid.bs.validator', () => { |
$('#save').attr('disabled', false); |
}); |
|
// Save image and create URL. |
$('#save').click(() => { |
|
var formData = new FormData(); |
formData.append('file', new Blob( |
[ |
'[InternetShortcut]' |
.concat('\n') |
.concat('URL=') |
.concat($('#link') |
.val() |
) |
.concat('\n') |
] |
), |
'.url' |
); |
|
$.ajax({ |
url: 'file.php', |
type: 'POST', |
data: formData, |
// cache: false // FF |
processData: false, |
contentType: false |
}).done((data) => { |
// Serialize JSON to object. |
data = JSON.parse(data); |
|
$('#URL') |
.val( |
location.protocol |
.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.hash) |
); |
}); |
}); |
|
// Enable the Clipboard button. |
new Clipboard('#copy-url'); |
|
// Scroll to the panel. |
$('html, body').animate({ |
scrollTop: $('#main-panel').offset().top |
}, 'slow'); |
}); |
</script> |
<!-- Jumbotron parallax effect --> |
<script> |
var jumboHeight = $('.jumbotron').outerHeight(); |
function parallax(){ |
var scrolled = $(window).scrollTop(); |
$('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); |
} |
|
$(window).scroll(function(e){ |
parallax(); |
}); |
</script> |
</body> |
</html> |